All Projects → jerriclynsjohn → Svelte Storybook Tailwind

jerriclynsjohn / Svelte Storybook Tailwind

Licence: mit
A starter template for Svelte, TailwindCSS and Storybook. You can easily start your project with this template, instead of wasting time figuring out configurations for each integration.

Projects that are alternatives of or similar to Svelte Storybook Tailwind

Sapper Firebase Typescript Graphql Tailwindcss Actions Template
A template that includes Sapper for Svelte, Firebase functions and hosting, TypeScript and TypeGraphQL, Tailwind CSS, ESLint, and automatic building and deployment with GitHub Actions
Stars: ✭ 111 (-45.59%)
Mutual labels:  tailwindcss, svelte
Mdx Embed
Embed 3rd party media content in MDX - no import required 🧽
Stars: ✭ 119 (-41.67%)
Mutual labels:  hacktoberfest, storybook
Svelte Firebase
A template to help you start developing SPAs with Svelte and Firebase.
Stars: ✭ 111 (-45.59%)
Mutual labels:  hacktoberfest, svelte
Neat Starter
Starter Template for Netlify CMS, Eleventy, Alphine JS & Tailwind CSS
Stars: ✭ 104 (-49.02%)
Mutual labels:  hacktoberfest, tailwindcss
Figmatocode
Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
Stars: ✭ 2,299 (+1026.96%)
Mutual labels:  tailwindcss, svelte
Windicss
Next generation utility-first CSS framework.
Stars: ✭ 1,355 (+564.22%)
Mutual labels:  tailwindcss, svelte
Eleventy Starter
ARCHIVED: An Eleventy starting point with Tailwind and Svelte preconfigured.
Stars: ✭ 118 (-42.16%)
Mutual labels:  tailwindcss, svelte
Ifme
Free, open source mental health communication web app to share experiences with loved ones
Stars: ✭ 1,147 (+462.25%)
Mutual labels:  hacktoberfest, storybook
React Laravel Boilerplate
A Laravel REST API backend with React/Redux, hot module reloading in development and route-level code splitting
Stars: ✭ 146 (-28.43%)
Mutual labels:  tailwindcss, storybook
Musicplayer
A minimal music player built on electron.
Stars: ✭ 145 (-28.92%)
Mutual labels:  hacktoberfest, svelte
Lichter.io
My own website and CV
Stars: ✭ 105 (-48.53%)
Mutual labels:  hacktoberfest, tailwindcss
Sveltejs Forms
Declarative forms for Svelte
Stars: ✭ 163 (-20.1%)
Mutual labels:  hacktoberfest, svelte
Jira Clone Angular
A simplified Jira clone built with Angular, ng-zorro and Akita
Stars: ✭ 1,396 (+584.31%)
Mutual labels:  tailwindcss, storybook
Nextjs Wordpress Starter
WebDevStudios Next.js WordPress Starter
Stars: ✭ 104 (-49.02%)
Mutual labels:  tailwindcss, storybook
Pingcrm Svelte
🦊 Ping CRM Svelte - A demo app to illustrate how Inertia.js works with Laravel and Svelte (hosted on a heroku free dyno).
Stars: ✭ 74 (-63.73%)
Mutual labels:  tailwindcss, svelte
Goodwork
Self hosted project management and collaboration tool powered by TALL stack
Stars: ✭ 1,730 (+748.04%)
Mutual labels:  hacktoberfest, tailwindcss
Sapper Template Firebase
Starter Rollup template for Sapper apps with Firebase functions based on https://github.com/nhristov/sapper-template-rollup.
Stars: ✭ 29 (-85.78%)
Mutual labels:  tailwindcss, svelte
Svelte Preprocess
A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
Stars: ✭ 970 (+375.49%)
Mutual labels:  hacktoberfest, svelte
Notus Svelte
Notus Svelte: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 144 (-29.41%)
Mutual labels:  tailwindcss, svelte
Ajari Koding
📚 Kumpulan berbagai sumber daya untuk belajar koding dari hasil karya para kreator lokal yang terpercaya dan telah dikurasi oleh komunitas PHPID
Stars: ✭ 156 (-23.53%)
Mutual labels:  hacktoberfest, svelte

Netlify Status FOSSA Status

