@tcn/sb-blackcat-addon 3.0.35 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/preview.cjs.map +1 -1
- package/dist/preview.css +1 -0
- package/dist/preview.d.ts.map +1 -1
- package/dist/preview.js.map +1 -1
- package/package.json +7 -4
- package/src/layers.css +1 -0
- package/src/preview.tsx +1 -0
package/dist/preview.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preview.cjs","sources":["../src/globals/theme.ts","../src/decorator.tsx","../src/preview.tsx"],"sourcesContent":["import type { StoryContext } from '@storybook/react-vite';\nimport { windows98StyleSheet } from '@tcn/ui/themes/windows98';\nimport { ergoStyleSheet } from '@tcn/ui/themes/ergo';\n\nexport const sbThemes = Object.freeze({\n ergo: {\n value: 'ergo',\n label: 'Ergo',\n },\n windows98: {\n value: 'windows98',\n label: 'Windows 98',\n },\n});\n\nexport const sbThemeStyleMap = Object.freeze({\n [sbThemes.ergo.value]: ergoStyleSheet,\n [sbThemes.windows98.value]: windows98StyleSheet,\n});\n\nexport function useSBThemeGlobal(context: StoryContext) {\n const theme = context.globals.theme ?? sbThemes.ergo.value;\n return sbThemeStyleMap[theme as keyof typeof sbThemeStyleMap];\n}\n","import { Theme } from '@tcn/ui/themes';\nimport type { Decorator } from '@storybook/react-vite';\nimport { useEffect } from 'react';\nimport styles from './sb_decorator.module.css';\nimport { VStack } from '@tcn/ui/stacks';\nimport { useSBThemeGlobal } from './globals/theme.js';\n\nexport const colorMap = Object.freeze({\n TCN: '#cd6b2c',\n Cyan: '#0abef1',\n Blue: '#1e7aff',\n Purple: '#953e96',\n Magenta: '#f54f9e',\n Red: '#e0383e',\n Orange: '#f7821a',\n Yellow: '#eeb80f',\n Green: '#39b712',\n Grey: '#797979',\n Black: '#333333',\n White: '#ffffff',\n});\n\nexport const colorNames = Object.keys(colorMap);\n\nexport const BlackcatDecorator: Decorator = (Story, context) => {\n const direction = context.globals.direction ?? 'ltr';\n const scalar = context.globals.scalar ?? 1;\n const accent = context.globals.accent ?? 'TCN';\n const textColor = context.globals.textColor ?? '#333333';\n const themeStyleSheet = useSBThemeGlobal(context);\n const hexAccent = colorMap[accent as keyof typeof colorMap];\n const hexTextColor = colorMap[textColor as keyof typeof colorMap];\n\n useEffect(() => {\n document.body.dir = direction;\n document.body.style.setProperty('--scalar', scalar.toString());\n document.body.style.setProperty('--accent-color', hexAccent);\n document.body.style.setProperty('--foreground-color', hexTextColor);\n\n return () => {\n document.body.dir = 'ltr';\n document.body.style.removeProperty('--scalar');\n document.body.style.removeProperty('--accent-color');\n document.body.style.removeProperty('--foreground-color');\n };\n }, [direction, scalar, hexAccent, hexTextColor]);\n\n return (\n <Theme styleSheets={[themeStyleSheet]}>\n <VStack\n className={styles['blackcat-storybook-decorator']}\n height=\"100%\"\n padding=\"16px\"\n overflowY=\"auto\"\n >\n <Story />\n </VStack>\n </Theme>\n );\n};\n","import type { Preview } from '@storybook/react-vite';\nimport { ADDON_ID } from './constants.js';\nimport { BlackcatDecorator, colorNames } from './decorator.js';\nimport { sbThemes } from './globals/theme.js';\n\nconst preview: Preview = {\n parameters: {\n [ADDON_ID]: {\n // enableScalar: true,\n // enableDirection: true,\n },\n },\n globalTypes: {\n theme: {\n name: 'Theme',\n description: 'Theme of the components',\n defaultValue: sbThemes.ergo.value,\n toolbar: {\n icon: 'paintbrush',\n dynamicTitle: true,\n items: [\n { value: sbThemes.ergo.value, title: sbThemes.ergo.label },\n { value: sbThemes.windows98.value, title: sbThemes.windows98.label },\n ],\n },\n },\n direction: {\n name: 'Direction',\n description: 'Layout direction of components based off user settings.',\n defaultValue: 'ltr',\n toolbar: {\n icon: 'transfer',\n items: [\n { value: 'ltr', title: 'Left to Right' },\n { value: 'rtl', title: 'Right to Left' },\n ],\n dynamicTitle: true,\n },\n },\n scalar: {\n name: 'Accessibility Scalar',\n description: 'Scale text and component sizes based off user settings.',\n defaultValue: '1',\n toolbar: {\n icon: 'collapse',\n items: [\n { value: '0.75', title: 'Extra Small' },\n { value: '0.875', title: 'Small' },\n { value: '1', title: 'Medium' },\n { value: '1.125', title: 'Large' },\n { value: '1.25', title: 'Extra Large' },\n ],\n dynamicTitle: true,\n },\n },\n accent: {\n description: 'Global Accent Color',\n defaultValue: 'Blue',\n toolbar: {\n title: 'Accent',\n icon: 'paintbrush',\n items: colorNames,\n dynamicTitle: true,\n },\n },\n textColor: {\n description: 'Global Text Color',\n defaultValue: '#333',\n toolbar: {\n title: 'Text Color',\n icon: 'type',\n items: colorNames,\n dynamicTitle: true,\n },\n },\n },\n\n /**\n * Adds the Blackcat Decorator to all stories.\n */\n decorators: [BlackcatDecorator],\n};\n\nexport default preview;\n"],"names":["ergoStyleSheet","windows98StyleSheet","useEffect","jsx","Theme","VStack","ADDON_ID"],"mappings":";;;;;;;;;;AAIO,MAAM,WAAW,OAAO,OAAO;AAAA,EACpC,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX,CAAC;AAEM,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,CAAC,SAAS,KAAK,KAAK,GAAGA,KAAAA;AAAAA,EACvB,CAAC,SAAS,UAAU,KAAK,GAAGC,UAAAA;AAC9B,CAAC;AAEM,SAAS,iBAAiB,SAAuB;AACtD,QAAM,QAAQ,QAAQ,QAAQ,SAAS,SAAS,KAAK;AACrD,SAAO,gBAAgB,KAAqC;AAC9D;AChBO,MAAM,WAAW,OAAO,OAAO;AAAA,EACpC,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT,CAAC;AAEM,MAAM,aAAa,OAAO,KAAK,QAAQ;AAEvC,MAAM,oBAA+B,CAAC,OAAO,YAAY;AAC9D,QAAM,YAAY,QAAQ,QAAQ,aAAa;AAC/C,QAAM,SAAS,QAAQ,QAAQ,UAAU;AACzC,QAAM,SAAS,QAAQ,QAAQ,UAAU;AACzC,QAAM,YAAY,QAAQ,QAAQ,aAAa;AAC/C,QAAM,kBAAkB,iBAAiB,OAAO;AAChD,QAAM,YAAY,SAAS,MAA+B;AAC1D,QAAM,eAAe,SAAS,SAAkC;AAEhEC,QAAAA,UAAU,MAAM;AACd,aAAS,KAAK,MAAM;AACpB,aAAS,KAAK,MAAM,YAAY,YAAY,OAAO,UAAU;AAC7D,aAAS,KAAK,MAAM,YAAY,kBAAkB,SAAS;AAC3D,aAAS,KAAK,MAAM,YAAY,sBAAsB,YAAY;AAElE,WAAO,MAAM;AACX,eAAS,KAAK,MAAM;AACpB,eAAS,KAAK,MAAM,eAAe,UAAU;AAC7C,eAAS,KAAK,MAAM,eAAe,gBAAgB;AACnD,eAAS,KAAK,MAAM,eAAe,oBAAoB;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,WAAW,QAAQ,WAAW,YAAY,CAAC;AAE/C,SACEC,2BAAAA,IAACC,OAAAA,OAAA,EAAM,aAAa,CAAC,eAAe,GAClC,UAAAD,2BAAAA;AAAAA,IAACE,OAAAA;AAAAA,IAAA;AAAA,MACC,WAAW,OAAO,8BAA8B;AAAA,MAChD,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,WAAU;AAAA,MAEV,yCAAC,OAAA,CAAA,CAAM;AAAA,IAAA;AAAA,EAAA,GAEX;AAEJ;
|
|
1
|
+
{"version":3,"file":"preview.cjs","sources":["../src/globals/theme.ts","../src/decorator.tsx","../src/preview.tsx"],"sourcesContent":["import type { StoryContext } from '@storybook/react-vite';\nimport { windows98StyleSheet } from '@tcn/ui/themes/windows98';\nimport { ergoStyleSheet } from '@tcn/ui/themes/ergo';\n\nexport const sbThemes = Object.freeze({\n ergo: {\n value: 'ergo',\n label: 'Ergo',\n },\n windows98: {\n value: 'windows98',\n label: 'Windows 98',\n },\n});\n\nexport const sbThemeStyleMap = Object.freeze({\n [sbThemes.ergo.value]: ergoStyleSheet,\n [sbThemes.windows98.value]: windows98StyleSheet,\n});\n\nexport function useSBThemeGlobal(context: StoryContext) {\n const theme = context.globals.theme ?? sbThemes.ergo.value;\n return sbThemeStyleMap[theme as keyof typeof sbThemeStyleMap];\n}\n","import { Theme } from '@tcn/ui/themes';\nimport type { Decorator } from '@storybook/react-vite';\nimport { useEffect } from 'react';\nimport styles from './sb_decorator.module.css';\nimport { VStack } from '@tcn/ui/stacks';\nimport { useSBThemeGlobal } from './globals/theme.js';\n\nexport const colorMap = Object.freeze({\n TCN: '#cd6b2c',\n Cyan: '#0abef1',\n Blue: '#1e7aff',\n Purple: '#953e96',\n Magenta: '#f54f9e',\n Red: '#e0383e',\n Orange: '#f7821a',\n Yellow: '#eeb80f',\n Green: '#39b712',\n Grey: '#797979',\n Black: '#333333',\n White: '#ffffff',\n});\n\nexport const colorNames = Object.keys(colorMap);\n\nexport const BlackcatDecorator: Decorator = (Story, context) => {\n const direction = context.globals.direction ?? 'ltr';\n const scalar = context.globals.scalar ?? 1;\n const accent = context.globals.accent ?? 'TCN';\n const textColor = context.globals.textColor ?? '#333333';\n const themeStyleSheet = useSBThemeGlobal(context);\n const hexAccent = colorMap[accent as keyof typeof colorMap];\n const hexTextColor = colorMap[textColor as keyof typeof colorMap];\n\n useEffect(() => {\n document.body.dir = direction;\n document.body.style.setProperty('--scalar', scalar.toString());\n document.body.style.setProperty('--accent-color', hexAccent);\n document.body.style.setProperty('--foreground-color', hexTextColor);\n\n return () => {\n document.body.dir = 'ltr';\n document.body.style.removeProperty('--scalar');\n document.body.style.removeProperty('--accent-color');\n document.body.style.removeProperty('--foreground-color');\n };\n }, [direction, scalar, hexAccent, hexTextColor]);\n\n return (\n <Theme styleSheets={[themeStyleSheet]}>\n <VStack\n className={styles['blackcat-storybook-decorator']}\n height=\"100%\"\n padding=\"16px\"\n overflowY=\"auto\"\n >\n <Story />\n </VStack>\n </Theme>\n );\n};\n","import './layers.css';\nimport type { Preview } from '@storybook/react-vite';\nimport { ADDON_ID } from './constants.js';\nimport { BlackcatDecorator, colorNames } from './decorator.js';\nimport { sbThemes } from './globals/theme.js';\n\nconst preview: Preview = {\n parameters: {\n [ADDON_ID]: {\n // enableScalar: true,\n // enableDirection: true,\n },\n },\n globalTypes: {\n theme: {\n name: 'Theme',\n description: 'Theme of the components',\n defaultValue: sbThemes.ergo.value,\n toolbar: {\n icon: 'paintbrush',\n dynamicTitle: true,\n items: [\n { value: sbThemes.ergo.value, title: sbThemes.ergo.label },\n { value: sbThemes.windows98.value, title: sbThemes.windows98.label },\n ],\n },\n },\n direction: {\n name: 'Direction',\n description: 'Layout direction of components based off user settings.',\n defaultValue: 'ltr',\n toolbar: {\n icon: 'transfer',\n items: [\n { value: 'ltr', title: 'Left to Right' },\n { value: 'rtl', title: 'Right to Left' },\n ],\n dynamicTitle: true,\n },\n },\n scalar: {\n name: 'Accessibility Scalar',\n description: 'Scale text and component sizes based off user settings.',\n defaultValue: '1',\n toolbar: {\n icon: 'collapse',\n items: [\n { value: '0.75', title: 'Extra Small' },\n { value: '0.875', title: 'Small' },\n { value: '1', title: 'Medium' },\n { value: '1.125', title: 'Large' },\n { value: '1.25', title: 'Extra Large' },\n ],\n dynamicTitle: true,\n },\n },\n accent: {\n description: 'Global Accent Color',\n defaultValue: 'Blue',\n toolbar: {\n title: 'Accent',\n icon: 'paintbrush',\n items: colorNames,\n dynamicTitle: true,\n },\n },\n textColor: {\n description: 'Global Text Color',\n defaultValue: '#333',\n toolbar: {\n title: 'Text Color',\n icon: 'type',\n items: colorNames,\n dynamicTitle: true,\n },\n },\n },\n\n /**\n * Adds the Blackcat Decorator to all stories.\n */\n decorators: [BlackcatDecorator],\n};\n\nexport default preview;\n"],"names":["ergoStyleSheet","windows98StyleSheet","useEffect","jsx","Theme","VStack","ADDON_ID"],"mappings":";;;;;;;;;;AAIO,MAAM,WAAW,OAAO,OAAO;AAAA,EACpC,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX,CAAC;AAEM,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,CAAC,SAAS,KAAK,KAAK,GAAGA,KAAAA;AAAAA,EACvB,CAAC,SAAS,UAAU,KAAK,GAAGC,UAAAA;AAC9B,CAAC;AAEM,SAAS,iBAAiB,SAAuB;AACtD,QAAM,QAAQ,QAAQ,QAAQ,SAAS,SAAS,KAAK;AACrD,SAAO,gBAAgB,KAAqC;AAC9D;AChBO,MAAM,WAAW,OAAO,OAAO;AAAA,EACpC,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT,CAAC;AAEM,MAAM,aAAa,OAAO,KAAK,QAAQ;AAEvC,MAAM,oBAA+B,CAAC,OAAO,YAAY;AAC9D,QAAM,YAAY,QAAQ,QAAQ,aAAa;AAC/C,QAAM,SAAS,QAAQ,QAAQ,UAAU;AACzC,QAAM,SAAS,QAAQ,QAAQ,UAAU;AACzC,QAAM,YAAY,QAAQ,QAAQ,aAAa;AAC/C,QAAM,kBAAkB,iBAAiB,OAAO;AAChD,QAAM,YAAY,SAAS,MAA+B;AAC1D,QAAM,eAAe,SAAS,SAAkC;AAEhEC,QAAAA,UAAU,MAAM;AACd,aAAS,KAAK,MAAM;AACpB,aAAS,KAAK,MAAM,YAAY,YAAY,OAAO,UAAU;AAC7D,aAAS,KAAK,MAAM,YAAY,kBAAkB,SAAS;AAC3D,aAAS,KAAK,MAAM,YAAY,sBAAsB,YAAY;AAElE,WAAO,MAAM;AACX,eAAS,KAAK,MAAM;AACpB,eAAS,KAAK,MAAM,eAAe,UAAU;AAC7C,eAAS,KAAK,MAAM,eAAe,gBAAgB;AACnD,eAAS,KAAK,MAAM,eAAe,oBAAoB;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,WAAW,QAAQ,WAAW,YAAY,CAAC;AAE/C,SACEC,2BAAAA,IAACC,OAAAA,OAAA,EAAM,aAAa,CAAC,eAAe,GAClC,UAAAD,2BAAAA;AAAAA,IAACE,OAAAA;AAAAA,IAAA;AAAA,MACC,WAAW,OAAO,8BAA8B;AAAA,MAChD,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,WAAU;AAAA,MAEV,yCAAC,OAAA,CAAA,CAAM;AAAA,IAAA;AAAA,EAAA,GAEX;AAEJ;ACrDA,MAAM,UAAmB;AAAA,EACvB,YAAY;AAAA,IACV,CAACC,uBAAQ,GAAG;AAAA;AAAA;AAAA,IAAA;AAAA,EAGZ;AAAA,EAEF,aAAa;AAAA,IACX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc,SAAS,KAAK;AAAA,MAC5B,SAAS;AAAA,QACP,MAAM;AAAA,QACN,cAAc;AAAA,QACd,OAAO;AAAA,UACL,EAAE,OAAO,SAAS,KAAK,OAAO,OAAO,SAAS,KAAK,MAAA;AAAA,UACnD,EAAE,OAAO,SAAS,UAAU,OAAO,OAAO,SAAS,UAAU,MAAA;AAAA,QAAM;AAAA,MACrE;AAAA,IACF;AAAA,IAEF,WAAW;AAAA,MACT,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,UACL,EAAE,OAAO,OAAO,OAAO,gBAAA;AAAA,UACvB,EAAE,OAAO,OAAO,OAAO,gBAAA;AAAA,QAAgB;AAAA,QAEzC,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA,IAEF,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,UACL,EAAE,OAAO,QAAQ,OAAO,cAAA;AAAA,UACxB,EAAE,OAAO,SAAS,OAAO,QAAA;AAAA,UACzB,EAAE,OAAO,KAAK,OAAO,SAAA;AAAA,UACrB,EAAE,OAAO,SAAS,OAAO,QAAA;AAAA,UACzB,EAAE,OAAO,QAAQ,OAAO,cAAA;AAAA,QAAc;AAAA,QAExC,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA,IAEF,QAAQ;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,QACP,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA,IAEF,WAAW;AAAA,MACT,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,QACP,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAMF,YAAY,CAAC,iBAAiB;AAChC;;"}
|
package/dist/preview.css
CHANGED
package/dist/preview.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../src/preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAKrD,QAAA,MAAM,OAAO,EAAE,OA4Ed,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
1
|
+
{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../src/preview.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAKrD,QAAA,MAAM,OAAO,EAAE,OA4Ed,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/dist/preview.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preview.js","sources":["../src/globals/theme.ts","../src/decorator.tsx","../src/preview.tsx"],"sourcesContent":["import type { StoryContext } from '@storybook/react-vite';\nimport { windows98StyleSheet } from '@tcn/ui/themes/windows98';\nimport { ergoStyleSheet } from '@tcn/ui/themes/ergo';\n\nexport const sbThemes = Object.freeze({\n ergo: {\n value: 'ergo',\n label: 'Ergo',\n },\n windows98: {\n value: 'windows98',\n label: 'Windows 98',\n },\n});\n\nexport const sbThemeStyleMap = Object.freeze({\n [sbThemes.ergo.value]: ergoStyleSheet,\n [sbThemes.windows98.value]: windows98StyleSheet,\n});\n\nexport function useSBThemeGlobal(context: StoryContext) {\n const theme = context.globals.theme ?? sbThemes.ergo.value;\n return sbThemeStyleMap[theme as keyof typeof sbThemeStyleMap];\n}\n","import { Theme } from '@tcn/ui/themes';\nimport type { Decorator } from '@storybook/react-vite';\nimport { useEffect } from 'react';\nimport styles from './sb_decorator.module.css';\nimport { VStack } from '@tcn/ui/stacks';\nimport { useSBThemeGlobal } from './globals/theme.js';\n\nexport const colorMap = Object.freeze({\n TCN: '#cd6b2c',\n Cyan: '#0abef1',\n Blue: '#1e7aff',\n Purple: '#953e96',\n Magenta: '#f54f9e',\n Red: '#e0383e',\n Orange: '#f7821a',\n Yellow: '#eeb80f',\n Green: '#39b712',\n Grey: '#797979',\n Black: '#333333',\n White: '#ffffff',\n});\n\nexport const colorNames = Object.keys(colorMap);\n\nexport const BlackcatDecorator: Decorator = (Story, context) => {\n const direction = context.globals.direction ?? 'ltr';\n const scalar = context.globals.scalar ?? 1;\n const accent = context.globals.accent ?? 'TCN';\n const textColor = context.globals.textColor ?? '#333333';\n const themeStyleSheet = useSBThemeGlobal(context);\n const hexAccent = colorMap[accent as keyof typeof colorMap];\n const hexTextColor = colorMap[textColor as keyof typeof colorMap];\n\n useEffect(() => {\n document.body.dir = direction;\n document.body.style.setProperty('--scalar', scalar.toString());\n document.body.style.setProperty('--accent-color', hexAccent);\n document.body.style.setProperty('--foreground-color', hexTextColor);\n\n return () => {\n document.body.dir = 'ltr';\n document.body.style.removeProperty('--scalar');\n document.body.style.removeProperty('--accent-color');\n document.body.style.removeProperty('--foreground-color');\n };\n }, [direction, scalar, hexAccent, hexTextColor]);\n\n return (\n <Theme styleSheets={[themeStyleSheet]}>\n <VStack\n className={styles['blackcat-storybook-decorator']}\n height=\"100%\"\n padding=\"16px\"\n overflowY=\"auto\"\n >\n <Story />\n </VStack>\n </Theme>\n );\n};\n","import type { Preview } from '@storybook/react-vite';\nimport { ADDON_ID } from './constants.js';\nimport { BlackcatDecorator, colorNames } from './decorator.js';\nimport { sbThemes } from './globals/theme.js';\n\nconst preview: Preview = {\n parameters: {\n [ADDON_ID]: {\n // enableScalar: true,\n // enableDirection: true,\n },\n },\n globalTypes: {\n theme: {\n name: 'Theme',\n description: 'Theme of the components',\n defaultValue: sbThemes.ergo.value,\n toolbar: {\n icon: 'paintbrush',\n dynamicTitle: true,\n items: [\n { value: sbThemes.ergo.value, title: sbThemes.ergo.label },\n { value: sbThemes.windows98.value, title: sbThemes.windows98.label },\n ],\n },\n },\n direction: {\n name: 'Direction',\n description: 'Layout direction of components based off user settings.',\n defaultValue: 'ltr',\n toolbar: {\n icon: 'transfer',\n items: [\n { value: 'ltr', title: 'Left to Right' },\n { value: 'rtl', title: 'Right to Left' },\n ],\n dynamicTitle: true,\n },\n },\n scalar: {\n name: 'Accessibility Scalar',\n description: 'Scale text and component sizes based off user settings.',\n defaultValue: '1',\n toolbar: {\n icon: 'collapse',\n items: [\n { value: '0.75', title: 'Extra Small' },\n { value: '0.875', title: 'Small' },\n { value: '1', title: 'Medium' },\n { value: '1.125', title: 'Large' },\n { value: '1.25', title: 'Extra Large' },\n ],\n dynamicTitle: true,\n },\n },\n accent: {\n description: 'Global Accent Color',\n defaultValue: 'Blue',\n toolbar: {\n title: 'Accent',\n icon: 'paintbrush',\n items: colorNames,\n dynamicTitle: true,\n },\n },\n textColor: {\n description: 'Global Text Color',\n defaultValue: '#333',\n toolbar: {\n title: 'Text Color',\n icon: 'type',\n items: colorNames,\n dynamicTitle: true,\n },\n },\n },\n\n /**\n * Adds the Blackcat Decorator to all stories.\n */\n decorators: [BlackcatDecorator],\n};\n\nexport default preview;\n"],"names":[],"mappings":";;;;;;;;;AAIO,MAAM,WAAW,OAAO,OAAO;AAAA,EACpC,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX,CAAC;AAEM,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,CAAC,SAAS,KAAK,KAAK,GAAG;AAAA,EACvB,CAAC,SAAS,UAAU,KAAK,GAAG;AAC9B,CAAC;AAEM,SAAS,iBAAiB,SAAuB;AACtD,QAAM,QAAQ,QAAQ,QAAQ,SAAS,SAAS,KAAK;AACrD,SAAO,gBAAgB,KAAqC;AAC9D;AChBO,MAAM,WAAW,OAAO,OAAO;AAAA,EACpC,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT,CAAC;AAEM,MAAM,aAAa,OAAO,KAAK,QAAQ;AAEvC,MAAM,oBAA+B,CAAC,OAAO,YAAY;AAC9D,QAAM,YAAY,QAAQ,QAAQ,aAAa;AAC/C,QAAM,SAAS,QAAQ,QAAQ,UAAU;AACzC,QAAM,SAAS,QAAQ,QAAQ,UAAU;AACzC,QAAM,YAAY,QAAQ,QAAQ,aAAa;AAC/C,QAAM,kBAAkB,iBAAiB,OAAO;AAChD,QAAM,YAAY,SAAS,MAA+B;AAC1D,QAAM,eAAe,SAAS,SAAkC;AAEhE,YAAU,MAAM;AACd,aAAS,KAAK,MAAM;AACpB,aAAS,KAAK,MAAM,YAAY,YAAY,OAAO,UAAU;AAC7D,aAAS,KAAK,MAAM,YAAY,kBAAkB,SAAS;AAC3D,aAAS,KAAK,MAAM,YAAY,sBAAsB,YAAY;AAElE,WAAO,MAAM;AACX,eAAS,KAAK,MAAM;AACpB,eAAS,KAAK,MAAM,eAAe,UAAU;AAC7C,eAAS,KAAK,MAAM,eAAe,gBAAgB;AACnD,eAAS,KAAK,MAAM,eAAe,oBAAoB;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,WAAW,QAAQ,WAAW,YAAY,CAAC;AAE/C,SACE,oBAAC,OAAA,EAAM,aAAa,CAAC,eAAe,GAClC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,OAAO,8BAA8B;AAAA,MAChD,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,WAAU;AAAA,MAEV,8BAAC,OAAA,CAAA,CAAM;AAAA,IAAA;AAAA,EAAA,GAEX;AAEJ;
|
|
1
|
+
{"version":3,"file":"preview.js","sources":["../src/globals/theme.ts","../src/decorator.tsx","../src/preview.tsx"],"sourcesContent":["import type { StoryContext } from '@storybook/react-vite';\nimport { windows98StyleSheet } from '@tcn/ui/themes/windows98';\nimport { ergoStyleSheet } from '@tcn/ui/themes/ergo';\n\nexport const sbThemes = Object.freeze({\n ergo: {\n value: 'ergo',\n label: 'Ergo',\n },\n windows98: {\n value: 'windows98',\n label: 'Windows 98',\n },\n});\n\nexport const sbThemeStyleMap = Object.freeze({\n [sbThemes.ergo.value]: ergoStyleSheet,\n [sbThemes.windows98.value]: windows98StyleSheet,\n});\n\nexport function useSBThemeGlobal(context: StoryContext) {\n const theme = context.globals.theme ?? sbThemes.ergo.value;\n return sbThemeStyleMap[theme as keyof typeof sbThemeStyleMap];\n}\n","import { Theme } from '@tcn/ui/themes';\nimport type { Decorator } from '@storybook/react-vite';\nimport { useEffect } from 'react';\nimport styles from './sb_decorator.module.css';\nimport { VStack } from '@tcn/ui/stacks';\nimport { useSBThemeGlobal } from './globals/theme.js';\n\nexport const colorMap = Object.freeze({\n TCN: '#cd6b2c',\n Cyan: '#0abef1',\n Blue: '#1e7aff',\n Purple: '#953e96',\n Magenta: '#f54f9e',\n Red: '#e0383e',\n Orange: '#f7821a',\n Yellow: '#eeb80f',\n Green: '#39b712',\n Grey: '#797979',\n Black: '#333333',\n White: '#ffffff',\n});\n\nexport const colorNames = Object.keys(colorMap);\n\nexport const BlackcatDecorator: Decorator = (Story, context) => {\n const direction = context.globals.direction ?? 'ltr';\n const scalar = context.globals.scalar ?? 1;\n const accent = context.globals.accent ?? 'TCN';\n const textColor = context.globals.textColor ?? '#333333';\n const themeStyleSheet = useSBThemeGlobal(context);\n const hexAccent = colorMap[accent as keyof typeof colorMap];\n const hexTextColor = colorMap[textColor as keyof typeof colorMap];\n\n useEffect(() => {\n document.body.dir = direction;\n document.body.style.setProperty('--scalar', scalar.toString());\n document.body.style.setProperty('--accent-color', hexAccent);\n document.body.style.setProperty('--foreground-color', hexTextColor);\n\n return () => {\n document.body.dir = 'ltr';\n document.body.style.removeProperty('--scalar');\n document.body.style.removeProperty('--accent-color');\n document.body.style.removeProperty('--foreground-color');\n };\n }, [direction, scalar, hexAccent, hexTextColor]);\n\n return (\n <Theme styleSheets={[themeStyleSheet]}>\n <VStack\n className={styles['blackcat-storybook-decorator']}\n height=\"100%\"\n padding=\"16px\"\n overflowY=\"auto\"\n >\n <Story />\n </VStack>\n </Theme>\n );\n};\n","import './layers.css';\nimport type { Preview } from '@storybook/react-vite';\nimport { ADDON_ID } from './constants.js';\nimport { BlackcatDecorator, colorNames } from './decorator.js';\nimport { sbThemes } from './globals/theme.js';\n\nconst preview: Preview = {\n parameters: {\n [ADDON_ID]: {\n // enableScalar: true,\n // enableDirection: true,\n },\n },\n globalTypes: {\n theme: {\n name: 'Theme',\n description: 'Theme of the components',\n defaultValue: sbThemes.ergo.value,\n toolbar: {\n icon: 'paintbrush',\n dynamicTitle: true,\n items: [\n { value: sbThemes.ergo.value, title: sbThemes.ergo.label },\n { value: sbThemes.windows98.value, title: sbThemes.windows98.label },\n ],\n },\n },\n direction: {\n name: 'Direction',\n description: 'Layout direction of components based off user settings.',\n defaultValue: 'ltr',\n toolbar: {\n icon: 'transfer',\n items: [\n { value: 'ltr', title: 'Left to Right' },\n { value: 'rtl', title: 'Right to Left' },\n ],\n dynamicTitle: true,\n },\n },\n scalar: {\n name: 'Accessibility Scalar',\n description: 'Scale text and component sizes based off user settings.',\n defaultValue: '1',\n toolbar: {\n icon: 'collapse',\n items: [\n { value: '0.75', title: 'Extra Small' },\n { value: '0.875', title: 'Small' },\n { value: '1', title: 'Medium' },\n { value: '1.125', title: 'Large' },\n { value: '1.25', title: 'Extra Large' },\n ],\n dynamicTitle: true,\n },\n },\n accent: {\n description: 'Global Accent Color',\n defaultValue: 'Blue',\n toolbar: {\n title: 'Accent',\n icon: 'paintbrush',\n items: colorNames,\n dynamicTitle: true,\n },\n },\n textColor: {\n description: 'Global Text Color',\n defaultValue: '#333',\n toolbar: {\n title: 'Text Color',\n icon: 'type',\n items: colorNames,\n dynamicTitle: true,\n },\n },\n },\n\n /**\n * Adds the Blackcat Decorator to all stories.\n */\n decorators: [BlackcatDecorator],\n};\n\nexport default preview;\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tcn/sb-blackcat-addon",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"author": "TCN",
|
|
6
6
|
"description": "Storybook addon that provides Blackcat accessibility scalar and layout direction.",
|
|
@@ -38,12 +38,15 @@
|
|
|
38
38
|
"license": "Apache-2.0",
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"react": "^18.2.0",
|
|
41
|
-
"react-dom": "^18.2.0"
|
|
41
|
+
"react-dom": "^18.2.0",
|
|
42
|
+
"@tcn/ui": "^0.18.1"
|
|
43
|
+
},
|
|
44
|
+
"devDependencies": {
|
|
45
|
+
"@tcn/ui": "0.18.1"
|
|
42
46
|
},
|
|
43
47
|
"dependencies": {
|
|
44
48
|
"clsx": "^2.1.1",
|
|
45
|
-
"@tcn/state": "1.3.
|
|
46
|
-
"@tcn/ui": "0.17.0"
|
|
49
|
+
"@tcn/state": "1.3.4"
|
|
47
50
|
},
|
|
48
51
|
"scripts": {
|
|
49
52
|
"build": "vite build",
|
package/src/layers.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer tcn-reset, tcn-system, tcn-theme;
|
package/src/preview.tsx
CHANGED