@razorwind/storybook 0.0.76 → 0.0.77
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 +55 -63
- package/dist/index.d.cts +2 -18
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts +2 -18
- package/dist/index.mjs +59 -67
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -3
package/dist/index.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("@razorwind/core/plugin"),t=require("@razorwind/core/lib/fonts"),
|
|
2
|
-
`,`\\n`).replaceAll(`\r`,`\\r`)}function
|
|
1
|
+
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("@razorwind/core/plugin"),t=require("@razorwind/docgen/generate"),n=require("@razorwind/core/lib/fonts"),r=require("@razorwind/core/utils"),i=require("@stryke/path/join");function a(e){return e===!0||e===`true`||e===1}function o(e,t){return e?`${e}:${t}`:t}function s(e){let t=e.theme??e.$theme;return typeof t==`string`&&t.length>0?t:void 0}function c(e,t){return e===`palette`||e===`$palette`?typeof t==`boolean`||typeof t==`number`||typeof t==`string`:(e===`theme`||e===`$theme`)&&typeof t==`string`}function l(e){let t=/* @__PURE__ */ new Map;function n(e,i,l,u,d){if(!(0,r.isObject)(e))return;let f=u||a(e.palette)||a(e.$palette),p=s(e)??d;if((0,r.isTokenLeaf)(e)){(f||p)&&t.set(o(l,i.join(`.`)),{...f&&{palette:!0},...p&&{childTheme:p}});return}for(let[t,r]of Object.entries(e))t.startsWith(`$`)&&t!==`$palette`&&t!==`$theme`||c(t,r)||n(r,[...i,t],l,f,p)}for(let t of(0,r.resolveTokenSets)(e)){let e=t.id==="default"?void 0:t.id;n(t.tokens,[],e,!1,void 0)}return t}function u(e,t={}){let n=t.cssVarPrefix,i=l(e);return(0,r.flattenTokens)(e,{includeTypes:t.includeTypes,shouldIncludeToken:e=>e.skipDocs!==!0,enrichToken:e=>{let t=i.get(o(e.theme,e.path));return{...e,cssVar:(0,r.toCssVar)(e.path,n),...e.type===`color`&&t}}})}function d(e){return e.replaceAll(`\\`,`\\\\`).replaceAll(`"`,`\\"`).replaceAll(`
|
|
2
|
+
`,`\\n`).replaceAll(`\r`,`\\r`)}function f(e){return typeof e==`string`?`"${d(e)}"`:typeof e==`number`||typeof e==`boolean`?String(e):e==null?`undefined`:JSON.stringify(e)}function p(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 m=t.FONT_SPECIMEN_TEXT,h=/* @__PURE__ */ new Set([`fontFamily`,`fontWeight`,`typography`]),g=/font|typography|type|text|line[-_.]?height|letter[-_.]?spacing/i;function _(e){return h.has(e.type??``)?!0:(e.type===`dimension`||e.type===`number`)&&g.test(e.path)}function v(e,t){return e.some(e=>t.some(t=>e.path===t||e.path.startsWith(`${t}.`)))}const y=/^\{([^{}]+)\}$/,b=/^var\((--[^),\s]+)(?:\s*,[^)]*)?\)$/;function x(e){if(typeof e==`string`)return y.exec(e.trim())?.[1]?.trim()}function S(e){if(typeof e==`string`)return b.exec(e.trim())?.[1]}function C(e){let t=new Map(e.map(e=>[e.path,e])),n=new Map(e.map(e=>[(0,r.toThemeCssVar)(e.path),e])),i=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(x(r.value)??``)??n.get(S(r.value)??S(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:i(e)}:e)}function w(e){return Object.keys(e).length>1}function ee(){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 T(e,t){let n=(0,r.resolveTokenSets)(e),i=n.filter(e=>!(0,r.isSharedThemeId)(e.id));return i.length<=1?{default:C(u(e,t))}:Object.fromEntries(i.map(e=>[e.id,C(u(H(n,e),t))]))}function E(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 D(e,t){return e===t?e.split(`.`).at(-1)??e:e.startsWith(`${t}.`)?e.slice(t.length+1):e.split(`.`).at(-1)??e}function te(e,t={}){let n=t.colorGroupBy??2,r=Object.entries(e),i=r[0]?.[0]??`default`,a=w(e),o=(e,t=` `)=>[...E(e,n).entries()].toSorted(([e],[t])=>e.localeCompare(t)).map(([e,n])=>{let r=n.map(n=>`${t} ${f(D(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
|
-
title={${
|
|
90
|
-
subtitle={${
|
|
89
|
+
title={${f(e)}}
|
|
90
|
+
subtitle={${f(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])=>` ${f(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, ${f(i)}, theme)`:f(i)};
|
|
122
122
|
|
|
123
123
|
return COLOR_VARIANTS[activeTheme];
|
|
124
124
|
}
|
|
125
|
-
`}function
|
|
126
|
-
fontFamily={${
|
|
125
|
+
`}function O(e,t={}){let r=t.sampleText??m,i=w(e),a=Object.entries(e),o=a[0]?.[0]??`default`,s=e=>{let i=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}),a=[...new Set(i)],o=(0,n.pickFontByRole)(t.fonts,n.SANS_ROLES),s=(o?(0,n.cssFontFamily)(o):void 0)??e.find(e=>e.type===`fontFamily`)?.cssValue??`system-ui, sans-serif`,c=e.find(e=>e.type===`fontWeight`),l=c&&Number.parseFloat(c.cssValue)||400,u=a.length>0?`[${a.map(e=>f(e)).join(`, `)}]`:`[12, 14, 16, 20, 24, 32]`;return`<Typeset
|
|
126
|
+
fontFamily={${f(s)}}
|
|
127
127
|
fontSizes={${u}}
|
|
128
|
-
fontWeight={${
|
|
129
|
-
sampleText={${
|
|
130
|
-
/>`},c=a.map(([e,t])=>` ${
|
|
128
|
+
fontWeight={${f(l)}}
|
|
129
|
+
sampleText={${f(r)}}
|
|
130
|
+
/>`},c=a.map(([e,t])=>` ${f(e)}: (${s(t)})`).join(`,
|
|
131
131
|
`);return`import { Typeset } from "@storybook/addon-docs/blocks";
|
|
132
132
|
${i?`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 = ${i?`resolveThemeVariant(TYPESET_VARIANTS, ${
|
|
150
|
+
const activeTheme = ${i?`resolveThemeVariant(TYPESET_VARIANTS, ${f(o)}, theme)`:f(o)};
|
|
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 ne(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
|
+
path: ${f(e.path)},
|
|
156
|
+
type: ${e.type?f(e.type):`undefined`},
|
|
157
|
+
value: ${f(e.cssValue)},
|
|
158
|
+
cssVar: ${f(e.cssVar)},
|
|
159
|
+
description: ${e.description?f(e.description):`undefined`},
|
|
160
160
|
theme: ${t},
|
|
161
|
-
typography: ${
|
|
161
|
+
typography: ${_(e)}
|
|
162
162
|
}`}).join(`,
|
|
163
|
-
`),a=n.map(([e,t])=>` ${
|
|
163
|
+
`),a=n.map(([e,t])=>` ${f(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, ${f(r)}, theme)`:f(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 re(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 ie(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 ae(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
|
|
340
|
+
`}function k(e,t){let n=e[t];return typeof n==`string`?n:void 0}function A(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function j(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,29 +347,29 @@ import { TokenTableBlock } from "./blocks/TokenTable";
|
|
|
347
347
|
export function IconGalleryBlock() {
|
|
348
348
|
return (
|
|
349
349
|
<IconGallery>
|
|
350
|
-
${(
|
|
350
|
+
${(A(e)?Object.values(e).filter(A).toSorted((e,t)=>(k(e,`name`)??``).localeCompare(k(t,`name`)??``)):[]).map(e=>{let t=k(e,`name`)??`unknown`,n=(Array.isArray(e.files)?e.files:[]).find(e=>A(e)&&k(e,`type`)===`svg`&&typeof e.content==`string`),r=A(n)&&typeof n.content==`string`?`<span
|
|
351
351
|
style={{ display: "inline-flex", width: 24, height: 24 }}
|
|
352
|
-
dangerouslySetInnerHTML={{ __html: ${
|
|
353
|
-
/>`:`<code>${
|
|
352
|
+
dangerouslySetInnerHTML={{ __html: ${f(n.content)} }}
|
|
353
|
+
/>`:`<code>${d(t)}</code>`;return` <IconItem name={${f(t)}}>
|
|
354
354
|
${r}
|
|
355
355
|
</IconItem>`}).join(`
|
|
356
356
|
`)||` {/* No icons */}`}
|
|
357
357
|
</IconGallery>
|
|
358
358
|
);
|
|
359
359
|
}
|
|
360
|
-
`}function
|
|
360
|
+
`}function M(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
|
-
`}
|
|
369
|
-
family: ${
|
|
370
|
-
title: ${
|
|
368
|
+
`}function N(e,n={}){let r=n.sampleText??m,i=e.map(e=>{let n=k(e,`name`)??`unknown`,r=(0,t.resolveFontStack)(e);return` ${f(n)}: {
|
|
369
|
+
family: ${f(r)},
|
|
370
|
+
title: ${f(k(e,`title`)??n)}
|
|
371
371
|
}`}).join(`,
|
|
372
|
-
`),
|
|
372
|
+
`),a=`[${t.FONT_SPECIMEN_SIZES.join(`, `)}]`;return`import type { CSSProperties, ReactElement } from "react";
|
|
373
373
|
|
|
374
374
|
export interface FontSpecimenBlockProps {
|
|
375
375
|
/** Font entry name. Defaults to the first font. */
|
|
@@ -381,12 +381,12 @@ export interface FontSpecimenBlockProps {
|
|
|
381
381
|
}
|
|
382
382
|
|
|
383
383
|
const FONT_FAMILIES: Record<string, { family: string; title: string }> = {
|
|
384
|
-
${
|
|
384
|
+
${i||` // No fonts`}
|
|
385
385
|
};
|
|
386
386
|
|
|
387
|
-
const DEFAULT_FONT = ${
|
|
388
|
-
const DEFAULT_SIZES = ${
|
|
389
|
-
const DEFAULT_SAMPLE_TEXT = ${
|
|
387
|
+
const DEFAULT_FONT = ${f(e[0]?k(e[0],`name`)??`unknown`:`unknown`)};
|
|
388
|
+
const DEFAULT_SIZES = ${a};
|
|
389
|
+
const DEFAULT_SAMPLE_TEXT = ${f(r)};
|
|
390
390
|
|
|
391
391
|
const labelStyle: CSSProperties = {
|
|
392
392
|
display: "block",
|
|
@@ -419,7 +419,7 @@ export function FontSpecimenBlock({
|
|
|
419
419
|
lineHeight: 1.25,
|
|
420
420
|
margin: "0 0 0.5em"
|
|
421
421
|
}}>
|
|
422
|
-
|
|
422
|
+
${t.FONT_CHARACTER_SET}
|
|
423
423
|
</div>
|
|
424
424
|
{sizes.map(size => (
|
|
425
425
|
<div
|
|
@@ -437,32 +437,24 @@ export function FontSpecimenBlock({
|
|
|
437
437
|
</div>
|
|
438
438
|
);
|
|
439
439
|
}
|
|
440
|
-
`}function
|
|
441
|
-
`)}function B(e){let t=e.titlePrefix??`Design Tokens`,n=e.fonts.map(t=>{let n=O(t,`name`)??`unknown`;return`- [${O(t,`title`)??n}](./Fonts/${e.slugs.get(t)??P(t)}.mdx)`});return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
440
|
+
`}function P(e){let n=e.titlePrefix??`Design Tokens`,r=e.fonts.map(n=>{let r=k(n,`name`)??`unknown`;return`- [${k(n,`title`)??r}](./Fonts/${e.slugs.get(n)??(0,t.fontSlug)(n)}.mdx)`});return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
442
441
|
|
|
443
|
-
<Meta title="${
|
|
442
|
+
<Meta title="${d(n)}/Fonts" />
|
|
444
443
|
|
|
445
444
|
# Fonts
|
|
446
445
|
|
|
447
446
|
${e.fonts.length} font${e.fonts.length===1?``:`s`} in the design system.
|
|
448
447
|
|
|
449
|
-
${
|
|
448
|
+
${r.join(`
|
|
450
449
|
`)}
|
|
451
|
-
`}function
|
|
452
|
-
import { FontSpecimenBlock } from "../blocks/FontSpecimen";
|
|
450
|
+
`}function F(e,n,r={}){let i=r.titlePrefix??`Design Tokens`,a=k(e,`name`)??`unknown`,o=k(e,`title`)??a;return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
453
451
|
|
|
454
|
-
<Meta title="${
|
|
452
|
+
<Meta title="${d(i)}/Fonts/${d(o)}" />
|
|
455
453
|
|
|
456
|
-
# ${
|
|
454
|
+
# ${o}
|
|
457
455
|
|
|
458
|
-
${
|
|
459
|
-
|
|
460
|
-
${ce(e)}
|
|
461
|
-
|
|
462
|
-
## Specimen
|
|
463
|
-
|
|
464
|
-
<FontSpecimenBlock name={${d(t)}} />
|
|
465
|
-
`}function le(e=!0,t=!0){return`export { ColorPaletteBlock } from "./ColorPalette";
|
|
456
|
+
${(0,t.renderFontBody)(e,r.sampleText)}
|
|
457
|
+
`}function oe(e=!0,t=!0){return`export { ColorPaletteBlock } from "./ColorPalette";
|
|
466
458
|
export type { ColorPaletteBlockProps } from "./ColorPalette";
|
|
467
459
|
${e?`export { IconGalleryBlock } from "./IconGallery";
|
|
468
460
|
`:``}${t?`export { FontSpecimenBlock } from "./FontSpecimen";
|
|
@@ -471,7 +463,7 @@ export type { FontSpecimenBlockProps } from "./FontSpecimen";
|
|
|
471
463
|
export type { TokenTableBlockProps, TokenTableRow } from "./TokenTable";
|
|
472
464
|
export { TypesetBlock } from "./Typeset";
|
|
473
465
|
export type { TypesetBlockProps } from "./Typeset";
|
|
474
|
-
`}const
|
|
466
|
+
`}const I=/* @__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 L(e){return A(e)?e.base===`light`||e.base===`dark`:!1}function R(e){return A(e)?L(e)?!0:Object.keys(e).some(e=>I.has(e)):!1}function z(e){if(!A(e)||R(e))return!1;let t=Object.values(e);return t.length>0&&t.every(R)}function B(e,t,n){return t.base===`light`||t.base===`dark`?t.base:`${e} ${n??``}`.toLowerCase().includes(`light`)?`light`:`dark`}function V(e){return/^[a-z_$][\w$]*$/i.test(e)?e:f(e)}function H(e,t){let n=e.find(e=>e.id===r.SHARED_THEME_ID);return!n||(0,r.isSharedThemeId)(t.id)?t.tokens:(0,r.mergeTokenTrees)(t.tokens,n.tokens)}function U(e){return A(e)&&`$value`in e&&!(`colorSpace`in e)&&!(`hex`in e)?e.$value:e}function W(e,t){let n=U(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 G(e){return e==null||typeof e==`string`||typeof e==`number`||typeof e==`boolean`?e:(0,r.formatTokenValue)(e)}function K(e,t){let n=(0,r.resolveTokenSets)(e),i=n.find(e=>e.id===t)??(n.length===1?n[0]:void 0),a=i?H(n,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 se(e,t){let n={...e};for(let[r,i]of Object.entries(e))r!==`base`&&i!==void 0&&(n[r]=G(W(i,t)));return n}function ce(e,t,n,r,i){let a=se(t,K(i.tokens,e));return q(B(e,a,i.theme),a,n,r)}function q(e,t,r,i){let a=(0,n.pickFontByRole)(i,n.SANS_ROLES),o=(0,n.pickFontByRole)(i,n.MONO_ROLES);return{brandTarget:`_blank`,base:e||`light`,...t,brandTitle:t.brandTitle??r.title,brandUrl:t.brandUrl??r.homepage,brandImage:t.brandImage??r.logo,fontBase:t.fontBase??(a?(0,n.cssFontFamily)(a):void 0),fontCode:t.fontCode??(o?(0,n.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(`,
|
|
475
467
|
`)}\n${t}})`}function Y(e){return`import { create } from "storybook/theming";
|
|
476
468
|
|
|
477
469
|
/**
|
|
@@ -488,7 +480,7 @@ export default ${J(e)};
|
|
|
488
480
|
* @see https://storybook.js.org/docs/configure/user-interface/theming
|
|
489
481
|
*/
|
|
490
482
|
export default {
|
|
491
|
-
${Object.entries(e).map(([e,t])=>` ${
|
|
483
|
+
${Object.entries(e).map(([e,t])=>` ${V(e)}: ${J(t,` `)}`).join(`,
|
|
492
484
|
`)}
|
|
493
485
|
};
|
|
494
|
-
`}function Z(e){if(
|
|
486
|
+
`}function Z(e){if(L(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,i){let a=(e,r)=>ce(e,r,n,t.fonts,t);if(z(e))return Object.fromEntries(Object.entries(e).map(([e,t])=>[e,a(e,t)]));let o=(0,r.resolveTokenSets)(t.tokens),s=o.filter(e=>!(0,r.isSharedThemeId)(e.id));if(s.length>1){let e={};for(let t of s){let n=i(H(o,t));if(z(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}R(n)&&(e[t.id]=a(t.id,n))}return e}if(R(e)){let n=s[0]&&s[0].id!=="default"?s[0].id:t.theme??`default`;return{[n]:a(n,e)}}return{}}const le=e=>(t,n,a)=>(0,r.createDocument)((0,i.joinPaths)(e,t),n,{name:`razorwind-storybook`},!1,a);function $(e,n={}){let a=n.outputPath??`storybook/tokens`,o=(0,r.resolveSchemaIdentity)(e),s=n.titlePrefix??o.title??`Design Tokens`,c={...n,titlePrefix:s,cssVarPrefix:n.cssVarPrefix??(0,r.cssVarPrefixFromName)(e.name)},l=u(e.tokens,c),d=T(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=!n.skipIcons&&A(e.icons)&&Object.keys(e.icons).length>0,b=n.skipFonts?[]:(0,t.extractFonts)(e.fonts),x=b.length>0,S=(0,t.fontSlugs)(b),C=le(a),E={[(0,i.joinPaths)(a,`blocks/ColorPalette.tsx`)]:C(`blocks/ColorPalette.tsx`,te(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`,ne(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`,re({titlePrefix:s,hasColors:f,hasTypography:m,hasSizes:h,hasSpaces:g,hasFonts:x}),`mdx`)};if(y&&(E[(0,i.joinPaths)(a,`blocks/IconGallery.tsx`)]=C(`blocks/IconGallery.tsx`,j(e.icons),`tsx`)),w(d)&&(E[(0,i.joinPaths)(a,`blocks/ThemeVariant.ts`)]=C(`blocks/ThemeVariant.ts`,ee(),`typescript`)),f&&(E[(0,i.joinPaths)(a,`Colors.mdx`)]=C(`Colors.mdx`,ie(c),`mdx`)),m&&(E[(0,i.joinPaths)(a,`Typography.mdx`)]=C(`Typography.mdx`,ae(c),`mdx`)),y&&(E[(0,i.joinPaths)(a,`Icons.mdx`)]=C(`Icons.mdx`,M(c),`mdx`)),x){E[(0,i.joinPaths)(a,`blocks/FontSpecimen.tsx`)]=C(`blocks/FontSpecimen.tsx`,N(b,c),`tsx`),E[(0,i.joinPaths)(a,`Fonts.mdx`)]=C(`Fonts.mdx`,P({...c,fonts:b,slugs:S}),`mdx`);for(let e of b){let n=S.get(e)??(0,t.fontSlug)(e),r=k(e,`name`)??`unknown`,o=(0,i.joinPaths)(`Fonts`,`${n}.mdx`);E[(0,i.joinPaths)(a,o)]=C(o,F(e,r,c),`mdx`)}}E[(0,i.joinPaths)(a,`tokens.json`)]=C(`tokens.json`,`${JSON.stringify(l,null,2)}\n`,`json`);let D;if(n.mapTheme){let t=Q(n.mapTheme(e.tokens),e,o,n.mapTheme);Object.keys(t).length>0&&(D=Object.keys(t),E[(0,i.joinPaths)(a,`theme.ts`)]=C(`theme.ts`,Z(t),`typescript`))}let I=`INSTALL.md`;return E[(0,i.joinPaths)(a,I)]=C(I,n.installGuide??p({outputPath:a,titlePrefix:s,themeFiles:D?[`theme.ts`]:void 0,themeNames:D,tokenThemeNames:Object.keys(d)}),`markdown`),E}var ue=(0,e.definePlugin)(e=>({name:`storybook`,themeGeneration:`combined`,generate:async t=>$(t,e??{})}));exports.applyBrandDefaults=q,exports.default=ue,Object.defineProperty(exports,"extractFonts",{enumerable:!0,get:function(){return t.extractFonts}}),exports.flattenTokens=u,Object.defineProperty(exports,"fontSlug",{enumerable:!0,get:function(){return t.fontSlug}}),Object.defineProperty(exports,"fontSlugs",{enumerable:!0,get:function(){return t.fontSlugs}}),Object.defineProperty(exports,"formatTokenValue",{enumerable:!0,get:function(){return r.formatTokenValue}}),exports.generateTokenDocs=$,exports.normalizeThemes=Q,exports.renderFontMdx=F,exports.renderFontSpecimenBlock=N,exports.renderFontsMdx=P,exports.renderInstallMd=p,exports.renderThemeFile=Z,Object.defineProperty(exports,"resolveFontStack",{enumerable:!0,get:function(){return t.resolveFontStack}}),exports.resolveTokenSets=r.resolveTokenSets,Object.defineProperty(exports,"toCssVar",{enumerable:!0,get:function(){return r.toCssVar}});
|
package/dist/index.d.cts
CHANGED
|
@@ -3,6 +3,7 @@ import { PartialKeys } from "@stryke/types/base";
|
|
|
3
3
|
import { Fonts, Schema, Tokens as Tokens$1 } from "@razorwind/core/schema";
|
|
4
4
|
import { formatTokenValue, resolveTokenSets, toCssVar } from "@razorwind/core/utils";
|
|
5
5
|
import { GeneratorFunctionResult } from "@power-plant/core";
|
|
6
|
+
import { extractFonts, fontSlug, fontSlugs, resolveFontStack } from "@razorwind/docgen/generate";
|
|
6
7
|
//#region src/types.d.ts
|
|
7
8
|
/**
|
|
8
9
|
* A flattened design token ready for documentation rendering.
|
|
@@ -167,23 +168,6 @@ declare function renderInstallMd(options: {
|
|
|
167
168
|
}): string;
|
|
168
169
|
//#endregion
|
|
169
170
|
//#region src/generate.d.ts
|
|
170
|
-
/**
|
|
171
|
-
* Collect font entries from `schema.fonts`, sorted by name.
|
|
172
|
-
*/
|
|
173
|
-
declare function extractFonts(fonts: unknown): Record<string, unknown>[];
|
|
174
|
-
/**
|
|
175
|
-
* Slug used for a per-font documentation page.
|
|
176
|
-
*/
|
|
177
|
-
declare function fontSlug(item: Record<string, unknown>): string;
|
|
178
|
-
/**
|
|
179
|
-
* Assign a unique page slug to each font, deduplicating collisions with a
|
|
180
|
-
* numeric suffix.
|
|
181
|
-
*/
|
|
182
|
-
declare function fontSlugs(fonts: Record<string, unknown>[]): Map<Record<string, unknown>, string>;
|
|
183
|
-
/**
|
|
184
|
-
* Resolve the CSS `font-family` stack for a font entry.
|
|
185
|
-
*/
|
|
186
|
-
declare function resolveFontStack(item: Record<string, unknown>): string;
|
|
187
171
|
/**
|
|
188
172
|
* Build a React FontSpecimen doc block previewing each font at a range of
|
|
189
173
|
* sizes.
|
|
@@ -193,7 +177,7 @@ declare function renderFontsMdx(options: Pick<StorybookPluginOptions, "titlePref
|
|
|
193
177
|
fonts: Record<string, unknown>[];
|
|
194
178
|
slugs: Map<Record<string, unknown>, string>;
|
|
195
179
|
}): string;
|
|
196
|
-
declare function renderFontMdx(font: Record<string, unknown>,
|
|
180
|
+
declare function renderFontMdx(font: Record<string, unknown>, _fontName: string, options?: Pick<StorybookPluginOptions, "sampleText" | "titlePrefix">): string;
|
|
197
181
|
/**
|
|
198
182
|
* Fill Storybook brand fields from Schema identity when the mapped theme omits them.
|
|
199
183
|
*/
|
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":"
|
|
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;;;;;;EAMf;;;;;;EAOA;;;;;;EAOA;;;;;;EAOA;;;;;EAMA,eAAe;;;;;;EAOf;;;;;;;;;;;;;;EAeA,WAAW;;;;;;EAOX;;;;;;EAOA;;;;;EAMA;;;;;;;iBClEc,cACd,QAAQA,WAAS,eAAeA,WAChC,UAAS,KAAK,2DACb;;;;;;;;iBC3Fa,gBAAgB;EAC9B;EACA;EACA;EACA;EACA;;;;;;;;iBC2tBc,wBACd,OAAO,2BACP,UAAS,KAAK;iBAuFA,eACd,SAAS,KAAK;EACZ,OAAO;EACP,OAAO,IAAI;;iBAwBC,cACd,MAAM,yBACN,mBACA,UAAS,KAAK;;;;iBA2PA,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
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { extractFonts, fontSlug, fontSlugs, resolveFontStack } from "@razorwind/docgen/generate";
|
|
1
2
|
import { formatTokenValue, resolveTokenSets, toCssVar } from "@razorwind/core/utils";
|
|
2
3
|
import { TokenType, Tokens } from "@power-plant/dtcg-schema";
|
|
3
4
|
import { PartialKeys } from "@stryke/types/base";
|
|
@@ -167,23 +168,6 @@ declare function renderInstallMd(options: {
|
|
|
167
168
|
}): string;
|
|
168
169
|
//#endregion
|
|
169
170
|
//#region src/generate.d.ts
|
|
170
|
-
/**
|
|
171
|
-
* Collect font entries from `schema.fonts`, sorted by name.
|
|
172
|
-
*/
|
|
173
|
-
declare function extractFonts(fonts: unknown): Record<string, unknown>[];
|
|
174
|
-
/**
|
|
175
|
-
* Slug used for a per-font documentation page.
|
|
176
|
-
*/
|
|
177
|
-
declare function fontSlug(item: Record<string, unknown>): string;
|
|
178
|
-
/**
|
|
179
|
-
* Assign a unique page slug to each font, deduplicating collisions with a
|
|
180
|
-
* numeric suffix.
|
|
181
|
-
*/
|
|
182
|
-
declare function fontSlugs(fonts: Record<string, unknown>[]): Map<Record<string, unknown>, string>;
|
|
183
|
-
/**
|
|
184
|
-
* Resolve the CSS `font-family` stack for a font entry.
|
|
185
|
-
*/
|
|
186
|
-
declare function resolveFontStack(item: Record<string, unknown>): string;
|
|
187
171
|
/**
|
|
188
172
|
* Build a React FontSpecimen doc block previewing each font at a range of
|
|
189
173
|
* sizes.
|
|
@@ -193,7 +177,7 @@ declare function renderFontsMdx(options: Pick<StorybookPluginOptions, "titlePref
|
|
|
193
177
|
fonts: Record<string, unknown>[];
|
|
194
178
|
slugs: Map<Record<string, unknown>, string>;
|
|
195
179
|
}): string;
|
|
196
|
-
declare function renderFontMdx(font: Record<string, unknown>,
|
|
180
|
+
declare function renderFontMdx(font: Record<string, unknown>, _fontName: string, options?: Pick<StorybookPluginOptions, "sampleText" | "titlePrefix">): string;
|
|
197
181
|
/**
|
|
198
182
|
* Fill Storybook brand fields from Schema identity when the mapped theme omits them.
|
|
199
183
|
*/
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{definePlugin as e}from"@razorwind/core/plugin";import{
|
|
2
|
-
`,`\\n`).replaceAll(`\r`,`\\r`)}function
|
|
1
|
+
import{definePlugin as e}from"@razorwind/core/plugin";import{FONT_CHARACTER_SET as t,FONT_SPECIMEN_SIZES as n,FONT_SPECIMEN_TEXT as r,extractFonts as i,extractFonts as a,fontSlug as o,fontSlug as s,fontSlugs as c,fontSlugs as l,renderFontBody as u,resolveFontStack as d,resolveFontStack as f}from"@razorwind/docgen/generate";import{MONO_ROLES as p,SANS_ROLES as m,cssFontFamily as h,pickFontByRole as g}from"@razorwind/core/lib/fonts";import{SHARED_THEME_ID as _,createDocument as v,cssVarPrefixFromName as ee,flattenTokens as y,formatTokenValue as b,isObject as x,isSharedThemeId as S,isTokenLeaf as te,mergeTokenTrees as ne,resolveSchemaIdentity as re,resolveTokenSets as C,toCssVar as ie,toCssVar as ae,toThemeCssVar as oe}from"@razorwind/core/utils";import{joinPaths as w}from"@stryke/path/join";function T(e){return e===!0||e===`true`||e===1}function E(e,t){return e?`${e}:${t}`:t}function se(e){let t=e.theme??e.$theme;return typeof t==`string`&&t.length>0?t:void 0}function ce(e,t){return e===`palette`||e===`$palette`?typeof t==`boolean`||typeof t==`number`||typeof t==`string`:(e===`theme`||e===`$theme`)&&typeof t==`string`}function le(e){let t=/* @__PURE__ */ new Map;function n(e,r,i,a,o){if(!x(e))return;let s=a||T(e.palette)||T(e.$palette),c=se(e)??o;if(te(e)){(s||c)&&t.set(E(i,r.join(`.`)),{...s&&{palette:!0},...c&&{childTheme:c}});return}for(let[t,a]of Object.entries(e))t.startsWith(`$`)&&t!==`$palette`&&t!==`$theme`||ce(t,a)||n(a,[...r,t],i,s,c)}for(let t of C(e)){let e=t.id==="default"?void 0:t.id;n(t.tokens,[],e,!1,void 0)}return t}function D(e,t={}){let n=t.cssVarPrefix,r=le(e);return y(e,{includeTypes:t.includeTypes,shouldIncludeToken:e=>e.skipDocs!==!0,enrichToken:e=>{let t=r.get(E(e.theme,e.path));return{...e,cssVar:ae(e.path,n),...e.type===`color`&&t}}})}function O(e){return e.replaceAll(`\\`,`\\\\`).replaceAll(`"`,`\\"`).replaceAll(`
|
|
2
|
+
`,`\\n`).replaceAll(`\r`,`\\r`)}function k(e){return typeof e==`string`?`"${O(e)}"`:typeof e==`number`||typeof e==`boolean`?String(e):e==null?`undefined`:JSON.stringify(e)}function A(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 j=r,ue=/* @__PURE__ */ new Set([`fontFamily`,`fontWeight`,`typography`]),de=/font|typography|type|text|line[-_.]?height|letter[-_.]?spacing/i;function M(e){return ue.has(e.type??``)?!0:(e.type===`dimension`||e.type===`number`)&&de.test(e.path)}function N(e,t){return e.some(e=>t.some(t=>e.path===t||e.path.startsWith(`${t}.`)))}const fe=/^\{([^{}]+)\}$/,pe=/^var\((--[^),\s]+)(?:\s*,[^)]*)?\)$/;function P(e){if(typeof e==`string`)return fe.exec(e.trim())?.[1]?.trim()}function F(e){if(typeof e==`string`)return pe.exec(e.trim())?.[1]}function I(e){let t=new Map(e.map(e=>[e.path,e])),n=new Map(e.map(e=>[oe(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(P(r.value)??``)??n.get(F(r.value)??F(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 L(e){return Object.keys(e).length>1}function me(){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 he(e,t){let n=C(e),r=n.filter(e=>!S(e.id));return r.length<=1?{default:I(D(e,t))}:Object.fromEntries(r.map(e=>[e.id,I(D(K(n,e),t))]))}function ge(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 ve(e,t={}){let n=t.colorGroupBy??2,r=Object.entries(e),i=r[0]?.[0]??`default`,a=L(e),o=(e,t=` `)=>[...ge(e,n).entries()].toSorted(([e],[t])=>e.localeCompare(t)).map(([e,n])=>{let r=n.map(n=>`${t} ${k(_e(n.path,e))}: ${k(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={${k(e)}}
|
|
90
|
+
subtitle={${k(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])=>` ${k(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,18 +118,18 @@ 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, ${k(i)}, theme)`:k(i)};
|
|
122
122
|
|
|
123
123
|
return COLOR_VARIANTS[activeTheme];
|
|
124
124
|
}
|
|
125
|
-
`}function
|
|
126
|
-
fontFamily={${
|
|
127
|
-
fontSizes={${
|
|
128
|
-
fontWeight={${
|
|
129
|
-
sampleText={${
|
|
130
|
-
/>`},
|
|
125
|
+
`}function ye(e,t={}){let n=t.sampleText??j,r=L(e),i=Object.entries(e),a=i[0]?.[0]??`default`,o=e=>{let r=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}),i=[...new Set(r)],a=g(t.fonts,m),o=(a?h(a):void 0)??e.find(e=>e.type===`fontFamily`)?.cssValue??`system-ui, sans-serif`,s=e.find(e=>e.type===`fontWeight`),c=s&&Number.parseFloat(s.cssValue)||400,l=i.length>0?`[${i.map(e=>k(e)).join(`, `)}]`:`[12, 14, 16, 20, 24, 32]`;return`<Typeset
|
|
126
|
+
fontFamily={${k(o)}}
|
|
127
|
+
fontSizes={${l}}
|
|
128
|
+
fontWeight={${k(c)}}
|
|
129
|
+
sampleText={${k(n)}}
|
|
130
|
+
/>`},s=i.map(([e,t])=>` ${k(e)}: (${o(t)})`).join(`,
|
|
131
131
|
`);return`import { Typeset } from "@storybook/addon-docs/blocks";
|
|
132
|
-
${
|
|
132
|
+
${r?`import { resolveThemeVariant } from "./ThemeVariant";
|
|
133
133
|
`:``}
|
|
134
134
|
|
|
135
135
|
/**
|
|
@@ -138,7 +138,7 @@ ${o?`import { resolveThemeVariant } from "./ThemeVariant";
|
|
|
138
138
|
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-typeset
|
|
139
139
|
*/
|
|
140
140
|
const TYPESET_VARIANTS = {
|
|
141
|
-
${
|
|
141
|
+
${s}
|
|
142
142
|
};
|
|
143
143
|
|
|
144
144
|
export interface TypesetBlockProps {
|
|
@@ -147,20 +147,20 @@ export interface TypesetBlockProps {
|
|
|
147
147
|
}
|
|
148
148
|
|
|
149
149
|
export function TypesetBlock({ theme }: TypesetBlockProps = {}) {
|
|
150
|
-
const activeTheme = ${
|
|
150
|
+
const activeTheme = ${r?`resolveThemeVariant(TYPESET_VARIANTS, ${k(a)}, theme)`:k(a)};
|
|
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 be(e){let t=L(e),n=Object.entries(e),r=n[0]?.[0]??`default`,i=e=>e.map(e=>{let t=e.theme?k(e.theme):`undefined`;return` {
|
|
155
|
+
path: ${k(e.path)},
|
|
156
|
+
type: ${e.type?k(e.type):`undefined`},
|
|
157
|
+
value: ${k(e.cssValue)},
|
|
158
|
+
cssVar: ${k(e.cssVar)},
|
|
159
|
+
description: ${e.description?k(e.description):`undefined`},
|
|
160
160
|
theme: ${t},
|
|
161
|
-
typography: ${
|
|
161
|
+
typography: ${M(e)}
|
|
162
162
|
}`}).join(`,
|
|
163
|
-
`),a=n.map(([e,t])=>` ${
|
|
163
|
+
`),a=n.map(([e,t])=>` ${k(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, ${k(r)}, theme)`:k(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 xe(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="${O(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 Se(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
320
320
|
import { ColorPaletteBlock } from "./blocks/ColorPalette";
|
|
321
321
|
|
|
322
|
-
<Meta title="${
|
|
322
|
+
<Meta title="${O(e.titlePrefix??`Design Tokens`)}/Colors" />
|
|
323
323
|
|
|
324
324
|
# Colors
|
|
325
325
|
|
|
326
326
|
<ColorPaletteBlock />
|
|
327
|
-
`}function
|
|
327
|
+
`}function Ce(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="${O(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
|
|
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 we(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,29 +347,29 @@ import { TokenTableBlock } from "./blocks/TokenTable";
|
|
|
347
347
|
export function IconGalleryBlock() {
|
|
348
348
|
return (
|
|
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: ${k(n.content)} }}
|
|
353
|
+
/>`:`<code>${O(t)}</code>`;return` <IconItem name={${k(t)}}>
|
|
354
354
|
${r}
|
|
355
355
|
</IconItem>`}).join(`
|
|
356
356
|
`)||` {/* No icons */}`}
|
|
357
357
|
</IconGallery>
|
|
358
358
|
);
|
|
359
359
|
}
|
|
360
|
-
`}function
|
|
360
|
+
`}function Te(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
361
361
|
import { IconGalleryBlock } from "./blocks/IconGallery";
|
|
362
362
|
|
|
363
|
-
<Meta title="${
|
|
363
|
+
<Meta title="${O(e.titlePrefix??`Design Tokens`)}/Icons" />
|
|
364
364
|
|
|
365
365
|
# Icons
|
|
366
366
|
|
|
367
367
|
<IconGalleryBlock />
|
|
368
|
-
`}
|
|
369
|
-
family: ${
|
|
370
|
-
title: ${
|
|
368
|
+
`}function B(e,r={}){let i=r.sampleText??j,a=e.map(e=>{let t=R(e,`name`)??`unknown`,n=f(e);return` ${k(t)}: {
|
|
369
|
+
family: ${k(n)},
|
|
370
|
+
title: ${k(R(e,`title`)??t)}
|
|
371
371
|
}`}).join(`,
|
|
372
|
-
`),
|
|
372
|
+
`),o=`[${n.join(`, `)}]`;return`import type { CSSProperties, ReactElement } from "react";
|
|
373
373
|
|
|
374
374
|
export interface FontSpecimenBlockProps {
|
|
375
375
|
/** Font entry name. Defaults to the first font. */
|
|
@@ -381,12 +381,12 @@ export interface FontSpecimenBlockProps {
|
|
|
381
381
|
}
|
|
382
382
|
|
|
383
383
|
const FONT_FAMILIES: Record<string, { family: string; title: string }> = {
|
|
384
|
-
${
|
|
384
|
+
${a||` // No fonts`}
|
|
385
385
|
};
|
|
386
386
|
|
|
387
|
-
const DEFAULT_FONT = ${
|
|
388
|
-
const DEFAULT_SIZES = ${
|
|
389
|
-
const DEFAULT_SAMPLE_TEXT = ${
|
|
387
|
+
const DEFAULT_FONT = ${k(e[0]?R(e[0],`name`)??`unknown`:`unknown`)};
|
|
388
|
+
const DEFAULT_SIZES = ${o};
|
|
389
|
+
const DEFAULT_SAMPLE_TEXT = ${k(i)};
|
|
390
390
|
|
|
391
391
|
const labelStyle: CSSProperties = {
|
|
392
392
|
display: "block",
|
|
@@ -419,7 +419,7 @@ export function FontSpecimenBlock({
|
|
|
419
419
|
lineHeight: 1.25,
|
|
420
420
|
margin: "0 0 0.5em"
|
|
421
421
|
}}>
|
|
422
|
-
|
|
422
|
+
${t}
|
|
423
423
|
</div>
|
|
424
424
|
{sizes.map(size => (
|
|
425
425
|
<div
|
|
@@ -437,10 +437,9 @@ export function FontSpecimenBlock({
|
|
|
437
437
|
</div>
|
|
438
438
|
);
|
|
439
439
|
}
|
|
440
|
-
`}function
|
|
441
|
-
`)}function U(e){let t=e.titlePrefix??`Design Tokens`,n=e.fonts.map(t=>{let n=N(t,`name`)??`unknown`;return`- [${N(t,`title`)??n}](./Fonts/${e.slugs.get(t)??R(t)}.mdx)`});return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
440
|
+
`}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";
|
|
442
441
|
|
|
443
|
-
<Meta title="${
|
|
442
|
+
<Meta title="${O(t)}/Fonts" />
|
|
444
443
|
|
|
445
444
|
# Fonts
|
|
446
445
|
|
|
@@ -448,21 +447,14 @@ ${e.fonts.length} font${e.fonts.length===1?``:`s`} in the design system.
|
|
|
448
447
|
|
|
449
448
|
${n.join(`
|
|
450
449
|
`)}
|
|
451
|
-
`}function
|
|
452
|
-
import { FontSpecimenBlock } from "../blocks/FontSpecimen";
|
|
450
|
+
`}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";
|
|
453
451
|
|
|
454
|
-
<Meta title="${
|
|
452
|
+
<Meta title="${O(r)}/Fonts/${O(a)}" />
|
|
455
453
|
|
|
456
454
|
# ${a}
|
|
457
455
|
|
|
458
|
-
${
|
|
459
|
-
|
|
460
|
-
${xe(e)}
|
|
461
|
-
|
|
462
|
-
## Specimen
|
|
463
|
-
|
|
464
|
-
<FontSpecimenBlock name={${w(t)}} />
|
|
465
|
-
`}function Se(e=!0,t=!0){return`export { ColorPaletteBlock } from "./ColorPalette";
|
|
456
|
+
${u(e,n.sampleText)}
|
|
457
|
+
`}function Ee(e=!0,t=!0){return`export { ColorPaletteBlock } from "./ColorPalette";
|
|
466
458
|
export type { ColorPaletteBlockProps } from "./ColorPalette";
|
|
467
459
|
${e?`export { IconGalleryBlock } from "./IconGallery";
|
|
468
460
|
`:``}${t?`export { FontSpecimenBlock } from "./FontSpecimen";
|
|
@@ -471,16 +463,16 @@ export type { FontSpecimenBlockProps } from "./FontSpecimen";
|
|
|
471
463
|
export type { TokenTableBlockProps, TokenTableRow } from "./TokenTable";
|
|
472
464
|
export { TypesetBlock } from "./Typeset";
|
|
473
465
|
export type { TypesetBlockProps } from "./Typeset";
|
|
474
|
-
`}const
|
|
475
|
-
`)}\n${t}})`}function
|
|
466
|
+
`}const De=/* @__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=>De.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 Oe(e,t,n){return t.base===`light`||t.base===`dark`?t.base:`${e} ${n??``}`.toLowerCase().includes(`light`)?`light`:`dark`}function ke(e){return/^[a-z_$][\w$]*$/i.test(e)?e:k(e)}function K(e,t){let n=e.find(e=>e.id===_);return!n||S(t.id)?t.tokens:ne(t.tokens,n.tokens)}function Ae(e){return z(e)&&`$value`in e&&!(`colorSpace`in e)&&!(`hex`in e)?e.$value:e}function je(e,t){let n=Ae(e),r=/* @__PURE__ */ new Set;for(let e=0;e<8;e++){let e=P(n);if(!e||r.has(e))break;r.add(e);let i=t.get(e);if(!i)break;n=i.value}return n}function Me(e){return e==null||typeof e==`string`||typeof e==`number`||typeof e==`boolean`?e:b(e)}function Ne(e,t){let n=C(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 D(i))(!a.get(e.path)||e.theme===t)&&a.set(e.path,e);return a}function Pe(e,t){let n={...e};for(let[r,i]of Object.entries(e))r!==`base`&&i!==void 0&&(n[r]=Me(je(i,t)));return n}function Fe(e,t,n,r,i){let a=Pe(t,Ne(i.tokens,e));return q(Oe(e,a,i.theme),a,n,r)}function q(e,t,n,r){let i=g(r,m),a=g(r,p);return{brandTarget:`_blank`,base:e||`light`,...t,brandTitle:t.brandTitle??n.title,brandUrl:t.brandUrl??n.homepage,brandImage:t.brandImage??n.logo,fontBase:t.fontBase??(i?h(i):void 0),fontCode:t.fontCode??(a?h(a):void 0)}}function J(e,t=``){return`create({\n${Object.entries(e).filter(([,e])=>e!==void 0).map(([e,n])=>`${t} ${e}: ${k(n)}`).join(`,
|
|
467
|
+
`)}\n${t}})`}function Y(e){return`import { create } from "storybook/theming";
|
|
476
468
|
|
|
477
469
|
/**
|
|
478
470
|
* Storybook UI theme generated by \`@razorwind/storybook\`.
|
|
479
471
|
*
|
|
480
472
|
* @see https://storybook.js.org/docs/configure/user-interface/theming
|
|
481
473
|
*/
|
|
482
|
-
export default ${
|
|
483
|
-
`}function
|
|
474
|
+
export default ${J(e)};
|
|
475
|
+
`}function X(e){return`import { create } from "storybook/theming";
|
|
484
476
|
|
|
485
477
|
/**
|
|
486
478
|
* Storybook UI themes generated by \`@razorwind/storybook\`.
|
|
@@ -488,8 +480,8 @@ export default ${X(e)};
|
|
|
488
480
|
* @see https://storybook.js.org/docs/configure/user-interface/theming
|
|
489
481
|
*/
|
|
490
482
|
export default {
|
|
491
|
-
${Object.entries(e).map(([e,t])=>` ${
|
|
483
|
+
${Object.entries(e).map(([e,t])=>` ${ke(e)}: ${J(t,` `)}`).join(`,
|
|
492
484
|
`)}
|
|
493
485
|
};
|
|
494
|
-
`}function
|
|
486
|
+
`}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)=>Fe(e,r,n,t.fonts,t);if(G(e))return Object.fromEntries(Object.entries(e).map(([e,t])=>[e,i(e,t)]));let a=C(t.tokens),o=a.filter(e=>!S(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 Ie=e=>(t,n,r)=>v(w(e,t),n,{name:`razorwind-storybook`},!1,r);function $(e,t={}){let n=t.outputPath??`storybook/tokens`,r=re(e),i=t.titlePrefix??r.title??`Design Tokens`,o={...t,titlePrefix:i,cssVarPrefix:t.cssVarPrefix??ee(e.name)},c=D(e.tokens,o),u=he(e.tokens,o),d=c.some(e=>e.type===`color`),f=e.fonts&&Object.keys(e.fonts).length>0||c.some(M),p=N(c,[`size`]),m=N(c,[`space`,`spacing`]),h=!t.skipIcons&&z(e.icons)&&Object.keys(e.icons).length>0,g=t.skipFonts?[]:a(e.fonts),_=g.length>0,v=l(g),y=Ie(n),b={[w(n,`blocks/ColorPalette.tsx`)]:y(`blocks/ColorPalette.tsx`,ve(u,o),`tsx`),[w(n,`blocks/Typeset.tsx`)]:y(`blocks/Typeset.tsx`,ye(u,{...o,fonts:e.fonts}),`tsx`),[w(n,`blocks/TokenTable.tsx`)]:y(`blocks/TokenTable.tsx`,be(u),`tsx`),[w(n,`blocks/index.ts`)]:y(`blocks/index.ts`,Ee(h,_),`typescript`),[w(n,`Tokens.mdx`)]:y(`Tokens.mdx`,xe({titlePrefix:i,hasColors:d,hasTypography:f,hasSizes:p,hasSpaces:m,hasFonts:_}),`mdx`)};if(h&&(b[w(n,`blocks/IconGallery.tsx`)]=y(`blocks/IconGallery.tsx`,we(e.icons),`tsx`)),L(u)&&(b[w(n,`blocks/ThemeVariant.ts`)]=y(`blocks/ThemeVariant.ts`,me(),`typescript`)),d&&(b[w(n,`Colors.mdx`)]=y(`Colors.mdx`,Se(o),`mdx`)),f&&(b[w(n,`Typography.mdx`)]=y(`Typography.mdx`,Ce(o),`mdx`)),h&&(b[w(n,`Icons.mdx`)]=y(`Icons.mdx`,Te(o),`mdx`)),_){b[w(n,`blocks/FontSpecimen.tsx`)]=y(`blocks/FontSpecimen.tsx`,B(g,o),`tsx`),b[w(n,`Fonts.mdx`)]=y(`Fonts.mdx`,V({...o,fonts:g,slugs:v}),`mdx`);for(let e of g){let t=v.get(e)??s(e),r=R(e,`name`)??`unknown`,i=w(`Fonts`,`${t}.mdx`);b[w(n,i)]=y(i,H(e,r,o),`mdx`)}}b[w(n,`tokens.json`)]=y(`tokens.json`,`${JSON.stringify(c,null,2)}\n`,`json`);let x;if(t.mapTheme){let i=Q(t.mapTheme(e.tokens),e,r,t.mapTheme);Object.keys(i).length>0&&(x=Object.keys(i),b[w(n,`theme.ts`)]=y(`theme.ts`,Z(i),`typescript`))}let S=`INSTALL.md`;return b[w(n,S)]=y(S,t.installGuide??A({outputPath:n,titlePrefix:i,themeFiles:x?[`theme.ts`]:void 0,themeNames:x,tokenThemeNames:Object.keys(u)}),`markdown`),b}var Le=e(e=>({name:`storybook`,themeGeneration:`combined`,generate:async t=>$(t,e??{})}));export{q as applyBrandDefaults,Le as default,i as extractFonts,D as flattenTokens,o as fontSlug,c as fontSlugs,b as formatTokenValue,$ as generateTokenDocs,Q as normalizeThemes,H as renderFontMdx,B as renderFontSpecimenBlock,V as renderFontsMdx,A as renderInstallMd,Z as renderThemeFile,d as resolveFontStack,C as resolveTokenSets,ie as toCssVar};
|
|
495
487
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":["flattenTokensBase","toCssVar","isObject","flattenTokens$1","toCssVar$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","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","
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["flattenTokensBase","toCssVar","isObject","resolveFontStack","fontSlug","extractFonts","fontSlugs","extractFonts$1","fontSlug$1","fontSlugs$1","resolveFontStack$1","flattenTokens$1","toCssVar$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","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","extractFonts","fontSlug","fontSlugs","resolveFontStack","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.77",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Razorwind plugin that creates Storybook MDX token doc blocks from Razorwind design tokens.",
|
|
6
6
|
"repository": {
|
|
@@ -85,7 +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.
|
|
88
|
+
"@razorwind/core": "^0.0.79",
|
|
89
|
+
"@razorwind/docgen": "^0.0.75",
|
|
89
90
|
"@stryke/path": "^0.29.43",
|
|
90
91
|
"@stryke/type-checks": "^0.6.49"
|
|
91
92
|
},
|
|
@@ -106,5 +107,5 @@
|
|
|
106
107
|
"typescript": "^6.0.3"
|
|
107
108
|
},
|
|
108
109
|
"publishConfig": { "access": "public" },
|
|
109
|
-
"gitHead": "
|
|
110
|
+
"gitHead": "5c48ab00f4080e9bd1f21bf517af901586565400"
|
|
110
111
|
}
|