A starter template for Svelte, TailwindCSS and Storybook

Svelte + TailwindCSS + Storybook Starter Template

Visit this website to see the outcome: Svelte + TailwindCSS + Storybook

// Quickstart

npx degit jerriclynsjohn/svelte-storybook-tailwind my-svelte-project
cd my-svelte-project

yarn
yarn dev
yarn stories

Svelte and TailwindCSS is an awesome combination for Frontend development, but sometimes the setup seems a bit non intuitive, especially when trying to try out this awesome combination. When integrating Storybook, which is another awesome tool for UI Component development and documentation, there is no obvious place to get how it's done. This repo was made to address just that!

You can easily start your project with this template, instead of wasting time figuring out configurations for each integration.

What do you get in this repo

Storybook UI

  1. A fully functional Svelte + TailwindCSS integration with side-by-side implementation of independent Storybook
  2. Storybook with 5 essential Addons
  3. Storybook populated with basic examples of Svelte + TailwindCSS

Addons

  • Accessibility Addon

Accessibility Addon

  • Accessibility Addon - Colorblindness Emulation

Accessibility Addon - Colorblindness Emulation

  • Actions Addon

Actions Addon

  • Notes Addon

Notes Addon

  • Source Addon

Source Addon

  • Viewport Addon

Source Addon

Svelte + TailwindCSS + Storybook

Storybook is an open source tool for developing JavaScript UI components in isolation

Svelte is a component framework that allows you to write highly-efficient, imperative code, that surgically updates the DOM to maintain performance.

TailwindCSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Steps to build

  1. Clone this repo git clone https://github.com/jerriclynsjohn/svelte-storybook-tailwind.git
  2. Go to the directory cd svelte-storybook-tailwind
  3. Install dependencies yarn
  4. To develop your Svelte App: yarn dev
  5. To develop UI components independent of your app: yarn stories

Documentations

  1. Svelte - API and Tutorial
  2. TailwindCSS - Docs and Tutorial
  3. Storybook - Docs and Tutorial

Steps to build it all by yourself and some tips [Warning: It's lengthy]

Instantiate Svelte App

  • Start the template file using npx degit sveltejs/template svelte-storybook-tailwind
  • Go to the directory cd svelte-storybook-tailwind
  • Install dependencies yarn
  • Try run the svelte app yarn dev

Add Tailwind into the project

  • Install dependencies: yarn add -D tailwindcss @fullhuman/postcss-purgecss autoprefixer postcss postcss-import svelte-preprocess
  • Change the rollup config as shown:
import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import autoPreprocess from 'svelte-preprocess';

const production = !process.env.ROLLUP_WATCH;

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/bundle.js',
    },
    plugins: [
        svelte({
            preprocess: autoPreprocess({
                postcss: true,
            }),
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file — better for performance
            css: css => {
                css.write('public/bundle.css');
            },
        }),
        postcss({
            extract: 'public/utils.css',
        }),

        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration —
        // consult the documentation for details:
        // https://github.com/rollup/rollup-plugin-commonjs
        resolve({
            browser: true,
            dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/'),
        }),
        commonjs(),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production && livereload('public'),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser(),
    ],
    watch: {
        clearScreen: false,
    },
};
  • Add tailwind config using the command npx tailwind init

  • Add PostCSS config ./postcss.config.js as follows:

const production = !process.env.ROLLUP_WATCH;
const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
    plugins: [
        require('postcss-import')(),
        require('tailwindcss'),
        require('autoprefixer'),
        production &&
            purgecss({
                content: ['./**/*.html', './**/*.svelte'],
                defaultExtractor: content => {
                    const regExp = new RegExp(/[A-Za-z0-9-_:/]+/g);

                    const matchedTokens = [];

                    let match = regExp.exec(content);
                    // To make sure that you do not lose any tailwind classes used in class directive.
                    // https://github.com/tailwindcss/discuss/issues/254#issuecomment-517918397
                    while (match) {
                        if (match[0].startsWith('class:')) {
                            matchedTokens.push(match[0].substring(6));
                        } else {
                            matchedTokens.push(match[0]);
                        }

                        match = regExp.exec(content);
                    }

                    return matchedTokens;
                },
            }),
    ],
};
  • Build the project with some TailwindCSS utilities yarn dev

