feat: add initial TypeScript and ESLint configurations for library and React applications

- Created TypeScript configuration files for library and React applications.
- Added ESLint configurations for library, React, and Storybook.
- Implemented a basic Button component in the UI package.
- Set up Vite for the docs development environment.
This commit is contained in:
Firman Ramdhani
2026-01-09 18:26:12 +07:00
parent ed949e4174
commit 554c5fbee3
83 changed files with 63031 additions and 42 deletions
+4
View File
@@ -0,0 +1,4 @@
/** @type {import("eslint").Linter.Config} */
module.exports = {
extends: ['@repo/eslint-config/storybook.js'],
};
+38
View File
@@ -0,0 +1,38 @@
import { dirname, join, resolve } from 'path';
function getAbsolutePath(value) {
return dirname(require.resolve(join(value, 'package.json')));
}
const config = {
stories: ['../stories/*.stories.tsx', '../stories/**/*.stories.tsx'],
addons: [getAbsolutePath('@storybook/addon-links'), getAbsolutePath('@storybook/addon-essentials')],
framework: {
name: getAbsolutePath('@storybook/react-vite'),
options: {},
},
core: {},
async viteFinal(config, { configType }) {
// customize the Vite config here
return {
...config,
define: { 'process.env': {} },
resolve: {
alias: [
{
find: 'ui',
replacement: resolve(__dirname, '../../../packages/ui/'),
},
],
},
};
},
docs: {
autodocs: true,
},
};
export default config;
+33
View File
@@ -0,0 +1,33 @@
{
"name": "docs-dev",
"version": "0.0.0",
"type": "module",
"private": true,
"scripts": {
"dev": "storybook dev -p 6006",
"build": "storybook build --docs",
"preview-storybook": "serve storybook-static",
"clean": "rm -rf .turbo node_modules",
"lint": "eslint ./stories/*.stories.tsx --max-warnings 0"
},
"dependencies": {
"@repo/ui": "workspace:*",
"react": "^19.2.3",
"react-dom": "^19.2.3"
},
"devDependencies": {
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"@storybook/addon-actions": "^8.2.6",
"@storybook/addon-essentials": "^8.2.6",
"@storybook/addon-links": "^8.2.6",
"@storybook/react": "^8.2.6",
"@storybook/react-vite": "^8.2.6",
"@vitejs/plugin-react": "^5.1.2",
"eslint": "^8.57.1",
"serve": "^14.2.1",
"storybook": "^8.2.6",
"typescript": "5.5.4",
"vite": "^5.1.4"
}
}
+46
View File
@@ -0,0 +1,46 @@
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from '@repo/ui';
const meta: Meta<typeof Button> = {
component: Button,
argTypes: {
type: {
control: { type: 'radio' },
options: ['button', 'submit', 'reset'],
},
},
};
export default meta;
type Story = StoryObj<typeof Button>;
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/react/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
render: (props) => (
<Button
{...props}
onClick={(): void => {
// eslint-disable-next-line no-alert -- alert for demo
alert('Hello from Turborepo!');
}}
>
Hello
</Button>
),
name: 'Button',
args: {
children: 'Hello',
type: 'button',
style: {
color: 'blue',
border: '1px solid gray',
padding: 10,
borderRadius: 10,
},
},
};
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
@@ -0,0 +1 @@
var u=Object.create,a=Object.defineProperty,s=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,c=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty,l=(e,r)=>function(){return e&&(r=(0,e[o(e)[0]])(e=0)),r},v=(e,r)=>function(){return r||(0,e[o(e)[0]])((r={exports:{}}).exports,r),r.exports},b=(e,r)=>{for(var t in r)a(e,t,{get:r[t],enumerable:!0})},n=(e,r,t,p)=>{if(r&&typeof r=="object"||typeof r=="function")for(let _ of o(r))!O.call(e,_)&&_!==t&&a(e,_,{get:()=>r[_],enumerable:!(p=s(r,_))||p.enumerable});return e},P=(e,r,t)=>(t=e!=null?u(c(e)):{},n(!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e)),y=e=>n(a({},"__esModule",{value:!0}),e);export{P as _,v as a,l as b,y as c,b as d};
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
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
import{R as e}from"./index-DAME-NcR.js";const o={},c=e.createContext(o);function u(n){const t=e.useContext(c);return e.useMemo(function(){return typeof n=="function"?n(t):{...t,...n}},[t,n])}function m(n){let t;return n.disableParentContext?t=typeof n.components=="function"?n.components(o):n.components||o:t=u(n.components),e.createElement(c.Provider,{value:t},n.children)}export{m as MDXProvider,u as useMDXComponents};
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,6 @@
function l(o){for(var f=[],i=1;i<arguments.length;i++)f[i-1]=arguments[i];var n=Array.from(typeof o=="string"?[o]:o);n[n.length-1]=n[n.length-1].replace(/\r?\n([\t ]*)$/,"");var s=n.reduce(function(t,g){var a=g.match(/\n([\t ]+|(?!\s).)/g);return a?t.concat(a.map(function(u){var r,e;return(e=(r=u.match(/[\t ]/g))===null||r===void 0?void 0:r.length)!==null&&e!==void 0?e:0})):t},[]);if(s.length){var d=new RegExp(`
[ ]{`+Math.min.apply(Math,s)+"}","g");n=n.map(function(t){return t.replace(d,`
`)})}n[0]=n[0].replace(/^\r?\n/,"");var c=n[0];return f.forEach(function(t,g){var a=c.match(/(?:^|\n)( *)$/),u=a?a[1]:"",r=t;typeof t=="string"&&t.includes(`
`)&&(r=String(t).split(`
`).map(function(e,h){return h===0?e:""+u+e}).join(`
`)),c+=r+n[g+1]}),c}export{l as d};
@@ -0,0 +1,9 @@
var o={exports:{}},s={};/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var E=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function l(v,r,t){var e=null;if(t!==void 0&&(e=""+t),r.key!==void 0&&(e=""+r.key),"key"in r){t={};for(var x in r)x!=="key"&&(t[x]=r[x])}else t=r;return r=t.ref,{$$typeof:E,type:v,key:e,ref:r!==void 0?r:null,props:t}}s.Fragment=n;s.jsx=l;s.jsxs=l;o.exports=s;var u=o.exports;export{u as j};
@@ -0,0 +1,34 @@
import{d as P}from"./index-DrFu-skq.js";const{useEffect:_,useMemo:h}=__STORYBOOK_MODULE_PREVIEW_API__,{global:j}=__STORYBOOK_MODULE_GLOBAL__,{logger:X}=__STORYBOOK_MODULE_CLIENT_LOGGER__;var p="backgrounds",U={light:{name:"light",value:"#F8F8F8"},dark:{name:"dark",value:"#333"}},{document:b,window:O}=j,D=()=>{var r;return!!((r=O==null?void 0:O.matchMedia("(prefers-reduced-motion: reduce)"))!=null&&r.matches)},A=r=>{(Array.isArray(r)?r:[r]).forEach(N)},N=r=>{var t;let e=b.getElementById(r);e&&((t=e.parentElement)==null||t.removeChild(e))},F=(r,e)=>{let t=b.getElementById(r);if(t)t.innerHTML!==e&&(t.innerHTML=e);else{let o=b.createElement("style");o.setAttribute("id",r),o.innerHTML=e,b.head.appendChild(o)}},Y=(r,e,t)=>{var a;let o=b.getElementById(r);if(o)o.innerHTML!==e&&(o.innerHTML=e);else{let d=b.createElement("style");d.setAttribute("id",r),d.innerHTML=e;let i=`addon-backgrounds-grid${t?`-docs-${t}`:""}`,n=b.getElementById(i);n?(a=n.parentElement)==null||a.insertBefore(d,n):b.head.appendChild(d)}},W={cellSize:100,cellAmount:10,opacity:.8},w="addon-backgrounds",R="addon-backgrounds-grid",q=D()?"":"transition: background-color 0.3s;",J=(r,e)=>{let{globals:t,parameters:o,viewMode:a,id:d}=e,{options:i=U,disable:n,grid:s=W}=o[p]||{},c=t[p]||{},u=c.value,l=u?i[u]:void 0,$=(l==null?void 0:l.value)||"transparent",f=c.grid||!1,y=!!l&&!n,m=a==="docs"?`#anchor--${d} .docs-story`:".sb-show-main",E=a==="docs"?`#anchor--${d} .docs-story`:".sb-show-main",H=o.layout===void 0||o.layout==="padded",L=a==="docs"?20:H?16:0,{cellAmount:k,cellSize:g,opacity:x,offsetX:v=L,offsetY:S=L}=s,B=a==="docs"?`${w}-docs-${d}`:`${w}-color`,G=a==="docs"?d:null;_(()=>{let M=`
${m} {
background: ${$} !important;
${q}
}`;if(!y){A(B);return}Y(B,M,G)},[m,B,G,y,$]);let T=a==="docs"?`${R}-docs-${d}`:`${R}`;return _(()=>{if(!f){A(T);return}let M=[`${g*k}px ${g*k}px`,`${g*k}px ${g*k}px`,`${g}px ${g}px`,`${g}px ${g}px`].join(", "),K=`
${E} {
background-size: ${M} !important;
background-position: ${v}px ${S}px, ${v}px ${S}px, ${v}px ${S}px, ${v}px ${S}px !important;
background-blend-mode: difference !important;
background-image: linear-gradient(rgba(130, 130, 130, ${x}) 1px, transparent 1px),
linear-gradient(90deg, rgba(130, 130, 130, ${x}) 1px, transparent 1px),
linear-gradient(rgba(130, 130, 130, ${x/2}) 1px, transparent 1px),
linear-gradient(90deg, rgba(130, 130, 130, ${x/2}) 1px, transparent 1px) !important;
}
`;F(T,K)},[k,g,E,T,f,v,S,x]),r()},Q=(r,e=[],t)=>{if(r==="transparent")return"transparent";if(e.find(a=>a.value===r)||r)return r;let o=e.find(a=>a.name===t);if(o)return o.value;if(t){let a=e.map(d=>d.name).join(", ");X.warn(P`
Backgrounds Addon: could not find the default color "${t}".
These are the available colors for your story based on your configuration:
${a}.
`)}return"transparent"},Z=(r,e)=>{var u;let{globals:t,parameters:o}=e,a=(u=t[p])==null?void 0:u.value,d=o[p],i=h(()=>d.disable?"transparent":Q(a,d.values,d.default),[d,a]),n=h(()=>i&&i!=="transparent",[i]),s=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",c=h(()=>`
${s} {
background: ${i} !important;
${D()?"":"transition: background-color 0.3s;"}
}
`,[i,s]);return _(()=>{let l=e.viewMode==="docs"?`addon-backgrounds-docs-${e.id}`:"addon-backgrounds-color";if(!n){A(l);return}Y(l,c,e.viewMode==="docs"?e.id:null)},[n,c,e]),r()},V=(r,e)=>{var y;let{globals:t,parameters:o}=e,a=o[p].grid,d=((y=t[p])==null?void 0:y.grid)===!0&&a.disable!==!0,{cellAmount:i,cellSize:n,opacity:s}=a,c=e.viewMode==="docs",u=o.layout===void 0||o.layout==="padded"?16:0,l=a.offsetX??(c?20:u),$=a.offsetY??(c?20:u),f=h(()=>{let m=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",E=[`${n*i}px ${n*i}px`,`${n*i}px ${n*i}px`,`${n}px ${n}px`,`${n}px ${n}px`].join(", ");return`
${m} {
background-size: ${E} !important;
background-position: ${l}px ${$}px, ${l}px ${$}px, ${l}px ${$}px, ${l}px ${$}px !important;
background-blend-mode: difference !important;
background-image: linear-gradient(rgba(130, 130, 130, ${s}) 1px, transparent 1px),
linear-gradient(90deg, rgba(130, 130, 130, ${s}) 1px, transparent 1px),
linear-gradient(rgba(130, 130, 130, ${s/2}) 1px, transparent 1px),
linear-gradient(90deg, rgba(130, 130, 130, ${s/2}) 1px, transparent 1px) !important;
}
`},[n]);return _(()=>{let m=e.viewMode==="docs"?`addon-backgrounds-grid-docs-${e.id}`:"addon-backgrounds-grid";if(!d){A(m);return}F(m,f)},[d,f,e]),r()},C,ae=(C=globalThis.FEATURES)!=null&&C.backgroundsStoryGlobals?[J]:[V,Z],I,oe={[p]:{grid:{cellSize:20,opacity:.5,cellAmount:5},disable:!1,...!((I=globalThis.FEATURES)!=null&&I.backgroundsStoryGlobals)&&{values:Object.values(U)}}},ee={[p]:{value:void 0,grid:!1}},z,de=(z=globalThis.FEATURES)!=null&&z.backgroundsStoryGlobals?ee:{[p]:null};export{ae as decorators,de as initialGlobals,oe as parameters};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,396 @@
import{d as $}from"./index-DrFu-skq.js";const{useMemo:x,useEffect:f}=__STORYBOOK_MODULE_PREVIEW_API__,{global:p}=__STORYBOOK_MODULE_GLOBAL__;var m="outline",u=i=>{(Array.isArray(i)?i:[i]).forEach(r)},r=i=>{let t=typeof i=="string"?i:i.join(""),o=p.document.getElementById(t);o&&o.parentElement&&o.parentElement.removeChild(o)},b=(i,t)=>{let o=p.document.getElementById(i);if(o)o.innerHTML!==t&&(o.innerHTML=t);else{let n=p.document.createElement("style");n.setAttribute("id",i),n.innerHTML=t,p.document.head.appendChild(n)}};function s(i){return $`
${i} body {
outline: 1px solid #2980b9 !important;
}
${i} article {
outline: 1px solid #3498db !important;
}
${i} nav {
outline: 1px solid #0088c3 !important;
}
${i} aside {
outline: 1px solid #33a0ce !important;
}
${i} section {
outline: 1px solid #66b8da !important;
}
${i} header {
outline: 1px solid #99cfe7 !important;
}
${i} footer {
outline: 1px solid #cce7f3 !important;
}
${i} h1 {
outline: 1px solid #162544 !important;
}
${i} h2 {
outline: 1px solid #314e6e !important;
}
${i} h3 {
outline: 1px solid #3e5e85 !important;
}
${i} h4 {
outline: 1px solid #449baf !important;
}
${i} h5 {
outline: 1px solid #c7d1cb !important;
}
${i} h6 {
outline: 1px solid #4371d0 !important;
}
${i} main {
outline: 1px solid #2f4f90 !important;
}
${i} address {
outline: 1px solid #1a2c51 !important;
}
${i} div {
outline: 1px solid #036cdb !important;
}
${i} p {
outline: 1px solid #ac050b !important;
}
${i} hr {
outline: 1px solid #ff063f !important;
}
${i} pre {
outline: 1px solid #850440 !important;
}
${i} blockquote {
outline: 1px solid #f1b8e7 !important;
}
${i} ol {
outline: 1px solid #ff050c !important;
}
${i} ul {
outline: 1px solid #d90416 !important;
}
${i} li {
outline: 1px solid #d90416 !important;
}
${i} dl {
outline: 1px solid #fd3427 !important;
}
${i} dt {
outline: 1px solid #ff0043 !important;
}
${i} dd {
outline: 1px solid #e80174 !important;
}
${i} figure {
outline: 1px solid #ff00bb !important;
}
${i} figcaption {
outline: 1px solid #bf0032 !important;
}
${i} table {
outline: 1px solid #00cc99 !important;
}
${i} caption {
outline: 1px solid #37ffc4 !important;
}
${i} thead {
outline: 1px solid #98daca !important;
}
${i} tbody {
outline: 1px solid #64a7a0 !important;
}
${i} tfoot {
outline: 1px solid #22746b !important;
}
${i} tr {
outline: 1px solid #86c0b2 !important;
}
${i} th {
outline: 1px solid #a1e7d6 !important;
}
${i} td {
outline: 1px solid #3f5a54 !important;
}
${i} col {
outline: 1px solid #6c9a8f !important;
}
${i} colgroup {
outline: 1px solid #6c9a9d !important;
}
${i} button {
outline: 1px solid #da8301 !important;
}
${i} datalist {
outline: 1px solid #c06000 !important;
}
${i} fieldset {
outline: 1px solid #d95100 !important;
}
${i} form {
outline: 1px solid #d23600 !important;
}
${i} input {
outline: 1px solid #fca600 !important;
}
${i} keygen {
outline: 1px solid #b31e00 !important;
}
${i} label {
outline: 1px solid #ee8900 !important;
}
${i} legend {
outline: 1px solid #de6d00 !important;
}
${i} meter {
outline: 1px solid #e8630c !important;
}
${i} optgroup {
outline: 1px solid #b33600 !important;
}
${i} option {
outline: 1px solid #ff8a00 !important;
}
${i} output {
outline: 1px solid #ff9619 !important;
}
${i} progress {
outline: 1px solid #e57c00 !important;
}
${i} select {
outline: 1px solid #e26e0f !important;
}
${i} textarea {
outline: 1px solid #cc5400 !important;
}
${i} details {
outline: 1px solid #33848f !important;
}
${i} summary {
outline: 1px solid #60a1a6 !important;
}
${i} command {
outline: 1px solid #438da1 !important;
}
${i} menu {
outline: 1px solid #449da6 !important;
}
${i} del {
outline: 1px solid #bf0000 !important;
}
${i} ins {
outline: 1px solid #400000 !important;
}
${i} img {
outline: 1px solid #22746b !important;
}
${i} iframe {
outline: 1px solid #64a7a0 !important;
}
${i} embed {
outline: 1px solid #98daca !important;
}
${i} object {
outline: 1px solid #00cc99 !important;
}
${i} param {
outline: 1px solid #37ffc4 !important;
}
${i} video {
outline: 1px solid #6ee866 !important;
}
${i} audio {
outline: 1px solid #027353 !important;
}
${i} source {
outline: 1px solid #012426 !important;
}
${i} canvas {
outline: 1px solid #a2f570 !important;
}
${i} track {
outline: 1px solid #59a600 !important;
}
${i} map {
outline: 1px solid #7be500 !important;
}
${i} area {
outline: 1px solid #305900 !important;
}
${i} a {
outline: 1px solid #ff62ab !important;
}
${i} em {
outline: 1px solid #800b41 !important;
}
${i} strong {
outline: 1px solid #ff1583 !important;
}
${i} i {
outline: 1px solid #803156 !important;
}
${i} b {
outline: 1px solid #cc1169 !important;
}
${i} u {
outline: 1px solid #ff0430 !important;
}
${i} s {
outline: 1px solid #f805e3 !important;
}
${i} small {
outline: 1px solid #d107b2 !important;
}
${i} abbr {
outline: 1px solid #4a0263 !important;
}
${i} q {
outline: 1px solid #240018 !important;
}
${i} cite {
outline: 1px solid #64003c !important;
}
${i} dfn {
outline: 1px solid #b4005a !important;
}
${i} sub {
outline: 1px solid #dba0c8 !important;
}
${i} sup {
outline: 1px solid #cc0256 !important;
}
${i} time {
outline: 1px solid #d6606d !important;
}
${i} code {
outline: 1px solid #e04251 !important;
}
${i} kbd {
outline: 1px solid #5e001f !important;
}
${i} samp {
outline: 1px solid #9c0033 !important;
}
${i} var {
outline: 1px solid #d90047 !important;
}
${i} mark {
outline: 1px solid #ff0053 !important;
}
${i} bdi {
outline: 1px solid #bf3668 !important;
}
${i} bdo {
outline: 1px solid #6f1400 !important;
}
${i} ruby {
outline: 1px solid #ff7b93 !important;
}
${i} rt {
outline: 1px solid #ff2f54 !important;
}
${i} rp {
outline: 1px solid #803e49 !important;
}
${i} span {
outline: 1px solid #cc2643 !important;
}
${i} br {
outline: 1px solid #db687d !important;
}
${i} wbr {
outline: 1px solid #db175b !important;
}`}var e=(i,t)=>{let{globals:o}=t,n=[!0,"true"].includes(o[m]),d=t.viewMode==="docs",l=x(()=>s(d?'[data-story-block="true"]':".sb-show-main"),[t]);return f(()=>{let a=d?`addon-outline-docs-${t.id}`:"addon-outline";return n?b(a,l):u(a),()=>{u(a)}},[n,l,t]),i()},h=[e],g={[m]:!1};export{h as decorators,g as initialGlobals};
@@ -0,0 +1 @@
var o="viewport",a={[o]:{value:void 0,isRotated:!1}},t={viewport:"reset",viewportRotated:!1},e,l=(e=globalThis.FEATURES)!=null&&e.viewportStoryGlobals?a:t;export{l as initialGlobals};
@@ -0,0 +1 @@
let p;const S=new Uint8Array(16);function A(){if(!p&&(p=typeof crypto<"u"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!p))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return p(S)}const o=[];for(let e=0;e<256;++e)o.push((e+256).toString(16).slice(1));function D(e,t=0){return o[e[t+0]]+o[e[t+1]]+o[e[t+2]]+o[e[t+3]]+"-"+o[e[t+4]]+o[e[t+5]]+"-"+o[e[t+6]]+o[e[t+7]]+"-"+o[e[t+8]]+o[e[t+9]]+"-"+o[e[t+10]]+o[e[t+11]]+o[e[t+12]]+o[e[t+13]]+o[e[t+14]]+o[e[t+15]]}const I=typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto),h={randomUUID:I};function f(e,t,r){if(h.randomUUID&&!e)return h.randomUUID();e=e||{};const n=e.random||(e.rng||A)();return n[6]=n[6]&15|64,n[8]=n[8]&63|128,D(n)}const{addons:v}=__STORYBOOK_MODULE_PREVIEW_API__,{ImplicitActionsDuringRendering:U}=__STORYBOOK_MODULE_CORE_EVENTS_PREVIEW_ERRORS__,{global:d}=__STORYBOOK_MODULE_GLOBAL__;var w="storybook/actions",j=`${w}/action-event`,V={depth:10,clearOnStoryChange:!0,limit:50},E=(e,t)=>{let r=Object.getPrototypeOf(e);return!r||t(r)?r:E(r,t)},C=e=>!!(typeof e=="object"&&e&&E(e,t=>/^Synthetic(?:Base)?Event$/.test(t.constructor.name))&&typeof e.persist=="function"),K=e=>{if(C(e)){let t=Object.create(e.constructor.prototype,Object.getOwnPropertyDescriptors(e));t.persist();let r=Object.getOwnPropertyDescriptor(t,"view"),n=r==null?void 0:r.value;return typeof n=="object"&&(n==null?void 0:n.constructor.name)==="Window"&&Object.defineProperty(t,"view",{...r,value:Object.create(n.constructor.prototype)}),t}return e},L=()=>typeof crypto=="object"&&typeof crypto.getRandomValues=="function"?f():Date.now().toString(36)+Math.random().toString(36).substring(2);function _(e,t={}){let r={...V,...t},n=function(...s){var g,O;if(t.implicit){let y=(g="__STORYBOOK_PREVIEW__"in d?d.__STORYBOOK_PREVIEW__:void 0)==null?void 0:g.storyRenders.find(l=>l.phase==="playing"||l.phase==="rendering");if(y){let l=!((O=globalThis==null?void 0:globalThis.FEATURES)!=null&&O.disallowImplicitActionsInRenderV8),R=new U({phase:y.phase,name:e,deprecated:l});if(l)console.warn(R);else throw R}}let i=v.getChannel(),c=L(),a=5,u=s.map(K),b=s.length>1?u:u[0],x={id:c,count:0,data:{name:e,args:b},options:{...r,maxDepth:a+(r.depth||3),allowFunction:r.allowFunction||!1}};i.emit(j,x)};return n.isAction=!0,n.implicit=t.implicit,n}var T=(e,t)=>typeof t[e]>"u"&&!(e in t),B=e=>{let{initialArgs:t,argTypes:r,id:n,parameters:{actions:s}}=e;if(!s||s.disable||!s.argTypesRegex||!r)return{};let i=new RegExp(s.argTypesRegex);return Object.entries(r).filter(([c])=>!!i.test(c)).reduce((c,[a,u])=>(T(a,t)&&(c[a]=_(a,{implicit:!0,id:n})),c),{})},M=e=>{let{initialArgs:t,argTypes:r,parameters:{actions:n}}=e;return n!=null&&n.disable||!r?{}:Object.entries(r).filter(([s,i])=>!!i.action).reduce((s,[i,c])=>(T(i,t)&&(s[i]=_(typeof c.action=="string"?c.action:i)),s),{})},Y=[M,B],m=!1,P=e=>{let{parameters:{actions:t}}=e;if(!(t!=null&&t.disable)&&!m&&"__STORYBOOK_TEST_ON_MOCK_CALL__"in d&&typeof d.__STORYBOOK_TEST_ON_MOCK_CALL__=="function"){let r=d.__STORYBOOK_TEST_ON_MOCK_CALL__;r((n,s)=>{let i=n.getMockName();i!=="spy"&&(!/^next\/.*::/.test(i)||["next/router::useRouter()","next/navigation::useRouter()","next/navigation::redirect","next/cache::","next/headers::cookies().set","next/headers::cookies().delete","next/headers::headers().set","next/headers::headers().delete"].some(c=>i.startsWith(c)))&&_(i)(s)}),m=!0}},N=[P];export{Y as argsEnhancers,N as loaders};
@@ -0,0 +1,7 @@
const{STORY_CHANGED:r}=__STORYBOOK_MODULE_CORE_EVENTS__,{addons:s}=__STORYBOOK_MODULE_PREVIEW_API__,{global:O}=__STORYBOOK_MODULE_GLOBAL__;var d="storybook/highlight",i="storybookHighlight",g=`${d}/add`,E=`${d}/reset`,{document:l}=O,H=(e="#FF4785",t="dashed")=>`
outline: 2px ${t} ${e};
outline-offset: 2px;
box-shadow: 0 0 0 6px rgba(255,255,255,0.6);
`,h=s.getChannel(),T=e=>{let t=i;n();let o=Array.from(new Set(e.elements)),_=l.createElement("style");_.setAttribute("id",t),_.innerHTML=o.map(a=>`${a}{
${H(e.color,e.style)}
}`).join(" "),l.head.appendChild(_)},n=()=>{var o;let e=i,t=l.getElementById(e);t&&((o=t.parentNode)==null||o.removeChild(t))};h.on(r,n);h.on(E,n);h.on(g,T);
@@ -0,0 +1 @@
const{makeDecorator:O,addons:_}=__STORYBOOK_MODULE_PREVIEW_API__,{STORY_CHANGED:l,SELECT_STORY:E}=__STORYBOOK_MODULE_CORE_EVENTS__,{global:L}=__STORYBOOK_MODULE_GLOBAL__;var c="links",{document:s,HTMLElement:v}=L,d=e=>_.getChannel().emit(E,e),i=e=>{let{target:t}=e;if(!(t instanceof v))return;let o=t,{sbKind:a,sbStory:r}=o.dataset;(a||r)&&(e.preventDefault(),d({kind:a,story:r}))},n=!1,m=()=>{n||(n=!0,s.addEventListener("click",i))},k=()=>{n&&(n=!1,s.removeEventListener("click",i))},R=O({name:"withLinks",parameterName:c,wrapper:(e,t)=>(m(),_.getChannel().once(l,k),e(t))}),S=[R];export{S as decorators};
@@ -0,0 +1,2 @@
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-CCWAJl9z.js","./iframe-CnyJnclB.js","./index-DAME-NcR.js","./jsx-runtime-BjG_zV1W.js","./client-dutLrLv-.js","./index-C9Uca124.js","./index-DrFu-skq.js"])))=>i.map(i=>d[i]);
import{_ as a}from"./iframe-CnyJnclB.js";var i=Object.defineProperty,s=(e,r)=>{for(var t in r)i(e,t,{get:r[t],enumerable:!0})},_={};s(_,{parameters:()=>d});var p=Object.entries(globalThis.TAGS_OPTIONS??{}).reduce((e,r)=>{let[t,o]=r;return o.excludeFromDocsStories&&(e[t]=!0),e},{}),d={docs:{renderer:async()=>{let{DocsRenderer:e}=await a(()=>import("./DocsRenderer-CFRXHY34-CCWAJl9z.js").then(r=>r.D),__vite__mapDeps([0,1,2,3,4,5,6]),import.meta.url);return new e},stories:{filter:e=>{var r;return(e.tags||[]).filter(t=>p[t]).length===0&&!((r=e.parameters.docs)!=null&&r.disable)}}}};export{d as parameters};
@@ -0,0 +1 @@
import{r as s}from"./index-DAME-NcR.js";import{c as l}from"./client-dutLrLv-.js";var n=new Map;function m(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var a=({callback:e,children:r})=>{let t=s.useRef();return s.useLayoutEffect(()=>{t.current!==e&&(t.current=e,e())},[e]),r};typeof Promise.withResolvers>"u"&&(Promise.withResolvers=()=>{let e=null,r=null;return{promise:new Promise((t,o)=>{e=t,r=o}),resolve:e,reject:r}});var E=async(e,r,t)=>{let o=await c(r,t);if(m()){o.render(e);return}let{promise:u,resolve:i}=Promise.withResolvers();return o.render(s.createElement(a,{callback:i},e)),u},v=(e,r)=>{let t=n.get(e);t&&(t.unmount(),n.delete(e))},c=async(e,r)=>{let t=n.get(e);return t||(t=l.createRoot(e,r),n.set(e,t)),t};export{E as renderElement,v as unmountElement};
@@ -0,0 +1,9 @@
import{r as l,g as p}from"./index-DAME-NcR.js";function u(t,a){for(var o=0;o<a.length;o++){const e=a[o];if(typeof e!="string"&&!Array.isArray(e)){for(const r in e)if(r!=="default"&&!(r in t)){const s=Object.getOwnPropertyDescriptor(e,r);s&&Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:()=>e[r]})}}}return Object.freeze(Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}))}var i={exports:{}},n={};/**
* @license React
* react-dom-test-utils.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var d=l,c=!1;n.act=function(t){return c===!1&&(c=!0,console.error("`ReactDOMTestUtils.act` is deprecated in favor of `React.act`. Import `act` from `react` instead of `react-dom/test-utils`. See https://react.dev/warnings/react-dom-test-utils for more info.")),d.act(t)};i.exports=n;var f=i.exports;const g=p(f),v=u({__proto__:null,default:g},[f]);export{v as t};
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:xlink="http://www.w3.org/1999/xlink" width="164" height="164" version="1.1"><svg xmlns="http://www.w3.org/2000/svg" width="164" height="164" fill="none" viewBox="0 0 164 164"><path fill="#FF4785" d="M22.467 147.762 17.5 15.402a8.062 8.062 0 0 1 7.553-8.35L137.637.016a8.061 8.061 0 0 1 8.565 8.047v144.23a8.063 8.063 0 0 1-8.424 8.054l-107.615-4.833a8.062 8.062 0 0 1-7.695-7.752Z"/><path fill="#fff" fill-rule="evenodd" d="m128.785.57-15.495.968-.755 18.172a1.203 1.203 0 0 0 1.928 1.008l7.06-5.354 5.962 4.697a1.202 1.202 0 0 0 1.946-.987L128.785.569Zm-12.059 60.856c-2.836 2.203-23.965 3.707-23.965.57.447-11.969-4.912-12.494-7.889-12.494-2.828 0-7.59.855-7.59 7.267 0 6.534 6.96 10.223 15.13 14.553 11.607 6.15 25.654 13.594 25.654 32.326 0 17.953-14.588 27.871-33.194 27.871-19.201 0-35.981-7.769-34.086-34.702.744-3.163 25.156-2.411 25.156 0-.298 11.114 2.232 14.383 8.633 14.383 4.912 0 7.144-2.708 7.144-7.267 0-6.9-7.252-10.973-15.595-15.657C64.827 81.933 51.53 74.468 51.53 57.34c0-17.098 11.76-28.497 32.747-28.497 20.988 0 32.449 11.224 32.449 32.584Z" clip-rule="evenodd"/></svg><style>@media (prefers-color-scheme:light){:root{filter:none}}</style></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

+666
View File
@@ -0,0 +1,666 @@
<!doctype html>
<!--suppress HtmlUnknownTarget -->
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Storybook</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
}
</style>
<script>
window.CONFIG_TYPE = 'PRODUCTION';
window.LOGLEVEL = 'info';
window.FRAMEWORK_OPTIONS = {};
window.CHANNEL_OPTIONS = {};
window.FEATURES = {"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":true};
window.STORIES = [{"titlePrefix":"","directory":"./stories","files":"*.stories.tsx","importPathMatcher":"^\\.[\\\\/](?:stories\\/(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.tsx","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$"}];
window.DOCS_OPTIONS = {"defaultName":"Docs","autodocs":true};
window.TAGS_OPTIONS = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};
// We do this so that "module && module.hot" etc. in Storybook source code
// doesn't fail (it will simply be disabled)
window.module = undefined;
window.global = window;
</script>
<base target="_parent" />
<style>
/* While we aren't showing the main block yet, but still preparing, we want everything the user
has rendered, which may or may not be in #storybook-root, to be display none */
.sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
display: none;
}
.sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
display: none;
}
/* Hide our own blocks when we aren't supposed to be showing them */
: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 #storybook-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;
box-sizing: border-box;
padding: 40px;
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;
}
@media (max-width: 700px) {
.sb-wrapper {
padding: 20px;
}
}
@media (max-width: 500px) {
.sb-wrapper {
padding: 10px;
}
}
.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;
box-sizing: border-box;
}
.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 {
background: #f6f9fc;
color: black;
z-index: 999999;
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
& ol {
padding-left: 18px;
margin: 0;
}
& h1 {
font-family: Nunito Sans;
font-size: 22px;
font-weight: 400;
line-height: 30px;
font-weight: normal;
margin: 0;
&::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background: #ff4400;
border-radius: 50%;
margin-right: 8px;
}
}
& p,
& ol {
font-family: Nunito Sans;
font-size: 14px;
font-weight: 400;
line-height: 19px;
margin: 0;
}
& li + li {
margin: 0;
padding: 0;
padding-top: 12px;
}
& a {
color: currentColor;
}
}
.sb-errordisplay_main {
margin: auto;
padding: 24px;
display: flex;
box-sizing: border-box;
flex-direction: column;
min-height: 100%;
width: 100%;
border-radius: 6px;
background: white;
border: 1px solid #ff0000;
box-shadow: 0 0 64px rgba(0, 0, 0, 0.1);
gap: 24px;
}
.sb-errordisplay_code {
padding: 10px;
flex: 1;
background: #242424;
color: #c6c6c6;
box-sizing: border-box;
font-size: 14px;
font-weight: 400;
line-height: 19px;
border-radius: 4px;
font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
'Lucida Console', Consolas, Monaco, monospace;
margin: 0;
overflow: auto;
}
.sb-errordisplay pre {
white-space: pre-wrap;
white-space: revert;
}
@-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;
/* Maximum possible z-index. It would be better to use stacking contexts to ensure it's always
on top, but this isn't possible as it would require making CSS changes that could affect user code */
z-index: 2147483647;
}
.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:last-of-type,
.sb-argstableBlock td:last-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');
}
</script>
<script type="module" crossorigin src="./assets/iframe-CnyJnclB.js"></script>
</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">
<div class="sb-errordisplay_main">
<h1 id="error-message"></h1>
<p>
The component failed to render properly, likely due to a configuration issue in Storybook.
Here are some common causes and how you can address them:
</p>
<ol>
<li>
<strong>Missing Context/Providers</strong>: You can use decorators to supply specific
contexts or providers, which are sometimes necessary for components to render correctly. For
detailed instructions on using decorators, please visit the
<a href="https://storybook.js.org/docs/writing-stories/decorators"
>Decorators documentation</a
>.
</li>
<li>
<strong>Misconfigured Webpack or Vite</strong>: Verify that Storybook picks up all necessary
settings for loaders, plugins, and other relevant parameters. You can find step-by-step
guides for configuring
<a href="https://storybook.js.org/docs/builders/webpack">Webpack</a> or
<a href="https://storybook.js.org/docs/builders/vite">Vite</a>
with Storybook.
</li>
<li>
<strong>Missing Environment Variables</strong>: Your Storybook may require specific
environment variables to function as intended. You can set up custom environment variables
as outlined in the
<a href="https://storybook.js.org/docs/configure/environment-variables"
>Environment Variables documentation</a
>.
</li>
</ol>
<pre class="sb-errordisplay_code"><code id="error-stack"></code></pre>
</div>
</div>
<div id="storybook-root"></div>
<div id="storybook-docs"></div>
<script>
// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
function __onViteAppLoadingError(event) {
const hostname = globalThis.location.hostname;
if (hostname !== 'localhost' && globalThis.CONFIG_TYPE === 'DEVELOPMENT') {
const message = `Failed to load the Storybook preview file 'vite-app.js':
It looks like you're visiting the Storybook development server on another hostname than localhost: '${hostname}', but you haven't configured the necessary security features to support this.
Please re-run your Storybook development server with the '--host ${hostname}' flag, or manually configure your Vite allowedHosts configuration with viteFinal.
See:`;
const docs = [
'https://storybook.js.org/docs/api/cli-options#dev',
'https://storybook.js.org/docs/api/main-config/main-config-vite-final',
'https://vite.dev/config/server-options.html#server-allowedhosts',
];
console.error(`${message}\n${docs.map((doc) => `- ${doc}`).join('\n')}`);
document.getElementById('storybook-root').innerHTML =
`<p style="color: red; max-width: 70ch">${message.replaceAll(
'\n',
'<br/>'
)}<ul>${docs.map((doc) => `<li><a href='${doc}' target='_blank'>${doc}</a></li>`).join('')}<ul></p>`;
return;
}
}
</script>
</body>
</html>
+174
View File
@@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@storybook/core - Storybook</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="icon" type="image/svg+xml" href="./favicon.svg" />
<style>
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
}
</style>
<link href="./sb-manager/runtime.js" rel="modulepreload" />
<link href="./sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js" rel="modulepreload" />
<link href="./sb-addons/links-1/manager-bundle.js" rel="modulepreload" />
<link href="./sb-addons/essentials-controls-2/manager-bundle.js" rel="modulepreload" />
<link href="./sb-addons/essentials-actions-3/manager-bundle.js" rel="modulepreload" />
<link href="./sb-addons/essentials-docs-4/manager-bundle.js" rel="modulepreload" />
<link href="./sb-addons/essentials-backgrounds-5/manager-bundle.js" rel="modulepreload" />
<link href="./sb-addons/essentials-viewport-6/manager-bundle.js" rel="modulepreload" />
<link href="./sb-addons/essentials-toolbars-7/manager-bundle.js" rel="modulepreload" />
<link href="./sb-addons/essentials-measure-8/manager-bundle.js" rel="modulepreload" />
<link href="./sb-addons/essentials-outline-9/manager-bundle.js" rel="modulepreload" />
<style>
#storybook-root[hidden] {
display: none !important;
}
</style>
</head>
<body>
<div id="root"></div>
<script>
window['FEATURES'] = {
"argTypeTargetsV7": true,
"legacyDecoratorFileOrder": false,
"disallowImplicitActionsInRenderV8": true
};
window['REFS'] = {};
window['LOGLEVEL'] = "info";
window['DOCS_OPTIONS'] = {
"docsMode": true,
"defaultName": "Docs",
"autodocs": true
};
window['CONFIG_TYPE'] = "PRODUCTION";
window['TAGS_OPTIONS'] = {
"dev-only": {
"excludeFromDocsStories": true
},
"docs-only": {
"excludeFromSidebar": true
},
"test-only": {
"excludeFromSidebar": true,
"excludeFromDocsStories": true
}
};
window['STORYBOOK_RENDERER'] = "react";
window['STORYBOOK_BUILDER'] = "@storybook/builder-vite";
window['STORYBOOK_FRAMEWORK'] = "/Users/fram/Workspace/EIGEN/APPLICATION/ERP/TEMPLATES/fe-template/node_modules/.pnpm/@storybook+react-vite@8.6.15_react-dom@19.2.3_react@19.2.3_storybook@8.6.15_typescript@5.5.4_vite@5.4.17/node_modules/@storybook/react-vite";
</script>
<script type="module">
import './sb-manager/globals-runtime.js';
import './sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js';
import './sb-addons/links-1/manager-bundle.js';
import './sb-addons/essentials-controls-2/manager-bundle.js';
import './sb-addons/essentials-actions-3/manager-bundle.js';
import './sb-addons/essentials-docs-4/manager-bundle.js';
import './sb-addons/essentials-backgrounds-5/manager-bundle.js';
import './sb-addons/essentials-viewport-6/manager-bundle.js';
import './sb-addons/essentials-toolbars-7/manager-bundle.js';
import './sb-addons/essentials-measure-8/manager-bundle.js';
import './sb-addons/essentials-outline-9/manager-bundle.js';
import './sb-manager/runtime.js';
</script>
</body>
</html>
@@ -0,0 +1 @@
{"v":5,"entries":{"button--docs":{"id":"button--docs","title":"button","name":"Docs","importPath":"./stories/button.stories.tsx","type":"docs","tags":["dev","test","autodocs"],"storiesImports":[]},"button--primary":{"type":"story","id":"button--primary","name":"Button","title":"button","importPath":"./stories/button.stories.tsx","componentPath":"@repo/ui","tags":["dev","test","autodocs"]}}}
@@ -0,0 +1 @@
{"generatedAt":1767957725302,"userSince":1767597102851,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"testPackages":{},"hasRouterPackage":false,"monorepo":"Turborepo","packageManager":{"type":"pnpm","version":"8.15.6","agent":"pnpm"},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":0,"applicationFileCount":0,"storybookVersion":"8.6.15","storybookVersionSpecifier":"^8.2.6","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"8.6.15"},"@storybook/addon-essentials":{"version":"8.6.14"},"@storybook/addon-links":{"version":"8.6.15"},"@storybook/react":{"version":"8.6.15"},"@storybook/react-vite":{"version":"8.6.15"},"storybook":{"version":"8.6.15"}},"addons":{"$SNIP/node_modules/.pnpm/@storybook+addon-links@8.6.15_react@19.2.3_storybook@8.6.15/node_modules/@storybook/addon-links":{"version":null},"$SNIP/node_modules/.pnpm/@storybook+addon-essentials@8.6.14_@types+react@19.2.7_storybook@8.6.15/node_modules/@storybook/addon-essentials":{"version":null}}}
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
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
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
try{
(()=>{var y=__STORYBOOK_API__,{ActiveTabs:E,Consumer:T,ManagerContext:h,Provider:v,RequestResponseError:A,addons:a,combineParameters:b,controlOrMetaKey:O,controlOrMetaSymbol:k,eventMatchesShortcut:R,eventToShortcut:g,experimental_MockUniversalStore:x,experimental_UniversalStore:I,experimental_requestResponse:M,experimental_useUniversalStore:C,isMacLike:P,isShortcutTaken:U,keyToSymbol:f,merge:q,mockChannel:D,optionOrAltSymbol:G,shortcutMatchesShortcut:K,shortcutToHumanString:V,types:$,useAddonState:B,useArgTypes:N,useArgs:Q,useChannel:Y,useGlobalTypes:H,useGlobals:L,useParameter:j,useSharedState:w,useStoryPrepared:z,useStorybookApi:F,useStorybookState:J}=__STORYBOOK_API__;var e="storybook/links",n={NAVIGATE:`${e}/navigate`,REQUEST:`${e}/request`,RECEIVE:`${e}/receive`};a.register(e,t=>{t.on(n.REQUEST,({kind:u,name:i})=>{let l=t.storyId(u,i);t.emit(n.RECEIVE,l)})});})();
}catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); }
@@ -0,0 +1,3 @@
try{
(()=>{var g=__STORYBOOK_API__,{ActiveTabs:T,Consumer:O,ManagerContext:f,Provider:v,RequestResponseError:x,addons:n,combineParameters:A,controlOrMetaKey:k,controlOrMetaSymbol:M,eventMatchesShortcut:P,eventToShortcut:R,experimental_MockUniversalStore:w,experimental_UniversalStore:C,experimental_requestResponse:G,experimental_useUniversalStore:I,isMacLike:K,isShortcutTaken:U,keyToSymbol:q,merge:B,mockChannel:F,optionOrAltSymbol:Y,shortcutMatchesShortcut:j,shortcutToHumanString:E,types:H,useAddonState:L,useArgTypes:N,useArgs:z,useChannel:D,useGlobalTypes:J,useGlobals:Q,useParameter:V,useSharedState:W,useStoryPrepared:X,useStorybookApi:Z,useStorybookState:$}=__STORYBOOK_API__;var S=(()=>{let e;return typeof window<"u"?e=window:typeof globalThis<"u"?e=globalThis:typeof window<"u"?e=window:typeof self<"u"?e=self:e={},e})(),c="tag-filters",p="static-filter";n.register(c,e=>{let i=Object.entries(S.TAGS_OPTIONS??{}).reduce((t,r)=>{let[o,u]=r;return u.excludeFromSidebar&&(t[o]=!0),t},{});e.experimental_setFilter(p,t=>{let r=t.tags??[];return(r.includes("dev")||t.type==="docs")&&r.filter(o=>i[o]).length===0})});})();
}catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); }
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:xlink="http://www.w3.org/1999/xlink" width="164" height="164" version="1.1"><svg xmlns="http://www.w3.org/2000/svg" width="164" height="164" fill="none" viewBox="0 0 164 164"><path fill="#FF4785" d="M22.467 147.762 17.5 15.402a8.062 8.062 0 0 1 7.553-8.35L137.637.016a8.061 8.061 0 0 1 8.565 8.047v144.23a8.063 8.063 0 0 1-8.424 8.054l-107.615-4.833a8.062 8.062 0 0 1-7.695-7.752Z"/><path fill="#fff" fill-rule="evenodd" d="m128.785.57-15.495.968-.755 18.172a1.203 1.203 0 0 0 1.928 1.008l7.06-5.354 5.962 4.697a1.202 1.202 0 0 0 1.946-.987L128.785.569Zm-12.059 60.856c-2.836 2.203-23.965 3.707-23.965.57.447-11.969-4.912-12.494-7.889-12.494-2.828 0-7.59.855-7.59 7.267 0 6.534 6.96 10.223 15.13 14.553 11.607 6.15 25.654 13.594 25.654 32.326 0 17.953-14.588 27.871-33.194 27.871-19.201 0-35.981-7.769-34.086-34.702.744-3.163 25.156-2.411 25.156 0-.298 11.114 2.232 14.383 8.633 14.383 4.912 0 7.144-2.708 7.144-7.267 0-6.9-7.252-10.973-15.595-15.657C64.827 81.933 51.53 74.468 51.53 57.34c0-17.098 11.76-28.497 32.747-28.497 20.988 0 32.449 11.224 32.449 32.584Z" clip-rule="evenodd"/></svg><style>@media (prefers-color-scheme:light){:root{filter:none}}</style></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,48 @@
import ESM_COMPAT_Module from "node:module";
import { fileURLToPath as ESM_COMPAT_fileURLToPath } from 'node:url';
import { dirname as ESM_COMPAT_dirname } from 'node:path';
const __filename = ESM_COMPAT_fileURLToPath(import.meta.url);
const __dirname = ESM_COMPAT_dirname(__filename);
const require = ESM_COMPAT_Module.createRequire(import.meta.url);
// src/manager/globals/globals.ts
var _ = {
react: "__REACT__",
"react-dom": "__REACT_DOM__",
"react-dom/client": "__REACT_DOM_CLIENT__",
"@storybook/icons": "__STORYBOOK_ICONS__",
"storybook/internal/manager-api": "__STORYBOOK_API__",
"@storybook/manager-api": "__STORYBOOK_API__",
"@storybook/core/manager-api": "__STORYBOOK_API__",
"storybook/internal/components": "__STORYBOOK_COMPONENTS__",
"@storybook/components": "__STORYBOOK_COMPONENTS__",
"@storybook/core/components": "__STORYBOOK_COMPONENTS__",
"storybook/internal/channels": "__STORYBOOK_CHANNELS__",
"@storybook/channels": "__STORYBOOK_CHANNELS__",
"@storybook/core/channels": "__STORYBOOK_CHANNELS__",
"storybook/internal/core-errors": "__STORYBOOK_CORE_EVENTS__",
"@storybook/core-events": "__STORYBOOK_CORE_EVENTS__",
"@storybook/core/core-events": "__STORYBOOK_CORE_EVENTS__",
"storybook/internal/manager-errors": "__STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__",
"@storybook/core-events/manager-errors": "__STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__",
"@storybook/core/manager-errors": "__STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__",
"storybook/internal/router": "__STORYBOOK_ROUTER__",
"@storybook/router": "__STORYBOOK_ROUTER__",
"@storybook/core/router": "__STORYBOOK_ROUTER__",
"storybook/internal/theming": "__STORYBOOK_THEMING__",
"@storybook/theming": "__STORYBOOK_THEMING__",
"@storybook/core/theming": "__STORYBOOK_THEMING__",
"storybook/internal/theming/create": "__STORYBOOK_THEMING_CREATE__",
"@storybook/theming/create": "__STORYBOOK_THEMING_CREATE__",
"@storybook/core/theming/create": "__STORYBOOK_THEMING_CREATE__",
"storybook/internal/client-logger": "__STORYBOOK_CLIENT_LOGGER__",
"@storybook/client-logger": "__STORYBOOK_CLIENT_LOGGER__",
"@storybook/core/client-logger": "__STORYBOOK_CLIENT_LOGGER__",
"storybook/internal/types": "__STORYBOOK_TYPES__",
"@storybook/types": "__STORYBOOK_TYPES__",
"@storybook/core/types": "__STORYBOOK_TYPES__"
}, o = Object.keys(_);
export {
o as globalPackages,
_ as globalsNameReferenceMap
};
File diff suppressed because it is too large Load Diff
+5
View File
@@ -0,0 +1,5 @@
{
"extends": "@repo/typescript-config/react-story.json",
"include": ["."],
"exclude": ["dist", "build", "node_modules"]
}
+4
View File
@@ -0,0 +1,4 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({ plugins: [react()] });
+1 -1
View File
@@ -1,5 +1,5 @@
/** @type {import("eslint").Linter.Config} */
module.exports = {
root: true,
extends: ['@repo/eslint-config/index.js'],
extends: ['@repo/eslint-config/react.js'],
};
+1 -1
View File
@@ -1,5 +1,5 @@
{
"extends": "@repo/typescript-config/vite.json",
"extends": "@repo/typescript-config/react-app.json",
"include": ["src"],
"compilerOptions": {
"jsx": "react-jsx"
+2
View File
@@ -3,8 +3,10 @@
"scripts": {
"build": "turbo run build",
"build:web": "turbo run build --filter=web",
"build:docs-dev": "turbo run build --filter=docs-dev",
"dev": "turbo run dev",
"dev:web": "turbo run dev --filter=web",
"dev:docs-dev": "turbo run dev --filter=docs-dev",
"lint": "turbo run lint",
"format": "prettier --write \"**/*.{ts,tsx,md}\""
},
+15
View File
@@ -0,0 +1,15 @@
module.exports = {
env: {
node: true,
},
parser: '@typescript-eslint/parser',
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
plugins: ['@typescript-eslint'],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020,
},
rules: {
'@typescript-eslint/no-non-null-assertion': 'off',
},
};
+11 -2
View File
@@ -1,12 +1,21 @@
{
"name": "@repo/eslint-config",
"version": "0.0.0",
"main": "index.js",
"license": "MIT",
"files": [
"library.js",
"react.js",
"storybook.js"
],
"dependencies": {
"@typescript-eslint/eslint-plugin": "^7.1.0",
"@typescript-eslint/parser": "^7.1.0",
"eslint-config-prettier": "^9.1.0"
"@vercel/style-guide": "^5.2.0",
"eslint-config-prettier": "^9.1.0",
"eslint-config-turbo": "^2.0.0",
"eslint-plugin-mdx": "^3.1.5",
"eslint-plugin-only-warn": "^1.1.0",
"eslint-plugin-storybook": "^0.8.0"
},
"publishConfig": {
"access": "public"
+45
View File
@@ -0,0 +1,45 @@
const { resolve } = require('node:path');
const project = resolve(process.cwd(), 'tsconfig.json');
/*
* This is a custom ESLint configuration for use with
* typescript packages.
*
* This config extends the Vercel Engineering Style Guide.
* For more information, see https://github.com/vercel/style-guide
*
*/
module.exports = {
extends: [
'plugin:storybook/recommended',
'plugin:mdx/recommended',
...[
'@vercel/style-guide/eslint/node',
'@vercel/style-guide/eslint/typescript',
'@vercel/style-guide/eslint/browser',
'@vercel/style-guide/eslint/react',
].map(require.resolve),
],
parserOptions: {
project,
},
plugins: ['only-warn'],
globals: {
React: true,
JSX: true,
},
settings: {
'import/resolver': {
typescript: {
project,
},
},
},
ignorePatterns: ['node_modules/', 'dist/'],
// add rules configurations here
rules: {
'import/no-default-export': 'off',
},
};
@@ -0,0 +1,21 @@
{
"extends": "./base.json",
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": [
"ESNext",
"DOM"
],
"sourceMap": true,
"resolveJsonModule": true,
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true
},
"exclude": [
"node_modules"
]
}
@@ -0,0 +1,20 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "./base.json",
"compilerOptions": {
"allowJs": true,
"declaration": false,
"declarationMap": false,
"incremental": true,
"jsx": "preserve",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"module": "esnext",
"noEmit": true,
"resolveJsonModule": true,
"target": "es5"
}
}
+1 -1
View File
@@ -2,7 +2,7 @@
module.exports = {
root: true,
ignorePatterns: ['.eslintrc.cjs'],
extends: ['@repo/eslint-config/index.js'],
extends: ['@repo/eslint-config/react.js'],
parser: '@typescript-eslint/parser',
parserOptions: {
project: true,
+15
View File
@@ -0,0 +1,15 @@
import { ReactNode } from 'react';
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
children: React.ReactNode;
}
export function Button({ children, ...other }: ButtonProps): ReactNode {
return (
<button type="button" {...other}>
{children}
</button>
);
}
Button.displayName = 'Button';
+1
View File
@@ -2,3 +2,4 @@ export * from './header';
export * from './counter';
export * from './date-example';
export * from './encryption-demo';
export * from './button';
+1 -1
View File
@@ -2,7 +2,7 @@
module.exports = {
root: true,
ignorePatterns: ['.eslintrc.cjs'],
extends: ['@repo/eslint-config/index.js'],
extends: ['@repo/eslint-config/library.js'],
parser: '@typescript-eslint/parser',
parserOptions: {
project: true,
+1 -1
View File
@@ -1,5 +1,5 @@
{
"extends": "@repo/typescript-config/vite.json",
"extends": "@repo/typescript-config/library.json",
"include": ["."],
"exclude": ["node_modules"]
}
+4574 -35
View File
File diff suppressed because it is too large Load Diff