Jerric Lyns John
1 year ago
parent
b2e4ce08bb
commit
052cb6f1c2
135 changed files with 14233 additions and 40358 deletions
@ -1,11 +1,12 @@ |
||||
/public/build/** |
||||
/storybook-static/** |
||||
/.out/** |
||||
/node_modules/** |
||||
package-lock.json |
||||
.DS_Store |
||||
node_modules/ |
||||
.env |
||||
.env.* |
||||
!.env.example |
||||
dist |
||||
storybook-static |
||||
|
||||
# Ignore files for PNPM, NPM and YARN |
||||
pnpm-lock.yaml |
||||
yarn-lock.json |
||||
.editorconfig |
||||
.eslintignore |
||||
.prettierignore |
||||
.gitignore |
||||
package-lock.json |
||||
yarn.lock |
||||
|
||||
@ -0,0 +1,22 @@ |
||||
module.exports = { |
||||
root: true, |
||||
extends: ['eslint:recommended', 'prettier', 'plugin:json/recommended', 'plugin:storybook/recommended', 'plugin:storybook/recommended'], |
||||
plugins: ['svelte3', 'html'], |
||||
ignorePatterns: ['*.cjs'], |
||||
overrides: [{ |
||||
files: ['*.svelte'], |
||||
processor: 'svelte3/svelte3' |
||||
}], |
||||
parserOptions: { |
||||
sourceType: 'module', |
||||
ecmaVersion: 2020 |
||||
}, |
||||
env: { |
||||
browser: true, |
||||
es2017: true, |
||||
node: true |
||||
}, |
||||
rules: { |
||||
'json/*': ['error', 'allowComments'] |
||||
} |
||||
}; |
||||
@ -1,26 +0,0 @@ |
||||
module.exports = { |
||||
root: true, |
||||
parserOptions: { |
||||
ecmaVersion: 2019, |
||||
sourceType: 'module' |
||||
}, |
||||
env: { |
||||
es6: true, |
||||
browser: true, |
||||
node: true |
||||
}, |
||||
plugins: ['svelte3'], |
||||
overrides: [ |
||||
{ |
||||
files: ['*.svelte'], |
||||
processor: 'svelte3/svelte3' |
||||
} |
||||
], |
||||
extends: ['eslint:recommended', 'prettier', 'plugin:json/recommended'], |
||||
rules: { |
||||
'json/*': ['error', 'allowComments'] |
||||
}, |
||||
settings: { |
||||
// ...
|
||||
} |
||||
}; |
||||
@ -1,5 +1,25 @@ |
||||
/node_modules/ |
||||
/public/build/ |
||||
/storybook-static/ |
||||
# Logs |
||||
logs |
||||
*.log |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
pnpm-debug.log* |
||||
lerna-debug.log* |
||||
|
||||
node_modules |
||||
dist |
||||
storybook-static |
||||
dist-ssr |
||||
*.local |
||||
|
||||
# Editor directories and files |
||||
.vscode/* |
||||
!.vscode/extensions.json |
||||
.idea |
||||
.DS_Store |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw? |
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,17 +0,0 @@ |
||||
/** @license React v0.20.2 |
||||
* scheduler.production.min.js |
||||
* |
||||
* Copyright (c) Facebook, Inc. and its affiliates. |
||||
* |
||||
* This source code is licensed under the MIT license found in the |
||||
* LICENSE file in the root directory of this source tree. |
||||
*/ |
||||
|
||||
/** @license React v17.0.2 |
||||
* react-dom.production.min.js |
||||
* |
||||
* Copyright (c) Facebook, Inc. and its affiliates. |
||||
* |
||||
* This source code is licensed under the MIT license found in the |
||||
* LICENSE file in the root directory of this source tree. |
||||
*/ |
||||
@ -1 +0,0 @@ |
||||
{"version":3,"file":"0.47e7f5d9.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,8 +0,0 @@ |
||||
/** |
||||
* Prism: Lightweight, robust, elegant syntax highlighting |
||||
* |
||||
* @license MIT <https://opensource.org/licenses/MIT> |
||||
* @author Lea Verou <https://lea.verou.me> |
||||
* @namespace |
||||
* @public |
||||
*/ |
||||
@ -1 +0,0 @@ |
||||
{"version":3,"file":"1.a1654884.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""} |
||||
File diff suppressed because one or more lines are too long
@ -1,12 +0,0 @@ |
||||
/*! |
||||
* OverlayScrollbars |
||||
* https://github.com/KingSora/OverlayScrollbars |
||||
* |
||||
* Version: 1.13.0 |
||||
* |
||||
* Copyright KingSora | Rene Haas. |
||||
* https://github.com/KingSora |
||||
* |
||||
* Released under the MIT license. |
||||
* Date: 02.08.2020 |
||||
*/ |
||||
@ -1 +0,0 @@ |
||||
{"version":3,"file":"10.bd76e6ec.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,8 +0,0 @@ |
||||
/** |
||||
* Prism: Lightweight, robust, elegant syntax highlighting |
||||
* |
||||
* @license MIT <https://opensource.org/licenses/MIT> |
||||
* @author Lea Verou <https://lea.verou.me> |
||||
* @namespace |
||||
* @public |
||||
*/ |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,12 +0,0 @@ |
||||
/*! |
||||
* OverlayScrollbars |
||||
* https://github.com/KingSora/OverlayScrollbars |
||||
* |
||||
* Version: 1.13.0 |
||||
* |
||||
* Copyright KingSora | Rene Haas. |
||||
* https://github.com/KingSora |
||||
* |
||||
* Released under the MIT license. |
||||
* Date: 02.08.2020 |
||||
*/ |
||||
File diff suppressed because one or more lines are too long
@ -1,22 +0,0 @@ |
||||
/*! |
||||
* The buffer module from node.js, for the browser. |
||||
* |
||||
* @author Feross Aboukhadijeh <http://feross.org> |
||||
* @license MIT |
||||
*/ |
||||
|
||||
/*! axe v4.3.5 |
||||
* Copyright (c) 2021 Deque Systems, Inc. |
||||
* |
||||
* Your use of this Source Code Form is subject to the terms of the Mozilla Public |
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this |
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. |
||||
* |
||||
* This entire copyright notice must appear in every copy of this file you |
||||
* distribute or in any file that contains substantial portions of this source |
||||
* code. |
||||
*/ |
||||
|
||||
/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */ |
||||
|
||||
/*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */ |
||||
@ -1 +0,0 @@ |
||||
{"version":3,"file":"7.c057e38f.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""} |
||||
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@ |
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{964:function(module,exports){module.exports=function(e,n){return n=n||{},new Promise((function(t,r){var s=new XMLHttpRequest,o=[],u=[],i={},a=function(){return{ok:2==(s.status/100|0),statusText:s.statusText,status:s.status,url:s.responseURL,text:function(){return Promise.resolve(s.responseText)},json:function(){return Promise.resolve(s.responseText).then(JSON.parse)},blob:function(){return Promise.resolve(new Blob([s.response]))},clone:a,headers:{keys:function(){return o},entries:function(){return u},get:function(e){return i[e.toLowerCase()]},has:function(e){return e.toLowerCase()in i}}}};for(var l in s.open(n.method||"get",e,!0),s.onload=function(){s.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm,(function(e,n,t){o.push(n=n.toLowerCase()),u.push([n,t]),i[n]=i[n]?i[n]+","+t:t})),t(a())},s.onerror=r,s.withCredentials="include"==n.credentials,n.headers)s.setRequestHeader(l,n.headers[l]);s.send(n.body||null)}))}}}]); |
||||
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@ |
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[9],[,,function(module,exports){},function(module,exports){},function(module,exports){},function(module,exports){},function(module,exports){},function(module,exports){},function(module,exports){},function(module,exports){},function(module,exports){},function(module,exports){},function(module,exports){},function(module,exports){}]]); |
||||
|
Before Width: | Height: | Size: 32 KiB |
@ -1,348 +0,0 @@ |
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><base target="_parent"><style>:not(.sb-show-preparing-story) > .sb-preparing-story, |
||||
:not(.sb-show-preparing-docs) > .sb-preparing-docs, |
||||
:not(.sb-show-nopreview) > .sb-nopreview, |
||||
:not(.sb-show-errordisplay) > .sb-errordisplay { |
||||
display: none; |
||||
} |
||||
|
||||
.sb-show-main.sb-main-centered { |
||||
margin: 0; |
||||
display: flex; |
||||
align-items: center; |
||||
min-height: 100vh; |
||||
} |
||||
|
||||
.sb-show-main.sb-main-centered #root { |
||||
box-sizing: border-box; |
||||
margin: auto; |
||||
padding: 1rem; |
||||
max-height: 100%; /* Hack for centering correctly in IE11 */ |
||||
} |
||||
|
||||
/* Vertical centering fix for IE11 */ |
||||
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) { |
||||
.sb-show-main.sb-main-centered:after { |
||||
content: ''; |
||||
min-height: inherit; |
||||
font-size: 0; |
||||
} |
||||
} |
||||
|
||||
.sb-show-main.sb-main-fullscreen { |
||||
margin: 0; |
||||
padding: 0; |
||||
display: block; |
||||
} |
||||
|
||||
.sb-show-main.sb-main-padded { |
||||
margin: 0; |
||||
padding: 1rem; |
||||
display: block; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.sb-wrapper { |
||||
position: fixed; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
padding: 20px; |
||||
font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', |
||||
BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; |
||||
-webkit-font-smoothing: antialiased; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.sb-heading { |
||||
font-size: 14px; |
||||
font-weight: 600; |
||||
letter-spacing: 0.2px; |
||||
margin: 10px 0; |
||||
padding-right: 25px; |
||||
} |
||||
|
||||
.sb-nopreview { |
||||
display: flex; |
||||
align-content: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.sb-nopreview_main { |
||||
margin: auto; |
||||
padding: 30px; |
||||
border-radius: 10px; |
||||
background: rgba(0, 0, 0, 0.03); |
||||
} |
||||
|
||||
.sb-nopreview_heading { |
||||
text-align: center; |
||||
} |
||||
|
||||
.sb-errordisplay { |
||||
border: 20px solid rgb(187, 49, 49); |
||||
background: #222; |
||||
color: #fff; |
||||
z-index: 999999; |
||||
} |
||||
|
||||
.sb-errordisplay_code { |
||||
padding: 10px; |
||||
background: #000; |
||||
color: #eee; |
||||
font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono', |
||||
'Lucida Console', Consolas, Monaco, monospace; |
||||
} |
||||
|
||||
.sb-errordisplay pre { |
||||
white-space: pre-wrap; |
||||
} |
||||
|
||||
@-webkit-keyframes sb-rotate360 { |
||||
from { |
||||
transform: rotate(0deg); |
||||
} |
||||
to { |
||||
transform: rotate(360deg); |
||||
} |
||||
} |
||||
@keyframes sb-rotate360 { |
||||
from { |
||||
transform: rotate(0deg); |
||||
} |
||||
to { |
||||
transform: rotate(360deg); |
||||
} |
||||
} |
||||
@-webkit-keyframes sb-glow { |
||||
0%, |
||||
100% { |
||||
opacity: 1; |
||||
} |
||||
50% { |
||||
opacity: 0.4; |
||||
} |
||||
} |
||||
@keyframes sb-glow { |
||||
0%, |
||||
100% { |
||||
opacity: 1; |
||||
} |
||||
50% { |
||||
opacity: 0.4; |
||||
} |
||||
} |
||||
|
||||
/* We display the preparing loaders *over* the rendering story */ |
||||
.sb-preparing-story, |
||||
.sb-preparing-docs { |
||||
background-color: white; |
||||
} |
||||
|
||||
.sb-loader { |
||||
-webkit-animation: sb-rotate360 0.7s linear infinite; |
||||
animation: sb-rotate360 0.7s linear infinite; |
||||
border-color: rgba(97, 97, 97, 0.29); |
||||
border-radius: 50%; |
||||
border-style: solid; |
||||
border-top-color: #646464; |
||||
border-width: 2px; |
||||
display: inline-block; |
||||
height: 32px; |
||||
left: 50%; |
||||
margin-left: -16px; |
||||
margin-top: -16px; |
||||
mix-blend-mode: difference; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
top: 50%; |
||||
transition: all 200ms ease-out; |
||||
vertical-align: top; |
||||
width: 32px; |
||||
z-index: 4; |
||||
} |
||||
|
||||
.sb-previewBlock { |
||||
background: #fff; |
||||
border: 1px solid rgba(0, 0, 0, 0.1); |
||||
border-radius: 4px; |
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0; |
||||
margin: 25px auto 40px; |
||||
max-width: 600px; |
||||
} |
||||
|
||||
.sb-previewBlock_header { |
||||
align-items: center; |
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset; |
||||
display: flex; |
||||
gap: 14px; |
||||
height: 40px; |
||||
padding: 0 12px; |
||||
} |
||||
|
||||
.sb-previewBlock_icon { |
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite; |
||||
animation: sb-glow 1.5s ease-in-out infinite; |
||||
background: #e6e6e6; |
||||
height: 14px; |
||||
width: 14px; |
||||
} |
||||
.sb-previewBlock_icon:last-child { |
||||
margin-left: auto; |
||||
} |
||||
|
||||
.sb-previewBlock_body { |
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite; |
||||
animation: sb-glow 1.5s ease-in-out infinite; |
||||
height: 182px; |
||||
position: relative; |
||||
} |
||||
|
||||
.sb-argstableBlock { |
||||
border-collapse: collapse; |
||||
border-spacing: 0; |
||||
font-size: 13px; |
||||
line-height: 20px; |
||||
margin: 25px auto 40px; |
||||
max-width: 600px; |
||||
text-align: left; |
||||
width: 100%; |
||||
} |
||||
.sb-argstableBlock th:first-of-type, |
||||
.sb-argstableBlock td:first-of-type { |
||||
padding-left: 20px; |
||||
} |
||||
.sb-argstableBlock th:nth-of-type(2), |
||||
.sb-argstableBlock td:nth-of-type(2) { |
||||
width: 35%; |
||||
} |
||||
.sb-argstableBlock th:nth-of-type(3), |
||||
.sb-argstableBlock td:nth-of-type(3) { |
||||
width: 15%; |
||||
} |
||||
.sb-argstableBlock th:laste-of-type, |
||||
.sb-argstableBlock td:laste-of-type { |
||||
width: 25%; |
||||
padding-right: 20px; |
||||
} |
||||
.sb-argstableBlock th span, |
||||
.sb-argstableBlock td span { |
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite; |
||||
animation: sb-glow 1.5s ease-in-out infinite; |
||||
background-color: rgba(0, 0, 0, 0.1); |
||||
border-radius: 0; |
||||
box-shadow: none; |
||||
color: transparent; |
||||
} |
||||
.sb-argstableBlock th { |
||||
padding: 10px 15px; |
||||
} |
||||
|
||||
.sb-argstableBlock-body { |
||||
border-radius: 4px; |
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px; |
||||
} |
||||
.sb-argstableBlock-body tr { |
||||
background: transparent; |
||||
overflow: hidden; |
||||
} |
||||
.sb-argstableBlock-body tr:not(:first-child) { |
||||
border-top: 1px solid #e6e6e6; |
||||
} |
||||
.sb-argstableBlock-body tr:first-child td:first-child { |
||||
border-top-left-radius: 4px; |
||||
} |
||||
.sb-argstableBlock-body tr:first-child td:last-child { |
||||
border-top-right-radius: 4px; |
||||
} |
||||
.sb-argstableBlock-body tr:last-child td:first-child { |
||||
border-bottom-left-radius: 4px; |
||||
} |
||||
.sb-argstableBlock-body tr:last-child td:last-child { |
||||
border-bottom-right-radius: 4px; |
||||
} |
||||
.sb-argstableBlock-body td { |
||||
background: #fff; |
||||
padding-bottom: 10px; |
||||
padding-top: 10px; |
||||
vertical-align: top; |
||||
} |
||||
.sb-argstableBlock-body td:not(:first-of-type) { |
||||
padding-left: 15px; |
||||
padding-right: 15px; |
||||
} |
||||
.sb-argstableBlock-body button { |
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite; |
||||
animation: sb-glow 1.5s ease-in-out infinite; |
||||
background-color: rgba(0, 0, 0, 0.1); |
||||
border: 0; |
||||
border-radius: 0; |
||||
box-shadow: none; |
||||
color: transparent; |
||||
display: inline; |
||||
font-size: 12px; |
||||
line-height: 1; |
||||
padding: 10px 16px; |
||||
} |
||||
|
||||
.sb-argstableBlock-summary { |
||||
margin-top: 4px; |
||||
} |
||||
|
||||
.sb-argstableBlock-code { |
||||
margin-right: 4px; |
||||
margin-bottom: 4px; |
||||
padding: 2px 5px; |
||||
}</style><script>/* globals window */ |
||||
/* eslint-disable no-underscore-dangle */ |
||||
try { |
||||
if (window.top !== window) { |
||||
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__; |
||||
window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__; |
||||
window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document; |
||||
} |
||||
} catch (e) { |
||||
// eslint-disable-next-line no-console |
||||
console.warn('unable to connect to top frame for connecting dev tools'); |
||||
} |
||||
|
||||
window.onerror = function onerror(message, source, line, column, err) { |
||||
if (window.CONFIG_TYPE !== 'DEVELOPMENT') return; |
||||
// eslint-disable-next-line no-var, vars-on-top |
||||
var xhr = new window.XMLHttpRequest(); |
||||
xhr.open('POST', '/runtime-error'); |
||||
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); |
||||
xhr.send( |
||||
JSON.stringify({ |
||||
/* eslint-disable object-shorthand */ |
||||
message: message, |
||||
source: source, |
||||
line: line, |
||||
column: column, |
||||
error: err && { message: err.message, name: err.name, stack: err.stack }, |
||||
origin: 'preview', |
||||
/* eslint-enable object-shorthand */ |
||||
}) |
||||
); |
||||
};</script><style>#root[hidden], |
||||
#docs-root[hidden] { |
||||
display: none !important; |
||||
}</style></head><body><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION"; |
||||
|
||||
|
||||
|
||||
window['LOGLEVEL'] = "info"; |
||||
|
||||
|
||||
|
||||
window['FRAMEWORK_OPTIONS'] = {"preprocess":{"defaultLanguages":{"markup":"html","style":"css","script":"javascript"},"filename":"/Users/jerric/CodeBase/TestBase/jerriclynsjohn/svelte-storybook-tailwind/node_modules/@storybook/addon-docs/dist/esm/frameworks/svelte/HOC.svelte"}}; |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
window['FEATURES'] = {"postcss":true,"emotionAlias":true,"warnOnLegacyHierarchySeparator":true}; |
||||
|
||||
|
||||
|
||||
window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx|svelte)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|svelte))$"}];</script><script src="runtime~main.f78042e4.iframe.bundle.js"></script><script src="vendors~main.1b3bf76f.iframe.bundle.js"></script><script src="main.54767de6.iframe.bundle.js"></script></body></html> |
||||
@ -1,59 +0,0 @@ |
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"/><style>html, body { |
||||
overflow: hidden; |
||||
height: 100%; |
||||
width: 100%; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
* { |
||||
box-sizing: border-box; |
||||
}</style><script>/* globals window */ |
||||
/* eslint-disable no-underscore-dangle */ |
||||
try { |
||||
if (window.top !== window) { |
||||
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__; |
||||
} |
||||
} catch (e) { |
||||
// eslint-disable-next-line no-console |
||||
console.warn('unable to connect to top frame for connecting dev tools'); |
||||
} |
||||
|
||||
window.onerror = function onerror(message, source, line, column, err) { |
||||
if (window.CONFIG_TYPE !== 'DEVELOPMENT') return; |
||||
// eslint-disable-next-line no-var, vars-on-top |
||||
var xhr = new window.XMLHttpRequest(); |
||||
xhr.open('POST', '/runtime-error'); |
||||
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); |
||||
xhr.send( |
||||
JSON.stringify({ |
||||
/* eslint-disable object-shorthand */ |
||||
message: message, |
||||
source: source, |
||||
line: line, |
||||
column: column, |
||||
error: err && { message: err.message, name: err.name, stack: err.stack }, |
||||
origin: 'manager', |
||||
/* eslint-enable object-shorthand */ |
||||
}) |
||||
); |
||||
};</script><style>#root[hidden], |
||||
#docs-root[hidden] { |
||||
display: none !important; |
||||
}</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION"; |
||||
|
||||
|
||||
|
||||
window['LOGLEVEL'] = "info"; |
||||
|
||||
|
||||
|
||||
window['FEATURES'] = {"postcss":true,"emotionAlias":true,"warnOnLegacyHierarchySeparator":true}; |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
window['DOCS_MODE'] = false;</script><script src="runtime~main.9b079a98149130f1953b.manager.bundle.js"></script><script src="vendors~main.3ba8f7fb4f290c3ad699.manager.bundle.js"></script><script src="main.21241586911419940a10.manager.bundle.js"></script></body></html> |
||||
@ -1 +0,0 @@ |
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{488:function(module,exports,__webpack_require__){__webpack_require__(489),__webpack_require__(879),__webpack_require__(888),__webpack_require__(889),__webpack_require__(880),__webpack_require__(884),__webpack_require__(883),__webpack_require__(885),__webpack_require__(882),__webpack_require__(886),__webpack_require__(887),__webpack_require__(875),__webpack_require__(890),module.exports=__webpack_require__(881)},555:function(module,exports){}},[[488,2,3]]]); |
||||
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@ |
||||
!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={2:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.e=function requireEnsure(chunkId){var promises=[],installedChunkData=installedChunks[chunkId];if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else{var promise=new Promise((function(resolve,reject){installedChunkData=installedChunks[chunkId]=[resolve,reject]}));promises.push(installedChunkData[2]=promise);var onScriptComplete,script=document.createElement("script");script.charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.src=function jsonpScriptSrc(chunkId){return __webpack_require__.p+""+({}[chunkId]||chunkId)+"."+{0:"d22688a723a4fcd299c2",4:"0f335e2ab2ab47afdc0f",5:"b49a176b296046658b2d",6:"4b100d5016535d0b17b5",7:"cc463686747700bcc4d7",8:"0be70068b1a270e242c0"}[chunkId]+".manager.bundle.js"}(chunkId);var error=new Error;onScriptComplete=function(event){script.onerror=script.onload=null,clearTimeout(timeout);var chunk=installedChunks[chunkId];if(0!==chunk){if(chunk){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,chunk[1](error)}installedChunks[chunkId]=void 0}};var timeout=setTimeout((function(){onScriptComplete({type:"timeout",target:script})}),12e4);script.onerror=script.onload=onScriptComplete,document.head.appendChild(script)}return Promise.all(promises)},__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__.oe=function(err){throw console.error(err),err};var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]); |
||||
@ -1 +0,0 @@ |
||||
!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={5:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.e=function requireEnsure(chunkId){var promises=[],installedChunkData=installedChunks[chunkId];if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else{var promise=new Promise((function(resolve,reject){installedChunkData=installedChunks[chunkId]=[resolve,reject]}));promises.push(installedChunkData[2]=promise);var onScriptComplete,script=document.createElement("script");script.charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.src=function jsonpScriptSrc(chunkId){return __webpack_require__.p+""+({}[chunkId]||chunkId)+"."+{0:"47e7f5d9",1:"a1654884",2:"b59bb7f4",3:"8bb2173c",7:"c057e38f",8:"779e82fa",9:"402e74db",10:"bd76e6ec",11:"1daec09a"}[chunkId]+".iframe.bundle.js"}(chunkId);var error=new Error;onScriptComplete=function(event){script.onerror=script.onload=null,clearTimeout(timeout);var chunk=installedChunks[chunkId];if(0!==chunk){if(chunk){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,chunk[1](error)}installedChunks[chunkId]=void 0}};var timeout=setTimeout((function(){onScriptComplete({type:"timeout",target:script})}),12e4);script.onerror=script.onload=onScriptComplete,document.head.appendChild(script)}return Promise.all(promises)},__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__.oe=function(err){throw console.error(err),err};var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]); |
||||
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 8.3 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
File diff suppressed because one or more lines are too long
@ -1,57 +0,0 @@ |
||||
/* |
||||
object-assign |
||||
(c) Sindre Sorhus |
||||
@license MIT |
||||
*/ |
||||
|
||||
/*! |
||||
* The buffer module from node.js, for the browser. |
||||
* |
||||
* @author Feross Aboukhadijeh <feross@feross.org> <http://feross.org> |
||||
* @license MIT |
||||
*/ |
||||
|
||||
/*! |
||||
* https://github.com/es-shims/es5-shim |
||||
* @license es5-shim Copyright 2009-2020 by contributors, MIT License |
||||
* see https://github.com/es-shims/es5-shim/blob/master/LICENSE |
||||
*/ |
||||
|
||||
/*! |
||||
* https://github.com/paulmillr/es6-shim |
||||
* @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com) |
||||
* and contributors, MIT License |
||||
* es6-shim: v0.35.4 |
||||
* see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE |
||||
* Details and documentation: |
||||
* https://github.com/paulmillr/es6-shim/ |
||||
*/ |
||||
|
||||
/*! |
||||
* isobject <https://github.com/jonschlinkert/isobject> |
||||
* |
||||
* Copyright (c) 2014-2017, Jon Schlinkert. |
||||
* Released under the MIT License. |
||||
*/ |
||||
|
||||
/** @license React v16.13.1 |
||||
* react-is.production.min.js |
||||
* |
||||
* Copyright (c) Facebook, Inc. and its affiliates. |
||||
* |
||||
* This source code is licensed under the MIT license found in the |
||||
* LICENSE file in the root directory of this source tree. |
||||
*/ |
||||
|
||||
/** @license React v17.0.2 |
||||
* react.production.min.js |
||||
* |
||||
* Copyright (c) Facebook, Inc. and its affiliates. |
||||
* |
||||
* This source code is licensed under the MIT license found in the |
||||
* LICENSE file in the root directory of this source tree. |
||||
*/ |
||||
|
||||
//! stable.js 0.1.8, https://github.com/Two-Screen/stable |
||||
|
||||
//! © 2018 Angry Bytes and contributors. MIT licensed. |
||||
@ -1 +0,0 @@ |
||||
{"version":3,"file":"vendors~main.1b3bf76f.iframe.bundle.js","sources":[],"mappings":";;;;;A","sourceRoot":""} |
||||
File diff suppressed because one or more lines are too long
@ -1,104 +0,0 @@ |
||||
/* |
||||
object-assign |
||||
(c) Sindre Sorhus |
||||
@license MIT |
||||
*/ |
||||
|
||||
/*! |
||||
* Fuse.js v3.6.1 - Lightweight fuzzy-search (http://fusejs.io) |
||||
* |
||||
* Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me) |
||||
* All Rights Reserved. Apache Software License 2.0 |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
*/ |
||||
|
||||
/*! |
||||
* https://github.com/es-shims/es5-shim |
||||
* @license es5-shim Copyright 2009-2020 by contributors, MIT License |
||||
* see https://github.com/es-shims/es5-shim/blob/master/LICENSE |
||||
*/ |
||||
|
||||
/*! |
||||
* https://github.com/paulmillr/es6-shim |
||||
* @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com) |
||||
* and contributors, MIT License |
||||
* es6-shim: v0.35.4 |
||||
* see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE |
||||
* Details and documentation: |
||||
* https://github.com/paulmillr/es6-shim/ |
||||
*/ |
||||
|
||||
/*! |
||||
* isobject <https://github.com/jonschlinkert/isobject> |
||||
* |
||||
* Copyright (c) 2014-2017, Jon Schlinkert. |
||||
* Released under the MIT License. |
||||
*/ |
||||
|
||||
/** |
||||
* React Router DOM v6.2.1 |
||||
* |
||||
* Copyright (c) Remix Software Inc. |
||||
* |
||||
* This source code is licensed under the MIT license found in the |
||||
* LICENSE.md file in the root directory of this source tree. |
||||
* |
||||
* @license MIT |
||||
*/ |
||||
|
||||
/** |
||||
* React Router v6.2.1 |
||||
* |
||||
* Copyright (c) Remix Software Inc. |
||||
* |
||||
* This source code is licensed under the MIT license found in the |
||||
* LICENSE.md file in the root directory of this source tree. |
||||
* |
||||
* @license MIT |
||||
*/ |
||||
|
||||
/** @license React v0.20.2 |
||||
* scheduler.production.min.js |
||||
* |
||||
* Copyright (c) Facebook, Inc. and its affiliates. |
||||
* |
||||
* This source code is licensed under the MIT license found in the |
||||
* LICENSE file in the root directory of this source tree. |
||||
*/ |
||||
|
||||
/** @license React v16.13.1 |
||||
* react-is.production.min.js |
||||
* |
||||
* Copyright (c) Facebook, Inc. and its affiliates. |
||||
* |
||||
* This source code is licensed under the MIT license found in the |
||||
* LICENSE file in the root directory of this source tree. |
||||
*/ |
||||
|
||||
/** @license React v17.0.2 |
||||
* react-dom.production.min.js |
||||
* |
||||
* Copyright (c) Facebook, Inc. and its affiliates. |
||||
* |
||||
* This source code is licensed under the MIT license found in the |
||||
* LICENSE file in the root directory of this source tree. |
||||
*/ |
||||
|
||||
/** @license React v17.0.2 |
||||
* react-is.production.min.js |
||||
* |
||||
* Copyright (c) Facebook, Inc. and its affiliates. |
||||
* |
||||
* This source code is licensed under the MIT license found in the |
||||
* LICENSE file in the root directory of this source tree. |
||||
*/ |
||||
|
||||
/** @license React v17.0.2 |
||||
* react.production.min.js |
||||
* |
||||
* Copyright (c) Facebook, Inc. and its affiliates. |
||||
* |
||||
* This source code is licensed under the MIT license found in the |
||||
* LICENSE file in the root directory of this source tree. |
||||
*/ |
||||
@ -1,4 +1,12 @@ |
||||
/storybook-static/** |
||||
/.out/** |
||||
/public/build/** |
||||
/node_modules/** |
||||
.DS_Store |
||||
node_modules |
||||
.env |
||||
.env.* |
||||
!.env.example |
||||
dist |
||||
storybook-static |
||||
|
||||
# Ignore files for PNPM, NPM and YARN |
||||
pnpm-lock.yaml |
||||
package-lock.json |
||||
yarn.lock |
||||
|
||||
@ -0,0 +1,35 @@ |
||||
{ |
||||
"arrowParens": "avoid", |
||||
"bracketSpacing": false, |
||||
"bracketSameLine": true, |
||||
"singleQuote": true, |
||||
"trailingComma": "none", |
||||
"printWidth": 80, |
||||
"svelteSortOrder": "options-scripts-markup-styles", |
||||
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], |
||||
"pluginSearchDirs": false, |
||||
"overrides": [ |
||||
{ |
||||
"files": "*.svelte", |
||||
"options": {"parser": "svelte", "printWidth": 100} |
||||
}, |
||||
{ |
||||
"files": [ |
||||
"*.json", |
||||
"postcss.config.js", |
||||
"rollup.config.js", |
||||
"tailwind.config.js", |
||||
"stylelint.config.js" |
||||
], |
||||
"options": { |
||||
"printWidth": 150 |
||||
} |
||||
}, |
||||
{ |
||||
"files": ["*.json"], |
||||
"options": { |
||||
"parser": "json" |
||||
} |
||||
} |
||||
] |
||||
} |
||||
@ -1,34 +0,0 @@ |
||||
module.exports = { |
||||
arrowParens: 'avoid', |
||||
bracketSpacing: false, |
||||
singleQuote: true, |
||||
printWidth: 80, |
||||
svelteSortOrder: 'options-scripts-markup-styles', |
||||
trailingComma: 'none', |
||||
overrides: [ |
||||
{ |
||||
files: ['*.svelte', '*.html'], |
||||
options: { |
||||
printWidth: 120 |
||||
} |
||||
}, |
||||
{ |
||||
files: [ |
||||
'*.json', |
||||
'postcss.config.js', |
||||
'rollup.config.js', |
||||
'tailwind.config.js', |
||||
'stylelint.config.js' |
||||
], |
||||
options: { |
||||
printWidth: 150 |
||||
} |
||||
}, |
||||
{ |
||||
files: ['*.json'], |
||||
options: { |
||||
parser: 'json' |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
@ -0,0 +1,10 @@ |
||||
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' |
||||
}); |
||||
@ -1,26 +1,18 @@ |
||||
module.exports = { |
||||
stories: [ |
||||
'../src/**/*.stories.mdx', |
||||
'../src/**/*.stories.@(js|jsx|ts|tsx|svelte)' |
||||
], |
||||
/** @type { import('@storybook/svelte-vite').StorybookConfig } */ |
||||
const config = { |
||||
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'], |
||||
addons: [ |
||||
'@storybook/addon-svelte-csf', |
||||
'@storybook/addon-links', |
||||
'@storybook/addon-essentials', |
||||
'@storybook/addon-svelte-csf', |
||||
'@storybook/addon-storysource', |
||||
'@storybook/addon-a11y', |
||||
{ |
||||
name: '@storybook/addon-postcss', |
||||
options: { |
||||
postcssLoaderOptions: { |
||||
implementation: require('postcss'), |
||||
}, |
||||
}, |
||||
}, |
||||
|
||||
'@storybook/addon-interactions' |
||||
], |
||||
framework: '@storybook/svelte', |
||||
svelteOptions: { |
||||
preprocess: require('svelte-preprocess')({ postcss: true }) |
||||
framework: { |
||||
name: '@storybook/svelte-vite', |
||||
options: {} |
||||
}, |
||||
docs: { |
||||
autodocs: 'tag' |
||||
} |
||||
}; |
||||
export default config; |
||||
|
||||
@ -0,0 +1 @@ |
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> |
||||
@ -0,0 +1,6 @@ |
||||
import {addons} from '@storybook/addons'; |
||||
import customTheme from './CustomTheme'; |
||||
|
||||
addons.setConfig({ |
||||
theme: customTheme |
||||
}); |
||||
@ -0,0 +1,6 @@ |
||||
<style> |
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600;700&display=swap'); |
||||
</style> |
||||
<script> |
||||
window.global = window; |
||||
</script> |
||||
@ -1,9 +1,6 @@ |
||||
{ |
||||
"recommendations": [ |
||||
"svelte.svelte-vscode", |
||||
"dbaeumer.vscode-eslint", |
||||
"esbenp.prettier-vscode", |
||||
"EditorConfig.EditorConfig", |
||||
"bradlc.vscode-tailwindcss" |
||||
] |
||||
"recommendations": ["svelte.svelte-vscode","dbaeumer.vscode-eslint", |
||||
"esbenp.prettier-vscode", |
||||
"EditorConfig.EditorConfig", |
||||
"bradlc.vscode-tailwindcss"] |
||||
} |
||||
|
||||
|
Before Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 30 KiB |
@ -0,0 +1,20 @@ |
||||
<!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.js"></script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,33 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"moduleResolution": "Node", |
||||
"target": "ESNext", |
||||
"module": "ESNext", |
||||
/** |
||||
* svelte-preprocess cannot figure out whether you have |
||||
* a value or a type, so tell TypeScript to enforce using |
||||
* `import type` instead of `import` for Types. |
||||
*/ |
||||
"importsNotUsedAsValues": "error", |
||||
"isolatedModules": true, |
||||
"resolveJsonModule": true, |
||||
/** |
||||
* To have warnings / errors of the Svelte compiler at the |
||||
* correct position, enable source maps by default. |
||||
*/ |
||||
"sourceMap": true, |
||||
"esModuleInterop": true, |
||||
"skipLibCheck": true, |
||||
"forceConsistentCasingInFileNames": true, |
||||
/** |
||||
* Typecheck JS in `.svelte` and `.js` files by default. |
||||
* Disable this if you'd like to use dynamic types. |
||||
*/ |
||||
"checkJs": true |
||||
}, |
||||
/** |
||||
* Use global.d.ts instead of compilerOptions.types |
||||
* to avoid limiting type declarations. |
||||
*/ |
||||
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"] |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -1,57 +1,44 @@ |
||||
{ |
||||
"name": "svelte-storybook-tailwind", |
||||
"author": "Jerric Lyns John", |
||||
"license": "MIT", |
||||
"version": "0.0.3", |
||||
"private": true, |
||||
"version": "0.0.0", |
||||
"type": "module", |
||||
"scripts": { |
||||
"build": "rollup -c", |
||||
"dev": "rollup -c -w", |
||||
"start": "sirv public --no-clear", |
||||
"storybook": "start-storybook -p 6006", |
||||
"build-storybook": "build-storybook", |
||||
"static-stories": "build-storybook -c .storybook -o .out", |
||||
"format": "prettier --check .", |
||||
"format-fix": "prettier --write .", |
||||
"prelint": "npm run format-fix", |
||||
"lint": "eslint --ext .cjs,.js,.ts,.json,.svelte .", |
||||
"lint-fix": "eslint --fix --ext .cjs,.js,.ts,.json,.svelte ." |
||||
"dev": "vite", |
||||
"build": "vite build", |
||||
"preview": "vite preview", |
||||
"storybook": "storybook dev -p 6006 -s public", |
||||
"build-storybook": "storybook build" |
||||
}, |
||||
"devDependencies": { |
||||
"@babel/core": "^7.16.7", |
||||
"@rollup/plugin-commonjs": "^17.0.0", |
||||
"@rollup/plugin-node-resolve": "^11.0.0", |
||||
"@storybook/addon-a11y": "^6.4.13", |
||||
"@storybook/addon-actions": "^6.4.13", |
||||
"@storybook/addon-essentials": "^6.4.13", |
||||
"@storybook/addon-links": "^6.4.13", |
||||
"@storybook/addon-postcss": "^2.0.0", |
||||
"@storybook/addon-storysource": "^6.4.13", |
||||
"@storybook/addon-svelte-csf": "^1.1.0", |
||||
"@storybook/svelte": "^6.4.13", |
||||
"autoprefixer": "^10.4.2", |
||||
"babel-loader": "^8.2.3", |
||||
"eslint": "^8.7.0", |
||||
"eslint-config-prettier": "^8.3.0", |
||||
"@storybook/addon-essentials": "^7.0.0-beta.51", |
||||
"@storybook/addon-interactions": "^7.0.0-beta.51", |
||||
"@storybook/addon-links": "^7.0.0-beta.51", |
||||
"@storybook/addon-svelte-csf": "^3.0.0-next.3", |
||||
"@storybook/blocks": "^7.0.0-beta.51", |
||||
"@storybook/svelte": "^7.0.0-beta.51", |
||||
"@storybook/svelte-vite": "^7.0.0-beta.51", |
||||
"@storybook/testing-library": "^0.0.14-next.1", |
||||
"@sveltejs/vite-plugin-svelte": "^2.0.2", |
||||
"autoprefixer": "^10.4.13", |
||||
"eslint": "^8.34.0", |
||||
"eslint-config-prettier": "^8.6.0", |
||||
"eslint-plugin-html": "^7.1.0", |
||||
"eslint-plugin-json": "^3.1.0", |
||||
"eslint-plugin-svelte3": "^3.4.0", |
||||
"postcss": "^8.4.5", |
||||
"postcss-cli": "^9.1.0", |
||||
"prettier": "^2.5.1", |
||||
"prettier-plugin-svelte": "^2.6.0", |
||||
"rollup": "^2.3.4", |
||||
"rollup-plugin-css-only": "^3.1.0", |
||||
"rollup-plugin-livereload": "^2.0.0", |
||||
"rollup-plugin-postcss": "^4.0.2", |
||||
"rollup-plugin-svelte": "^7.0.0", |
||||
"rollup-plugin-terser": "^7.0.0", |
||||
"stylelint": "^14.2.0", |
||||
"stylelint-config-standard": "^24.0.0", |
||||
"svelte": "^3.46.2", |
||||
"svelte-loader": "^3.1.2", |
||||
"svelte-preprocess": "^4.10.1", |
||||
"tailwindcss": "^3.0.15" |
||||
}, |
||||
"dependencies": { |
||||
"sirv-cli": "^2.0.0" |
||||
"eslint-plugin-storybook": "^0.6.10", |
||||
"eslint-plugin-svelte3": "^4.0.0", |
||||
"postcss": "^8.4.21", |
||||
"prettier": "^2.8.4", |
||||
"prettier-plugin-svelte": "^2.9.0", |
||||
"prettier-plugin-tailwindcss": "^0.2.3", |
||||
"react": "^18.2.0", |
||||
"react-dom": "^18.2.0", |
||||
"storybook": "^7.0.0-beta.51", |
||||
"stylelint": "^15.2.0", |
||||
"stylelint-config-standard": "^30.0.1", |
||||
"svelte": "^3.55.1", |
||||
"svelte-loader": "^3.1.6", |
||||
"tailwindcss": "^3.2.7", |
||||
"vite": "^4.1.0" |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,6 @@ |
||||
module.exports = { |
||||
plugins: { |
||||
tailwindcss: {}, |
||||
autoprefixer: {}, |
||||
}, |
||||
} |
||||
@ -1,6 +0,0 @@ |
||||
module.exports = { |
||||
plugins: { |
||||
tailwindcss: {}, |
||||
autoprefixer: {} |
||||
} |
||||
}; |
||||
|
Before Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
@ -1,16 +0,0 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<meta name="viewport" content="width=device-width,initial-scale=1" /> |
||||
|
||||
<title>Svelte + Tailwind + Storybook</title> |
||||
|
||||
<link rel="icon" type="image/png" href="/favicon.png" /> |
||||
<link rel="stylesheet" href="/build/main.css" /> |
||||
|
||||
<script defer src="/build/bundle.js"></script> |
||||
</head> |
||||
|
||||
<body></body> |
||||
</html> |
||||
@ -1,78 +0,0 @@ |
||||
import svelte from 'rollup-plugin-svelte'; |
||||
import commonjs from '@rollup/plugin-commonjs'; |
||||
import resolve from '@rollup/plugin-node-resolve'; |
||||
import livereload from 'rollup-plugin-livereload'; |
||||
import {terser} from 'rollup-plugin-terser'; |
||||
import postcss from 'rollup-plugin-postcss'; |
||||
import sveltePreprocess from 'svelte-preprocess'; |
||||
|
||||
const production = !process.env.ROLLUP_WATCH; |
||||
|
||||
function serve() { |
||||
let server; |
||||
|
||||
function toExit() { |
||||
if (server) server.kill(0); |
||||
} |
||||
|
||||
return { |
||||
writeBundle() { |
||||
if (server) return; |
||||
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { |
||||
stdio: ['ignore', 'inherit', 'inherit'], |
||||
shell: true |
||||
}); |
||||
|
||||
process.on('SIGTERM', toExit); |
||||
process.on('exit', toExit); |
||||
} |
||||
}; |
||||
} |
||||
|
||||
export default { |
||||
input: 'src/main.js', |
||||
output: { |
||||
sourcemap: true, |
||||
format: 'iife', |
||||
name: 'app', |
||||
file: 'public/build/bundle.js' |
||||
}, |
||||
plugins: [ |
||||
svelte({ |
||||
preprocess: sveltePreprocess({postcss: true}), |
||||
compilerOptions: { |
||||
// enable run-time checks when not in production
|
||||
dev: !production |
||||
} |
||||
}), |
||||
// we'll extract any component CSS out into
|
||||
// a separate file - better for performance
|
||||
postcss({extract: 'main.css'}), |
||||
|
||||
// If you have external dependencies installed from
|
||||
// npm, you'll most likely need these plugins. In
|
||||
// some cases you'll need additional configuration -
|
||||
// consult the documentation for details:
|
||||
// https://github.com/rollup/plugins/tree/master/packages/commonjs
|
||||
resolve({ |
||||
browser: true, |
||||
dedupe: ['svelte'] |
||||
}), |
||||
commonjs(), |
||||
|
||||
// In dev mode, call `npm run start` once
|
||||
// the bundle has been generated
|
||||
!production && serve(), |
||||
|
||||
// Watch the `public` directory and refresh the
|
||||
// browser on changes when not in production
|
||||
!production && livereload('public'), |
||||
|
||||
// If we're building for production (npm run build
|
||||
// instead of npm run dev), minify
|
||||
production && terser() |
||||
], |
||||
watch: { |
||||
clearScreen: false |
||||
} |
||||
}; |
||||
@ -1,12 +1,5 @@ |
||||
<script> |
||||
import Nav from './components/nav.svelte'; |
||||
import Button from './components/Button.svelte'; |
||||
let menuItems = [ |
||||
{link: '#', name: 'Docs'}, |
||||
{link: '#', name: 'Home'}, |
||||
{link: '#', name: 'Blog'} |
||||
]; |
||||
import Main from './lib/pages/Main.svelte'; |
||||
</script> |
||||
|
||||
<Nav {menuItems} /> |
||||
<Button text="Something" /> |
||||
<Main /> |
||||
|
||||
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 227 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
@ -1,19 +0,0 @@ |
||||
<script> |
||||
export let text = ''; |
||||
</script> |
||||
|
||||
<button class="btn-outline btn-outline-color">{text}</button> |
||||
|
||||
<style> |
||||
.btn-outline { |
||||
@apply font-semibold py-2 px-4; |
||||
} |
||||
|
||||
.btn-outline-color { |
||||
@apply bg-transparent text-blue-700 border border-blue-500 rounded; |
||||
} |
||||
|
||||
.btn-outline-color:hover { |
||||
@apply bg-red-500 text-white border-transparent; |
||||
} |
||||
</style> |
||||
@ -1,55 +0,0 @@ |
||||
<script> |
||||
export let menuItems = []; |
||||
</script> |
||||
|
||||
<nav class="flex flex-wrap items-center justify-between p-6 bg-teal-500"> |
||||
<div class="flex items-center flex-shrink-0 mr-6 text-white"> |
||||
<svg |
||||
class="w-8 h-8 mr-2 fill-current" |
||||
width="54" |
||||
height="54" |
||||
viewBox="0 0 54 54" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
> |
||||
<path |
||||
d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 |
||||
9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 |
||||
0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 |
||||
6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 |
||||
9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 |
||||
0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" |
||||
/> |
||||
</svg> |
||||
<span class="text-xl font-semibold tracking-tight">Tailwind CSS</span> |
||||
</div> |
||||
<div class="block lg:hidden"> |
||||
<button |
||||
class="flex items-center px-3 py-2 text-teal-200 border border-teal-400 rounded hover:text-white hover:border-white" |
||||
> |
||||
<svg class="w-3 h-3 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> |
||||
<title>Menu</title> |
||||
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /> |
||||
</svg> |
||||
</button> |
||||
</div> |
||||
<div class="flex-grow block w-full lg:flex lg:items-center lg:w-auto"> |
||||
<div class="text-sm lg:flex-grow"> |
||||
{#each menuItems as item} |
||||
<a |
||||
href={item.link} |
||||
class="block mt-4 mr-4 text-teal-200 lg:inline-block lg:mt-0 hover:text-white" |
||||
> |
||||
{item.name} |
||||
</a> |
||||
{/each} |
||||
</div> |
||||
<div> |
||||
<a |
||||
href="#" |
||||
class="inline-block px-4 py-2 mt-4 text-sm leading-none text-white border border-white rounded hover:border-transparent hover:text-teal-500 hover:bg-white lg:mt-0" |
||||
> |
||||
Download |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</nav> |
||||
|
After Width: | Height: | Size: 4.9 KiB |
@ -0,0 +1,32 @@ |
||||
<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> |
||||
@ -0,0 +1,35 @@ |
||||
<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> |
||||
@ -0,0 +1,12 @@ |
||||
<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> |
||||
@ -0,0 +1 @@ |
||||
<h1 class="text-6xl font-bold text-slate-700"><slot /></h1> |
||||
@ -0,0 +1,26 @@ |
||||
<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> |
||||
@ -0,0 +1,68 @@ |
||||
<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} |
||||
@ -0,0 +1,12 @@ |
||||
<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> |
||||
@ -0,0 +1,4 @@ |
||||
<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> |
||||
@ -0,0 +1,108 @@ |
||||
import {Meta} from '@storybook/blocks'; |
||||
import Social from '../assets/social.jpg'; |
||||
|
||||
<Meta title="Intro/Welcome" /> |
||||
|
||||
# Svelte 3.5 + Storybook 7 + 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 |
||||
|
||||
npm |
||||
npm run dev |
||||
npm 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 `npm create vite@latest` |
||||
- Select Svelte + Javascript from the CLI |
||||
- You have a basic Svelte + Vite app ready |
||||
|
||||
#### Add Tailwind to the project |
||||
|
||||
- Install dependencies `npm 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/index.css` |
||||
|
||||
```css |
||||
@tailwind base; |
||||
@tailwind components; |
||||
@tailwind utilities; |
||||
``` |
||||
|
||||
- Import CSS into `./src/main.js` |
||||
|
||||
```js |
||||
import './index.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 `npx storybook@next init` |
||||
- Hook up TailwindCSS by importing the CSS into `./.storybook/preview.js` |
||||
|
||||
```js |
||||
import '../src/index.css'; |
||||
|
||||
export const parameters = { |
||||
backgrounds: { |
||||
default: 'light' |
||||
}, |
||||
actions: {argTypesRegex: '^on[A-Z].*'}, |
||||
controls: { |
||||
matchers: { |
||||
color: /(background|color)$/i, |
||||
date: /Date$/ |
||||
} |
||||
} |
||||
}; |
||||
``` |
||||
|
||||
- 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. |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue