├── .npmrc ├── static ├── favicon.ico └── robots.txt ├── src ├── global.d.ts ├── routes │ ├── $layout.svelte │ └── index.svelte ├── app.scss ├── app.html ├── stories │ ├── Counter.stories.svelte │ ├── header.css │ ├── Page.stories.svelte │ ├── Header.stories.svelte │ ├── button.css │ ├── Button.svelte │ ├── Button.stories.svelte │ ├── assets │ │ ├── direction.svg │ │ ├── flow.svg │ │ ├── code-brackets.svg │ │ ├── comments.svg │ │ ├── repo.svg │ │ ├── plugin.svg │ │ ├── stackalt.svg │ │ └── colors.svg │ ├── page.css │ ├── Header.svelte │ ├── Page.svelte │ └── Introduction.stories.mdx └── lib │ └── Counter.svelte ├── .gitignore ├── .storybook ├── preview.cjs └── main.cjs ├── tailwind.config.cjs ├── svelte.config.cjs ├── README.md ├── package.json ├── tsconfig.json └── LICENSE /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tejasag/sveltetron-9000/HEAD/static/favicon.ico -------------------------------------------------------------------------------- /static/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | -------------------------------------------------------------------------------- /src/routes/$layout.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | 7 |
8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /.svelte 4 | /build 5 | /functions 6 | .idea 7 | yarn.lock 8 | package-lock.json 9 | .vscode 10 | -------------------------------------------------------------------------------- /src/app.scss: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 4 | 'Open Sans', 'Helvetica Neue', sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /.storybook/preview.cjs: -------------------------------------------------------------------------------- 1 | 2 | export const parameters = { 3 | actions: { argTypesRegex: "^on[A-Z].*" }, 4 | controls: { 5 | matchers: { 6 | color: /(background|color)$/i, 7 | date: /Date$/, 8 | }, 9 | }, 10 | } -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %svelte.head% 8 | 9 | 10 |
%svelte.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /.storybook/main.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "stories": [ 3 | "../src/**/*.stories.mdx", 4 | "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)" 5 | ], 6 | "addons": [ 7 | "@storybook/addon-links", 8 | "@storybook/addon-essentials", 9 | "@storybook/addon-svelte-csf" 10 | ], 11 | "svelteOptions": { 12 | "preprocess": require("../svelte.config.cjs").preprocess 13 | } 14 | } -------------------------------------------------------------------------------- /src/stories/Counter.stories.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | 14 | 15 | 20 | 21 | -------------------------------------------------------------------------------- /tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | const production = !process.env.ROLLUP_WATCH; 2 | module.exports = { 3 | purge: { 4 | content: [ 5 | "./src/**/*.svelte" 6 | ], 7 | enabled: production, 8 | }, 9 | darkMode: false, // or 'media' or 'class' 10 | theme: { 11 | extend: {}, 12 | }, 13 | variants: { 14 | extend: {}, 15 | }, 16 | plugins: [], 17 | future: { 18 | purgeLayersByDefault: true, 19 | removeDeprecatedGapUtilities: true, 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/lib/Counter.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /src/stories/header.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 4 | padding: 15px 20px; 5 | display: flex; 6 | align-items: center; 7 | justify-content: space-between; 8 | } 9 | 10 | svg { 11 | display: inline-block; 12 | vertical-align: top; 13 | } 14 | 15 | h1 { 16 | font-weight: 900; 17 | font-size: 20px; 18 | line-height: 1; 19 | margin: 6px 0 6px 10px; 20 | display: inline-block; 21 | vertical-align: top; 22 | } 23 | 24 | button + button { 25 | margin-left: 10px; 26 | } 27 | -------------------------------------------------------------------------------- /src/stories/Page.stories.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 15 | 16 | 24 | 25 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /src/stories/Header.stories.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 15 | 16 | 24 | 25 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /src/routes/index.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

Sveltetron 9000

7 |

8 | The Svelte template you needed! 9 |

10 | 11 |

12 | Checkout the project documentation on 13 | Github 14 |

15 |
16 | 17 | 22 | -------------------------------------------------------------------------------- /src/stories/button.css: -------------------------------------------------------------------------------- 1 | .storybook-button { 2 | font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | font-weight: 700; 4 | border: 0; 5 | border-radius: 3em; 6 | cursor: pointer; 7 | display: inline-block; 8 | line-height: 1; 9 | } 10 | .storybook-button--primary { 11 | color: white; 12 | background-color: #1ea7fd; 13 | } 14 | .storybook-button--secondary { 15 | color: #333; 16 | background-color: transparent; 17 | box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; 18 | } 19 | .storybook-button--small { 20 | font-size: 12px; 21 | padding: 10px 16px; 22 | } 23 | .storybook-button--medium { 24 | font-size: 14px; 25 | padding: 11px 20px; 26 | } 27 | .storybook-button--large { 28 | font-size: 16px; 29 | padding: 12px 24px; 30 | } 31 | -------------------------------------------------------------------------------- /svelte.config.cjs: -------------------------------------------------------------------------------- 1 | const sveltePreprocess = require('svelte-preprocess'); 2 | const node = require('@sveltejs/adapter-node'); 3 | const pkg = require('./package.json'); 4 | 5 | /** @type {import('@sveltejs/kit').Config} */ 6 | module.exports = { 7 | // Consult https://github.com/sveltejs/svelte-preprocess 8 | // for more information about preprocessors 9 | preprocess: sveltePreprocess({ 10 | postcss: { 11 | plugins: [ 12 | require("tailwindcss"), 13 | require("autoprefixer") 14 | ] 15 | } 16 | }), 17 | kit: { 18 | // By default, `npm run build` will create a standard Node app. 19 | // You can create optimized builds for different platforms by 20 | // specifying a different adapter 21 | adapter: node(), 22 | 23 | // hydrate the
element in src/app.html 24 | target: '#svelte', 25 | 26 | vite: { 27 | ssr: { 28 | noExternal: Object.keys(pkg.dependencies || {}) 29 | } 30 | } 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![image](https://user-images.githubusercontent.com/67542663/113436983-68438400-9403-11eb-928f-659073d600de.png) 2 | 3 | The ultimate SvelteKit starter template which includes configuraion for 4 | - [TailwindCSS](https://tailwindcss.com), 5 | - [Storybook](https://storybook.js.org), 6 | - [TypeScript](https://typescriptlang.org/), 7 | - [Sass](https://sass-lang.com/) 8 | and more! 9 | 10 | # Usage 11 | - Use the template using github or clone the repository 12 | ``` 13 | git clone https://github.com/tejasag/sveltetron-9000 14 | ``` 15 | 16 | - Install the libraries 17 | ```js 18 | // with yarn 19 | yarn 20 | // or with npm 21 | npm i 22 | // or with pnpm 23 | pnpm install 24 | ``` 25 | 26 | - To run the Svelte server 27 | ```js 28 | yarn dev 29 | // or 30 | npm run dev 31 | ``` 32 | 33 | - To run the Storybook server 34 | ```js 35 | yarn storybook 36 | // or 37 | npm run storybook 38 | ``` 39 | 40 | ## Having troubles? 41 | Open an issue and I'll try to help as soon as I can! 42 | 43 | --- 44 | 45 | Copyright 2021-present Tejas Agarwal 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sveltetron-9000", 3 | "version": "0.0.1", 4 | "scripts": { 5 | "dev": "svelte-kit dev", 6 | "build": "svelte-kit build", 7 | "start": "svelte-kit start", 8 | "storybook": "start-storybook -p 6006", 9 | "build-storybook": "build-storybook" 10 | }, 11 | "devDependencies": { 12 | "@babel/core": "^7.13.14", 13 | "@storybook/addon-actions": "^6.2.2", 14 | "@storybook/addon-essentials": "^6.2.2", 15 | "@storybook/addon-links": "^6.2.2", 16 | "@storybook/addon-svelte-csf": "^1.0.0", 17 | "@storybook/svelte": "^6.2.2", 18 | "@sveltejs/adapter-node": "next", 19 | "@sveltejs/kit": "next", 20 | "@tailwindcss/jit": "^0.1.18", 21 | "autoprefixer": "^10.2.5", 22 | "babel-loader": "^8.2.2", 23 | "postcss": "^8.2.9", 24 | "sass": "^1.0.0", 25 | "svelte": "^3.37.0", 26 | "svelte-loader": "^3.0.0", 27 | "svelte-preprocess": "^4.0.0", 28 | "tailwindcss": "^2.0.4", 29 | "tslib": "^2.0.0", 30 | "typescript": "^4.0.0", 31 | "vite": "^2.1.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/stories/Button.svelte: -------------------------------------------------------------------------------- 1 | 35 | 36 | 43 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "moduleResolution": "node", 4 | "module": "es2020", 5 | "lib": ["es2020"], 6 | "target": "es2019", 7 | /** 8 | svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript 9 | to enforce using \`import type\` instead of \`import\` for Types. 10 | */ 11 | "importsNotUsedAsValues": "error", 12 | "isolatedModules": true, 13 | "resolveJsonModule": true, 14 | /** 15 | To have warnings/errors of the Svelte compiler at the correct position, 16 | enable source maps by default. 17 | */ 18 | "sourceMap": true, 19 | "esModuleInterop": true, 20 | "skipLibCheck": true, 21 | "forceConsistentCasingInFileNames": true, 22 | "baseUrl": ".", 23 | "allowJs": true, 24 | "checkJs": true, 25 | "paths": { 26 | "$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"], 27 | "$service-worker": [".svelte/build/runtime/service-worker"], 28 | "$lib/*": ["src/lib/*"] 29 | } 30 | }, 31 | "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"] 32 | } 33 | -------------------------------------------------------------------------------- /src/stories/Button.stories.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 19 | 20 | 23 | 24 | 31 | 32 | 38 | 45 | 46 | 53 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021 - present tejasag 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/stories/assets/direction.svg: -------------------------------------------------------------------------------- 1 | illustration/direction -------------------------------------------------------------------------------- /src/stories/page.css: -------------------------------------------------------------------------------- 1 | section { 2 | font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | font-size: 14px; 4 | line-height: 24px; 5 | padding: 48px 20px; 6 | margin: 0 auto; 7 | max-width: 600px; 8 | color: #333; 9 | } 10 | 11 | h2 { 12 | font-weight: 900; 13 | font-size: 32px; 14 | line-height: 1; 15 | margin: 0 0 4px; 16 | display: inline-block; 17 | vertical-align: top; 18 | } 19 | 20 | p { 21 | margin: 1em 0; 22 | } 23 | 24 | a { 25 | text-decoration: none; 26 | color: #1ea7fd; 27 | } 28 | 29 | ul { 30 | padding-left: 30px; 31 | margin: 1em 0; 32 | } 33 | 34 | li { 35 | margin-bottom: 8px; 36 | } 37 | 38 | .tip { 39 | display: inline-block; 40 | border-radius: 1em; 41 | font-size: 11px; 42 | line-height: 12px; 43 | font-weight: 700; 44 | background: #e7fdd8; 45 | color: #66bf3c; 46 | padding: 4px 12px; 47 | margin-right: 10px; 48 | vertical-align: top; 49 | } 50 | 51 | .tip-wrapper { 52 | font-size: 13px; 53 | line-height: 20px; 54 | margin-top: 40px; 55 | margin-bottom: 40px; 56 | } 57 | 58 | .tip-wrapper svg { 59 | display: inline-block; 60 | height: 12px; 61 | width: 12px; 62 | margin-right: 4px; 63 | vertical-align: top; 64 | margin-top: 3px; 65 | } 66 | 67 | .tip-wrapper svg path { 68 | fill: #1ea7fd; 69 | } 70 | -------------------------------------------------------------------------------- /src/stories/assets/flow.svg: -------------------------------------------------------------------------------- 1 | illustration/flow -------------------------------------------------------------------------------- /src/stories/assets/code-brackets.svg: -------------------------------------------------------------------------------- 1 | illustration/code-brackets -------------------------------------------------------------------------------- /src/stories/assets/comments.svg: -------------------------------------------------------------------------------- 1 | illustration/comments -------------------------------------------------------------------------------- /src/stories/Header.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 |
23 |
24 |
25 | 26 | 27 | 30 | 33 | 34 | 35 | 36 |

Acme

37 |
38 |
39 | {#if user} 40 |
47 |
48 |
49 | -------------------------------------------------------------------------------- /src/stories/assets/repo.svg: -------------------------------------------------------------------------------- 1 | illustration/repo -------------------------------------------------------------------------------- /src/stories/assets/plugin.svg: -------------------------------------------------------------------------------- 1 | illustration/plugin -------------------------------------------------------------------------------- /src/stories/assets/stackalt.svg: -------------------------------------------------------------------------------- 1 | illustration/stackalt -------------------------------------------------------------------------------- /src/stories/Page.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 |
23 |
24 | 25 |
26 |

Pages in Storybook

27 |

28 | We recommend building UIs with a 29 | 33 | component-driven 34 | 35 | process starting with atomic components and ending with pages. 36 |

37 |

38 | Render pages with mock data. This makes it easy to build and review page states without 39 | needing to navigate to them in your app. Here are some handy patterns for managing page data 40 | in Storybook: 41 |

42 |
    43 |
  • 44 | Use a higher-level connected component. Storybook helps you compose such data from the 45 | "args" of child component stories 46 |
    • 47 |
  • 48 | Assemble data in the page component from your services. You can mock these services out 49 | using Storybook. 50 |
    • 51 |
52 |

53 | Get a guided tutorial on component-driven development at 54 | 55 | Storybook tutorials 56 | 57 | . Read more in the 58 | docs 59 | . 60 |

61 |
62 | Tip 63 | Adjust the width of the canvas with the 64 | 65 | 66 | 72 | 73 | 74 | Viewports addon in the toolbar 75 |
76 |
77 |
78 | -------------------------------------------------------------------------------- /src/stories/Introduction.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs/blocks'; 2 | import Code from './assets/code-brackets.svg'; 3 | import Colors from './assets/colors.svg'; 4 | import Comments from './assets/comments.svg'; 5 | import Direction from './assets/direction.svg'; 6 | import Flow from './assets/flow.svg'; 7 | import Plugin from './assets/plugin.svg'; 8 | import Repo from './assets/repo.svg'; 9 | import StackAlt from './assets/stackalt.svg'; 10 | 11 | 12 | 13 | 116 | 117 | # Welcome to Storybook 118 | 119 | Storybook helps you build UI components in isolation from your app's business logic, data, and context. 120 | That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. 121 | 122 | Browse example stories now by navigating to them in the sidebar. 123 | View their code in the `src/stories` directory to learn how they work. 124 | We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. 125 | 126 |
Configure
127 | 128 | 174 | 175 |
Learn
176 | 177 | 207 | 208 |
209 | TipEdit the Markdown in{' '} 210 | src/stories/Introduction.stories.mdx 211 |
212 | -------------------------------------------------------------------------------- /src/stories/assets/colors.svg: -------------------------------------------------------------------------------- 1 | illustration/colors --------------------------------------------------------------------------------