Full Code of jerriclynsjohn/svelte-storybook-tailwind for AI

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
================================================
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />


================================================
FILE: .storybook/manager.ts
================================================
import { addons } from '@storybook/manager-api';
import customTheme from './CustomTheme';

addons.setConfig({
  theme: customTheme
});


================================================
FILE: .storybook/preview-head.html
================================================
<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600;700&display=swap');
</style>
<script>
  window.global = window;
</script>


================================================
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/<your-username>/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 <topic-branch-name>
   ```

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 <topic-branch-name>
   ```

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
================================================
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Svelte + Storybook + TailwindCSS</title>

    <!-- Poppins -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600;700&display=swap"
      rel="stylesheet" />
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>


================================================
FILE: package.json
================================================
{
  "name": "svelte-storybook-tailwind",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "author": "Jerric Lyns John <x@jerric.xyz> (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
================================================
<script>
  import Main from './lib/pages/Main.svelte';
</script>

<Main />


================================================
FILE: src/app.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;


================================================
FILE: src/lib/atoms/Button.stories.svelte
================================================
<script>
  import { Meta, Story } from '@storybook/addon-svelte-csf';

  import Button from './Button.svelte';
  import Icon from './Icon.svelte';
</script>

<Meta title="Design System/Atoms/Button" component={Button} />

<!-- Primary -->
<Story name="Primary">
  <Button href="https://google.com">Primary</Button>
</Story>
<Story name="Primary with icon on left">
  <Button left href="https://google.com"><Icon symbol="github" />Github</Button>
</Story>
<Story name="Primary with icon on right">
  <Button right href="https://google.com">Github<Icon symbol="github" /></Button>
</Story>

<!-- Secondary -->
<Story name="Secondary">
  <Button type="secondary" href="https://google.com">Github</Button>
</Story>
<Story name="Secondary with icon on left">
  <Button left type="secondary" href="https://google.com"
    ><Icon symbol="github" type="dark" />Github</Button>
</Story>
<Story name="Secondary with icon on right">
  <Button right type="secondary" href="https://google.com"
    >Github<Icon symbol="github" type="dark" /></Button>
</Story>


================================================
FILE: src/lib/atoms/Button.svelte
================================================
<script>
  /**
   * @type {string} Link
   */
  export let href = '';
  /**
   * @type {boolean} Style button for icon on left
   */
  export let left = false;
  /**
   * @type {boolean} Style button for icon on right
   */
  export let right = false;
  /**
   * Specify the kind of icon
   * @type {'primary' | 'secondary' }
   */
  export let type = 'primary';

  $: xPadding = left ? 'pl-6 pr-8' : right ? 'pr-6 pl-8' : 'px-8';
  $: typeCoding =
    type === 'primary'
      ? 'bg-svelte-600 text-white hover:bg-svelte-700'
      : 'border border-slate-600 text-slate-600 hover:bg-slate-200';
</script>

<a
  class={`inline-block rounded-lg py-3 text-lg font-semibold leading-6 ${xPadding} ${typeCoding}`}
  {href}
  target="_blank"
  rel="noreferrer">
  <div class="flex items-center gap-2">
    <slot />
  </div>
</a>


================================================
FILE: src/lib/atoms/H1.stories.svelte
================================================
<script>
  import { Meta, Story } from '@storybook/addon-svelte-csf';

  import H1 from './H1.svelte';
</script>

<Meta title="Design System/Atoms/H1" component={H1} />

<!-- Primary -->
<Story name="Primary">
  <H1>Svelte Starter Kit</H1>
</Story>


================================================
FILE: src/lib/atoms/H1.svelte
================================================
<h1 class="text-6xl font-bold text-slate-700"><slot /></h1>


================================================
FILE: src/lib/atoms/Icon.stories.svelte
================================================
<script>
  import { Meta, Story } from '@storybook/addon-svelte-csf';

  import Icon from './Icon.svelte';
</script>

<Meta title="Design System/Atoms/Icon" component={Icon} />

<!-- Light -->
<Story name="Github - Light">
  <Icon symbol="github" />
</Story>
<Story name="Github - Dark">
  <Icon type="dark" symbol="github" />
</Story>

<!-- Symbols -->
<Story name="Star - Dark">
  <Icon type="dark" symbol="star" />
</Story>
<Story name="Fork - Dark">
  <Icon type="dark" symbol="fork" />
</Story>
<Story name="Link - Dark">
  <Icon type="dark" symbol="link" />
</Story>


================================================
FILE: src/lib/atoms/Icon.svelte
================================================
<script>
  /**
   * Specify the kind of icon
   * @type {'github' | 'star' | 'fork' | 'link'}
   */
  export let symbol = 'github';

  /**
   * Specify the kind of icon
   * @type {'light' | 'dark' }
   */
  export let type = 'light';

  $: typeCoding = type === 'light' ? 'stroke-white' : 'stroke-slate-600';
</script>

{#if symbol === 'github'}
  <svg
    class={`h-5 w-5 stroke-2 ${typeCoding}`}
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24">
    <g clip-path="url(#a)">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        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" />
    </g>
    <defs>
      <clipPath id="a">
        <path d="M0 0h24v24H0z" />
      </clipPath>
    </defs>
  </svg>
{:else if symbol === 'star'}
  <svg
    class={`h-5 w-5 stroke-2 ${typeCoding}`}
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      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" />
  </svg>
{:else if symbol === 'fork'}
  <svg
    class={`h-5 w-5 stroke-2 ${typeCoding}`}
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      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" />
  </svg>
{:else if symbol === 'link'}
  <svg
    class={`h-5 w-5 stroke-2 ${typeCoding}`}
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      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" />
  </svg>
{/if}


================================================
FILE: src/lib/atoms/Pill.stories.svelte
================================================
<script>
  import { Meta, Story } from '@storybook/addon-svelte-csf';

  import Pill from './Pill.svelte';
</script>

<Meta title="Design System/Atoms/Pill" component={Pill} />

<!-- Light -->
<Story name="Pill -Light">
  <Pill>Svelte + TailwindCSS + Storybook</Pill>
</Story>


================================================
FILE: src/lib/atoms/Pill.svelte
================================================
<div
  class="inline-block rounded-full bg-svelte-100 px-5 py-1 text-sm font-semibold uppercase leading-6 text-svelte-800">
  <slot />
</div>


================================================
FILE: src/lib/introduction.mdx
================================================
import { Meta } from '@storybook/blocks';
import Social from '../assets/social.jpg';

<Meta title="Intro/Welcome" />

# Svelte 4.2 + Storybook 8 + TailwindCSS 3

<img src={Social} alt="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
================================================
<script>
  import { Meta, Story } from '@storybook/addon-svelte-csf';

  import Main from './Main.svelte';
</script>

<Meta title="Website/Page/Main" component={Main} />

<Story name="Light">
  <Main />
</Story>


================================================
FILE: src/lib/pages/Main.svelte
================================================
<script>
  import Header from '../sections/Header.svelte';
  import Footer from '../sections/Footer.svelte';

  import Body from '../sections/Body.svelte';
  import Graphics from '../sections/Graphics.svelte';

  import Container from '../utilities/Container.svelte';
</script>

<main class="flex h-auto flex-col justify-between bg-svelte-50 md:h-screen">
  <Header />
  <Container>
    <div class="flex flex-col justify-between gap-8 py-8 md:flex-row md:gap-0 md:py-0">
      <Body />
      <Graphics />
    </div>
  </Container>
  <Footer />
</main>


================================================
FILE: src/lib/sections/Body.stories.svelte
================================================
<script>
  import { Meta, Story } from '@storybook/addon-svelte-csf';

  import Body from './Body.svelte';
</script>

<Meta title="Design System/Sections/Body" component={Body} />

<Story name="Light">
  <Body />
</Story>


================================================
FILE: src/lib/sections/Body.svelte
================================================
<script>
  import Pill from '../atoms/Pill.svelte';
  import H1 from '../atoms/H1.svelte';
  import Button from '../atoms/Button.svelte';
  import Icon from '../atoms/Icon.svelte';
</script>

<div class="flex w-full flex-col gap-10 md:w-2/4">
  <div class="flex flex-col items-start gap-4">
    <Pill>Svelte + TailwindCSS + Storybook</Pill>
    <H1>Svelte Starter Kit</H1>
    <p class="text-2xl text-slate-500">
      The best frameworks are the ones where teams can get started without any hassles. With this
      kit you can get started now!
    </p>
  </div>
  <div class="flex gap-5">
    <Button left href="https://github.com/jerriclynsjohn/svelte-storybook-tailwind"
      ><Icon symbol="github" />Github</Button>
    <Button
      type="secondary"
      left
      href="https://github.com/jerriclynsjohn/svelte-storybook-tailwind/fork"
      ><Icon symbol="fork" type="dark" />Fork</Button>
  </div>
</div>


================================================
FILE: src/lib/sections/Footer.stories.svelte
================================================
<script>
  import { Meta, Story } from '@storybook/addon-svelte-csf';

  import Footer from './Footer.svelte';
</script>

<Meta title="Design System/Sections/Footer" component={Footer} />

<Story name="Light">
  <Footer />
</Story>


================================================
FILE: src/lib/sections/Footer.svelte
================================================
<footer class="bg-svelte-100">
  <div class="mx-auto max-w-2xl py-4 text-center lg:max-w-4xl">
    <div class="flex items-center gap-1 text-sm leading-6">
      Made with <svg
        class="h-4 w-4"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 20 20">
        <path
          fill="#E53E3E"
          fill-rule="evenodd"
          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"
          clip-rule="evenodd" />
      </svg>
      by
      <svg class="h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 84 20">
        <path
          fill="#000"
          fill-rule="evenodd"
          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"
          clip-rule="evenodd" />
        <path fill="#fff" d="M27.333.667H22V6h5.333V.667Z" />
        <path fill="#FF3E00" d="M27.333 6.667V12H22V6.667h5.333Z" />
        <path fill="#fff" d="M28 12V6.667h5.333V12H28Z" />
        <path fill="#FF3E00" d="M39.333 12V6.667H34V12h5.333Z" />
        <path
          fill="#fff"
          d="M39.333 6V.667H34V6h5.333ZM22 12.667h5.333V18H22v-5.333Zm17.333 0H34V18h5.333v-5.333ZM48.667 6h-5.334V.667h5.334V6Z" />
        <path
          fill="#FF3E00"
          d="M48.667 6.667V12h-5.334V6.667h5.334Zm6.666 0V12h5.334V6.667h-5.334Zm-6 6h5.334V18h-5.334v-5.333Z" />
        <path
          fill="#fff"
          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" />
        <path
          fill="#FF3E00"
          d="M70 12V6.667h-5.333V12H70Zm.667-6H76V.667h-5.333V6ZM82 6.667h-5.333V12H82V6.667Zm-6 6h-5.333V18H76v-5.333Z" />
        <path
          fill="#fff"
          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" />
        <path
          fill="#000"
          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" />
        <path
          fill="#000"
          fill-rule="evenodd"
          d="M0 0h18.667v1.333H20V20H1.333v-1.333H0V0Zm18 .667H.667V18H18V.667Z"
          clip-rule="evenodd" />
        <path fill="#FF3E00" d="M.667.667H18V18H.667V.667Z" />
        <path
          fill="#fff"
          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" />
        <path
          fill="#000"
          fill-rule="evenodd"
          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"
          clip-rule="evenodd" />
        <path
          fill="#000"
          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" />
      </svg>
      . Drop a mail at
      <span class=""
        ><a class="text-svelte-700 hover:text-svelte-900" href="mailto:hello@sveltehub.dev"
          >hello@sveltehub.dev</a
        ></span>
      if you want to get in touch.
    </div>
  </div>
</footer>


================================================
FILE: src/lib/sections/Graphics.stories.svelte
================================================
<script>
  import { Meta, Story } from '@storybook/addon-svelte-csf';

  import Graphics from './Graphics.svelte';
</script>

<Meta title="Design System/Sections/Graphics" component={Graphics} />

<Story name="Light">
  <Graphics />
</Story>


================================================
FILE: src/lib/sections/Graphics.svelte
================================================
<script>
  import Window from '../../assets/window.svg';
</script>

<img class="relative w-[550px]" src={Window} alt="Window" />


================================================
FILE: src/lib/sections/Header.stories.svelte
================================================
<script>
  import { Meta, Story } from '@storybook/addon-svelte-csf';

  import Header from './Header.svelte';
</script>

<Meta title="Design System/Sections/Header" component={Header} />

<Story name="Light">
  <Header />
</Story>


================================================
FILE: src/lib/sections/Header.svelte
================================================
<script>
  import Button from '../atoms/Button.svelte';
  import Icon from '../atoms/Icon.svelte';
  import Logo from '../../assets/logo.svg';
</script>

<div class="flex items-center justify-between px-16 py-6">
  <img class="h-12" src={Logo} alt="Logo" />
  <Button right type="secondary" href="https://sst-story.sveltehub.dev"
    >UI Doc<Icon symbol="link" type="dark" /></Button>
</div>


================================================
FILE: src/lib/utilities/Container.svelte
================================================
<div class=" mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
  <slot />
</div>


================================================
FILE: src/main.ts
================================================
import './app.css';
import App from './App.svelte';

const app = new App({
  target: document.getElementById('app')!
});

export default app;


================================================
FILE: src/vite-env.d.ts
================================================
/// <reference types="svelte" />
/// <reference types="vite/client" />


================================================
FILE: svelte.config.js
================================================
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
  // for more information about preprocessors
  preprocess: vitePreprocess()
};


================================================
FILE: tailwind.config.js
================================================
const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{svelte,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Poppins', ...defaultTheme.fontFamily.sans]
      },
      colors: {
        svelte: {
          50: '#FFF5EC',
          100: '#FFE9D3',
          200: '#FFCEA5',
          300: '#FFAC6D',
          400: '#FF7D32',
          500: '#FF590A',
          600: '#FF3E00',
          700: '#CC2902',
          800: '#A1210B',
          900: '#821E0C'
        }
      }
    }
  },
  plugins: []
};


================================================
FILE: tsconfig.json
================================================
{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "resolveJsonModule": true,
    /**
     * Typecheck JS in `.svelte` and `.js` files by default.
     * Disable checkJs if you'd like to use dynamic types in JS.
     * Note that setting allowJs false does not prevent the use
     * of JS in `.svelte` files.
     */
    "allowJs": true,
    "checkJs": true,
    "isolatedModules": true,
    "moduleDetection": "force"
  },
  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
  "references": [{ "path": "./tsconfig.node.json" }]
}


================================================
FILE: tsconfig.node.json
================================================
{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noEmit": true
  },
  "include": ["vite.config.ts"]
}


================================================
FILE: vite.config.ts
================================================
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()]
});