[
  {
    "path": ".editorconfig",
    "content": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n"
  },
  {
    "path": ".eslintignore",
    "content": ".DS_Store\nnode_modules\n/build\n/package\n.env\n.env.*\n!.env.example\n\n# Ignore files for PNPM, NPM and YARN\npnpm-lock.yaml\npackage-lock.json\nyarn.lock\n"
  },
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\npatreon: jerric\n"
  },
  {
    "path": ".github/workflows/nodejs.yml",
    "content": "name: Node CI\n\non: [push]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n\n    strategy:\n      matrix:\n        node-version: [20.x]\n\n    steps:\n      - uses: actions/checkout@v1\n      - name: Use Node.js ${{ matrix.node-version }}\n        uses: actions/setup-node@v1\n        with:\n          node-version: ${{ matrix.node-version }}\n      - name: npm install, build, and test\n        run: |\n          npm install\n          npm run build --if-present\n          npm run build-storybook --if-present\n        env:\n          CI: true\n"
  },
  {
    "path": ".gitignore",
    "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n\n*storybook.log\n"
  },
  {
    "path": ".prettierignore",
    "content": "# Ignore files for PNPM, NPM and YARN\npnpm-lock.yaml\npackage-lock.json\nyarn.lock\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"useTabs\": false,\n  \"singleQuote\": true,\n  \"trailingComma\": \"none\",\n  \"tabWidth\": 2,\n  \"printWidth\": 100,\n  \"pluginSearchDirs\": false,\n  \"bracketSameLine\": true,\n  \"plugins\": [\"prettier-plugin-svelte\", \"prettier-plugin-tailwindcss\"],\n  \"overrides\": [\n    {\n      \"files\": \"*.svelte\",\n      \"options\": {\n        \"parser\": \"svelte\"\n      }\n    }\n  ]\n}\n"
  },
  {
    "path": ".storybook/CustomTheme.ts",
    "content": "import { create } from '@storybook/theming';\n\nexport default create({\n  base: 'dark',\n  brandTitle: 'Svelte + Storybook + TailwindCSS',\n  brandUrl: 'https://svelte-storybook-tailwindcss.sveltehub.dev',\n  brandImage: 'https://sveltehub.dev/templates/storybook-tailwindcss/logo-white.png',\n  brandTarget: '_blank'\n});\n"
  },
  {
    "path": ".storybook/main.ts",
    "content": "import type { StorybookConfig } from '@storybook/svelte-vite';\n\nconst config: StorybookConfig = {\n  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],\n  addons: [\n    '@storybook/addon-svelte-csf',\n    '@storybook/addon-links',\n    '@storybook/addon-essentials',\n    '@storybook/addon-interactions'\n  ],\n  framework: {\n    name: '@storybook/svelte-vite',\n    options: {}\n  }\n};\nexport default config;\n"
  },
  {
    "path": ".storybook/manager-header.html",
    "content": "<link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\" />\n"
  },
  {
    "path": ".storybook/manager.ts",
    "content": "import { addons } from '@storybook/manager-api';\nimport customTheme from './CustomTheme';\n\naddons.setConfig({\n  theme: customTheme\n});\n"
  },
  {
    "path": ".storybook/preview-head.html",
    "content": "<style>\n  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600;700&display=swap');\n</style>\n<script>\n  window.global = window;\n</script>\n"
  },
  {
    "path": ".storybook/preview.ts",
    "content": "import type { Preview } from '@storybook/svelte';\nimport '../src/app.css';\n\nconst preview: Preview = {\n  parameters: {\n    controls: {\n      matchers: {\n        color: /(background|color)$/i,\n        date: /Date$/i\n      }\n    }\n  }\n};\n\nexport default preview;\n"
  },
  {
    "path": ".vscode/extensions.json",
    "content": "{\n  \"recommendations\": [\n    \"svelte.svelte-vscode\",\n    \"EditorConfig.EditorConfig\",\n    \"dbaeumer.vscode-eslint\",\n    \"bradlc.vscode-tailwindcss\",\n    \"esbenp.prettier-vscode\"\n  ]\n}\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing\n\n## Pull Requests\n\n1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork,\n   and configure the remotes:\n\n   ```bash\n   # Clone your fork of the repo into the current directory\n   git clone https://github.com/<your-username>/svelte-storybook-tailwind.git\n   # Navigate to the newly cloned directory\n   cd svelte-storybook-tailwind\n   # Assign the original repo to a remote called \"upstream\"\n   git remote add upstream https://github.com/jerriclynsjohn/svelte-storybook-tailwind.git\n   ```\n\n2. If you cloned a while ago, get the latest changes from upstream:\n\n   ```bash\n   git checkout master\n   git pull upstream master\n   ```\n\n3. Create a new topic branch (off the main project development branch) to\n   contain your feature, change, or fix:\n\n   ```bash\n   git checkout -b <topic-branch-name>\n   ```\n\n4. Commit your changes in logical chunks. Please adhere to these [git commit\n   message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)\n   or your code is unlikely be merged into the main project. Use Git's\n   [interactive rebase](https://help.github.com/articles/interactive-rebase)\n   feature to tidy up your commits before making them public. Also, prepend name of the feature\n   to the commit message. For instance: \"Svelte: Fixes compiler results for PostCSS.\\nFixes `#123`\"\n\n5. Locally merge (or rebase) the upstream development branch into your topic branch:\n\n   ```bash\n   git pull [--rebase] upstream master\n   ```\n\n6. Push your topic branch up to your fork:\n\n   ```bash\n   git push origin <topic-branch-name>\n   ```\n\n7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)\n   with a clear title and description against the `master` branch.\n"
  },
  {
    "path": "README.md",
    "content": "# Svelte 4.2 + Storybook 8 + TailwindCSS 3\n\n![Svelte, Storybook & Tailwind](src/assets/social.jpg)\n\nVisit the website to see the outcome: [Svelte + Storybook + TailwindCSS](https://sst.sveltehub.dev)\n\n```bash\n// Quickstart\n\nnpx degit jerriclynsjohn/svelte-storybook-tailwind my-svelte-project\ncd my-svelte-project\n\npnpm install\npnpm run dev\npnpm run storybook\n```\n\nThis 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.\n\n> You can easily start your project with this template, instead of wasting time figuring out configurations for each integration.\n\n[Storybook](https://storybook.js.org/) is an open source tool for developing JavaScript UI components in isolation\n\n[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.\n\n[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.\n\n## Steps to build\n\n#### Instantiate Svelte + Vite app\n\n- Initiate the project using `pnpm create vite@latest`\n- Select Svelte + Javascript from the CLI\n- You have a basic Svelte + Vite app ready\n\n#### Add Tailwind to the project\n\n- Install dependencies `pnpm install -D tailwindcss postcss autoprefixer`\n- Instantiate the tailwind and postcss config files using `npx tailwindcss init -p`\n- Update the tailwind config as shown below to accomodate for Svelte components\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: ['./index.html', './src/**/*.{svelte,js,ts}'],\n  theme: {\n    extend: {}\n  },\n  plugins: []\n};\n``;\n```\n\n- Add Tailwind directive to your CSS at `./src/app.css`\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n- Import CSS into `./src/main.ts`\n\n```ts\nimport './app.css';\nimport App from './App.svelte';\n\nconst app = new App({\n  target: document.getElementById('app')\n});\n\nexport default app;\n```\n\n- With this we have tailwind setup in the project\n\n#### Add storybook and native story format into the project\n\n- Instantiate by running `pnpm dlx storybook@latest init`\n- Hook up TailwindCSS by importing the CSS into `./.storybook/preview.ts`\n\n```ts\nimport type { Preview } from '@storybook/svelte';\nimport '../src/app.css';\n\nconst preview: Preview = {\n  parameters: {\n    controls: {\n      matchers: {\n        color: /(background|color)$/i,\n        date: /Date$/i\n      }\n    }\n  }\n};\n\nexport default preview;\n```\n\n- This completes the setup required for the project\n\n### Best Practices for UI Component Library\n\n- 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.\n"
  },
  {
    "path": "eslint.config.js",
    "content": "import eslintPluginSvelte from 'eslint-plugin-svelte';\nimport svelteConfig from './svelte.config.js';\n\nexport default [\n  // add more generic rule sets here, such as:\n  // js.configs.recommended,\n  ...eslintPluginSvelte.configs['flat/recommended'],\n  {\n    files: [\n      '**/*.svelte',\n      '*.svelte'\n      // Add more files if you need.\n      // '**/*.svelte.ts', '*.svelte.ts', '**/*.svelte.js', '*.svelte.js',\n    ],\n    languageOptions: {\n      parserOptions: {\n        // Specify the `svelte.config.js`.\n        svelteConfig\n      }\n    }\n  },\n  {\n    rules: {\n      // override/add rules settings here, such as:\n      // 'svelte/rule-name': 'error'\n    }\n  }\n];\n"
  },
  {
    "path": "index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Svelte + Storybook + TailwindCSS</title>\n\n    <!-- Poppins -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;600;700&display=swap\"\n      rel=\"stylesheet\" />\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script type=\"module\" src=\"/src/main.ts\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"svelte-storybook-tailwind\",\n  \"private\": true,\n  \"version\": \"0.0.0\",\n  \"type\": \"module\",\n  \"author\": \"Jerric Lyns John <x@jerric.xyz> (https://jerric.xyz)\",\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\",\n    \"preview\": \"vite preview\",\n    \"check\": \"svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json\",\n    \"storybook\": \"storybook dev -p 6006\",\n    \"build-storybook\": \"storybook build\"\n  },\n  \"devDependencies\": {\n    \"@storybook/addon-essentials\": \"^8.3.5\",\n    \"@storybook/addon-interactions\": \"^8.3.5\",\n    \"@storybook/addon-links\": \"^8.3.5\",\n    \"@storybook/addon-svelte-csf\": \"^4.1.7\",\n    \"@storybook/blocks\": \"^8.3.5\",\n    \"@storybook/manager-api\": \"^8.3.5\",\n    \"@storybook/svelte\": \"^8.3.5\",\n    \"@storybook/svelte-vite\": \"^8.3.5\",\n    \"@storybook/test\": \"^8.3.5\",\n    \"@storybook/theming\": \"^8.3.5\",\n    \"@sveltejs/vite-plugin-svelte\": \"^3.1.2\",\n    \"@tsconfig/svelte\": \"^5.0.4\",\n    \"autoprefixer\": \"^10.4.20\",\n    \"eslint\": \"^9.12.0\",\n    \"eslint-plugin-svelte\": \"^2.44.1\",\n    \"postcss\": \"^8.4.47\",\n    \"prettier\": \"^3.3.3\",\n    \"prettier-plugin-svelte\": \"^3.2.7\",\n    \"prettier-plugin-tailwindcss\": \"^0.6.8\",\n    \"storybook\": \"^8.3.5\",\n    \"svelte\": \"^4.2.19\",\n    \"svelte-check\": \"^4.0.4\",\n    \"tailwindcss\": \"^3.4.13\",\n    \"tslib\": \"^2.7.0\",\n    \"typescript\": \"^5.5.3\",\n    \"vite\": \"^5.4.8\"\n  }\n}\n"
  },
  {
    "path": "postcss.config.js",
    "content": "export default {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {}\n  }\n};\n"
  },
  {
    "path": "src/App.svelte",
    "content": "<script>\n  import Main from './lib/pages/Main.svelte';\n</script>\n\n<Main />\n"
  },
  {
    "path": "src/app.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
  },
  {
    "path": "src/lib/atoms/Button.stories.svelte",
    "content": "<script>\n  import { Meta, Story } from '@storybook/addon-svelte-csf';\n\n  import Button from './Button.svelte';\n  import Icon from './Icon.svelte';\n</script>\n\n<Meta title=\"Design System/Atoms/Button\" component={Button} />\n\n<!-- Primary -->\n<Story name=\"Primary\">\n  <Button href=\"https://google.com\">Primary</Button>\n</Story>\n<Story name=\"Primary with icon on left\">\n  <Button left href=\"https://google.com\"><Icon symbol=\"github\" />Github</Button>\n</Story>\n<Story name=\"Primary with icon on right\">\n  <Button right href=\"https://google.com\">Github<Icon symbol=\"github\" /></Button>\n</Story>\n\n<!-- Secondary -->\n<Story name=\"Secondary\">\n  <Button type=\"secondary\" href=\"https://google.com\">Github</Button>\n</Story>\n<Story name=\"Secondary with icon on left\">\n  <Button left type=\"secondary\" href=\"https://google.com\"\n    ><Icon symbol=\"github\" type=\"dark\" />Github</Button>\n</Story>\n<Story name=\"Secondary with icon on right\">\n  <Button right type=\"secondary\" href=\"https://google.com\"\n    >Github<Icon symbol=\"github\" type=\"dark\" /></Button>\n</Story>\n"
  },
  {
    "path": "src/lib/atoms/Button.svelte",
    "content": "<script>\n  /**\n   * @type {string} Link\n   */\n  export let href = '';\n  /**\n   * @type {boolean} Style button for icon on left\n   */\n  export let left = false;\n  /**\n   * @type {boolean} Style button for icon on right\n   */\n  export let right = false;\n  /**\n   * Specify the kind of icon\n   * @type {'primary' | 'secondary' }\n   */\n  export let type = 'primary';\n\n  $: xPadding = left ? 'pl-6 pr-8' : right ? 'pr-6 pl-8' : 'px-8';\n  $: typeCoding =\n    type === 'primary'\n      ? 'bg-svelte-600 text-white hover:bg-svelte-700'\n      : 'border border-slate-600 text-slate-600 hover:bg-slate-200';\n</script>\n\n<a\n  class={`inline-block rounded-lg py-3 text-lg font-semibold leading-6 ${xPadding} ${typeCoding}`}\n  {href}\n  target=\"_blank\"\n  rel=\"noreferrer\">\n  <div class=\"flex items-center gap-2\">\n    <slot />\n  </div>\n</a>\n"
  },
  {
    "path": "src/lib/atoms/H1.stories.svelte",
    "content": "<script>\n  import { Meta, Story } from '@storybook/addon-svelte-csf';\n\n  import H1 from './H1.svelte';\n</script>\n\n<Meta title=\"Design System/Atoms/H1\" component={H1} />\n\n<!-- Primary -->\n<Story name=\"Primary\">\n  <H1>Svelte Starter Kit</H1>\n</Story>\n"
  },
  {
    "path": "src/lib/atoms/H1.svelte",
    "content": "<h1 class=\"text-6xl font-bold text-slate-700\"><slot /></h1>\n"
  },
  {
    "path": "src/lib/atoms/Icon.stories.svelte",
    "content": "<script>\n  import { Meta, Story } from '@storybook/addon-svelte-csf';\n\n  import Icon from './Icon.svelte';\n</script>\n\n<Meta title=\"Design System/Atoms/Icon\" component={Icon} />\n\n<!-- Light -->\n<Story name=\"Github - Light\">\n  <Icon symbol=\"github\" />\n</Story>\n<Story name=\"Github - Dark\">\n  <Icon type=\"dark\" symbol=\"github\" />\n</Story>\n\n<!-- Symbols -->\n<Story name=\"Star - Dark\">\n  <Icon type=\"dark\" symbol=\"star\" />\n</Story>\n<Story name=\"Fork - Dark\">\n  <Icon type=\"dark\" symbol=\"fork\" />\n</Story>\n<Story name=\"Link - Dark\">\n  <Icon type=\"dark\" symbol=\"link\" />\n</Story>\n"
  },
  {
    "path": "src/lib/atoms/Icon.svelte",
    "content": "<script>\n  /**\n   * Specify the kind of icon\n   * @type {'github' | 'star' | 'fork' | 'link'}\n   */\n  export let symbol = 'github';\n\n  /**\n   * Specify the kind of icon\n   * @type {'light' | 'dark' }\n   */\n  export let type = 'light';\n\n  $: typeCoding = type === 'light' ? 'stroke-white' : 'stroke-slate-600';\n</script>\n\n{#if symbol === 'github'}\n  <svg\n    class={`h-5 w-5 stroke-2 ${typeCoding}`}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\">\n    <g clip-path=\"url(#a)\">\n      <path\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        d=\"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22\" />\n    </g>\n    <defs>\n      <clipPath id=\"a\">\n        <path d=\"M0 0h24v24H0z\" />\n      </clipPath>\n    </defs>\n  </svg>\n{:else if symbol === 'star'}\n  <svg\n    class={`h-5 w-5 stroke-2 ${typeCoding}`}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\">\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      d=\"M12.951 2.927c-.299-.92-1.602-.92-1.902 0L9.53 7.601a1 1 0 0 1-.95.69H3.664c-.968 0-1.372 1.24-.588 1.81l3.976 2.888a1 1 0 0 1 .363 1.118l-1.518 4.674c-.3.921.755 1.688 1.538 1.118l3.976-2.888a1 1 0 0 1 1.176 0l3.976 2.888c.783.57 1.838-.196 1.538-1.118l-1.518-4.674a1 1 0 0 1 .363-1.118l3.976-2.888c.783-.57.381-1.81-.588-1.81H15.42a1 1 0 0 1-.95-.69l-1.519-4.674Z\" />\n  </svg>\n{:else if symbol === 'fork'}\n  <svg\n    class={`h-5 w-5 stroke-2 ${typeCoding}`}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\">\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      d=\"M18 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM6 9v12m7-15h3a2 2 0 0 1 2 2v7M6 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z\" />\n  </svg>\n{:else if symbol === 'link'}\n  <svg\n    class={`h-5 w-5 stroke-2 ${typeCoding}`}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\">\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      d=\"M10 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M14 4h6m0 0v6m0-6L10 14\" />\n  </svg>\n{/if}\n"
  },
  {
    "path": "src/lib/atoms/Pill.stories.svelte",
    "content": "<script>\n  import { Meta, Story } from '@storybook/addon-svelte-csf';\n\n  import Pill from './Pill.svelte';\n</script>\n\n<Meta title=\"Design System/Atoms/Pill\" component={Pill} />\n\n<!-- Light -->\n<Story name=\"Pill -Light\">\n  <Pill>Svelte + TailwindCSS + Storybook</Pill>\n</Story>\n"
  },
  {
    "path": "src/lib/atoms/Pill.svelte",
    "content": "<div\n  class=\"inline-block rounded-full bg-svelte-100 px-5 py-1 text-sm font-semibold uppercase leading-6 text-svelte-800\">\n  <slot />\n</div>\n"
  },
  {
    "path": "src/lib/introduction.mdx",
    "content": "import { Meta } from '@storybook/blocks';\nimport Social from '../assets/social.jpg';\n\n<Meta title=\"Intro/Welcome\" />\n\n# Svelte 4.2 + Storybook 8 + TailwindCSS 3\n\n<img src={Social} alt=\"Svelte + Storybook + TailwindCSS\" />\n\nVisit the website to see the outcome: [Svelte + Storybook + TailwindCSS](https://sst.sveltehub.dev)\n\n```bash\n// Quickstart\n\nnpx degit jerriclynsjohn/svelte-storybook-tailwind my-svelte-project\ncd my-svelte-project\n\npnpm install\npnpm run dev\npnpm run storybook\n```\n\nThis 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.\n\n> You can easily start your project with this template, instead of wasting time figuring out configurations for each integration.\n\n[Storybook](https://storybook.js.org/) is an open source tool for developing JavaScript UI components in isolation\n\n[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.\n\n[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.\n\n## Steps to build\n\n#### Instantiate Svelte + Vite app\n\n- Initiate the project using `pnpm create vite@latest`\n- Select Svelte + Javascript from the CLI\n- You have a basic Svelte + Vite app ready\n\n#### Add Tailwind to the project\n\n- Install dependencies `pnpm install -D tailwindcss postcss autoprefixer`\n- Instantiate the tailwind and postcss config files using `npx tailwindcss init -p`\n- Update the tailwind config as shown below to accomodate for Svelte components\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: ['./index.html', './src/**/*.{svelte,js,ts}'],\n  theme: {\n    extend: {}\n  },\n  plugins: []\n};\n``;\n```\n\n- Add Tailwind directive to your CSS at `./src/app.css`\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n- Import CSS into `./src/main.ts`\n\n```ts\nimport './app.css';\nimport App from './App.svelte';\n\nconst app = new App({\n  target: document.getElementById('app')\n});\n\nexport default app;\n```\n\n- With this we have tailwind setup in the project\n\n#### Add storybook and native story format into the project\n\n- Instantiate by running `pnpm dlx storybook@latest init`\n- Hook up TailwindCSS by importing the CSS into `./.storybook/preview.ts`\n\n```ts\nimport type { Preview } from '@storybook/svelte';\nimport '../src/app.css';\n\nconst preview: Preview = {\n  parameters: {\n    controls: {\n      matchers: {\n        color: /(background|color)$/i,\n        date: /Date$/i\n      }\n    }\n  }\n};\n\nexport default preview;\n```\n\n- This completes the setup required for the project\n\n### Best Practices for UI Component Library\n\n- 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.\n"
  },
  {
    "path": "src/lib/pages/Main.stories.svelte",
    "content": "<script>\n  import { Meta, Story } from '@storybook/addon-svelte-csf';\n\n  import Main from './Main.svelte';\n</script>\n\n<Meta title=\"Website/Page/Main\" component={Main} />\n\n<Story name=\"Light\">\n  <Main />\n</Story>\n"
  },
  {
    "path": "src/lib/pages/Main.svelte",
    "content": "<script>\n  import Header from '../sections/Header.svelte';\n  import Footer from '../sections/Footer.svelte';\n\n  import Body from '../sections/Body.svelte';\n  import Graphics from '../sections/Graphics.svelte';\n\n  import Container from '../utilities/Container.svelte';\n</script>\n\n<main class=\"flex h-auto flex-col justify-between bg-svelte-50 md:h-screen\">\n  <Header />\n  <Container>\n    <div class=\"flex flex-col justify-between gap-8 py-8 md:flex-row md:gap-0 md:py-0\">\n      <Body />\n      <Graphics />\n    </div>\n  </Container>\n  <Footer />\n</main>\n"
  },
  {
    "path": "src/lib/sections/Body.stories.svelte",
    "content": "<script>\n  import { Meta, Story } from '@storybook/addon-svelte-csf';\n\n  import Body from './Body.svelte';\n</script>\n\n<Meta title=\"Design System/Sections/Body\" component={Body} />\n\n<Story name=\"Light\">\n  <Body />\n</Story>\n"
  },
  {
    "path": "src/lib/sections/Body.svelte",
    "content": "<script>\n  import Pill from '../atoms/Pill.svelte';\n  import H1 from '../atoms/H1.svelte';\n  import Button from '../atoms/Button.svelte';\n  import Icon from '../atoms/Icon.svelte';\n</script>\n\n<div class=\"flex w-full flex-col gap-10 md:w-2/4\">\n  <div class=\"flex flex-col items-start gap-4\">\n    <Pill>Svelte + TailwindCSS + Storybook</Pill>\n    <H1>Svelte Starter Kit</H1>\n    <p class=\"text-2xl text-slate-500\">\n      The best frameworks are the ones where teams can get started without any hassles. With this\n      kit you can get started now!\n    </p>\n  </div>\n  <div class=\"flex gap-5\">\n    <Button left href=\"https://github.com/jerriclynsjohn/svelte-storybook-tailwind\"\n      ><Icon symbol=\"github\" />Github</Button>\n    <Button\n      type=\"secondary\"\n      left\n      href=\"https://github.com/jerriclynsjohn/svelte-storybook-tailwind/fork\"\n      ><Icon symbol=\"fork\" type=\"dark\" />Fork</Button>\n  </div>\n</div>\n"
  },
  {
    "path": "src/lib/sections/Footer.stories.svelte",
    "content": "<script>\n  import { Meta, Story } from '@storybook/addon-svelte-csf';\n\n  import Footer from './Footer.svelte';\n</script>\n\n<Meta title=\"Design System/Sections/Footer\" component={Footer} />\n\n<Story name=\"Light\">\n  <Footer />\n</Story>\n"
  },
  {
    "path": "src/lib/sections/Footer.svelte",
    "content": "<footer class=\"bg-svelte-100\">\n  <div class=\"mx-auto max-w-2xl py-4 text-center lg:max-w-4xl\">\n    <div class=\"flex items-center gap-1 text-sm leading-6\">\n      Made with <svg\n        class=\"h-4 w-4\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 20 20\">\n        <path\n          fill=\"#E53E3E\"\n          fill-rule=\"evenodd\"\n          d=\"M3.172 5.172a4 4 0 0 1 5.656 0L10 6.343l1.172-1.17a4 4 0 1 1 5.656 5.655L10 17.658l-6.828-6.83a4 4 0 0 1 0-5.656Z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n      by\n      <svg class=\"h-5\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 84 20\">\n        <path\n          fill=\"#000\"\n          fill-rule=\"evenodd\"\n          d=\"M33.333 0H40v1.333h1.333V20h-6.666v-1.333h-1.334V14h-4v6h-6.666v-1.333h-1.334V0H28v1.333h1.333V6h4V0ZM22 .667h5.333V6H22V.667Zm6 6V12h5.333V6.667H28Zm6 6h5.333V18H34v-5.333Zm5.333-6V12H34V6.667h5.333Zm0-6V6H34V.667h5.333ZM27.333 12V6.667H22V12h5.333Zm0 .667H22V18h5.333v-5.333ZM42.667 0h6.666v1.333h1.334V12h4V0h6.666v1.333h1.334V20H44v-1.333h-1.333V0Zm6 12V6.667h-5.334V12h5.334Zm6 .667h-5.334V18h5.334v-5.333Zm.666-.667V6.667h5.334V12h-5.334Zm0-6V.667h5.334V6h-5.334Zm5.334 6.667h-5.334V18h5.334v-5.333Zm-12 5.333h-5.334v-5.333h5.334V18ZM43.333 6h5.334V.667h-5.334V6ZM64 0v18.667h1.333V20H84V1.333h-1.333V0H64Zm6 6.667V12h-5.333V6.667H70ZM70.667 12V6.667H76V12h-5.333ZM82 6h-5.333V.667H82V6Zm-5.333.667H82V12h-5.333V6.667Zm0 6H82V18h-5.333v-5.333Zm-6 0H76V18h-5.333v-5.333ZM70 18v-5.333h-5.333V18H70ZM70 .667V6h-5.333V.667H70ZM76 6h-5.333V.667H76V6Z\"\n          clip-rule=\"evenodd\" />\n        <path fill=\"#fff\" d=\"M27.333.667H22V6h5.333V.667Z\" />\n        <path fill=\"#FF3E00\" d=\"M27.333 6.667V12H22V6.667h5.333Z\" />\n        <path fill=\"#fff\" d=\"M28 12V6.667h5.333V12H28Z\" />\n        <path fill=\"#FF3E00\" d=\"M39.333 12V6.667H34V12h5.333Z\" />\n        <path\n          fill=\"#fff\"\n          d=\"M39.333 6V.667H34V6h5.333ZM22 12.667h5.333V18H22v-5.333Zm17.333 0H34V18h5.333v-5.333ZM48.667 6h-5.334V.667h5.334V6Z\" />\n        <path\n          fill=\"#FF3E00\"\n          d=\"M48.667 6.667V12h-5.334V6.667h5.334Zm6.666 0V12h5.334V6.667h-5.334Zm-6 6h5.334V18h-5.334v-5.333Z\" />\n        <path\n          fill=\"#fff\"\n          d=\"M55.333.667V6h5.334V.667h-5.334Zm0 12h5.334V18h-5.334v-5.333Zm-12 5.333h5.334v-5.333h-5.334V18ZM70 6V.667h-5.333V6H70Zm.667.667V12H76V6.667h-5.333Zm11.333 6h-5.333V18H82v-5.333ZM76.667 6H82V.667h-5.333V6ZM70 12.667V18h-5.333v-5.333H70Z\" />\n        <path\n          fill=\"#FF3E00\"\n          d=\"M70 12V6.667h-5.333V12H70Zm.667-6H76V.667h-5.333V6ZM82 6.667h-5.333V12H82V6.667Zm-6 6h-5.333V18H76v-5.333Z\" />\n        <path\n          fill=\"#fff\"\n          d=\"M13.684 4.907c-1.116-1.597-3.32-2.07-4.913-1.055L5.973 5.635a3.21 3.21 0 0 0-1.45 2.15 3.38 3.38 0 0 0 .333 2.17c-.24.364-.403.772-.48 1.2a3.421 3.421 0 0 0 .585 2.588c1.115 1.597 3.32 2.07 4.912 1.055l2.798-1.784a3.21 3.21 0 0 0 1.45-2.15 3.383 3.383 0 0 0-.332-2.17 3.22 3.22 0 0 0 .48-1.2 3.419 3.419 0 0 0-.585-2.587Z\" />\n        <path\n          fill=\"#000\"\n          d=\"M8.498 13.893a2.222 2.222 0 0 1-2.386-.884 2.057 2.057 0 0 1-.284-1.817l.052-.161.144.105c.33.244.701.429 1.094.547l.104.032-.01.104a.627.627 0 0 0 .114.415.67.67 0 0 0 .718.267.615.615 0 0 0 .172-.075l2.798-1.784a.585.585 0 0 0 .257-.634.67.67 0 0 0-.819-.49.616.616 0 0 0-.171.075l-1.068.68a2.042 2.042 0 0 1-.568.25 2.223 2.223 0 0 1-2.718-1.627 2.057 2.057 0 0 1-.02-.813A1.93 1.93 0 0 1 6.78 6.79l2.798-1.784c.176-.111.367-.196.569-.25a2.223 2.223 0 0 1 2.718 1.627 2.057 2.057 0 0 1-.048 1.075l-.053.16-.143-.104a3.607 3.607 0 0 0-1.095-.548l-.104-.031.01-.104a.628.628 0 0 0-.113-.416.669.669 0 0 0-.718-.267.617.617 0 0 0-.172.076L7.63 8.007a.582.582 0 0 0-.262.39.62.62 0 0 0 .105.469.67.67 0 0 0 .719.267.618.618 0 0 0 .172-.076l1.067-.68a2.05 2.05 0 0 1 .569-.25 2.223 2.223 0 0 1 2.385.884 2.058 2.058 0 0 1 .352 1.556 1.931 1.931 0 0 1-.872 1.293l-2.798 1.783a2.038 2.038 0 0 1-.569.25Z\" />\n        <path\n          fill=\"#000\"\n          fill-rule=\"evenodd\"\n          d=\"M0 0h18.667v1.333H20V20H1.333v-1.333H0V0Zm18 .667H.667V18H18V.667Z\"\n          clip-rule=\"evenodd\" />\n        <path fill=\"#FF3E00\" d=\"M.667.667H18V18H.667V.667Z\" />\n        <path\n          fill=\"#fff\"\n          d=\"M13.684 4.908c-1.116-1.597-3.32-2.07-4.913-1.055L5.973 5.636a3.21 3.21 0 0 0-1.45 2.15 3.381 3.381 0 0 0 .333 2.17c-.24.364-.403.772-.48 1.2a3.42 3.42 0 0 0 .584 2.588c1.116 1.597 3.32 2.07 4.913 1.055l2.798-1.784a3.21 3.21 0 0 0 1.45-2.15 3.382 3.382 0 0 0-.333-2.17 3.22 3.22 0 0 0 .48-1.2 3.42 3.42 0 0 0-.584-2.587Z\" />\n        <path\n          fill=\"#000\"\n          fill-rule=\"evenodd\"\n          d=\"M8.771 3.853c1.593-1.016 3.797-.542 4.913 1.055a3.42 3.42 0 0 1 .584 2.587 3.22 3.22 0 0 1-.48 1.2c.35.666.467 1.43.333 2.17a3.212 3.212 0 0 1-1.45 2.15L9.873 14.8c-1.593 1.015-3.797.542-4.913-1.055a3.42 3.42 0 0 1-.584-2.588c.077-.428.24-.836.48-1.2a3.381 3.381 0 0 1-.333-2.17 3.21 3.21 0 0 1 1.45-2.15L8.77 3.853ZM3.867 7.668a3.877 3.877 0 0 1 1.75-2.595L8.412 3.29c1.909-1.216 4.505-.64 5.815 1.233a4.084 4.084 0 0 1 .697 3.089v.001a3.91 3.91 0 0 1-.385 1.118c.29.71.375 1.491.238 2.252a3.876 3.876 0 0 1-1.75 2.595l-.002.002-2.795 1.78c-1.908 1.217-4.505.64-5.815-1.232a4.087 4.087 0 0 1-.696-3.088v-.002c.07-.39.2-.768.384-1.118a4.048 4.048 0 0 1-.237-2.252Z\"\n          clip-rule=\"evenodd\" />\n        <path\n          fill=\"#000\"\n          d=\"M8.498 13.894a2.222 2.222 0 0 1-2.386-.884 2.057 2.057 0 0 1-.285-1.818l.053-.16.143.105a3.64 3.64 0 0 0 1.095.547l.104.032-.01.103a.627.627 0 0 0 .113.416.669.669 0 0 0 .719.267.615.615 0 0 0 .171-.076l2.799-1.783a.582.582 0 0 0 .263-.39.62.62 0 0 0-.106-.468.67.67 0 0 0-.719-.267.616.616 0 0 0-.171.075l-1.068.681a2.039 2.039 0 0 1-.569.25 2.223 2.223 0 0 1-2.718-1.627 2.057 2.057 0 0 1-.019-.814 1.93 1.93 0 0 1 .872-1.292l2.799-1.784a2.04 2.04 0 0 1 .568-.25 2.223 2.223 0 0 1 2.386.885 2.055 2.055 0 0 1 .284 1.817l-.052.16-.144-.105a3.607 3.607 0 0 0-1.094-.547l-.104-.031.01-.104a.628.628 0 0 0-.114-.416.669.669 0 0 0-.718-.267.616.616 0 0 0-.172.076L7.63 8.008a.582.582 0 0 0-.263.39.62.62 0 0 0 .106.469.67.67 0 0 0 .719.266.618.618 0 0 0 .171-.075l1.068-.68c.176-.112.367-.197.568-.25a2.223 2.223 0 0 1 2.386.884 2.058 2.058 0 0 1 .351 1.556 1.933 1.933 0 0 1-.872 1.293l-2.798 1.783a2.04 2.04 0 0 1-.568.25Z\" />\n      </svg>\n      . Drop a mail at\n      <span class=\"\"\n        ><a class=\"text-svelte-700 hover:text-svelte-900\" href=\"mailto:hello@sveltehub.dev\"\n          >hello@sveltehub.dev</a\n        ></span>\n      if you want to get in touch.\n    </div>\n  </div>\n</footer>\n"
  },
  {
    "path": "src/lib/sections/Graphics.stories.svelte",
    "content": "<script>\n  import { Meta, Story } from '@storybook/addon-svelte-csf';\n\n  import Graphics from './Graphics.svelte';\n</script>\n\n<Meta title=\"Design System/Sections/Graphics\" component={Graphics} />\n\n<Story name=\"Light\">\n  <Graphics />\n</Story>\n"
  },
  {
    "path": "src/lib/sections/Graphics.svelte",
    "content": "<script>\n  import Window from '../../assets/window.svg';\n</script>\n\n<img class=\"relative w-[550px]\" src={Window} alt=\"Window\" />\n"
  },
  {
    "path": "src/lib/sections/Header.stories.svelte",
    "content": "<script>\n  import { Meta, Story } from '@storybook/addon-svelte-csf';\n\n  import Header from './Header.svelte';\n</script>\n\n<Meta title=\"Design System/Sections/Header\" component={Header} />\n\n<Story name=\"Light\">\n  <Header />\n</Story>\n"
  },
  {
    "path": "src/lib/sections/Header.svelte",
    "content": "<script>\n  import Button from '../atoms/Button.svelte';\n  import Icon from '../atoms/Icon.svelte';\n  import Logo from '../../assets/logo.svg';\n</script>\n\n<div class=\"flex items-center justify-between px-16 py-6\">\n  <img class=\"h-12\" src={Logo} alt=\"Logo\" />\n  <Button right type=\"secondary\" href=\"https://sst-story.sveltehub.dev\"\n    >UI Doc<Icon symbol=\"link\" type=\"dark\" /></Button>\n</div>\n"
  },
  {
    "path": "src/lib/utilities/Container.svelte",
    "content": "<div class=\" mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n  <slot />\n</div>\n"
  },
  {
    "path": "src/main.ts",
    "content": "import './app.css';\nimport App from './App.svelte';\n\nconst app = new App({\n  target: document.getElementById('app')!\n});\n\nexport default app;\n"
  },
  {
    "path": "src/vite-env.d.ts",
    "content": "/// <reference types=\"svelte\" />\n/// <reference types=\"vite/client\" />\n"
  },
  {
    "path": "svelte.config.js",
    "content": "import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\nexport default {\n  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess\n  // for more information about preprocessors\n  preprocess: vitePreprocess()\n};\n"
  },
  {
    "path": "tailwind.config.js",
    "content": "const defaultTheme = require('tailwindcss/defaultTheme');\n\n/** @type {import('tailwindcss').Config} */\nexport default {\n  content: ['./index.html', './src/**/*.{svelte,js,ts,jsx,tsx}'],\n  theme: {\n    extend: {\n      fontFamily: {\n        sans: ['Poppins', ...defaultTheme.fontFamily.sans]\n      },\n      colors: {\n        svelte: {\n          50: '#FFF5EC',\n          100: '#FFE9D3',\n          200: '#FFCEA5',\n          300: '#FFAC6D',\n          400: '#FF7D32',\n          500: '#FF590A',\n          600: '#FF3E00',\n          700: '#CC2902',\n          800: '#A1210B',\n          900: '#821E0C'\n        }\n      }\n    }\n  },\n  plugins: []\n};\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"extends\": \"@tsconfig/svelte/tsconfig.json\",\n  \"compilerOptions\": {\n    \"target\": \"ESNext\",\n    \"useDefineForClassFields\": true,\n    \"module\": \"ESNext\",\n    \"resolveJsonModule\": true,\n    /**\n     * Typecheck JS in `.svelte` and `.js` files by default.\n     * Disable checkJs if you'd like to use dynamic types in JS.\n     * Note that setting allowJs false does not prevent the use\n     * of JS in `.svelte` files.\n     */\n    \"allowJs\": true,\n    \"checkJs\": true,\n    \"isolatedModules\": true,\n    \"moduleDetection\": \"force\"\n  },\n  \"include\": [\"src/**/*.ts\", \"src/**/*.js\", \"src/**/*.svelte\"],\n  \"references\": [{ \"path\": \"./tsconfig.node.json\" }]\n}\n"
  },
  {
    "path": "tsconfig.node.json",
    "content": "{\n  \"compilerOptions\": {\n    \"composite\": true,\n    \"tsBuildInfoFile\": \"./node_modules/.tmp/tsconfig.node.tsbuildinfo\",\n    \"skipLibCheck\": true,\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"bundler\",\n    \"strict\": true,\n    \"noEmit\": true\n  },\n  \"include\": [\"vite.config.ts\"]\n}\n"
  },
  {
    "path": "vite.config.ts",
    "content": "import { defineConfig } from 'vite';\nimport { svelte } from '@sveltejs/vite-plugin-svelte';\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [svelte()]\n});\n"
  }
]