@razorwind/storybook 0.0.81 → 0.0.83
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/index.cjs +23 -16
- package/dist/index.d.cts +6 -0
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts +6 -0
- package/dist/index.mjs +58 -51
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -4
package/dist/index.cjs
CHANGED
|
@@ -84,7 +84,7 @@ export function resolveThemeVariant<T extends Record<string, unknown>>(
|
|
|
84
84
|
? (theme as keyof T & string)
|
|
85
85
|
: fallback;
|
|
86
86
|
}
|
|
87
|
-
`}function
|
|
87
|
+
`}function te(e,t){let r=(0,n.resolveTokenSets)(e),i=r.filter(e=>!(0,n.isSharedThemeId)(e.id));return i.length<=1?{default:C(u(e,t))}:Object.fromEntries(i.map(e=>[e.id,C(u(U(r,e),t))]))}function T(e,t){let n=/* @__PURE__ */ new Map;for(let r of e){let e=r.path.split(`.`).slice(0,Math.max(t,1)).join(`.`)||r.path,i=n.get(e)??[];i.push(r),n.set(e,i)}return n}function E(e,t){return e===t?e.split(`.`).at(-1)??e:e.startsWith(`${t}.`)?e.slice(t.length+1):e.split(`.`).at(-1)??e}function D(e,t={}){let n=t.colorGroupBy??2,r=Object.entries(e),i=r[0]?.[0]??`default`,a=w(e),o=(e,t=` `)=>[...T(e,n).entries()].toSorted(([e],[t])=>e.localeCompare(t)).map(([e,n])=>{let r=n.map(n=>`${t} ${f(E(n.path,e))}: ${f(n.cssValue)}`).join(`,
|
|
88
88
|
`),i=n.find(e=>e.description)?.description??`${n.length} token${n.length===1?``:`s`}`;return`${t}<ColorItem
|
|
89
89
|
title={${f(e)}}
|
|
90
90
|
subtitle={${f(i)}}
|
|
@@ -151,7 +151,7 @@ export function TypesetBlock({ theme }: TypesetBlockProps = {}) {
|
|
|
151
151
|
|
|
152
152
|
return TYPESET_VARIANTS[activeTheme];
|
|
153
153
|
}
|
|
154
|
-
`}function
|
|
154
|
+
`}function k(e){let t=w(e),n=Object.entries(e),r=n[0]?.[0]??`default`,i=e=>e.map(e=>{let t=e.theme?f(e.theme):`undefined`;return` {
|
|
155
155
|
path: ${f(e.path)},
|
|
156
156
|
type: ${e.type?f(e.type):`undefined`},
|
|
157
157
|
value: ${f(e.cssValue)},
|
|
@@ -278,7 +278,7 @@ export function TokenTableBlock({
|
|
|
278
278
|
</table>
|
|
279
279
|
);
|
|
280
280
|
}
|
|
281
|
-
`}function
|
|
281
|
+
`}function A(e){let t=e.titlePrefix??`Design Tokens`,n=e.hasColors?`
|
|
282
282
|
## Colors
|
|
283
283
|
|
|
284
284
|
<ColorPaletteBlock />
|
|
@@ -316,7 +316,7 @@ ${n}${r}${i}${a}${o}
|
|
|
316
316
|
## All tokens
|
|
317
317
|
|
|
318
318
|
<TokenTableBlock />
|
|
319
|
-
`}function
|
|
319
|
+
`}function ne(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
320
320
|
import { ColorPaletteBlock } from "./blocks/ColorPalette";
|
|
321
321
|
|
|
322
322
|
<Meta title="${d(e.titlePrefix??`Design Tokens`)}/Colors" />
|
|
@@ -324,7 +324,7 @@ import { ColorPaletteBlock } from "./blocks/ColorPalette";
|
|
|
324
324
|
# Colors
|
|
325
325
|
|
|
326
326
|
<ColorPaletteBlock />
|
|
327
|
-
`}function
|
|
327
|
+
`}function re(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
328
328
|
import { TypesetBlock } from "./blocks/Typeset";
|
|
329
329
|
import { TokenTableBlock } from "./blocks/TokenTable";
|
|
330
330
|
|
|
@@ -337,7 +337,7 @@ import { TokenTableBlock } from "./blocks/TokenTable";
|
|
|
337
337
|
## Typography tokens
|
|
338
338
|
|
|
339
339
|
<TokenTableBlock typography />
|
|
340
|
-
`}function
|
|
340
|
+
`}function j(e,t){let n=e[t];return typeof n==`string`?n:void 0}function M(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function N(e){return`import { IconGallery, IconItem } from "@storybook/addon-docs/blocks";
|
|
341
341
|
|
|
342
342
|
/**
|
|
343
343
|
* Icons rendered with Storybook's IconGallery doc block.
|
|
@@ -347,7 +347,7 @@ import { TokenTableBlock } from "./blocks/TokenTable";
|
|
|
347
347
|
export function IconGalleryBlock() {
|
|
348
348
|
return (
|
|
349
349
|
<IconGallery>
|
|
350
|
-
${(
|
|
350
|
+
${(M(e)?Object.values(e).filter(M).toSorted((e,t)=>(j(e,`name`)??``).localeCompare(j(t,`name`)??``)):[]).map(e=>{let t=j(e,`name`)??`unknown`,n=(Array.isArray(e.files)?e.files:[]).find(e=>M(e)&&j(e,`type`)===`svg`&&typeof e.content==`string`),r=M(n)&&typeof n.content==`string`?`<span
|
|
351
351
|
style={{ display: "inline-flex", width: 24, height: 24 }}
|
|
352
352
|
dangerouslySetInnerHTML={{ __html: ${f(n.content)} }}
|
|
353
353
|
/>`:`<code>${d(t)}</code>`;return` <IconItem name={${f(t)}}>
|
|
@@ -357,7 +357,7 @@ ${(A(e)?Object.values(e).filter(A).toSorted((e,t)=>(k(e,`name`)??``).localeCompa
|
|
|
357
357
|
</IconGallery>
|
|
358
358
|
);
|
|
359
359
|
}
|
|
360
|
-
`}function
|
|
360
|
+
`}function ie(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
361
361
|
import { IconGalleryBlock } from "./blocks/IconGallery";
|
|
362
362
|
|
|
363
363
|
<Meta title="${d(e.titlePrefix??`Design Tokens`)}/Icons" />
|
|
@@ -365,9 +365,9 @@ import { IconGalleryBlock } from "./blocks/IconGallery";
|
|
|
365
365
|
# Icons
|
|
366
366
|
|
|
367
367
|
<IconGalleryBlock />
|
|
368
|
-
`}function
|
|
368
|
+
`}function P(e,t={}){let n=t.sampleText??m,i=e.map(e=>{let t=j(e,`name`)??`unknown`,n=(0,r.resolveFontStack)(e);return` ${f(t)}: {
|
|
369
369
|
family: ${f(n)},
|
|
370
|
-
title: ${f(
|
|
370
|
+
title: ${f(j(e,`title`)??t)},
|
|
371
371
|
weights: [${(0,r.resolveFontWeights)(e).join(`, `)}]
|
|
372
372
|
}`}).join(`,
|
|
373
373
|
`),a=`[${r.FONT_SPECIMEN_SIZES.join(`, `)}]`,o=Object.entries(r.FONT_WEIGHT_NAMES).map(([e,t])=>` ${e}: ${f(t)}`).join(`,
|
|
@@ -395,7 +395,7 @@ const WEIGHT_NAMES: Record<number, string> = {
|
|
|
395
395
|
${o}
|
|
396
396
|
};
|
|
397
397
|
|
|
398
|
-
const DEFAULT_FONT = ${f(e[0]?
|
|
398
|
+
const DEFAULT_FONT = ${f(e[0]?j(e[0],`name`)??`unknown`:`unknown`)};
|
|
399
399
|
const DEFAULT_SIZES = ${a};
|
|
400
400
|
const DEFAULT_SAMPLE_TEXT = ${f(n)};
|
|
401
401
|
const WEIGHT_SAMPLE_SIZE = ${r.FONT_WEIGHT_SPECIMEN_SIZE};
|
|
@@ -471,7 +471,7 @@ export function FontSpecimenBlock({
|
|
|
471
471
|
</div>
|
|
472
472
|
);
|
|
473
473
|
}
|
|
474
|
-
`}function
|
|
474
|
+
`}function F(e){let t=e.titlePrefix??`Design Tokens`,n=e.fonts.map(t=>{let n=j(t,`name`)??`unknown`;return`- [${j(t,`title`)??n}](./Fonts/${e.slugs.get(t)??(0,r.fontSlug)(t)}.mdx)`});return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
475
475
|
|
|
476
476
|
<Meta title="${d(t)}/Fonts" />
|
|
477
477
|
|
|
@@ -481,13 +481,20 @@ ${e.fonts.length} font${e.fonts.length===1?``:`s`} in the design system.
|
|
|
481
481
|
|
|
482
482
|
${n.join(`
|
|
483
483
|
`)}
|
|
484
|
-
`}function
|
|
484
|
+
`}function I(e,t,n={}){let i=n.titlePrefix??`Design Tokens`,a=j(e,`name`)??`unknown`,o=j(e,`title`)??a;return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
485
485
|
|
|
486
486
|
<Meta title="${d(i)}/Fonts/${d(o)}" />
|
|
487
487
|
|
|
488
488
|
# ${o}
|
|
489
489
|
|
|
490
490
|
${(0,r.renderFontBody)(e,n.sampleText,n.fontAssetBaseUrl)}
|
|
491
|
+
`}function ae(e,t,r={}){let i=r.titlePrefix??`Design Tokens`,{guideline:a}=t;return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
492
|
+
|
|
493
|
+
<Meta title="${[i,`Guidelines`,...e.title?e.title.split(` / `):[],a.name].map(d).join(`/`)}" />
|
|
494
|
+
|
|
495
|
+
# ${(0,n.escapeMdx)(a.name)}
|
|
496
|
+
${a.version?`\n_Version ${(0,n.escapeMdx)(a.version)}_\n`:``}
|
|
497
|
+
${(0,n.escapeMdx)((0,n.renderGuidelineBody)(a,1))}
|
|
491
498
|
`}function oe(e=!0,t=!0){return`export { ColorPaletteBlock } from "./ColorPalette";
|
|
492
499
|
export type { ColorPaletteBlockProps } from "./ColorPalette";
|
|
493
500
|
${e?`export { IconGalleryBlock } from "./IconGallery";
|
|
@@ -497,7 +504,7 @@ export type { FontSpecimenBlockProps } from "./FontSpecimen";
|
|
|
497
504
|
export type { TokenTableBlockProps, TokenTableRow } from "./TokenTable";
|
|
498
505
|
export { TypesetBlock } from "./Typeset";
|
|
499
506
|
export type { TypesetBlockProps } from "./Typeset";
|
|
500
|
-
`}const
|
|
507
|
+
`}const L=/* @__PURE__ */ new Set(/* @__PURE__ */ `base.colorPrimary.colorSecondary.appBg.appContentBg.appHoverBg.appPreviewBg.appBorderColor.appBorderRadius.fontBase.fontCode.textColor.textInverseColor.textMutedColor.barTextColor.barHoverColor.barSelectedColor.barBg.buttonBg.buttonBorder.booleanBg.booleanSelectedBg.inputBg.inputBorder.inputTextColor.inputBorderRadius.brandTitle.brandUrl.brandImage.brandTarget.gridCellSize`.split(`.`));function R(e){return M(e)?e.base===`light`||e.base===`dark`:!1}function z(e){return M(e)?R(e)?!0:Object.keys(e).some(e=>L.has(e)):!1}function B(e){if(!M(e)||z(e))return!1;let t=Object.values(e);return t.length>0&&t.every(z)}function V(e,t,n){return t.base===`light`||t.base===`dark`?t.base:`${e} ${n??``}`.toLowerCase().includes(`light`)?`light`:`dark`}function H(e){return/^[a-z_$][\w$]*$/i.test(e)?e:f(e)}function U(e,t){let r=e.find(e=>e.id===n.SHARED_THEME_ID);return!r||(0,n.isSharedThemeId)(t.id)?t.tokens:(0,n.mergeTokenTrees)(t.tokens,r.tokens)}function W(e){return M(e)&&`$value`in e&&!(`colorSpace`in e)&&!(`hex`in e)?e.$value:e}function G(e,t){let n=W(e),r=/* @__PURE__ */ new Set;for(let e=0;e<8;e++){let e=x(n);if(!e||r.has(e))break;r.add(e);let i=t.get(e);if(!i)break;n=i.value}return n}function K(e){return e==null||typeof e==`string`||typeof e==`number`||typeof e==`boolean`?e:(0,n.formatTokenValue)(e)}function se(e,t){let r=(0,n.resolveTokenSets)(e),i=r.find(e=>e.id===t)??(r.length===1?r[0]:void 0),a=i?U(r,i):e,o=/* @__PURE__ */ new Map;for(let e of u(a))(!o.get(e.path)||e.theme===t)&&o.set(e.path,e);return o}function ce(e,t){let n={...e};for(let[r,i]of Object.entries(e))r!==`base`&&i!==void 0&&(n[r]=K(G(i,t)));return n}function le(e,t,n,r,i){let a=ce(t,se(i.tokens,e));return q(V(e,a,i.theme),a,n,r)}function q(e,n,r,i){let a=(0,t.pickFontByRole)(i,t.SANS_ROLES),o=(0,t.pickFontByRole)(i,t.MONO_ROLES);return{brandTarget:`_blank`,base:e||`light`,...n,brandTitle:n.brandTitle??r.title,brandUrl:n.brandUrl??r.homepage,brandImage:n.brandImage??r.logo,fontBase:n.fontBase??(a?(0,t.cssFontFamily)(a):void 0),fontCode:n.fontCode??(o?(0,t.cssFontFamily)(o):void 0)}}function J(e,t=``){return`create({\n${Object.entries(e).filter(([,e])=>e!==void 0).map(([e,n])=>`${t} ${e}: ${f(n)}`).join(`,
|
|
501
508
|
`)}\n${t}})`}function Y(e){return`import { create } from "storybook/theming";
|
|
502
509
|
|
|
503
510
|
/**
|
|
@@ -514,7 +521,7 @@ export default ${J(e)};
|
|
|
514
521
|
* @see https://storybook.js.org/docs/configure/user-interface/theming
|
|
515
522
|
*/
|
|
516
523
|
export default {
|
|
517
|
-
${Object.entries(e).map(([e,t])=>` ${
|
|
524
|
+
${Object.entries(e).map(([e,t])=>` ${H(e)}: ${J(t,` `)}`).join(`,
|
|
518
525
|
`)}
|
|
519
526
|
};
|
|
520
|
-
`}function Z(e){if(
|
|
527
|
+
`}function Z(e){if(R(e))return Y(e);let t=Object.entries(e);if(t.length!==1)return X(e);let[,n]=t[0]??[];return n?Y(n):X(e)}function Q(e,t,r,i){let a=(e,n)=>le(e,n,r,t.fonts,t);if(B(e))return Object.fromEntries(Object.entries(e).map(([e,t])=>[e,a(e,t)]));let o=(0,n.resolveTokenSets)(t.tokens),s=o.filter(e=>!(0,n.isSharedThemeId)(e.id));if(s.length>1){let e={};for(let t of s){let n=i(U(o,t));if(B(n)){let r=n[t.id];if(r){e[t.id]=a(t.id,r);continue}for(let[t,r]of Object.entries(n))e[t]=a(t,r);continue}z(n)&&(e[t.id]=a(t.id,n))}return e}if(z(e)){let n=s[0]&&s[0].id!=="default"?s[0].id:t.theme??`default`;return{[n]:a(n,e)}}return{}}const ue=e=>(t,r,a)=>(0,n.createDocument)((0,i.joinPaths)(e,t),r,{name:`razorwind-storybook`},!1,a);function $(e,t={}){let a=t.outputPath??`storybook/tokens`,o=(0,n.resolveSchemaIdentity)(e),s=t.titlePrefix??o.title??`Design Tokens`,c={...t,titlePrefix:s,cssVarPrefix:t.cssVarPrefix??(0,n.cssVarPrefixFromName)(e.name)},l=u(e.tokens,c),d=te(e.tokens,c),f=l.some(e=>e.type===`color`),m=e.fonts&&Object.keys(e.fonts).length>0||l.some(_),h=v(l,[`size`]),g=v(l,[`space`,`spacing`]),y=!t.skipIcons&&M(e.icons)&&Object.keys(e.icons).length>0,b=t.skipFonts?[]:(0,r.extractFonts)(e.fonts),x=b.length>0,S=(0,r.fontSlugs)(b),C=ue(a),T={[(0,i.joinPaths)(a,`blocks/ColorPalette.tsx`)]:C(`blocks/ColorPalette.tsx`,D(d,c),`tsx`),[(0,i.joinPaths)(a,`blocks/Typeset.tsx`)]:C(`blocks/Typeset.tsx`,O(d,{...c,fonts:e.fonts}),`tsx`),[(0,i.joinPaths)(a,`blocks/TokenTable.tsx`)]:C(`blocks/TokenTable.tsx`,k(d),`tsx`),[(0,i.joinPaths)(a,`blocks/index.ts`)]:C(`blocks/index.ts`,oe(y,x),`typescript`),[(0,i.joinPaths)(a,`Tokens.mdx`)]:C(`Tokens.mdx`,A({titlePrefix:s,hasColors:f,hasTypography:m,hasSizes:h,hasSpaces:g,hasFonts:x}),`mdx`)};if(y&&(T[(0,i.joinPaths)(a,`blocks/IconGallery.tsx`)]=C(`blocks/IconGallery.tsx`,N(e.icons),`tsx`)),w(d)&&(T[(0,i.joinPaths)(a,`blocks/ThemeVariant.ts`)]=C(`blocks/ThemeVariant.ts`,ee(),`typescript`)),f&&(T[(0,i.joinPaths)(a,`Colors.mdx`)]=C(`Colors.mdx`,ne(c),`mdx`)),m&&(T[(0,i.joinPaths)(a,`Typography.mdx`)]=C(`Typography.mdx`,re(c),`mdx`)),y&&(T[(0,i.joinPaths)(a,`Icons.mdx`)]=C(`Icons.mdx`,ie(c),`mdx`)),x){T[(0,i.joinPaths)(a,`blocks/FontSpecimen.tsx`)]=C(`blocks/FontSpecimen.tsx`,P(b,c),`tsx`),T[(0,i.joinPaths)(a,`Fonts.mdx`)]=C(`Fonts.mdx`,F({...c,fonts:b,slugs:S}),`mdx`);for(let e of b){let t=S.get(e)??(0,r.fontSlug)(e),n=j(e,`name`)??`unknown`,o=(0,i.joinPaths)(`Fonts`,`${t}.mdx`);T[(0,i.joinPaths)(a,o)]=C(o,I(e,n,c),`mdx`)}}if(!t.skipGuidelines)for(let t of(0,n.groupGuidelines)(e.guidelines))for(let e of t.guidelines){let n=(0,r.guidelinePath)(e);T[(0,i.joinPaths)(a,n)]=C(n,ae(t,e,c),`mdx`)}T[(0,i.joinPaths)(a,`tokens.json`)]=C(`tokens.json`,`${JSON.stringify(l,null,2)}\n`,`json`);let E;if(t.mapTheme){let n=Q(t.mapTheme(e.tokens),e,o,t.mapTheme);Object.keys(n).length>0&&(E=Object.keys(n),T[(0,i.joinPaths)(a,`theme.ts`)]=C(`theme.ts`,Z(n),`typescript`))}let L=`INSTALL.md`;return T[(0,i.joinPaths)(a,L)]=C(L,t.installGuide??p({outputPath:a,titlePrefix:s,themeFiles:E?[`theme.ts`]:void 0,themeNames:E,tokenThemeNames:Object.keys(d)}),`markdown`),T}var de=(0,e.definePlugin)(e=>({name:`storybook`,themeGeneration:`combined`,generate:async(t,n)=>$(t,{fontAssetBaseUrl:n.fontAssetBaseUrl,...e})}));exports.applyBrandDefaults=q,exports.default=de,Object.defineProperty(exports,"extractFonts",{enumerable:!0,get:function(){return r.extractFonts}}),exports.flattenTokens=u,Object.defineProperty(exports,"fontSlug",{enumerable:!0,get:function(){return r.fontSlug}}),Object.defineProperty(exports,"fontSlugs",{enumerable:!0,get:function(){return r.fontSlugs}}),Object.defineProperty(exports,"formatTokenValue",{enumerable:!0,get:function(){return n.formatTokenValue}}),exports.generateTokenDocs=$,exports.normalizeThemes=Q,exports.renderFontMdx=I,exports.renderFontSpecimenBlock=P,exports.renderFontsMdx=F,exports.renderInstallMd=p,exports.renderThemeFile=Z,Object.defineProperty(exports,"resolveFontStack",{enumerable:!0,get:function(){return r.resolveFontStack}}),Object.defineProperty(exports,"resolveFontWeights",{enumerable:!0,get:function(){return r.resolveFontWeights}}),exports.resolveTokenSets=n.resolveTokenSets,Object.defineProperty(exports,"toCssVar",{enumerable:!0,get:function(){return n.toCssVar}});
|
package/dist/index.d.cts
CHANGED
|
@@ -142,6 +142,12 @@ interface StorybookPluginOptions {
|
|
|
142
142
|
* @defaultValue `false`
|
|
143
143
|
*/
|
|
144
144
|
skipFonts?: boolean;
|
|
145
|
+
/**
|
|
146
|
+
* Skip generating guideline documentation pages.
|
|
147
|
+
*
|
|
148
|
+
* @defaultValue `false`
|
|
149
|
+
*/
|
|
150
|
+
skipGuidelines?: boolean;
|
|
145
151
|
/**
|
|
146
152
|
* Override body for generated `INSTALL.md`. When omitted, Storybook wiring
|
|
147
153
|
* steps are generated for the output directory.
|
package/dist/index.d.cts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","names":["Tokens"],"sources":["../src/types.ts","../src/flatten.ts","../src/install.ts","../src/generate.ts","../src/index.ts"],"mappings":";;;;;;;;;;UAwBiB;;EAEf;;EAEA,OAAO;;EAEP;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;;UAQe;;EAEf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;KAGU,wBAAwB,YAAY;KAEpC,uBACV,wBAAwB,eAAe;;;;;;KAO7B,0BACV,QAAQ,SAAS,eAAe,YAC7B;;;;UAKY;;EAEf;;;;;;EAOA;;;;;;EAOA;;;;;;EAOA;;;;;;EAOA;;;;;EAMA,eAAe;;;;;;EAOf;;;;;;;;;;;;;;EAeA,WAAW;;;;;;EAOX;;;;;;EAOA;;;;;EAMA;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.d.cts","names":["Tokens"],"sources":["../src/types.ts","../src/flatten.ts","../src/install.ts","../src/generate.ts","../src/index.ts"],"mappings":";;;;;;;;;;UAwBiB;;EAEf;;EAEA,OAAO;;EAEP;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;;UAQe;;EAEf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;KAGU,wBAAwB,YAAY;KAEpC,uBACV,wBAAwB,eAAe;;;;;;KAO7B,0BACV,QAAQ,SAAS,eAAe,YAC7B;;;;UAKY;;EAEf;;;;;;EAOA;;;;;;EAOA;;;;;;EAOA;;;;;;EAOA;;;;;EAMA,eAAe;;;;;;EAOf;;;;;;;;;;;;;;EAeA,WAAW;;;;;;EAOX;;;;;;EAOA;;;;;;EAOA;;;;;EAMA;;;;;;;iBC5Ec,cACd,QAAQA,WAAS,eAAeA,WAChC,UAAS,KAAK,2DACb;;;;;;;;iBC3Fa,gBAAgB;EAC9B;EACA;EACA;EACA;EACA;;;;;;;;iBCuuBc,wBACd,OAAO,2BACP,UAAS,KAAK;iBA2HA,eACd,SAAS,KAAK;EACZ,OAAO;EACP,OAAO,IAAI;;iBAwBC,cACd,MAAM,yBACN,mBACA,UAAS,KACP;;;;iBAuRY,mBACd,wBACA,OAAO,YAAY,yBACnB;EAAY;EAAgB;EAAmB;GAC/C,QAAQ,QACP;;;;;;;;;iBAkEa,gBACd,OAAO,iBAAiB,eAAe;;;;;;iBAwBzB,gBACd,iBACA,MAAM,KAAK,uCACX;EAAY;EAAgB;EAAmB;GAC/C,UAAU,YAAY,sCACrB,eAAe;;;;iBAwEF,kBACd,MAAM,QACN,UAAS,yBACR,wBAAwB,QAAQ"}
|
package/dist/index.d.mts
CHANGED
|
@@ -142,6 +142,12 @@ interface StorybookPluginOptions {
|
|
|
142
142
|
* @defaultValue `false`
|
|
143
143
|
*/
|
|
144
144
|
skipFonts?: boolean;
|
|
145
|
+
/**
|
|
146
|
+
* Skip generating guideline documentation pages.
|
|
147
|
+
*
|
|
148
|
+
* @defaultValue `false`
|
|
149
|
+
*/
|
|
150
|
+
skipGuidelines?: boolean;
|
|
145
151
|
/**
|
|
146
152
|
* Override body for generated `INSTALL.md`. When omitted, Storybook wiring
|
|
147
153
|
* steps are generated for the output directory.
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{definePlugin as e}from"@razorwind/core/plugin";import{MONO_ROLES as t,SANS_ROLES as n,cssFontFamily as r,pickFontByRole as i}from"@razorwind/core/lib/fonts";import{SHARED_THEME_ID as a,createDocument as o,cssVarPrefixFromName as s,
|
|
2
|
-
`,`\\n`).replaceAll(`\r`,`\\r`)}function
|
|
1
|
+
import{definePlugin as e}from"@razorwind/core/plugin";import{MONO_ROLES as t,SANS_ROLES as n,cssFontFamily as r,pickFontByRole as i}from"@razorwind/core/lib/fonts";import{SHARED_THEME_ID as a,createDocument as o,cssVarPrefixFromName as s,escapeMdx as c,flattenTokens as l,formatTokenValue as u,groupGuidelines as d,isObject as f,isSharedThemeId as p,isTokenLeaf as m,mergeTokenTrees as h,renderGuidelineBody as g,resolveSchemaIdentity as ee,resolveTokenSets as _,toCssVar as v,toCssVar as y,toThemeCssVar as b}from"@razorwind/core/utils";import{FONT_CHARACTER_SET as x,FONT_SPECIMEN_SIZES as te,FONT_SPECIMEN_TEXT as ne,FONT_WEIGHT_NAMES as re,FONT_WEIGHT_SPECIMEN_SIZE as ie,extractFonts as ae,extractFonts as oe,fontSlug as se,fontSlug as S,fontSlugs as ce,fontSlugs as le,guidelinePath as ue,renderFontBody as de,resolveFontStack as fe,resolveFontStack as pe,resolveFontWeights as me,resolveFontWeights as he}from"@razorwind/docgen/generate";import{joinPaths as C}from"@stryke/path/join";function w(e){return e===!0||e===`true`||e===1}function T(e,t){return e?`${e}:${t}`:t}function ge(e){let t=e.theme??e.$theme;return typeof t==`string`&&t.length>0?t:void 0}function _e(e,t){return e===`palette`||e===`$palette`?typeof t==`boolean`||typeof t==`number`||typeof t==`string`:(e===`theme`||e===`$theme`)&&typeof t==`string`}function ve(e){let t=/* @__PURE__ */ new Map;function n(e,r,i,a,o){if(!f(e))return;let s=a||w(e.palette)||w(e.$palette),c=ge(e)??o;if(m(e)){(s||c)&&t.set(T(i,r.join(`.`)),{...s&&{palette:!0},...c&&{childTheme:c}});return}for(let[t,a]of Object.entries(e))t.startsWith(`$`)&&t!==`$palette`&&t!==`$theme`||_e(t,a)||n(a,[...r,t],i,s,c)}for(let t of _(e)){let e=t.id==="default"?void 0:t.id;n(t.tokens,[],e,!1,void 0)}return t}function E(e,t={}){let n=t.cssVarPrefix,r=ve(e);return l(e,{includeTypes:t.includeTypes,shouldIncludeToken:e=>e.skipDocs!==!0,enrichToken:e=>{let t=r.get(T(e.theme,e.path));return{...e,cssVar:y(e.path,n),...e.type===`color`&&t}}})}function D(e){return e.replaceAll(`\\`,`\\\\`).replaceAll(`"`,`\\"`).replaceAll(`
|
|
2
|
+
`,`\\n`).replaceAll(`\r`,`\\r`)}function O(e){return typeof e==`string`?`"${D(e)}"`:typeof e==`number`||typeof e==`boolean`?String(e):e==null?`undefined`:JSON.stringify(e)}function k(e){let t=e.titlePrefix??`Design Tokens`,n=e.themeFiles?.[0],r=e.themeNames??[],i=e.tokenThemeNames??[],a=i.length>1?`
|
|
3
3
|
## Token-doc variants
|
|
4
4
|
|
|
5
5
|
Generated token blocks follow Storybook's \`theme\` global when it matches one
|
|
@@ -71,7 +71,7 @@ import { ColorPaletteBlock } from "./blocks";
|
|
|
71
71
|
## Regenerate
|
|
72
72
|
|
|
73
73
|
Re-run Razorwind generate when tokens change to refresh docs under \`${e.outputPath}/\`.
|
|
74
|
-
`}const
|
|
74
|
+
`}const A=ne,ye=/* @__PURE__ */ new Set([`fontFamily`,`fontWeight`,`typography`]),be=/font|typography|type|text|line[-_.]?height|letter[-_.]?spacing/i;function j(e){return ye.has(e.type??``)?!0:(e.type===`dimension`||e.type===`number`)&&be.test(e.path)}function M(e,t){return e.some(e=>t.some(t=>e.path===t||e.path.startsWith(`${t}.`)))}const xe=/^\{([^{}]+)\}$/,Se=/^var\((--[^),\s]+)(?:\s*,[^)]*)?\)$/;function N(e){if(typeof e==`string`)return xe.exec(e.trim())?.[1]?.trim()}function P(e){if(typeof e==`string`)return Se.exec(e.trim())?.[1]}function F(e){let t=new Map(e.map(e=>[e.path,e])),n=new Map(e.map(e=>[b(e.path),e])),r=e=>{let r=e,i=/* @__PURE__ */ new Set;for(let a=0;a<8;a++){if(i.has(r.path))return e.cssValue;i.add(r.path);let a=t.get(N(r.value)??``)??n.get(P(r.value)??P(r.cssValue)??``);if(!a||a.path===r.path)return r.cssValue;r=a}return e.cssValue};return e.map(e=>e.type===`color`?{...e,cssValue:r(e)}:e)}function I(e){return Object.keys(e).length>1}function Ce(){return`/**
|
|
75
75
|
* Select a generated token variant. Callers may pass \`theme\` to override
|
|
76
76
|
* the generated fallback without requiring Storybook preview-hook context.
|
|
77
77
|
*/
|
|
@@ -84,10 +84,10 @@ export function resolveThemeVariant<T extends Record<string, unknown>>(
|
|
|
84
84
|
? (theme as keyof T & string)
|
|
85
85
|
: fallback;
|
|
86
86
|
}
|
|
87
|
-
`}function
|
|
87
|
+
`}function we(e,t){let n=_(e),r=n.filter(e=>!p(e.id));return r.length<=1?{default:F(E(e,t))}:Object.fromEntries(r.map(e=>[e.id,F(E(K(n,e),t))]))}function Te(e,t){let n=/* @__PURE__ */ new Map;for(let r of e){let e=r.path.split(`.`).slice(0,Math.max(t,1)).join(`.`)||r.path,i=n.get(e)??[];i.push(r),n.set(e,i)}return n}function Ee(e,t){return e===t?e.split(`.`).at(-1)??e:e.startsWith(`${t}.`)?e.slice(t.length+1):e.split(`.`).at(-1)??e}function De(e,t={}){let n=t.colorGroupBy??2,r=Object.entries(e),i=r[0]?.[0]??`default`,a=I(e),o=(e,t=` `)=>[...Te(e,n).entries()].toSorted(([e],[t])=>e.localeCompare(t)).map(([e,n])=>{let r=n.map(n=>`${t} ${O(Ee(n.path,e))}: ${O(n.cssValue)}`).join(`,
|
|
88
88
|
`),i=n.find(e=>e.description)?.description??`${n.length} token${n.length===1?``:`s`}`;return`${t}<ColorItem
|
|
89
|
-
title={${
|
|
90
|
-
subtitle={${
|
|
89
|
+
title={${O(e)}}
|
|
90
|
+
subtitle={${O(i)}}
|
|
91
91
|
colors={{
|
|
92
92
|
${r}
|
|
93
93
|
}}
|
|
@@ -98,7 +98,7 @@ ${r}
|
|
|
98
98
|
${o(t,` `)}
|
|
99
99
|
</ColorPalette>
|
|
100
100
|
</section>`).join(`
|
|
101
|
-
`);return a?`<>\n${c}\n </>`:`<ColorPalette>\n${s||` {/* No color tokens */}`}\n </ColorPalette>`},c=r.map(([e,t])=>` ${
|
|
101
|
+
`);return a?`<>\n${c}\n </>`:`<ColorPalette>\n${s||` {/* No color tokens */}`}\n </ColorPalette>`},c=r.map(([e,t])=>` ${O(e)}: (\n ${s(t)}\n )`).join(`,
|
|
102
102
|
`);return`import { ColorPalette, ColorItem } from "@storybook/addon-docs/blocks";
|
|
103
103
|
${a?`import { resolveThemeVariant } from "./ThemeVariant";
|
|
104
104
|
`:``}
|
|
@@ -118,16 +118,16 @@ export interface ColorPaletteBlockProps {
|
|
|
118
118
|
}
|
|
119
119
|
|
|
120
120
|
export function ColorPaletteBlock({ theme }: ColorPaletteBlockProps = {}) {
|
|
121
|
-
const activeTheme = ${a?`resolveThemeVariant(COLOR_VARIANTS, ${
|
|
121
|
+
const activeTheme = ${a?`resolveThemeVariant(COLOR_VARIANTS, ${O(i)}, theme)`:O(i)};
|
|
122
122
|
|
|
123
123
|
return COLOR_VARIANTS[activeTheme];
|
|
124
124
|
}
|
|
125
|
-
`}function
|
|
126
|
-
fontFamily={${
|
|
125
|
+
`}function Oe(e,t={}){let a=t.sampleText??A,o=I(e),s=Object.entries(e),c=s[0]?.[0]??`default`,l=e=>{let o=e.filter(e=>e.type===`dimension`&&/(?:font|type|text).*size|size.*(?:font|type|text)/i.test(e.path)).map(e=>{let t=/^(\d+(?:\.\d+)?)/.exec(e.cssValue);return t?Number(t[1]):e.cssValue}),s=[...new Set(o)],c=i(t.fonts,n),l=(c?r(c):void 0)??e.find(e=>e.type===`fontFamily`)?.cssValue??`system-ui, sans-serif`,u=e.find(e=>e.type===`fontWeight`),d=u&&Number.parseFloat(u.cssValue)||400,f=s.length>0?`[${s.map(e=>O(e)).join(`, `)}]`:`[12, 14, 16, 20, 24, 32]`;return`<Typeset
|
|
126
|
+
fontFamily={${O(l)}}
|
|
127
127
|
fontSizes={${f}}
|
|
128
|
-
fontWeight={${
|
|
129
|
-
sampleText={${
|
|
130
|
-
/>`},u=s.map(([e,t])=>` ${
|
|
128
|
+
fontWeight={${O(d)}}
|
|
129
|
+
sampleText={${O(a)}}
|
|
130
|
+
/>`},u=s.map(([e,t])=>` ${O(e)}: (${l(t)})`).join(`,
|
|
131
131
|
`);return`import { Typeset } from "@storybook/addon-docs/blocks";
|
|
132
132
|
${o?`import { resolveThemeVariant } from "./ThemeVariant";
|
|
133
133
|
`:``}
|
|
@@ -147,20 +147,20 @@ export interface TypesetBlockProps {
|
|
|
147
147
|
}
|
|
148
148
|
|
|
149
149
|
export function TypesetBlock({ theme }: TypesetBlockProps = {}) {
|
|
150
|
-
const activeTheme = ${o?`resolveThemeVariant(TYPESET_VARIANTS, ${
|
|
150
|
+
const activeTheme = ${o?`resolveThemeVariant(TYPESET_VARIANTS, ${O(c)}, theme)`:O(c)};
|
|
151
151
|
|
|
152
152
|
return TYPESET_VARIANTS[activeTheme];
|
|
153
153
|
}
|
|
154
|
-
`}function
|
|
155
|
-
path: ${
|
|
156
|
-
type: ${e.type?
|
|
157
|
-
value: ${
|
|
158
|
-
cssVar: ${
|
|
159
|
-
description: ${e.description?
|
|
154
|
+
`}function ke(e){let t=I(e),n=Object.entries(e),r=n[0]?.[0]??`default`,i=e=>e.map(e=>{let t=e.theme?O(e.theme):`undefined`;return` {
|
|
155
|
+
path: ${O(e.path)},
|
|
156
|
+
type: ${e.type?O(e.type):`undefined`},
|
|
157
|
+
value: ${O(e.cssValue)},
|
|
158
|
+
cssVar: ${O(e.cssVar)},
|
|
159
|
+
description: ${e.description?O(e.description):`undefined`},
|
|
160
160
|
theme: ${t},
|
|
161
|
-
typography: ${
|
|
161
|
+
typography: ${j(e)}
|
|
162
162
|
}`}).join(`,
|
|
163
|
-
`),a=n.map(([e,t])=>` ${
|
|
163
|
+
`),a=n.map(([e,t])=>` ${O(e)}: [
|
|
164
164
|
${i(t)}
|
|
165
165
|
]`).join(`,
|
|
166
166
|
`);return`import type { CSSProperties, ReactElement } from "react";
|
|
@@ -225,7 +225,7 @@ export function TokenTableBlock({
|
|
|
225
225
|
typography,
|
|
226
226
|
theme
|
|
227
227
|
}: TokenTableBlockProps = {}): ReactElement {
|
|
228
|
-
const activeTheme = ${t?`resolveThemeVariant(TOKEN_VARIANTS, ${
|
|
228
|
+
const activeTheme = ${t?`resolveThemeVariant(TOKEN_VARIANTS, ${O(r)}, theme)`:O(r)};
|
|
229
229
|
const rows = TOKEN_VARIANTS[activeTheme].filter(token => {
|
|
230
230
|
const filters = typeof filter === "string" ? [filter] : filter;
|
|
231
231
|
if (
|
|
@@ -278,7 +278,7 @@ export function TokenTableBlock({
|
|
|
278
278
|
</table>
|
|
279
279
|
);
|
|
280
280
|
}
|
|
281
|
-
`}function
|
|
281
|
+
`}function L(e){let t=e.titlePrefix??`Design Tokens`,n=e.hasColors?`
|
|
282
282
|
## Colors
|
|
283
283
|
|
|
284
284
|
<ColorPaletteBlock />
|
|
@@ -307,7 +307,7 @@ import { TokenTableBlock } from "./blocks/TokenTable";
|
|
|
307
307
|
import { TypesetBlock } from "./blocks/Typeset";
|
|
308
308
|
${e.hasFonts?`import { FontSpecimenBlock } from "./blocks/FontSpecimen";
|
|
309
309
|
`:``}
|
|
310
|
-
<Meta title="${
|
|
310
|
+
<Meta title="${D(t)}/Overview" />
|
|
311
311
|
|
|
312
312
|
# ${t}
|
|
313
313
|
|
|
@@ -316,19 +316,19 @@ ${n}${r}${i}${a}${o}
|
|
|
316
316
|
## All tokens
|
|
317
317
|
|
|
318
318
|
<TokenTableBlock />
|
|
319
|
-
`}function
|
|
319
|
+
`}function Ae(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
320
320
|
import { ColorPaletteBlock } from "./blocks/ColorPalette";
|
|
321
321
|
|
|
322
|
-
<Meta title="${
|
|
322
|
+
<Meta title="${D(e.titlePrefix??`Design Tokens`)}/Colors" />
|
|
323
323
|
|
|
324
324
|
# Colors
|
|
325
325
|
|
|
326
326
|
<ColorPaletteBlock />
|
|
327
|
-
`}function
|
|
327
|
+
`}function je(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
328
328
|
import { TypesetBlock } from "./blocks/Typeset";
|
|
329
329
|
import { TokenTableBlock } from "./blocks/TokenTable";
|
|
330
330
|
|
|
331
|
-
<Meta title="${
|
|
331
|
+
<Meta title="${D(e.titlePrefix??`Design Tokens`)}/Typography" />
|
|
332
332
|
|
|
333
333
|
# Typography
|
|
334
334
|
|
|
@@ -337,7 +337,7 @@ import { TokenTableBlock } from "./blocks/TokenTable";
|
|
|
337
337
|
## Typography tokens
|
|
338
338
|
|
|
339
339
|
<TokenTableBlock typography />
|
|
340
|
-
`}function R(e,t){let n=e[t];return typeof n==`string`?n:void 0}function z(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function
|
|
340
|
+
`}function R(e,t){let n=e[t];return typeof n==`string`?n:void 0}function z(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function Me(e){return`import { IconGallery, IconItem } from "@storybook/addon-docs/blocks";
|
|
341
341
|
|
|
342
342
|
/**
|
|
343
343
|
* Icons rendered with Storybook's IconGallery doc block.
|
|
@@ -349,28 +349,28 @@ export function IconGalleryBlock() {
|
|
|
349
349
|
<IconGallery>
|
|
350
350
|
${(z(e)?Object.values(e).filter(z).toSorted((e,t)=>(R(e,`name`)??``).localeCompare(R(t,`name`)??``)):[]).map(e=>{let t=R(e,`name`)??`unknown`,n=(Array.isArray(e.files)?e.files:[]).find(e=>z(e)&&R(e,`type`)===`svg`&&typeof e.content==`string`),r=z(n)&&typeof n.content==`string`?`<span
|
|
351
351
|
style={{ display: "inline-flex", width: 24, height: 24 }}
|
|
352
|
-
dangerouslySetInnerHTML={{ __html: ${
|
|
353
|
-
/>`:`<code>${
|
|
352
|
+
dangerouslySetInnerHTML={{ __html: ${O(n.content)} }}
|
|
353
|
+
/>`:`<code>${D(t)}</code>`;return` <IconItem name={${O(t)}}>
|
|
354
354
|
${r}
|
|
355
355
|
</IconItem>`}).join(`
|
|
356
356
|
`)||` {/* No icons */}`}
|
|
357
357
|
</IconGallery>
|
|
358
358
|
);
|
|
359
359
|
}
|
|
360
|
-
`}function
|
|
360
|
+
`}function Ne(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
361
361
|
import { IconGalleryBlock } from "./blocks/IconGallery";
|
|
362
362
|
|
|
363
|
-
<Meta title="${
|
|
363
|
+
<Meta title="${D(e.titlePrefix??`Design Tokens`)}/Icons" />
|
|
364
364
|
|
|
365
365
|
# Icons
|
|
366
366
|
|
|
367
367
|
<IconGalleryBlock />
|
|
368
|
-
`}function B(e,t={}){let n=t.sampleText??
|
|
369
|
-
family: ${
|
|
370
|
-
title: ${
|
|
371
|
-
weights: [${
|
|
368
|
+
`}function B(e,t={}){let n=t.sampleText??A,r=e.map(e=>{let t=R(e,`name`)??`unknown`,n=pe(e);return` ${O(t)}: {
|
|
369
|
+
family: ${O(n)},
|
|
370
|
+
title: ${O(R(e,`title`)??t)},
|
|
371
|
+
weights: [${he(e).join(`, `)}]
|
|
372
372
|
}`}).join(`,
|
|
373
|
-
`),i=`[${
|
|
373
|
+
`),i=`[${te.join(`, `)}]`,a=Object.entries(re).map(([e,t])=>` ${e}: ${O(t)}`).join(`,
|
|
374
374
|
`);return`import type { CSSProperties, ReactElement } from "react";
|
|
375
375
|
|
|
376
376
|
export interface FontSpecimenBlockProps {
|
|
@@ -395,10 +395,10 @@ const WEIGHT_NAMES: Record<number, string> = {
|
|
|
395
395
|
${a}
|
|
396
396
|
};
|
|
397
397
|
|
|
398
|
-
const DEFAULT_FONT = ${
|
|
398
|
+
const DEFAULT_FONT = ${O(e[0]?R(e[0],`name`)??`unknown`:`unknown`)};
|
|
399
399
|
const DEFAULT_SIZES = ${i};
|
|
400
|
-
const DEFAULT_SAMPLE_TEXT = ${
|
|
401
|
-
const WEIGHT_SAMPLE_SIZE = ${
|
|
400
|
+
const DEFAULT_SAMPLE_TEXT = ${O(n)};
|
|
401
|
+
const WEIGHT_SAMPLE_SIZE = ${ie};
|
|
402
402
|
|
|
403
403
|
const labelStyle: CSSProperties = {
|
|
404
404
|
display: "block",
|
|
@@ -439,7 +439,7 @@ export function FontSpecimenBlock({
|
|
|
439
439
|
lineHeight: 1.25,
|
|
440
440
|
margin: "0 0 0.5em"
|
|
441
441
|
}}>
|
|
442
|
-
${
|
|
442
|
+
${x}
|
|
443
443
|
</div>
|
|
444
444
|
{sizes.map(size => (
|
|
445
445
|
<div
|
|
@@ -471,9 +471,9 @@ export function FontSpecimenBlock({
|
|
|
471
471
|
</div>
|
|
472
472
|
);
|
|
473
473
|
}
|
|
474
|
-
`}function V(e){let t=e.titlePrefix??`Design Tokens`,n=e.fonts.map(t=>{let n=R(t,`name`)??`unknown`;return`- [${R(t,`title`)??n}](./Fonts/${e.slugs.get(t)??
|
|
474
|
+
`}function V(e){let t=e.titlePrefix??`Design Tokens`,n=e.fonts.map(t=>{let n=R(t,`name`)??`unknown`;return`- [${R(t,`title`)??n}](./Fonts/${e.slugs.get(t)??S(t)}.mdx)`});return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
475
475
|
|
|
476
|
-
<Meta title="${
|
|
476
|
+
<Meta title="${D(t)}/Fonts" />
|
|
477
477
|
|
|
478
478
|
# Fonts
|
|
479
479
|
|
|
@@ -483,12 +483,19 @@ ${n.join(`
|
|
|
483
483
|
`)}
|
|
484
484
|
`}function H(e,t,n={}){let r=n.titlePrefix??`Design Tokens`,i=R(e,`name`)??`unknown`,a=R(e,`title`)??i;return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
485
485
|
|
|
486
|
-
<Meta title="${
|
|
486
|
+
<Meta title="${D(r)}/Fonts/${D(a)}" />
|
|
487
487
|
|
|
488
488
|
# ${a}
|
|
489
489
|
|
|
490
|
-
${
|
|
491
|
-
`}function
|
|
490
|
+
${de(e,n.sampleText,n.fontAssetBaseUrl)}
|
|
491
|
+
`}function Pe(e,t,n={}){let r=n.titlePrefix??`Design Tokens`,{guideline:i}=t;return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
492
|
+
|
|
493
|
+
<Meta title="${[r,`Guidelines`,...e.title?e.title.split(` / `):[],i.name].map(D).join(`/`)}" />
|
|
494
|
+
|
|
495
|
+
# ${c(i.name)}
|
|
496
|
+
${i.version?`\n_Version ${c(i.version)}_\n`:``}
|
|
497
|
+
${c(g(i,1))}
|
|
498
|
+
`}function Fe(e=!0,t=!0){return`export { ColorPaletteBlock } from "./ColorPalette";
|
|
492
499
|
export type { ColorPaletteBlockProps } from "./ColorPalette";
|
|
493
500
|
${e?`export { IconGalleryBlock } from "./IconGallery";
|
|
494
501
|
`:``}${t?`export { FontSpecimenBlock } from "./FontSpecimen";
|
|
@@ -497,7 +504,7 @@ export type { FontSpecimenBlockProps } from "./FontSpecimen";
|
|
|
497
504
|
export type { TokenTableBlockProps, TokenTableRow } from "./TokenTable";
|
|
498
505
|
export { TypesetBlock } from "./Typeset";
|
|
499
506
|
export type { TypesetBlockProps } from "./Typeset";
|
|
500
|
-
`}const
|
|
507
|
+
`}const Ie=/* @__PURE__ */ new Set(/* @__PURE__ */ `base.colorPrimary.colorSecondary.appBg.appContentBg.appHoverBg.appPreviewBg.appBorderColor.appBorderRadius.fontBase.fontCode.textColor.textInverseColor.textMutedColor.barTextColor.barHoverColor.barSelectedColor.barBg.buttonBg.buttonBorder.booleanBg.booleanSelectedBg.inputBg.inputBorder.inputTextColor.inputBorderRadius.brandTitle.brandUrl.brandImage.brandTarget.gridCellSize`.split(`.`));function U(e){return z(e)?e.base===`light`||e.base===`dark`:!1}function W(e){return z(e)?U(e)?!0:Object.keys(e).some(e=>Ie.has(e)):!1}function G(e){if(!z(e)||W(e))return!1;let t=Object.values(e);return t.length>0&&t.every(W)}function Le(e,t,n){return t.base===`light`||t.base===`dark`?t.base:`${e} ${n??``}`.toLowerCase().includes(`light`)?`light`:`dark`}function Re(e){return/^[a-z_$][\w$]*$/i.test(e)?e:O(e)}function K(e,t){let n=e.find(e=>e.id===a);return!n||p(t.id)?t.tokens:h(t.tokens,n.tokens)}function ze(e){return z(e)&&`$value`in e&&!(`colorSpace`in e)&&!(`hex`in e)?e.$value:e}function Be(e,t){let n=ze(e),r=/* @__PURE__ */ new Set;for(let e=0;e<8;e++){let e=N(n);if(!e||r.has(e))break;r.add(e);let i=t.get(e);if(!i)break;n=i.value}return n}function Ve(e){return e==null||typeof e==`string`||typeof e==`number`||typeof e==`boolean`?e:u(e)}function He(e,t){let n=_(e),r=n.find(e=>e.id===t)??(n.length===1?n[0]:void 0),i=r?K(n,r):e,a=/* @__PURE__ */ new Map;for(let e of E(i))(!a.get(e.path)||e.theme===t)&&a.set(e.path,e);return a}function Ue(e,t){let n={...e};for(let[r,i]of Object.entries(e))r!==`base`&&i!==void 0&&(n[r]=Ve(Be(i,t)));return n}function We(e,t,n,r,i){let a=Ue(t,He(i.tokens,e));return q(Le(e,a,i.theme),a,n,r)}function q(e,a,o,s){let c=i(s,n),l=i(s,t);return{brandTarget:`_blank`,base:e||`light`,...a,brandTitle:a.brandTitle??o.title,brandUrl:a.brandUrl??o.homepage,brandImage:a.brandImage??o.logo,fontBase:a.fontBase??(c?r(c):void 0),fontCode:a.fontCode??(l?r(l):void 0)}}function J(e,t=``){return`create({\n${Object.entries(e).filter(([,e])=>e!==void 0).map(([e,n])=>`${t} ${e}: ${O(n)}`).join(`,
|
|
501
508
|
`)}\n${t}})`}function Y(e){return`import { create } from "storybook/theming";
|
|
502
509
|
|
|
503
510
|
/**
|
|
@@ -514,8 +521,8 @@ export default ${J(e)};
|
|
|
514
521
|
* @see https://storybook.js.org/docs/configure/user-interface/theming
|
|
515
522
|
*/
|
|
516
523
|
export default {
|
|
517
|
-
${Object.entries(e).map(([e,t])=>` ${
|
|
524
|
+
${Object.entries(e).map(([e,t])=>` ${Re(e)}: ${J(t,` `)}`).join(`,
|
|
518
525
|
`)}
|
|
519
526
|
};
|
|
520
|
-
`}function Z(e){if(U(e))return Y(e);let t=Object.entries(e);if(t.length!==1)return X(e);let[,n]=t[0]??[];return n?Y(n):X(e)}function Q(e,t,n,r){let i=(e,r)=>
|
|
527
|
+
`}function Z(e){if(U(e))return Y(e);let t=Object.entries(e);if(t.length!==1)return X(e);let[,n]=t[0]??[];return n?Y(n):X(e)}function Q(e,t,n,r){let i=(e,r)=>We(e,r,n,t.fonts,t);if(G(e))return Object.fromEntries(Object.entries(e).map(([e,t])=>[e,i(e,t)]));let a=_(t.tokens),o=a.filter(e=>!p(e.id));if(o.length>1){let e={};for(let t of o){let n=r(K(a,t));if(G(n)){let r=n[t.id];if(r){e[t.id]=i(t.id,r);continue}for(let[t,r]of Object.entries(n))e[t]=i(t,r);continue}W(n)&&(e[t.id]=i(t.id,n))}return e}if(W(e)){let n=o[0]&&o[0].id!=="default"?o[0].id:t.theme??`default`;return{[n]:i(n,e)}}return{}}const Ge=e=>(t,n,r)=>o(C(e,t),n,{name:`razorwind-storybook`},!1,r);function $(e,t={}){let n=t.outputPath??`storybook/tokens`,r=ee(e),i=t.titlePrefix??r.title??`Design Tokens`,a={...t,titlePrefix:i,cssVarPrefix:t.cssVarPrefix??s(e.name)},o=E(e.tokens,a),c=we(e.tokens,a),l=o.some(e=>e.type===`color`),u=e.fonts&&Object.keys(e.fonts).length>0||o.some(j),f=M(o,[`size`]),p=M(o,[`space`,`spacing`]),m=!t.skipIcons&&z(e.icons)&&Object.keys(e.icons).length>0,h=t.skipFonts?[]:oe(e.fonts),g=h.length>0,_=le(h),v=Ge(n),y={[C(n,`blocks/ColorPalette.tsx`)]:v(`blocks/ColorPalette.tsx`,De(c,a),`tsx`),[C(n,`blocks/Typeset.tsx`)]:v(`blocks/Typeset.tsx`,Oe(c,{...a,fonts:e.fonts}),`tsx`),[C(n,`blocks/TokenTable.tsx`)]:v(`blocks/TokenTable.tsx`,ke(c),`tsx`),[C(n,`blocks/index.ts`)]:v(`blocks/index.ts`,Fe(m,g),`typescript`),[C(n,`Tokens.mdx`)]:v(`Tokens.mdx`,L({titlePrefix:i,hasColors:l,hasTypography:u,hasSizes:f,hasSpaces:p,hasFonts:g}),`mdx`)};if(m&&(y[C(n,`blocks/IconGallery.tsx`)]=v(`blocks/IconGallery.tsx`,Me(e.icons),`tsx`)),I(c)&&(y[C(n,`blocks/ThemeVariant.ts`)]=v(`blocks/ThemeVariant.ts`,Ce(),`typescript`)),l&&(y[C(n,`Colors.mdx`)]=v(`Colors.mdx`,Ae(a),`mdx`)),u&&(y[C(n,`Typography.mdx`)]=v(`Typography.mdx`,je(a),`mdx`)),m&&(y[C(n,`Icons.mdx`)]=v(`Icons.mdx`,Ne(a),`mdx`)),g){y[C(n,`blocks/FontSpecimen.tsx`)]=v(`blocks/FontSpecimen.tsx`,B(h,a),`tsx`),y[C(n,`Fonts.mdx`)]=v(`Fonts.mdx`,V({...a,fonts:h,slugs:_}),`mdx`);for(let e of h){let t=_.get(e)??S(e),r=R(e,`name`)??`unknown`,i=C(`Fonts`,`${t}.mdx`);y[C(n,i)]=v(i,H(e,r,a),`mdx`)}}if(!t.skipGuidelines)for(let t of d(e.guidelines))for(let e of t.guidelines){let r=ue(e);y[C(n,r)]=v(r,Pe(t,e,a),`mdx`)}y[C(n,`tokens.json`)]=v(`tokens.json`,`${JSON.stringify(o,null,2)}\n`,`json`);let b;if(t.mapTheme){let i=Q(t.mapTheme(e.tokens),e,r,t.mapTheme);Object.keys(i).length>0&&(b=Object.keys(i),y[C(n,`theme.ts`)]=v(`theme.ts`,Z(i),`typescript`))}let x=`INSTALL.md`;return y[C(n,x)]=v(x,t.installGuide??k({outputPath:n,titlePrefix:i,themeFiles:b?[`theme.ts`]:void 0,themeNames:b,tokenThemeNames:Object.keys(c)}),`markdown`),y}var Ke=e(e=>({name:`storybook`,themeGeneration:`combined`,generate:async(t,n)=>$(t,{fontAssetBaseUrl:n.fontAssetBaseUrl,...e})}));export{q as applyBrandDefaults,Ke as default,ae as extractFonts,E as flattenTokens,se as fontSlug,ce as fontSlugs,u as formatTokenValue,$ as generateTokenDocs,Q as normalizeThemes,H as renderFontMdx,B as renderFontSpecimenBlock,V as renderFontsMdx,k as renderInstallMd,Z as renderThemeFile,fe as resolveFontStack,me as resolveFontWeights,_ as resolveTokenSets,v as toCssVar};
|
|
521
528
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":["flattenTokensBase","toCssVar","isObject","resolveFontStack","resolveFontWeights","fontSlug","extractFonts","fontSlugs","flattenTokens$1","toCssVar$1","extractFonts$1","fontSlug$1","fontSlugs$1","resolveFontStack$1","resolveFontWeights$1","isTruthyFlag","value","metadataKey","theme","path","readChildTheme","node","isColorMetadataKey","key","collectColorMetadata","metadata","walk","isObject","nextPalette","palette","nextChildTheme","childTheme","isTokenLeaf","child","set","resolveTokenSets","tokens","flattenTokens","cssVarPrefix","options","token","colorMetadata","base","escapeString","toLiteral","renderInstallMd","titlePrefix","themeFile","themeNames","tokenThemeNames","tokenThemeSection","name","themeSection","DEFAULT_SAMPLE_TEXT","FONT_SPECIMEN_TEXT","TYPOGRAPHY_TOKEN_TYPES","TYPOGRAPHY_DIMENSION_PATTERN","isTypographyToken","hasTokenPathPrefix","prefixes","prefix","DTCG_ALIAS_PATTERN","CSS_VAR_PATTERN","readAliasPath","readCssVarName","resolveColorValues","byPath","byCssVar","toThemeCssVar","resolve","current","seen","depth","next","hasThemeVariants","variants","renderVariantResolver","resolveTokenVariants","sets","themes","isSharedThemeId","tokensForThemeSet","groupByPath","groups","list","leafLabel","group","renderColorPaletteBlock","groupBy","variantEntries","defaultTheme","themed","renderItems","sectionTokens","a","b","groupTokens","colorsObject","indent","subtitle","renderPalette","colors","paletteColors","semanticColors","otherColors","hasCategorizedColors","items","sections","section","title","paletteVariants","renderTypesetBlock","sampleText","renderTypeset","fontSizes","match","uniqueSizes","fromFonts","pickFontByRole","SANS_ROLES","fontFamily","cssFontFamily","fontWeightToken","fontWeight","sizesLiteral","size","typesetVariants","renderTokenTableBlock","renderRows","rowsByTheme","renderTokensMdx","colorSection","typographySection","sizeSection","spaceSection","fontsSection","renderColorsMdx","renderTypographyMdx","readString","item","isObject$1","renderIconGalleryBlock","icons","icon","svg","file","preview","renderIconsMdx","renderFontSpecimenBlock","entries","fonts","font","family","FONT_SPECIMEN_SIZES","weightNames","FONT_WEIGHT_NAMES","weight","weightName","FONT_WEIGHT_SPECIMEN_SIZE","FONT_CHARACTER_SET","renderFontsMdx","links","renderFontMdx","renderFontBody","renderBlocksIndex","hasIcons","hasFonts","STORYBOOK_THEME_KEYS","isStorybookTheme","isThemePartial","isThemeRecord","values","inferThemeBase","specTheme","toPropertyKey","SHARED_THEME_ID","mergeTokenTrees","unwrapTokenNode","resolveAliasValue","aliasPath","formatResolvedThemeValue","formatTokenValue","tokenLookupForTheme","themeName","tree","lookup","resolveThemeFields","resolved","applyMappedTheme","spec","applyBrandDefaults","identity","sans","mono","MONO_ROLES","renderCreateCall","renderSingleThemeFile","renderThemeRecordFile","renderThemeFile","single","normalizeThemes","apply","mapped","result","perTheme","mapTheme","getCreateDocument","createDocument","joinPaths","outputPath","content","language","generateTokenDocs","resolveSchemaIdentity","docsOptions","cssVarPrefixFromName","flat","hasColors","hasTypography","hasSizes","hasSpaces","fontPageSlugs","createDoc","documents","slug","fontName","installPath","src_default","definePlugin","config","extractFonts","fontSlug","fontSlugs","resolveFontStack","resolveFontWeights","toCssVar"],"sources":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["flattenTokensBase","toCssVar","isObject","resolveFontStack","resolveFontWeights","fontSlug","extractFonts","fontSlugs","flattenTokens$1","toCssVar$1","extractFonts$1","fontSlug$1","fontSlugs$1","resolveFontStack$1","resolveFontWeights$1","isTruthyFlag","value","metadataKey","theme","path","readChildTheme","node","isColorMetadataKey","key","collectColorMetadata","metadata","walk","isObject","nextPalette","palette","nextChildTheme","childTheme","isTokenLeaf","child","set","resolveTokenSets","tokens","flattenTokens","cssVarPrefix","options","token","colorMetadata","base","escapeString","toLiteral","renderInstallMd","titlePrefix","themeFile","themeNames","tokenThemeNames","tokenThemeSection","name","themeSection","DEFAULT_SAMPLE_TEXT","FONT_SPECIMEN_TEXT","TYPOGRAPHY_TOKEN_TYPES","TYPOGRAPHY_DIMENSION_PATTERN","isTypographyToken","hasTokenPathPrefix","prefixes","prefix","DTCG_ALIAS_PATTERN","CSS_VAR_PATTERN","readAliasPath","readCssVarName","resolveColorValues","byPath","byCssVar","toThemeCssVar","resolve","current","seen","depth","next","hasThemeVariants","variants","renderVariantResolver","resolveTokenVariants","sets","themes","isSharedThemeId","tokensForThemeSet","groupByPath","groups","list","leafLabel","group","renderColorPaletteBlock","groupBy","variantEntries","defaultTheme","themed","renderItems","sectionTokens","a","b","groupTokens","colorsObject","indent","subtitle","renderPalette","colors","paletteColors","semanticColors","otherColors","hasCategorizedColors","items","sections","section","title","paletteVariants","renderTypesetBlock","sampleText","renderTypeset","fontSizes","match","uniqueSizes","fromFonts","pickFontByRole","SANS_ROLES","fontFamily","cssFontFamily","fontWeightToken","fontWeight","sizesLiteral","size","typesetVariants","renderTokenTableBlock","renderRows","rowsByTheme","renderTokensMdx","colorSection","typographySection","sizeSection","spaceSection","fontsSection","renderColorsMdx","renderTypographyMdx","readString","item","isObject$1","renderIconGalleryBlock","icons","icon","svg","file","preview","renderIconsMdx","renderFontSpecimenBlock","entries","fonts","font","family","FONT_SPECIMEN_SIZES","weightNames","FONT_WEIGHT_NAMES","weight","weightName","FONT_WEIGHT_SPECIMEN_SIZE","FONT_CHARACTER_SET","renderFontsMdx","links","renderFontMdx","renderFontBody","renderGuidelineMdx","entry","guideline","escapeMdx","renderGuidelineBody","renderBlocksIndex","hasIcons","hasFonts","STORYBOOK_THEME_KEYS","isStorybookTheme","isThemePartial","isThemeRecord","values","inferThemeBase","specTheme","toPropertyKey","SHARED_THEME_ID","mergeTokenTrees","unwrapTokenNode","resolveAliasValue","aliasPath","formatResolvedThemeValue","formatTokenValue","tokenLookupForTheme","themeName","tree","lookup","resolveThemeFields","resolved","applyMappedTheme","spec","applyBrandDefaults","identity","sans","mono","MONO_ROLES","renderCreateCall","renderSingleThemeFile","renderThemeRecordFile","renderThemeFile","single","normalizeThemes","apply","mapped","result","perTheme","mapTheme","getCreateDocument","createDocument","joinPaths","outputPath","content","language","generateTokenDocs","resolveSchemaIdentity","docsOptions","cssVarPrefixFromName","flat","hasColors","hasTypography","hasSizes","hasSpaces","fontPageSlugs","createDoc","documents","slug","fontName","groupGuidelines","guidelinePath","installPath","src_default","definePlugin","config","extractFonts","fontSlug","fontSlugs","resolveFontStack","resolveFontWeights","toCssVar"],"sources":[],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@razorwind/storybook",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.83",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Razorwind plugin that creates Storybook MDX token doc blocks from Razorwind design tokens.",
|
|
6
6
|
"repository": {
|
|
@@ -85,8 +85,8 @@
|
|
|
85
85
|
"dependencies": {
|
|
86
86
|
"@power-plant/core": "^0.0.93",
|
|
87
87
|
"@power-plant/dtcg-schema": "^0.0.1",
|
|
88
|
-
"@razorwind/core": "^0.0.
|
|
89
|
-
"@razorwind/docgen": "^0.0.
|
|
88
|
+
"@razorwind/core": "^0.0.84",
|
|
89
|
+
"@razorwind/docgen": "^0.0.81",
|
|
90
90
|
"@stryke/path": "^0.29.43",
|
|
91
91
|
"@stryke/type-checks": "^0.6.49"
|
|
92
92
|
},
|
|
@@ -107,5 +107,5 @@
|
|
|
107
107
|
"typescript": "^6.0.3"
|
|
108
108
|
},
|
|
109
109
|
"publishConfig": { "access": "public" },
|
|
110
|
-
"gitHead": "
|
|
110
|
+
"gitHead": "51ddb8380e3ca099bd32397f608510e05b8bc85c"
|
|
111
111
|
}
|