Add Storybook into the Svelte Project

  • Add Storybook dependencies yarn add -D @storybook/svelte

  • Add 5 commonly used Storybook Addons:

    • Source: yarn add -D @storybook/addon-storysource
    • Actions: yarn add -D @storybook/addon-actions
    • Notes: yarn add -D @storybook/addon-notes
    • Viewport: yarn add -D @storybook/addon-viewport
    • Accessibility: yarn add @storybook/addon-a11y --dev
  • Create an addon file at the root .storybook/addons.js with the following content and keep adding additional addons in this file.

import '@storybook/addon-storysource/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-notes/register';
import '@storybook/addon-viewport/register';
import '@storybook/addon-a11y/register';
  • Create a config file at the root .storybook/config.js with the following content:
import { configure, addParameters, addDecorator } from '@storybook/svelte';
import { withA11y } from '@storybook/addon-a11y';

// automatically import all files ending in *.stories.js
const req = require.context('../storybook/stories', true, /\.stories\.js$/);
function loadStories() {
    req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);
addDecorator(withA11y);
addParameters({ viewport: { viewports: newViewports } });
  • Add tailwind configs in the webpack.config.js under .storybook and also accommodate for Source addon:
const path = require('path');

module.exports = ({ config, mode }) => {
    config.module.rules.push(
        {
            test: /\.css$/,
            loaders: [
                {
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: true,
                        config: {
                            path: './.storybook/',
                        },
                    },
                },
            ],

            include: path.resolve(__dirname, '../storybook/'),
        },
        //This is the new block for the addon
        {
            test: /\.stories\.js?$/,
            loaders: [require.resolve('@storybook/addon-storysource/loader')],
            include: [path.resolve(__dirname, '../storybook')],
            enforce: 'pre',
        },
    );

    return config;
};
  • Create the postcss.config.js under .storybook:
var tailwindcss = require('tailwindcss');

module.exports = {
    plugins: [
        require('postcss-import')(),
        tailwindcss('./tailwind.config.js'),
        require('autoprefixer'),
    ],
};
  • Make sure you have babel and svelte-loader dependencies yarn add -D babel-loader @babel/core svelte-loader
  • Add npm script in your package.json
{
    "scripts": {
        // Rest of the scripts
        "stories": "start-storybook",
        "build-stories": "build-storybook"
    }
}
  • Add a utils.css file under storybook/css/ and make sure you import 'utils.css' in your stories.js files:
/* Import Tailwind as Global Utils */

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';
  • Write your Svelte component in storybook\components and yes you can use your regular .svelte file. The only thing is that you cant use templates in a story yet, not supported, but yes you can compose other components together. For the starter pack lets just create a clickable button.
<script>
    import { createEventDispatcher } from 'svelte';
    export let text = '';
    const dispatch = createEventDispatcher();
    function onClick(event) {
      dispatch('click', event);
    }
</script>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        on:click={onClick}>
  {text}
</button>
  • Write your stories in storybook/stories and you can name any number of story file with <anything>.stories.js, for the starter package we can create stories of Button with the readme notes at <anything>.stories.md. Note: reference the css here to make sure that tailwind is called by postcss:
import '../../css/utils.css';

import { storiesOf } from '@storybook/svelte';
import ButtonSimple from '../../components/buttons/button-simple.svelte';
import markdownNotes from './buttons.stories.md';

storiesOf('Buttons | Buttons', module)
    //Simple Button
    .add(
        'Simple',
        () => ({
            Component: ButtonSimple,
            props: { text: 'Button' },
            on: {
                click: action('I am logging in the actions tab too'),
            },
        }),
        { notes: { markdown: markdownNotes } },
    )
  • Write your own Documentation for the Component which will <anything>.stories.md :
# Buttons

_Examples of building buttons with Tailwind CSS._

---

Tailwind doesn't include pre-designed button styles out of the box, but they're easy to build using
existing utilities.

Here are a few examples to help you get an idea of how to build components like this using Tailwind.
  • Run your storyboard yarn stories and you'll see this:

Storybook UI

You can add more addons and play around with them.

That's a wrap!

License

FOSSA Status

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].