{"id":15890609,"url":"https://github.com/dimfeld/svelte-electron-template","last_synced_at":"2025-04-02T17:21:57.416Z","repository":{"id":80575815,"uuid":"257207809","full_name":"dimfeld/svelte-electron-template","owner":"dimfeld","description":"A template for electron applications using Svelte","archived":false,"fork":false,"pushed_at":"2020-05-03T02:06:47.000Z","size":1681,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-08T08:09:55.018Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dimfeld.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-20T07:44:10.000Z","updated_at":"2020-05-03T02:06:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"c9137484-77c4-4956-b42f-a1dfc7acdbdf","html_url":"https://github.com/dimfeld/svelte-electron-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":"dimfeld/svelte-storybook-tailwind","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimfeld%2Fsvelte-electron-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimfeld%2Fsvelte-electron-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimfeld%2Fsvelte-electron-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimfeld%2Fsvelte-electron-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dimfeld","download_url":"https://codeload.github.com/dimfeld/svelte-electron-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246856773,"owners_count":20845014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-06T07:07:02.138Z","updated_at":"2025-04-02T17:21:57.397Z","avatar_url":"https://github.com/dimfeld.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Netlify Status](https://api.netlify.com/api/v1/badges/b4aa4a04-e097-4067-87ec-9a6681335673/deploy-status)](https://app.netlify.com/sites/svelte-tailwindcss-storybook/deploys) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fjerriclynsjohn%2Fsvelte-storybook-tailwind.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fjerriclynsjohn%2Fsvelte-storybook-tailwind?ref=badge_shield)\n\n# A starter template for Svelte, TailwindCSS and Storybook\n\n![Svelte + TailwindCSS + Storybook Starter Template](starter-template.jpg)\n\n\n\u003e Visit this website to see the outcome: [Svelte + TailwindCSS + Storybook](https://svelte-tailwindcss-storybook.netlify.com)\n\n```bash\n// Quickstart\n\nnpx degit jerriclynsjohn/svelte-storybook-tailwind my-svelte-project\ncd my-svelte-project\n\nyarn\nyarn dev\nyarn stories\n```\n\nSvelte 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!\n\n\u003e You can easily start your project with this template, instead of wasting time figuring out configurations for each integration.\n\n## What do you get in this repo\n\n![Storybook UI](Storybook-alert-modern.PNG)\n\n1. A fully functional Svelte + TailwindCSS integration with side-by-side implementation of independent Storybook\n2. Storybook with 5 essential Addons\n3. Storybook populated with basic examples of Svelte + TailwindCSS\n\n### Addons\n\n- Accessibility Addon\n\n![Accessibility Addon](storybook-accessibility-addon.PNG)\n\n- Accessibility Addon - Colorblindness Emulation\n\n![Accessibility Addon - Colorblindness Emulation](storybook-accessibility-addon-colorblindness-emulation.PNG)\n\n- Actions Addon\n\n![Actions Addon](storybook-actions-addon.PNG)\n\n- Notes Addon\n\n![Notes Addon](storybook-Documentation-Component.PNG)\n\n- Source Addon\n\n![Source Addon](storybook-storycode-addon.PNG)\n\n- Viewport Addon\n\n![Source Addon](storybook-viewport-addon.PNG)\n\n## Svelte + TailwindCSS + Storybook\n\n[Storybook](https://storybook.js.org/) is an open source tool for developing JavaScript UI\ncomponents in isolation\n\n[Svelte](https://svelte.dev/) is a component framework that allows you to write highly-efficient,\nimperative code, that surgically updates the DOM to maintain performance.\n\n[TailwindCSS](https://tailwindcss.com) is a highly customizable, low-level CSS framework that gives\nyou all of the building blocks you need to build bespoke designs without any annoying opinionated\nstyles you have to fight to override.\n\n## Steps to build\n\n1. Clone this repo `git clone https://github.com/jerriclynsjohn/svelte-storybook-tailwind.git`\n2. Go to the directory `cd svelte-storybook-tailwind`\n3. Install dependencies `yarn`\n4. To develop your Svelte App: `yarn dev`\n5. To develop UI components independent of your app: `yarn stories`\n\n### Documentations\n\n1. Svelte - [API](https://svelte.dev/docs) and [Tutorial](https://svelte.dev/tutorial/)\n2. TailwindCSS - [Docs](https://tailwindcss.com/docs) and [Tutorial](https://tailwindcss.com/screencasts/)\n3. Storybook - [Docs](https://storybook.js.org/docs/basics/introduction/) and [Tutorial (No Svelte Yet!)](https://www.learnstorybook.com/)\n\n## Steps to build it all by yourself and some tips [Warning: It's lengthy]\n\n### Instantiate Svelte App\n\n- Start the template file using `npx degit sveltejs/template svelte-storybook-tailwind`\n- Go to the directory `cd svelte-storybook-tailwind`\n- Install dependencies `yarn`\n- Try run the svelte app `yarn dev`\n\n### Add Tailwind into the project\n\n- Install dependencies:\n   `yarn add -D tailwindcss @fullhuman/postcss-purgecss autoprefixer postcss  postcss-import svelte-preprocess`\n- Change the rollup config as shown:\n\n```javascript\nimport svelte from 'rollup-plugin-svelte';\nimport resolve from 'rollup-plugin-node-resolve';\nimport commonjs from 'rollup-plugin-commonjs';\nimport livereload from 'rollup-plugin-livereload';\nimport { terser } from 'rollup-plugin-terser';\nimport postcss from 'rollup-plugin-postcss';\nimport autoPreprocess from 'svelte-preprocess';\n\nconst production = !process.env.ROLLUP_WATCH;\n\nexport default {\n    input: 'src/main.js',\n    output: {\n        sourcemap: true,\n        format: 'iife',\n        name: 'app',\n        file: 'public/bundle.js',\n    },\n    plugins: [\n        svelte({\n            preprocess: autoPreprocess({\n                postcss: true,\n            }),\n            // enable run-time checks when not in production\n            dev: !production,\n            // we'll extract any component CSS out into\n            // a separate file — better for performance\n            css: css =\u003e {\n                css.write('public/bundle.css');\n            },\n        }),\n        postcss({\n            extract: 'public/utils.css',\n        }),\n\n        // If you have external dependencies installed from\n        // npm, you'll most likely need these plugins. In\n        // some cases you'll need additional configuration —\n        // consult the documentation for details:\n        // https://github.com/rollup/rollup-plugin-commonjs\n        resolve({\n            browser: true,\n            dedupe: importee =\u003e importee === 'svelte' || importee.startsWith('svelte/'),\n        }),\n        commonjs(),\n\n        // Watch the `public` directory and refresh the\n        // browser on changes when not in production\n        !production \u0026\u0026 livereload('public'),\n\n        // If we're building for production (npm run build\n        // instead of npm run dev), minify\n        production \u0026\u0026 terser(),\n    ],\n    watch: {\n        clearScreen: false,\n    },\n};\n```\n\n- Add tailwind config using the command `npx tailwind init`\n\n- Add PostCSS config `./postcss.config.js` as follows:\n\n```javascript\nconst production = !process.env.ROLLUP_WATCH;\nconst purgecss = require('@fullhuman/postcss-purgecss');\n\nmodule.exports = {\n    plugins: [\n        require('postcss-import')(),\n        require('tailwindcss'),\n        require('autoprefixer'),\n        production \u0026\u0026\n            purgecss({\n                content: ['./**/*.html', './**/*.svelte'],\n                defaultExtractor: content =\u003e {\n                    const regExp = new RegExp(/[A-Za-z0-9-_:/]+/g);\n\n                    const matchedTokens = [];\n\n                    let match = regExp.exec(content);\n                    // To make sure that you do not lose any tailwind classes used in class directive.\n                    // https://github.com/tailwindcss/discuss/issues/254#issuecomment-517918397\n                    while (match) {\n                        if (match[0].startsWith('class:')) {\n                            matchedTokens.push(match[0].substring(6));\n                        } else {\n                            matchedTokens.push(match[0]);\n                        }\n\n                        match = regExp.exec(content);\n                    }\n\n                    return matchedTokens;\n                },\n            }),\n    ],\n};\n```\n\n- Build the project with some TailwindCSS utilities `yarn dev`\n\n### Add Storybook into the Svelte Project\n\n- Add Storybook dependencies `yarn add -D @storybook/svelte`\n- Add 5 commonly used Storybook [Addons](https://storybook.js.org/addons/):\n\n  - [Source](https://github.com/storybookjs/storybook/tree/master/addons/storysource):\n      `yarn add -D @storybook/addon-storysource`\n  - [Actions](https://github.com/storybookjs/storybook/tree/master/addons/actions):\n      `yarn add -D @storybook/addon-actions`\n  - [Notes](https://github.com/storybookjs/storybook/tree/master/addons/notes):\n      `yarn add -D @storybook/addon-notes`\n  - [Viewport](https://github.com/storybookjs/storybook/tree/master/addons/viewport):\n      `yarn add -D @storybook/addon-viewport`\n  - [Accessibility](https://github.com/storybookjs/storybook/tree/master/addons/a11y):\n      `yarn add @storybook/addon-a11y --dev`\n- Create an addon file at the root `.storybook/addons.js` with the following content and keep\n   adding additional addons in this file.\n\n```javascript\nimport '@storybook/addon-storysource/register';\nimport '@storybook/addon-actions/register';\nimport '@storybook/addon-notes/register';\nimport '@storybook/addon-viewport/register';\nimport '@storybook/addon-a11y/register';\n```\n\n- Create a config file at the root `.storybook/config.js` with the following content:\n\n```javascript\nimport { configure, addParameters, addDecorator } from '@storybook/svelte';\nimport { withA11y } from '@storybook/addon-a11y';\n\n// automatically import all files ending in *.stories.js\nconst req = require.context('../storybook/stories', true, /\\.stories\\.js$/);\nfunction loadStories() {\n    req.keys().forEach(filename =\u003e req(filename));\n}\n\nconfigure(loadStories, module);\naddDecorator(withA11y);\naddParameters({ viewport: { viewports: newViewports } });\n```\n\n- Add tailwind configs in the `webpack.config.js` under `.storybook` and also accommodate for Source addon:\n\n```javascript\nconst path = require('path');\n\nmodule.exports = ({ config, mode }) =\u003e {\n    config.module.rules.push(\n        {\n            test: /\\.css$/,\n            loaders: [\n                {\n                    loader: 'postcss-loader',\n                    options: {\n                        sourceMap: true,\n                        config: {\n                            path: './.storybook/',\n                        },\n                    },\n                },\n            ],\n\n            include: path.resolve(__dirname, '../storybook/'),\n        },\n        //This is the new block for the addon\n        {\n            test: /\\.stories\\.js?$/,\n            loaders: [require.resolve('@storybook/addon-storysource/loader')],\n            include: [path.resolve(__dirname, '../storybook')],\n            enforce: 'pre',\n        },\n    );\n\n    return config;\n};\n```\n\n- Create the `postcss.config.js` under `.storybook`:\n\n```javascript\nvar tailwindcss = require('tailwindcss');\n\nmodule.exports = {\n    plugins: [\n        require('postcss-import')(),\n        tailwindcss('./tailwind.config.js'),\n        require('autoprefixer'),\n    ],\n};\n```\n\n- Make sure you have babel and svelte-loader dependencies\n   `yarn add -D babel-loader @babel/core svelte-loader`\n- Add npm script in your `package.json`\n\n```bash\n{\n    \"scripts\": {\n        // Rest of the scripts\n        \"stories\": \"start-storybook\",\n        \"build-stories\": \"build-storybook\"\n    }\n}\n```\n\n- Add a utils.css file under `storybook/css/` and make sure you `import 'utils.css'` in your\n   `stories.js` files:\n\n```css\n/* Import Tailwind as Global Utils */\n\n@import 'tailwindcss/base';\n\n@import 'tailwindcss/components';\n\n@import 'tailwindcss/utilities';\n```\n\n- Write your Svelte component in `storybook\\components` and yes you can use your regular `.svelte`\n   file. The only thing is that you cant use templates in a story yet, not supported, but yes you\n   can compose other components together. For the starter pack lets just create a clickable button.\n\n```html\n\u003cscript\u003e\n    import { createEventDispatcher } from 'svelte';\n    export let text = '';\n    const dispatch = createEventDispatcher();\n    function onClick(event) {\n      dispatch('click', event);\n    }\n\u003c/script\u003e\n\n\u003cbutton class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"\n        on:click={onClick}\u003e\n  {text}\n\u003c/button\u003e\n```\n\n- Write your stories in `storybook/stories` and you can name any number of story file with\n   `\u003canything\u003e.stories.js`, for the starter package we can create stories of `Button` with the\n   readme notes at `\u003canything\u003e.stories.md`. Note: reference the css here to make sure that tailwind\n   is called by postcss:\n\n```javascript\nimport '../../css/utils.css';\n\nimport { storiesOf } from '@storybook/svelte';\nimport ButtonSimple from '../../components/buttons/button-simple.svelte';\nimport markdownNotes from './buttons.stories.md';\n\nstoriesOf('Buttons | Buttons', module)\n    //Simple Button\n    .add(\n        'Simple',\n        () =\u003e ({\n            Component: ButtonSimple,\n            props: { text: 'Button' },\n            on: {\n                click: action('I am logging in the actions tab too'),\n            },\n        }),\n        { notes: { markdown: markdownNotes } },\n    )\n```\n\n- Write your own Documentation for the Component which will `\u003canything\u003e.stories.md` :\n\n```md\n# Buttons\n\n_Examples of building buttons with Tailwind CSS._\n\n---\n\nTailwind doesn't include pre-designed button styles out of the box, but they're easy to build using\nexisting utilities.\n\nHere are a few examples to help you get an idea of how to build components like this using Tailwind.\n```\n\n- Run your storyboard `yarn stories` and you'll see this:\n\n![Storybook UI](storybook-ui.PNG)\n\nYou can add more addons and play around with them.\n\nThat's a wrap!\n\n\n## License\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fjerriclynsjohn%2Fsvelte-storybook-tailwind.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fjerriclynsjohn%2Fsvelte-storybook-tailwind?ref=badge_large)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimfeld%2Fsvelte-electron-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimfeld%2Fsvelte-electron-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimfeld%2Fsvelte-electron-template/lists"}