Repository: jerriclynsjohn/svelte-storybook-tailwind Branch: main Commit: 3a1a52620773 Files: 49 Total size: 30.7 KB Directory structure: gitextract_89445s2o/ ├── .editorconfig ├── .eslintignore ├── .github/ │ ├── FUNDING.yml │ └── workflows/ │ └── nodejs.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .storybook/ │ ├── CustomTheme.ts │ ├── main.ts │ ├── manager-header.html │ ├── manager.ts │ ├── preview-head.html │ └── preview.ts ├── .vscode/ │ └── extensions.json ├── CONTRIBUTING.md ├── README.md ├── eslint.config.js ├── index.html ├── package.json ├── postcss.config.js ├── src/ │ ├── App.svelte │ ├── app.css │ ├── lib/ │ │ ├── atoms/ │ │ │ ├── Button.stories.svelte │ │ │ ├── Button.svelte │ │ │ ├── H1.stories.svelte │ │ │ ├── H1.svelte │ │ │ ├── Icon.stories.svelte │ │ │ ├── Icon.svelte │ │ │ ├── Pill.stories.svelte │ │ │ └── Pill.svelte │ │ ├── introduction.mdx │ │ ├── pages/ │ │ │ ├── Main.stories.svelte │ │ │ └── Main.svelte │ │ ├── sections/ │ │ │ ├── Body.stories.svelte │ │ │ ├── Body.svelte │ │ │ ├── Footer.stories.svelte │ │ │ ├── Footer.svelte │ │ │ ├── Graphics.stories.svelte │ │ │ ├── Graphics.svelte │ │ │ ├── Header.stories.svelte │ │ │ └── Header.svelte │ │ └── utilities/ │ │ └── Container.svelte │ ├── main.ts │ └── vite-env.d.ts ├── svelte.config.js ├── tailwind.config.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true ================================================ FILE: .eslintignore ================================================ .DS_Store node_modules /build /package .env .env.* !.env.example # Ignore files for PNPM, NPM and YARN pnpm-lock.yaml package-lock.json yarn.lock ================================================ FILE: .github/FUNDING.yml ================================================ # These are supported funding model platforms patreon: jerric ================================================ FILE: .github/workflows/nodejs.yml ================================================ name: Node CI on: [push] jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [20.x] steps: - uses: actions/checkout@v1 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - name: npm install, build, and test run: | npm install npm run build --if-present npm run build-storybook --if-present env: CI: true ================================================ FILE: .gitignore ================================================ # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log* node_modules dist dist-ssr *.local # Editor directories and files .vscode/* !.vscode/extensions.json .idea .DS_Store *.suo *.ntvs* *.njsproj *.sln *.sw? *storybook.log ================================================ FILE: .prettierignore ================================================ # Ignore files for PNPM, NPM and YARN pnpm-lock.yaml package-lock.json yarn.lock ================================================ FILE: .prettierrc ================================================ { "useTabs": false, "singleQuote": true, "trailingComma": "none", "tabWidth": 2, "printWidth": 100, "pluginSearchDirs": false, "bracketSameLine": true, "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], "overrides": [ { "files": "*.svelte", "options": { "parser": "svelte" } } ] } ================================================ FILE: .storybook/CustomTheme.ts ================================================ import { create } from '@storybook/theming'; export default create({ base: 'dark', brandTitle: 'Svelte + Storybook + TailwindCSS', brandUrl: 'https://svelte-storybook-tailwindcss.sveltehub.dev', brandImage: 'https://sveltehub.dev/templates/storybook-tailwindcss/logo-white.png', brandTarget: '_blank' }); ================================================ FILE: .storybook/main.ts ================================================ import type { StorybookConfig } from '@storybook/svelte-vite'; const config: StorybookConfig = { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'], addons: [ '@storybook/addon-svelte-csf', '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions' ], framework: { name: '@storybook/svelte-vite', options: {} } }; export default config; ================================================ FILE: .storybook/manager-header.html ================================================ ================================================ FILE: .storybook/manager.ts ================================================ import { addons } from '@storybook/manager-api'; import customTheme from './CustomTheme'; addons.setConfig({ theme: customTheme }); ================================================ FILE: .storybook/preview-head.html ================================================ ================================================ FILE: .storybook/preview.ts ================================================ import type { Preview } from '@storybook/svelte'; import '../src/app.css'; const preview: Preview = { parameters: { controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } } } }; export default preview; ================================================ FILE: .vscode/extensions.json ================================================ { "recommendations": [ "svelte.svelte-vscode", "EditorConfig.EditorConfig", "dbaeumer.vscode-eslint", "bradlc.vscode-tailwindcss", "esbenp.prettier-vscode" ] } ================================================ FILE: CONTRIBUTING.md ================================================ # Contributing ## Pull Requests 1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork, and configure the remotes: ```bash # Clone your fork of the repo into the current directory git clone https://github.com//svelte-storybook-tailwind.git # Navigate to the newly cloned directory cd svelte-storybook-tailwind # Assign the original repo to a remote called "upstream" git remote add upstream https://github.com/jerriclynsjohn/svelte-storybook-tailwind.git ``` 2. If you cloned a while ago, get the latest changes from upstream: ```bash git checkout master git pull upstream master ``` 3. Create a new topic branch (off the main project development branch) to contain your feature, change, or fix: ```bash git checkout -b ``` 4. Commit your changes in logical chunks. Please adhere to these [git commit message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) or your code is unlikely be merged into the main project. Use Git's [interactive rebase](https://help.github.com/articles/interactive-rebase) feature to tidy up your commits before making them public. Also, prepend name of the feature to the commit message. For instance: "Svelte: Fixes compiler results for PostCSS.\nFixes `#123`" 5. Locally merge (or rebase) the upstream development branch into your topic branch: ```bash git pull [--rebase] upstream master ``` 6. Push your topic branch up to your fork: ```bash git push origin ``` 7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) with a clear title and description against the `master` branch. ================================================ FILE: README.md ================================================ # Svelte 4.2 + Storybook 8 + TailwindCSS 3 ![Svelte, Storybook & Tailwind](src/assets/social.jpg) Visit the website to see the outcome: [Svelte + Storybook + TailwindCSS](https://sst.sveltehub.dev) ```bash // Quickstart npx degit jerriclynsjohn/svelte-storybook-tailwind my-svelte-project cd my-svelte-project pnpm install pnpm run dev pnpm run storybook ``` This has improved a lot since I started this repo, but I feel that there is still a need to just clone the repo and kickstart the project, so here I am again updating this and I'll keep this repo updated. I also feel that there is a need for a repo which shows some best practices. > You can easily start your project with this template, instead of wasting time figuring out configurations for each integration. [Storybook](https://storybook.js.org/) is an open source tool for developing JavaScript UI components in isolation [Svelte](https://svelte.dev/) is a component framework that allows you to write highly-efficient, imperative code, that surgically updates the DOM to maintain performance. [TailwindCSS](https://tailwindcss.com/) 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 #### Instantiate Svelte + Vite app - Initiate the project using `pnpm create vite@latest` - Select Svelte + Javascript from the CLI - You have a basic Svelte + Vite app ready #### Add Tailwind to the project - Install dependencies `pnpm install -D tailwindcss postcss autoprefixer` - Instantiate the tailwind and postcss config files using `npx tailwindcss init -p` - Update the tailwind config as shown below to accomodate for Svelte components ```js /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./index.html', './src/**/*.{svelte,js,ts}'], theme: { extend: {} }, plugins: [] }; ``; ``` - Add Tailwind directive to your CSS at `./src/app.css` ```css @tailwind base; @tailwind components; @tailwind utilities; ``` - Import CSS into `./src/main.ts` ```ts import './app.css'; import App from './App.svelte'; const app = new App({ target: document.getElementById('app') }); export default app; ``` - With this we have tailwind setup in the project #### Add storybook and native story format into the project - Instantiate by running `pnpm dlx storybook@latest init` - Hook up TailwindCSS by importing the CSS into `./.storybook/preview.ts` ```ts import type { Preview } from '@storybook/svelte'; import '../src/app.css'; const preview: Preview = { parameters: { controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } } } }; export default preview; ``` - This completes the setup required for the project ### Best Practices for UI Component Library - Watchout for this space for more, will be updatin with some good best practises till then do feel free to explore the example UI components used for this website. ================================================ FILE: eslint.config.js ================================================ import eslintPluginSvelte from 'eslint-plugin-svelte'; import svelteConfig from './svelte.config.js'; export default [ // add more generic rule sets here, such as: // js.configs.recommended, ...eslintPluginSvelte.configs['flat/recommended'], { files: [ '**/*.svelte', '*.svelte' // Add more files if you need. // '**/*.svelte.ts', '*.svelte.ts', '**/*.svelte.js', '*.svelte.js', ], languageOptions: { parserOptions: { // Specify the `svelte.config.js`. svelteConfig } } }, { rules: { // override/add rules settings here, such as: // 'svelte/rule-name': 'error' } } ]; ================================================ FILE: index.html ================================================ Svelte + Storybook + TailwindCSS
================================================ FILE: package.json ================================================ { "name": "svelte-storybook-tailwind", "private": true, "version": "0.0.0", "type": "module", "author": "Jerric Lyns John (https://jerric.xyz)", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build" }, "devDependencies": { "@storybook/addon-essentials": "^8.3.5", "@storybook/addon-interactions": "^8.3.5", "@storybook/addon-links": "^8.3.5", "@storybook/addon-svelte-csf": "^4.1.7", "@storybook/blocks": "^8.3.5", "@storybook/manager-api": "^8.3.5", "@storybook/svelte": "^8.3.5", "@storybook/svelte-vite": "^8.3.5", "@storybook/test": "^8.3.5", "@storybook/theming": "^8.3.5", "@sveltejs/vite-plugin-svelte": "^3.1.2", "@tsconfig/svelte": "^5.0.4", "autoprefixer": "^10.4.20", "eslint": "^9.12.0", "eslint-plugin-svelte": "^2.44.1", "postcss": "^8.4.47", "prettier": "^3.3.3", "prettier-plugin-svelte": "^3.2.7", "prettier-plugin-tailwindcss": "^0.6.8", "storybook": "^8.3.5", "svelte": "^4.2.19", "svelte-check": "^4.0.4", "tailwindcss": "^3.4.13", "tslib": "^2.7.0", "typescript": "^5.5.3", "vite": "^5.4.8" } } ================================================ FILE: postcss.config.js ================================================ export default { plugins: { tailwindcss: {}, autoprefixer: {} } }; ================================================ FILE: src/App.svelte ================================================
================================================ FILE: src/app.css ================================================ @tailwind base; @tailwind components; @tailwind utilities; ================================================ FILE: src/lib/atoms/Button.stories.svelte ================================================ ================================================ FILE: src/lib/atoms/Button.svelte ================================================
================================================ FILE: src/lib/atoms/H1.stories.svelte ================================================

Svelte Starter Kit

 ================================================ FILE: src/lib/atoms/H1.svelte ================================================

================================================ FILE: src/lib/atoms/Icon.stories.svelte ================================================ ================================================ FILE: src/lib/atoms/Icon.svelte ================================================ {#if symbol === 'github'} {:else if symbol === 'star'} {:else if symbol === 'fork'} {:else if symbol === 'link'} {/if} ================================================ FILE: src/lib/atoms/Pill.stories.svelte ================================================ Svelte + TailwindCSS + Storybook ================================================ FILE: src/lib/atoms/Pill.svelte ================================================
================================================ FILE: src/lib/introduction.mdx ================================================ import { Meta } from '@storybook/blocks'; import Social from '../assets/social.jpg'; # Svelte 4.2 + Storybook 8 + TailwindCSS 3 Svelte + Storybook + TailwindCSS Visit the website to see the outcome: [Svelte + Storybook + TailwindCSS](https://sst.sveltehub.dev) ```bash // Quickstart npx degit jerriclynsjohn/svelte-storybook-tailwind my-svelte-project cd my-svelte-project pnpm install pnpm run dev pnpm run storybook ``` This has improved a lot since I started this repo, but I feel that there is still a need to just clone the repo and kickstart the project, so here I am again updating this and I'll keep this repo updated. I also feel that there is a need for a repo which shows some best practices. > You can easily start your project with this template, instead of wasting time figuring out configurations for each integration. [Storybook](https://storybook.js.org/) is an open source tool for developing JavaScript UI components in isolation [Svelte](https://svelte.dev/) is a component framework that allows you to write highly-efficient, imperative code, that surgically updates the DOM to maintain performance. [TailwindCSS](https://tailwindcss.com/) 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 #### Instantiate Svelte + Vite app - Initiate the project using `pnpm create vite@latest` - Select Svelte + Javascript from the CLI - You have a basic Svelte + Vite app ready #### Add Tailwind to the project - Install dependencies `pnpm install -D tailwindcss postcss autoprefixer` - Instantiate the tailwind and postcss config files using `npx tailwindcss init -p` - Update the tailwind config as shown below to accomodate for Svelte components ```js /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./index.html', './src/**/*.{svelte,js,ts}'], theme: { extend: {} }, plugins: [] }; ``; ``` - Add Tailwind directive to your CSS at `./src/app.css` ```css @tailwind base; @tailwind components; @tailwind utilities; ``` - Import CSS into `./src/main.ts` ```ts import './app.css'; import App from './App.svelte'; const app = new App({ target: document.getElementById('app') }); export default app; ``` - With this we have tailwind setup in the project #### Add storybook and native story format into the project - Instantiate by running `pnpm dlx storybook@latest init` - Hook up TailwindCSS by importing the CSS into `./.storybook/preview.ts` ```ts import type { Preview } from '@storybook/svelte'; import '../src/app.css'; const preview: Preview = { parameters: { controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } } } }; export default preview; ``` - This completes the setup required for the project ### Best Practices for UI Component Library - Watchout for this space for more, will be updatin with some good best practises till then do feel free to explore the example UI components used for this website. ================================================ FILE: src/lib/pages/Main.stories.svelte ================================================
================================================ FILE: src/lib/pages/Main.svelte ================================================
================================================ FILE: src/lib/sections/Body.stories.svelte ================================================ ================================================ FILE: src/lib/sections/Body.svelte ================================================
Svelte + TailwindCSS + Storybook

Svelte Starter Kit

The best frameworks are the ones where teams can get started without any hassles. With this kit you can get started now!

================================================ FILE: src/lib/sections/Footer.stories.svelte ================================================