@razorwind/storybook 0.0.74 → 0.0.75
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 +123 -20
- package/dist/index.d.cts +35 -2
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts +35 -2
- package/dist/index.mjs +125 -22
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("@razorwind/core/plugin"),t=require("@razorwind/core/lib/fonts"),n=require("@razorwind/core/utils"),r=require("@stryke/path/join");function i(e){return e===!0||e===`true`||e===1}function a(e,t){return e?`${e}:${t}`:t}function o(e){let t=e.theme??e.$theme;return typeof t==`string`&&t.length>0?t:void 0}function s(e,t){return e===`palette`||e===`$palette`?typeof t==`boolean`||typeof t==`number`||typeof t==`string`:(e===`theme`||e===`$theme`)&&typeof t==`string`}function c(e){let t=/* @__PURE__ */ new Map;function r(e,c,l,u,d){if(!(0,n.isObject)(e))return;let f=u||i(e.palette)||i(e.$palette),p=o(e)??d;if((0,n.isTokenLeaf)(e)){(f||p)&&t.set(a(l,c.join(`.`)),{...f&&{palette:!0},...p&&{childTheme:p}});return}for(let[t,n]of Object.entries(e))t.startsWith(`$`)&&t!==`$palette`&&t!==`$theme`||s(t,n)||r(n,[...c,t],l,f,p)}for(let t of(0,n.resolveTokenSets)(e)){let e=t.id==="default"?void 0:t.id;r(t.tokens,[],e,!1,void 0)}return t}function l(e,t={}){let r=t.cssVarPrefix
|
|
1
|
+
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("@razorwind/core/plugin"),t=require("@razorwind/core/lib/fonts"),n=require("@razorwind/core/utils"),r=require("@stryke/path/join");function i(e){return e===!0||e===`true`||e===1}function a(e,t){return e?`${e}:${t}`:t}function o(e){let t=e.theme??e.$theme;return typeof t==`string`&&t.length>0?t:void 0}function s(e,t){return e===`palette`||e===`$palette`?typeof t==`boolean`||typeof t==`number`||typeof t==`string`:(e===`theme`||e===`$theme`)&&typeof t==`string`}function c(e){let t=/* @__PURE__ */ new Map;function r(e,c,l,u,d){if(!(0,n.isObject)(e))return;let f=u||i(e.palette)||i(e.$palette),p=o(e)??d;if((0,n.isTokenLeaf)(e)){(f||p)&&t.set(a(l,c.join(`.`)),{...f&&{palette:!0},...p&&{childTheme:p}});return}for(let[t,n]of Object.entries(e))t.startsWith(`$`)&&t!==`$palette`&&t!==`$theme`||s(t,n)||r(n,[...c,t],l,f,p)}for(let t of(0,n.resolveTokenSets)(e)){let e=t.id==="default"?void 0:t.id;r(t.tokens,[],e,!1,void 0)}return t}function l(e,t={}){let r=t.cssVarPrefix,i=c(e);return(0,n.flattenTokens)(e,{includeTypes:t.includeTypes,shouldIncludeToken:e=>e.skipDocs!==!0,enrichToken:e=>{let t=i.get(a(e.theme,e.path));return{...e,cssVar:(0,n.toCssVar)(e.path,r),...e.type===`color`&&t}}})}function u(e){return e.replaceAll(`\\`,`\\\\`).replaceAll(`"`,`\\"`).replaceAll(`
|
|
2
2
|
`,`\\n`).replaceAll(`\r`,`\\r`)}function d(e){return typeof e==`string`?`"${u(e)}"`:typeof e==`number`||typeof e==`boolean`?String(e):e==null?`undefined`:JSON.stringify(e)}function f(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
|
|
|
@@ -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 p=/* @__PURE__ */ new Set([`fontFamily`,`fontWeight`,`typography`]),
|
|
74
|
+
`}const p=`The quick brown fox jumps over the lazy dog`,m=/* @__PURE__ */ new Set([`fontFamily`,`fontWeight`,`typography`]),h=/font|typography|type|text|line[-_.]?height|letter[-_.]?spacing/i;function g(e){return m.has(e.type??``)?!0:(e.type===`dimension`||e.type===`number`)&&h.test(e.path)}function _(e,t){return e.some(e=>t.some(t=>e.path===t||e.path.startsWith(`${t}.`)))}const v=/^\{([^{}]+)\}$/,y=/^var\((--[^),\s]+)(?:\s*,[^)]*)?\)$/;function b(e){if(typeof e==`string`)return v.exec(e.trim())?.[1]?.trim()}function x(e){if(typeof e==`string`)return y.exec(e.trim())?.[1]}function S(e){let t=new Map(e.map(e=>[e.path,e])),r=new Map(e.map(e=>[(0,n.toThemeCssVar)(e.path),e])),i=e=>{let n=e,i=/* @__PURE__ */ new Set;for(let a=0;a<8;a++){if(i.has(n.path))return e.cssValue;i.add(n.path);let a=t.get(b(n.value)??``)??r.get(x(n.value)??x(n.cssValue)??``);if(!a||a.path===n.path)return n.cssValue;n=a}return e.cssValue};return e.map(e=>e.type===`color`?{...e,cssValue:i(e)}:e)}function C(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,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:S(l(e,t))}:Object.fromEntries(i.map(e=>[e.id,S(l(K(r,e),t))]))}function w(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 T(e,t){return e===t?e.split(`.`).at(-1)??e:e.startsWith(`${t}.`)?e.slice(t.length+1):e.split(`.`).at(-1)??e}function ne(e,t={}){let n=t.colorGroupBy??2,r=Object.entries(e),i=r[0]?.[0]??`default`,a=C(e),o=(e,t=` `)=>[...w(e,n).entries()].toSorted(([e],[t])=>e.localeCompare(t)).map(([e,n])=>{let r=n.map(n=>`${t} ${d(T(n.path,e))}: ${d(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={${d(e)}}
|
|
90
90
|
subtitle={${d(i)}}
|
|
@@ -122,7 +122,7 @@ export function ColorPaletteBlock({ theme }: ColorPaletteBlockProps = {}) {
|
|
|
122
122
|
|
|
123
123
|
return COLOR_VARIANTS[activeTheme];
|
|
124
124
|
}
|
|
125
|
-
`}function
|
|
125
|
+
`}function re(e,n={}){let r=n.sampleText??p,i=C(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,t.pickFontByRole)(n.fonts,t.SANS_ROLES),s=(o?(0,t.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=>d(e)).join(`, `)}]`:`[12, 14, 16, 20, 24, 32]`;return`<Typeset
|
|
126
126
|
fontFamily={${d(s)}}
|
|
127
127
|
fontSizes={${u}}
|
|
128
128
|
fontWeight={${d(l)}}
|
|
@@ -151,14 +151,14 @@ export function TypesetBlock({ theme }: TypesetBlockProps = {}) {
|
|
|
151
151
|
|
|
152
152
|
return TYPESET_VARIANTS[activeTheme];
|
|
153
153
|
}
|
|
154
|
-
`}function
|
|
154
|
+
`}function ie(e){let t=C(e),n=Object.entries(e),r=n[0]?.[0]??`default`,i=e=>e.map(e=>{let t=e.theme?d(e.theme):`undefined`;return` {
|
|
155
155
|
path: ${d(e.path)},
|
|
156
156
|
type: ${e.type?d(e.type):`undefined`},
|
|
157
157
|
value: ${d(e.cssValue)},
|
|
158
158
|
cssVar: ${d(e.cssVar)},
|
|
159
159
|
description: ${e.description?d(e.description):`undefined`},
|
|
160
160
|
theme: ${t},
|
|
161
|
-
typography: ${
|
|
161
|
+
typography: ${g(e)}
|
|
162
162
|
}`}).join(`,
|
|
163
163
|
`),a=n.map(([e,t])=>` ${d(e)}: [
|
|
164
164
|
${i(t)}
|
|
@@ -278,7 +278,7 @@ export function TokenTableBlock({
|
|
|
278
278
|
</table>
|
|
279
279
|
);
|
|
280
280
|
}
|
|
281
|
-
`}function
|
|
281
|
+
`}function ae(e){let t=e.titlePrefix??`Design Tokens`,n=e.hasColors?`
|
|
282
282
|
## Colors
|
|
283
283
|
|
|
284
284
|
<ColorPaletteBlock />
|
|
@@ -297,21 +297,26 @@ export function TokenTableBlock({
|
|
|
297
297
|
"space",
|
|
298
298
|
"spacing"
|
|
299
299
|
]} />
|
|
300
|
+
`:``,o=e.hasFonts?`
|
|
301
|
+
## Fonts
|
|
302
|
+
|
|
303
|
+
<FontSpecimenBlock />
|
|
300
304
|
`:``;return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
301
305
|
import { ColorPaletteBlock } from "./blocks/ColorPalette";
|
|
302
306
|
import { TokenTableBlock } from "./blocks/TokenTable";
|
|
303
307
|
import { TypesetBlock } from "./blocks/Typeset";
|
|
304
|
-
|
|
308
|
+
${e.hasFonts?`import { FontSpecimenBlock } from "./blocks/FontSpecimen";
|
|
309
|
+
`:``}
|
|
305
310
|
<Meta title="${u(t)}/Overview" />
|
|
306
311
|
|
|
307
312
|
# ${t}
|
|
308
313
|
|
|
309
314
|
Design tokens generated by \`@razorwind/storybook\` for Storybook MDX docs.
|
|
310
|
-
${n}${r}${i}${a}
|
|
315
|
+
${n}${r}${i}${a}${o}
|
|
311
316
|
## All tokens
|
|
312
317
|
|
|
313
318
|
<TokenTableBlock />
|
|
314
|
-
`}function
|
|
319
|
+
`}function E(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
315
320
|
import { ColorPaletteBlock } from "./blocks/ColorPalette";
|
|
316
321
|
|
|
317
322
|
<Meta title="${u(e.titlePrefix??`Design Tokens`)}/Colors" />
|
|
@@ -319,7 +324,7 @@ import { ColorPaletteBlock } from "./blocks/ColorPalette";
|
|
|
319
324
|
# Colors
|
|
320
325
|
|
|
321
326
|
<ColorPaletteBlock />
|
|
322
|
-
`}function
|
|
327
|
+
`}function D(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
323
328
|
import { TypesetBlock } from "./blocks/Typeset";
|
|
324
329
|
import { TokenTableBlock } from "./blocks/TokenTable";
|
|
325
330
|
|
|
@@ -332,7 +337,7 @@ import { TokenTableBlock } from "./blocks/TokenTable";
|
|
|
332
337
|
## Typography tokens
|
|
333
338
|
|
|
334
339
|
<TokenTableBlock typography />
|
|
335
|
-
`}function
|
|
340
|
+
`}function O(e,t){let n=e[t];return typeof n==`string`?n:void 0}function k(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function oe(e){return`import { IconGallery, IconItem } from "@storybook/addon-docs/blocks";
|
|
336
341
|
|
|
337
342
|
/**
|
|
338
343
|
* Icons rendered with Storybook's IconGallery doc block.
|
|
@@ -342,7 +347,7 @@ import { TokenTableBlock } from "./blocks/TokenTable";
|
|
|
342
347
|
export function IconGalleryBlock() {
|
|
343
348
|
return (
|
|
344
349
|
<IconGallery>
|
|
345
|
-
${(
|
|
350
|
+
${(k(e)?Object.values(e).filter(k).toSorted((e,t)=>(O(e,`name`)??``).localeCompare(O(t,`name`)??``)):[]).map(e=>{let t=O(e,`name`)??`unknown`,n=(Array.isArray(e.files)?e.files:[]).find(e=>k(e)&&O(e,`type`)===`svg`&&typeof e.content==`string`),r=k(n)&&typeof n.content==`string`?`<span
|
|
346
351
|
style={{ display: "inline-flex", width: 24, height: 24 }}
|
|
347
352
|
dangerouslySetInnerHTML={{ __html: ${d(n.content)} }}
|
|
348
353
|
/>`:`<code>${u(t)}</code>`;return` <IconItem name={${d(t)}}>
|
|
@@ -352,7 +357,7 @@ ${(N(e)?Object.values(e).filter(N).toSorted((e,t)=>(M(e,`name`)??``).localeCompa
|
|
|
352
357
|
</IconGallery>
|
|
353
358
|
);
|
|
354
359
|
}
|
|
355
|
-
`}function
|
|
360
|
+
`}function se(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
356
361
|
import { IconGalleryBlock } from "./blocks/IconGallery";
|
|
357
362
|
|
|
358
363
|
<Meta title="${u(e.titlePrefix??`Design Tokens`)}/Icons" />
|
|
@@ -360,15 +365,113 @@ import { IconGalleryBlock } from "./blocks/IconGallery";
|
|
|
360
365
|
# Icons
|
|
361
366
|
|
|
362
367
|
<IconGalleryBlock />
|
|
363
|
-
`}function
|
|
368
|
+
`}const A=[12,14,16,20,24,32,48,64,72];function j(e,t){return O(e,t)}function M(e,t){let n=e[t];return Array.isArray(n)?n.filter(e=>typeof e==`string`):[]}function N(e){return k(e)?Object.values(e).filter(k).toSorted((e,t)=>(O(e,`name`)??``).localeCompare(O(t,`name`)??``)):[]}function P(e){return(O(e,`name`)??O(e,`title`)??`font`).trim().replaceAll(/[^\w-]+/g,`-`).replaceAll(/-{2,}/g,`-`).replaceAll(/^-|-$/g,``).toLowerCase()||`font`}function F(e){let t=/* @__PURE__ */ new Map,n=/* @__PURE__ */ new Map;for(let r of e){let e=P(r),i=t.get(e)??0;t.set(e,i+1),n.set(r,i===0?e:`${e}-${i+1}`)}return n}const I={sans:`sans-serif`,serif:`serif`,mono:`monospace`,code:`monospace`,display:`sans-serif`,heading:`sans-serif`,body:`sans-serif`};function L(e){let t=e.trim();return!t||/^[a-z-]+$/i.test(t)&&!/\s/.test(t)?t:`"${t.replaceAll(`"`,`\\"`)}"`}function R(e){let t=[L(j(e,`family`)??j(e,`title`)??j(e,`name`)??`sans-serif`)];for(let n of M(e,`fallbacks`)){let e=L(n);e&&!t.includes(e)&&t.push(e)}let n=I[j(e,`role`)??``];return n&&!t.includes(n)&&t.push(n),t.filter(Boolean).join(`, `)}function z(e,t={}){let n=t.sampleText??p,r=e.map(e=>{let t=O(e,`name`)??`unknown`,n=R(e);return` ${d(t)}: {
|
|
369
|
+
family: ${d(n)},
|
|
370
|
+
title: ${d(O(e,`title`)??t)}
|
|
371
|
+
}`}).join(`,
|
|
372
|
+
`),i=`[${A.join(`, `)}]`;return`import type { CSSProperties, ReactElement } from "react";
|
|
373
|
+
|
|
374
|
+
export interface FontSpecimenBlockProps {
|
|
375
|
+
/** Font entry name. Defaults to the first font. */
|
|
376
|
+
name?: string;
|
|
377
|
+
/** Override the rendered sample text. */
|
|
378
|
+
sampleText?: string;
|
|
379
|
+
/** Override the previewed sizes. */
|
|
380
|
+
sizes?: number[];
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
const FONT_FAMILIES: Record<string, { family: string; title: string }> = {
|
|
384
|
+
${r||` // No fonts`}
|
|
385
|
+
};
|
|
386
|
+
|
|
387
|
+
const DEFAULT_FONT = ${d(e[0]?O(e[0],`name`)??`unknown`:`unknown`)};
|
|
388
|
+
const DEFAULT_SIZES = ${i};
|
|
389
|
+
const DEFAULT_SAMPLE_TEXT = ${d(n)};
|
|
390
|
+
|
|
391
|
+
const labelStyle: CSSProperties = {
|
|
392
|
+
display: "block",
|
|
393
|
+
fontSize: "12px",
|
|
394
|
+
lineHeight: 1.4,
|
|
395
|
+
fontFamily: "system-ui, sans-serif",
|
|
396
|
+
color: "rgba(128, 128, 128, 0.9)"
|
|
397
|
+
};
|
|
398
|
+
|
|
399
|
+
/**
|
|
400
|
+
* Font specimen previews for Storybook MDX docs.
|
|
401
|
+
*/
|
|
402
|
+
export function FontSpecimenBlock({
|
|
403
|
+
name,
|
|
404
|
+
sampleText = DEFAULT_SAMPLE_TEXT,
|
|
405
|
+
sizes = DEFAULT_SIZES
|
|
406
|
+
}: FontSpecimenBlockProps = {}): ReactElement {
|
|
407
|
+
const entry = (name && FONT_FAMILIES[name]) || FONT_FAMILIES[DEFAULT_FONT];
|
|
408
|
+
|
|
409
|
+
if (!entry) {
|
|
410
|
+
return <p>No fonts found.</p>;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
return (
|
|
414
|
+
<div>
|
|
415
|
+
<div
|
|
416
|
+
style={{
|
|
417
|
+
fontFamily: entry.family,
|
|
418
|
+
fontSize: "32px",
|
|
419
|
+
lineHeight: 1.25,
|
|
420
|
+
margin: "0 0 0.5em"
|
|
421
|
+
}}>
|
|
422
|
+
AaBbCcDdEeFfGgHh 0123456789
|
|
423
|
+
</div>
|
|
424
|
+
{sizes.map(size => (
|
|
425
|
+
<div
|
|
426
|
+
key={size}
|
|
427
|
+
style={{
|
|
428
|
+
fontFamily: entry.family,
|
|
429
|
+
fontSize: \`\${size}px\`,
|
|
430
|
+
lineHeight: 1.45,
|
|
431
|
+
margin: "0 0 0.4em"
|
|
432
|
+
}}>
|
|
433
|
+
<span style={labelStyle}>{size}px</span>
|
|
434
|
+
{sampleText}
|
|
435
|
+
</div>
|
|
436
|
+
))}
|
|
437
|
+
</div>
|
|
438
|
+
);
|
|
439
|
+
}
|
|
440
|
+
`}function ce(e){let t=O(e,`name`)??`unknown`,n=O(e,`source`)??`local`,r=O(e,`role`),i=O(e,`category`),a=O(e,`display`),o=M(e,`fallbacks`),s=Array.isArray(e.weights)?e.weights.filter(e=>typeof e==`string`||typeof e==`number`):[],c=M(e,`styles`),l=M(e,`subsets`),d=M(e,`tags`);return[`- **Name:** \`${t}\``,`- **Source:** \`${n}\``,`- **Family:** \`${u(R(e))}\``,...r?[`- **Role:** \`${r}\``]:[],...i?[`- **Category:** \`${i}\``]:[],...a?[`- **Display:** \`${a}\``]:[],...o.length>0?[`- **Fallbacks:** ${o.map(e=>`\`${e}\``).join(`, `)}`]:[],...s.length>0?[`- **Weights:** ${s.map(e=>`\`${e}\``).join(`, `)}`]:[],...c.length>0?[`- **Styles:** ${c.map(e=>`\`${e}\``).join(`, `)}`]:[],...l.length>0?[`- **Subsets:** ${l.map(e=>`\`${e}\``).join(`, `)}`]:[],...d.length>0?[`- **Tags:** ${d.map(e=>`\`${e}\``).join(`, `)}`]:[]].join(`
|
|
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";
|
|
442
|
+
|
|
443
|
+
<Meta title="${u(t)}/Fonts" />
|
|
444
|
+
|
|
445
|
+
# Fonts
|
|
446
|
+
|
|
447
|
+
${e.fonts.length} font${e.fonts.length===1?``:`s`} in the design system.
|
|
448
|
+
|
|
449
|
+
${n.join(`
|
|
450
|
+
`)}
|
|
451
|
+
`}function V(e,t,n={}){let r=n.titlePrefix??`Design Tokens`,i=O(e,`name`)??`unknown`,a=O(e,`title`)??i,o=O(e,`description`);return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
452
|
+
import { FontSpecimenBlock } from "../blocks/FontSpecimen";
|
|
453
|
+
|
|
454
|
+
<Meta title="${u(r)}/Fonts/${u(a)}" />
|
|
455
|
+
|
|
456
|
+
# ${a}
|
|
457
|
+
|
|
458
|
+
${o??`${a} font specimen.`}
|
|
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";
|
|
364
466
|
export type { ColorPaletteBlockProps } from "./ColorPalette";
|
|
365
467
|
${e?`export { IconGalleryBlock } from "./IconGallery";
|
|
366
|
-
`:``}
|
|
367
|
-
export {
|
|
468
|
+
`:``}${t?`export { FontSpecimenBlock } from "./FontSpecimen";
|
|
469
|
+
export type { FontSpecimenBlockProps } from "./FontSpecimen";
|
|
470
|
+
`:``}export { TokenTableBlock } from "./TokenTable";
|
|
368
471
|
export type { TokenTableBlockProps, TokenTableRow } from "./TokenTable";
|
|
369
472
|
export { TypesetBlock } from "./Typeset";
|
|
370
473
|
export type { TypesetBlockProps } from "./Typeset";
|
|
371
|
-
`}const
|
|
474
|
+
`}const H=/* @__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 k(e)?e.base===`light`||e.base===`dark`:!1}function W(e){return k(e)?U(e)?!0:Object.keys(e).some(e=>H.has(e)):!1}function G(e){if(!k(e)||W(e))return!1;let t=Object.values(e);return t.length>0&&t.every(W)}function ue(e,t,n){return t.base===`light`||t.base===`dark`?t.base:`${e} ${n??``}`.toLowerCase().includes(`light`)?`light`:`dark`}function de(e){return/^[a-z_$][\w$]*$/i.test(e)?e:d(e)}function K(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 fe(e){return k(e)&&`$value`in e&&!(`colorSpace`in e)&&!(`hex`in e)?e.$value:e}function pe(e,t){let n=fe(e),r=/* @__PURE__ */ new Set;for(let e=0;e<8;e++){let e=b(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:(0,n.formatTokenValue)(e)}function he(e,t){let r=(0,n.resolveTokenSets)(e),i=r.find(e=>e.id===t)??(r.length===1?r[0]:void 0),a=i?K(r,i):e,o=/* @__PURE__ */ new Map;for(let e of l(a))(!o.get(e.path)||e.theme===t)&&o.set(e.path,e);return o}function ge(e,t){let n={...e};for(let[r,i]of Object.entries(e))r!==`base`&&i!==void 0&&(n[r]=me(pe(i,t)));return n}function _e(e,t,n,r,i){let a=ge(t,he(i.tokens,e));return q(ue(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}: ${d(n)}`).join(`,
|
|
372
475
|
`)}\n${t}})`}function Y(e){return`import { create } from "storybook/theming";
|
|
373
476
|
|
|
374
477
|
/**
|
|
@@ -385,7 +488,7 @@ export default ${J(e)};
|
|
|
385
488
|
* @see https://storybook.js.org/docs/configure/user-interface/theming
|
|
386
489
|
*/
|
|
387
490
|
export default {
|
|
388
|
-
${Object.entries(e).map(([e,t])=>` ${
|
|
491
|
+
${Object.entries(e).map(([e,t])=>` ${de(e)}: ${J(t,` `)}`).join(`,
|
|
389
492
|
`)}
|
|
390
493
|
};
|
|
391
|
-
`}function Z(e){if(
|
|
494
|
+
`}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,r,i){let a=(e,n)=>_e(e,n,r,t.fonts,t);if(G(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(K(o,t));if(G(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}W(n)&&(e[t.id]=a(t.id,n))}return e}if(W(e)){let n=s[0]&&s[0].id!=="default"?s[0].id:t.theme??`default`;return{[n]:a(n,e)}}return{}}const ve=e=>(t,i,a)=>(0,n.createDocument)((0,r.joinPaths)(e,t),i,{name:`razorwind-storybook`},!1,a);function $(e,t={}){let i=t.outputPath??`storybook/tokens`,a=(0,n.resolveSchemaIdentity)(e),o=t.titlePrefix??a.title??`Design Tokens`,s={...t,titlePrefix:o,cssVarPrefix:t.cssVarPrefix??(0,n.cssVarPrefixFromName)(e.name)},c=l(e.tokens,s),u=te(e.tokens,s),d=c.some(e=>e.type===`color`),p=e.fonts&&Object.keys(e.fonts).length>0||c.some(g),m=_(c,[`size`]),h=_(c,[`space`,`spacing`]),v=!t.skipIcons&&k(e.icons)&&Object.keys(e.icons).length>0,y=t.skipFonts?[]:N(e.fonts),b=y.length>0,x=F(y),S=ve(i),w={[(0,r.joinPaths)(i,`blocks/ColorPalette.tsx`)]:S(`blocks/ColorPalette.tsx`,ne(u,s),`tsx`),[(0,r.joinPaths)(i,`blocks/Typeset.tsx`)]:S(`blocks/Typeset.tsx`,re(u,{...s,fonts:e.fonts}),`tsx`),[(0,r.joinPaths)(i,`blocks/TokenTable.tsx`)]:S(`blocks/TokenTable.tsx`,ie(u),`tsx`),[(0,r.joinPaths)(i,`blocks/index.ts`)]:S(`blocks/index.ts`,le(v,b),`typescript`),[(0,r.joinPaths)(i,`Tokens.mdx`)]:S(`Tokens.mdx`,ae({titlePrefix:o,hasColors:d,hasTypography:p,hasSizes:m,hasSpaces:h,hasFonts:b}),`mdx`)};if(v&&(w[(0,r.joinPaths)(i,`blocks/IconGallery.tsx`)]=S(`blocks/IconGallery.tsx`,oe(e.icons),`tsx`)),C(u)&&(w[(0,r.joinPaths)(i,`blocks/ThemeVariant.ts`)]=S(`blocks/ThemeVariant.ts`,ee(),`typescript`)),d&&(w[(0,r.joinPaths)(i,`Colors.mdx`)]=S(`Colors.mdx`,E(s),`mdx`)),p&&(w[(0,r.joinPaths)(i,`Typography.mdx`)]=S(`Typography.mdx`,D(s),`mdx`)),v&&(w[(0,r.joinPaths)(i,`Icons.mdx`)]=S(`Icons.mdx`,se(s),`mdx`)),b){w[(0,r.joinPaths)(i,`blocks/FontSpecimen.tsx`)]=S(`blocks/FontSpecimen.tsx`,z(y,s),`tsx`),w[(0,r.joinPaths)(i,`Fonts.mdx`)]=S(`Fonts.mdx`,B({...s,fonts:y,slugs:x}),`mdx`);for(let e of y){let t=x.get(e)??P(e),n=O(e,`name`)??`unknown`,a=(0,r.joinPaths)(`Fonts`,`${t}.mdx`);w[(0,r.joinPaths)(i,a)]=S(a,V(e,n,s),`mdx`)}}w[(0,r.joinPaths)(i,`tokens.json`)]=S(`tokens.json`,`${JSON.stringify(c,null,2)}\n`,`json`);let T;if(t.mapTheme){let n=Q(t.mapTheme(e.tokens),e,a,t.mapTheme);Object.keys(n).length>0&&(T=Object.keys(n),w[(0,r.joinPaths)(i,`theme.ts`)]=S(`theme.ts`,Z(n),`typescript`))}let A=`INSTALL.md`;return w[(0,r.joinPaths)(i,A)]=S(A,t.installGuide??f({outputPath:i,titlePrefix:o,themeFiles:T?[`theme.ts`]:void 0,themeNames:T,tokenThemeNames:Object.keys(u)}),`markdown`),w}var ye=(0,e.definePlugin)(e=>({name:`storybook`,themeGeneration:`combined`,generate:async t=>$(t,e??{})}));exports.applyBrandDefaults=q,exports.default=ye,exports.extractFonts=N,exports.flattenTokens=l,exports.fontSlug=P,exports.fontSlugs=F,Object.defineProperty(exports,"formatTokenValue",{enumerable:!0,get:function(){return n.formatTokenValue}}),exports.generateTokenDocs=$,exports.normalizeThemes=Q,exports.renderFontMdx=V,exports.renderFontSpecimenBlock=z,exports.renderFontsMdx=B,exports.renderInstallMd=f,exports.renderThemeFile=Z,exports.resolveFontStack=R,exports.resolveTokenSets=n.resolveTokenSets,Object.defineProperty(exports,"toCssVar",{enumerable:!0,get:function(){return n.toCssVar}});
|
package/dist/index.d.cts
CHANGED
|
@@ -93,7 +93,7 @@ interface StorybookPluginOptions {
|
|
|
93
93
|
/**
|
|
94
94
|
* CSS custom-property prefix used when emitting `var(--…)` references.
|
|
95
95
|
*
|
|
96
|
-
* @defaultValue
|
|
96
|
+
* @defaultValue initials derived from the extracted spec name
|
|
97
97
|
*/
|
|
98
98
|
cssVarPrefix?: string;
|
|
99
99
|
/**
|
|
@@ -133,6 +133,12 @@ interface StorybookPluginOptions {
|
|
|
133
133
|
* @defaultValue `false`
|
|
134
134
|
*/
|
|
135
135
|
skipIcons?: boolean;
|
|
136
|
+
/**
|
|
137
|
+
* Skip generating font documentation pages.
|
|
138
|
+
*
|
|
139
|
+
* @defaultValue `false`
|
|
140
|
+
*/
|
|
141
|
+
skipFonts?: boolean;
|
|
136
142
|
/**
|
|
137
143
|
* Override body for generated `INSTALL.md`. When omitted, Storybook wiring
|
|
138
144
|
* steps are generated for the output directory.
|
|
@@ -161,6 +167,33 @@ declare function renderInstallMd(options: {
|
|
|
161
167
|
}): string;
|
|
162
168
|
//#endregion
|
|
163
169
|
//#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
|
+
/**
|
|
188
|
+
* Build a React FontSpecimen doc block previewing each font at a range of
|
|
189
|
+
* sizes.
|
|
190
|
+
*/
|
|
191
|
+
declare function renderFontSpecimenBlock(fonts: Record<string, unknown>[], options?: Pick<StorybookPluginOptions, "sampleText">): string;
|
|
192
|
+
declare function renderFontsMdx(options: Pick<StorybookPluginOptions, "titlePrefix"> & {
|
|
193
|
+
fonts: Record<string, unknown>[];
|
|
194
|
+
slugs: Map<Record<string, unknown>, string>;
|
|
195
|
+
}): string;
|
|
196
|
+
declare function renderFontMdx(font: Record<string, unknown>, fontName: string, options?: Pick<StorybookPluginOptions, "titlePrefix">): string;
|
|
164
197
|
/**
|
|
165
198
|
* Fill Storybook brand fields from Schema identity when the mapped theme omits them.
|
|
166
199
|
*/
|
|
@@ -226,5 +259,5 @@ declare function generateTokenDocs(spec: Schema, options?: StorybookPluginOption
|
|
|
226
259
|
*/
|
|
227
260
|
declare const _default: (options?: StorybookPluginOptions | undefined) => import("@razorwind/core/plugin").Plugin;
|
|
228
261
|
//#endregion
|
|
229
|
-
export { type FlatToken, type GenerateStorybookTheme, type StorybookPluginOptions, type StorybookTheme, type StorybookThemePartial, type StorybookThemeResult, applyBrandDefaults, _default as default, flattenTokens, formatTokenValue, generateTokenDocs, normalizeThemes, renderInstallMd, renderThemeFile, resolveTokenSets, toCssVar };
|
|
262
|
+
export { type FlatToken, type GenerateStorybookTheme, type StorybookPluginOptions, type StorybookTheme, type StorybookThemePartial, type StorybookThemeResult, applyBrandDefaults, _default as default, extractFonts, flattenTokens, fontSlug, fontSlugs, formatTokenValue, generateTokenDocs, normalizeThemes, renderFontMdx, renderFontSpecimenBlock, renderFontsMdx, renderInstallMd, renderThemeFile, resolveFontStack, resolveTokenSets, toCssVar };
|
|
230
263
|
//# sourceMappingURL=index.d.cts.map
|
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;;;;;;EAMf;;;;;;EAOA;;;;;;EAOA;;;;;;EAOA;;;;;EAMA,eAAe;;;;;;EAOf;;;;;;;;;;;;;;EAeA,WAAW;;;;;;EAOX;;;;;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;;;;;;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;;;;;;;iBC6tBc,aAAa,iBAAiB;;;;iBAe9B,SAAS,MAAM;;;;;iBAkBf,UACd,OAAO,4BACN,IAAI;;;;iBAwCS,iBAAiB,MAAM;;;;;iBA2BvB,wBACd,OAAO,2BACP,UAAS,KAAK;iBAmIA,eACd,SAAS,KAAK;EACZ,OAAO;EACP,OAAO,IAAI;;iBAwBC,cACd,MAAM,yBACN,kBACA,UAAS,KAAK;;;;iBAmQA,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
|
@@ -93,7 +93,7 @@ interface StorybookPluginOptions {
|
|
|
93
93
|
/**
|
|
94
94
|
* CSS custom-property prefix used when emitting `var(--…)` references.
|
|
95
95
|
*
|
|
96
|
-
* @defaultValue
|
|
96
|
+
* @defaultValue initials derived from the extracted spec name
|
|
97
97
|
*/
|
|
98
98
|
cssVarPrefix?: string;
|
|
99
99
|
/**
|
|
@@ -133,6 +133,12 @@ interface StorybookPluginOptions {
|
|
|
133
133
|
* @defaultValue `false`
|
|
134
134
|
*/
|
|
135
135
|
skipIcons?: boolean;
|
|
136
|
+
/**
|
|
137
|
+
* Skip generating font documentation pages.
|
|
138
|
+
*
|
|
139
|
+
* @defaultValue `false`
|
|
140
|
+
*/
|
|
141
|
+
skipFonts?: boolean;
|
|
136
142
|
/**
|
|
137
143
|
* Override body for generated `INSTALL.md`. When omitted, Storybook wiring
|
|
138
144
|
* steps are generated for the output directory.
|
|
@@ -161,6 +167,33 @@ declare function renderInstallMd(options: {
|
|
|
161
167
|
}): string;
|
|
162
168
|
//#endregion
|
|
163
169
|
//#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
|
+
/**
|
|
188
|
+
* Build a React FontSpecimen doc block previewing each font at a range of
|
|
189
|
+
* sizes.
|
|
190
|
+
*/
|
|
191
|
+
declare function renderFontSpecimenBlock(fonts: Record<string, unknown>[], options?: Pick<StorybookPluginOptions, "sampleText">): string;
|
|
192
|
+
declare function renderFontsMdx(options: Pick<StorybookPluginOptions, "titlePrefix"> & {
|
|
193
|
+
fonts: Record<string, unknown>[];
|
|
194
|
+
slugs: Map<Record<string, unknown>, string>;
|
|
195
|
+
}): string;
|
|
196
|
+
declare function renderFontMdx(font: Record<string, unknown>, fontName: string, options?: Pick<StorybookPluginOptions, "titlePrefix">): string;
|
|
164
197
|
/**
|
|
165
198
|
* Fill Storybook brand fields from Schema identity when the mapped theme omits them.
|
|
166
199
|
*/
|
|
@@ -226,5 +259,5 @@ declare function generateTokenDocs(spec: Schema, options?: StorybookPluginOption
|
|
|
226
259
|
*/
|
|
227
260
|
declare const _default: (options?: StorybookPluginOptions | undefined) => import("@razorwind/core/plugin").Plugin;
|
|
228
261
|
//#endregion
|
|
229
|
-
export { type FlatToken, type GenerateStorybookTheme, type StorybookPluginOptions, type StorybookTheme, type StorybookThemePartial, type StorybookThemeResult, applyBrandDefaults, _default as default, flattenTokens, formatTokenValue, generateTokenDocs, normalizeThemes, renderInstallMd, renderThemeFile, resolveTokenSets, toCssVar };
|
|
262
|
+
export { type FlatToken, type GenerateStorybookTheme, type StorybookPluginOptions, type StorybookTheme, type StorybookThemePartial, type StorybookThemeResult, applyBrandDefaults, _default as default, extractFonts, flattenTokens, fontSlug, fontSlugs, formatTokenValue, generateTokenDocs, normalizeThemes, renderFontMdx, renderFontSpecimenBlock, renderFontsMdx, renderInstallMd, renderThemeFile, resolveFontStack, resolveTokenSets, toCssVar };
|
|
230
263
|
//# sourceMappingURL=index.d.mts.map
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
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,
|
|
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,flattenTokens as c,formatTokenValue as l,isObject as u,isSharedThemeId as d,isTokenLeaf as f,mergeTokenTrees as p,resolveSchemaIdentity as ee,resolveTokenSets as m,toCssVar as h,toCssVar as g,toThemeCssVar as _}from"@razorwind/core/utils";import{joinPaths as v}from"@stryke/path/join";function y(e){return e===!0||e===`true`||e===1}function b(e,t){return e?`${e}:${t}`:t}function x(e){let t=e.theme??e.$theme;return typeof t==`string`&&t.length>0?t:void 0}function te(e,t){return e===`palette`||e===`$palette`?typeof t==`boolean`||typeof t==`number`||typeof t==`string`:(e===`theme`||e===`$theme`)&&typeof t==`string`}function ne(e){let t=/* @__PURE__ */ new Map;function n(e,r,i,a,o){if(!u(e))return;let s=a||y(e.palette)||y(e.$palette),c=x(e)??o;if(f(e)){(s||c)&&t.set(b(i,r.join(`.`)),{...s&&{palette:!0},...c&&{childTheme:c}});return}for(let[t,a]of Object.entries(e))t.startsWith(`$`)&&t!==`$palette`&&t!==`$theme`||te(t,a)||n(a,[...r,t],i,s,c)}for(let t of m(e)){let e=t.id==="default"?void 0:t.id;n(t.tokens,[],e,!1,void 0)}return t}function S(e,t={}){let n=t.cssVarPrefix,r=ne(e);return c(e,{includeTypes:t.includeTypes,shouldIncludeToken:e=>e.skipDocs!==!0,enrichToken:e=>{let t=r.get(b(e.theme,e.path));return{...e,cssVar:g(e.path,n),...e.type===`color`&&t}}})}function C(e){return e.replaceAll(`\\`,`\\\\`).replaceAll(`"`,`\\"`).replaceAll(`
|
|
2
2
|
`,`\\n`).replaceAll(`\r`,`\\r`)}function w(e){return typeof e==`string`?`"${C(e)}"`:typeof e==`number`||typeof e==`boolean`?String(e):e==null?`undefined`:JSON.stringify(e)}function T(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
|
|
|
@@ -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 E=/* @__PURE__ */ new Set([`fontFamily`,`fontWeight`,`typography`]),
|
|
74
|
+
`}const E=`The quick brown fox jumps over the lazy dog`,re=/* @__PURE__ */ new Set([`fontFamily`,`fontWeight`,`typography`]),ie=/font|typography|type|text|line[-_.]?height|letter[-_.]?spacing/i;function D(e){return re.has(e.type??``)?!0:(e.type===`dimension`||e.type===`number`)&&ie.test(e.path)}function O(e,t){return e.some(e=>t.some(t=>e.path===t||e.path.startsWith(`${t}.`)))}const ae=/^\{([^{}]+)\}$/,oe=/^var\((--[^),\s]+)(?:\s*,[^)]*)?\)$/;function k(e){if(typeof e==`string`)return ae.exec(e.trim())?.[1]?.trim()}function A(e){if(typeof e==`string`)return oe.exec(e.trim())?.[1]}function j(e){let t=new Map(e.map(e=>[e.path,e])),n=new Map(e.map(e=>[_(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(k(r.value)??``)??n.get(A(r.value)??A(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 M(e){return Object.keys(e).length>1}function se(){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,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 ce(e,t){let n=m(e),r=n.filter(e=>!d(e.id));return r.length<=1?{default:j(S(e,t))}:Object.fromEntries(r.map(e=>[e.id,j(S(J(n,e),t))]))}function le(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 ue(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=M(e),o=(e,t=` `)=>[...le(e,n).entries()].toSorted(([e],[t])=>e.localeCompare(t)).map(([e,n])=>{let r=n.map(n=>`${t} ${w(ue(n.path,e))}: ${w(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={${w(e)}}
|
|
90
90
|
subtitle={${w(i)}}
|
|
@@ -122,7 +122,7 @@ export function ColorPaletteBlock({ theme }: ColorPaletteBlockProps = {}) {
|
|
|
122
122
|
|
|
123
123
|
return COLOR_VARIANTS[activeTheme];
|
|
124
124
|
}
|
|
125
|
-
`}function
|
|
125
|
+
`}function fe(e,t={}){let a=t.sampleText??E,o=M(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=>w(e)).join(`, `)}]`:`[12, 14, 16, 20, 24, 32]`;return`<Typeset
|
|
126
126
|
fontFamily={${w(l)}}
|
|
127
127
|
fontSizes={${f}}
|
|
128
128
|
fontWeight={${w(d)}}
|
|
@@ -151,7 +151,7 @@ export function TypesetBlock({ theme }: TypesetBlockProps = {}) {
|
|
|
151
151
|
|
|
152
152
|
return TYPESET_VARIANTS[activeTheme];
|
|
153
153
|
}
|
|
154
|
-
`}function
|
|
154
|
+
`}function pe(e){let t=M(e),n=Object.entries(e),r=n[0]?.[0]??`default`,i=e=>e.map(e=>{let t=e.theme?w(e.theme):`undefined`;return` {
|
|
155
155
|
path: ${w(e.path)},
|
|
156
156
|
type: ${e.type?w(e.type):`undefined`},
|
|
157
157
|
value: ${w(e.cssValue)},
|
|
@@ -278,7 +278,7 @@ export function TokenTableBlock({
|
|
|
278
278
|
</table>
|
|
279
279
|
);
|
|
280
280
|
}
|
|
281
|
-
`}function
|
|
281
|
+
`}function me(e){let t=e.titlePrefix??`Design Tokens`,n=e.hasColors?`
|
|
282
282
|
## Colors
|
|
283
283
|
|
|
284
284
|
<ColorPaletteBlock />
|
|
@@ -297,21 +297,26 @@ export function TokenTableBlock({
|
|
|
297
297
|
"space",
|
|
298
298
|
"spacing"
|
|
299
299
|
]} />
|
|
300
|
+
`:``,o=e.hasFonts?`
|
|
301
|
+
## Fonts
|
|
302
|
+
|
|
303
|
+
<FontSpecimenBlock />
|
|
300
304
|
`:``;return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
301
305
|
import { ColorPaletteBlock } from "./blocks/ColorPalette";
|
|
302
306
|
import { TokenTableBlock } from "./blocks/TokenTable";
|
|
303
307
|
import { TypesetBlock } from "./blocks/Typeset";
|
|
304
|
-
|
|
308
|
+
${e.hasFonts?`import { FontSpecimenBlock } from "./blocks/FontSpecimen";
|
|
309
|
+
`:``}
|
|
305
310
|
<Meta title="${C(t)}/Overview" />
|
|
306
311
|
|
|
307
312
|
# ${t}
|
|
308
313
|
|
|
309
314
|
Design tokens generated by \`@razorwind/storybook\` for Storybook MDX docs.
|
|
310
|
-
${n}${r}${i}${a}
|
|
315
|
+
${n}${r}${i}${a}${o}
|
|
311
316
|
## All tokens
|
|
312
317
|
|
|
313
318
|
<TokenTableBlock />
|
|
314
|
-
`}function
|
|
319
|
+
`}function he(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
315
320
|
import { ColorPaletteBlock } from "./blocks/ColorPalette";
|
|
316
321
|
|
|
317
322
|
<Meta title="${C(e.titlePrefix??`Design Tokens`)}/Colors" />
|
|
@@ -319,7 +324,7 @@ import { ColorPaletteBlock } from "./blocks/ColorPalette";
|
|
|
319
324
|
# Colors
|
|
320
325
|
|
|
321
326
|
<ColorPaletteBlock />
|
|
322
|
-
`}function
|
|
327
|
+
`}function ge(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
323
328
|
import { TypesetBlock } from "./blocks/Typeset";
|
|
324
329
|
import { TokenTableBlock } from "./blocks/TokenTable";
|
|
325
330
|
|
|
@@ -332,7 +337,7 @@ import { TokenTableBlock } from "./blocks/TokenTable";
|
|
|
332
337
|
## Typography tokens
|
|
333
338
|
|
|
334
339
|
<TokenTableBlock typography />
|
|
335
|
-
`}function
|
|
340
|
+
`}function N(e,t){let n=e[t];return typeof n==`string`?n:void 0}function P(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function _e(e){return`import { IconGallery, IconItem } from "@storybook/addon-docs/blocks";
|
|
336
341
|
|
|
337
342
|
/**
|
|
338
343
|
* Icons rendered with Storybook's IconGallery doc block.
|
|
@@ -342,7 +347,7 @@ import { TokenTableBlock } from "./blocks/TokenTable";
|
|
|
342
347
|
export function IconGalleryBlock() {
|
|
343
348
|
return (
|
|
344
349
|
<IconGallery>
|
|
345
|
-
${(
|
|
350
|
+
${(P(e)?Object.values(e).filter(P).toSorted((e,t)=>(N(e,`name`)??``).localeCompare(N(t,`name`)??``)):[]).map(e=>{let t=N(e,`name`)??`unknown`,n=(Array.isArray(e.files)?e.files:[]).find(e=>P(e)&&N(e,`type`)===`svg`&&typeof e.content==`string`),r=P(n)&&typeof n.content==`string`?`<span
|
|
346
351
|
style={{ display: "inline-flex", width: 24, height: 24 }}
|
|
347
352
|
dangerouslySetInnerHTML={{ __html: ${w(n.content)} }}
|
|
348
353
|
/>`:`<code>${C(t)}</code>`;return` <IconItem name={${w(t)}}>
|
|
@@ -352,7 +357,7 @@ ${(R(e)?Object.values(e).filter(R).toSorted((e,t)=>(L(e,`name`)??``).localeCompa
|
|
|
352
357
|
</IconGallery>
|
|
353
358
|
);
|
|
354
359
|
}
|
|
355
|
-
`}function
|
|
360
|
+
`}function ve(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
356
361
|
import { IconGalleryBlock } from "./blocks/IconGallery";
|
|
357
362
|
|
|
358
363
|
<Meta title="${C(e.titlePrefix??`Design Tokens`)}/Icons" />
|
|
@@ -360,24 +365,122 @@ import { IconGalleryBlock } from "./blocks/IconGallery";
|
|
|
360
365
|
# Icons
|
|
361
366
|
|
|
362
367
|
<IconGalleryBlock />
|
|
363
|
-
`}function
|
|
368
|
+
`}const ye=[12,14,16,20,24,32,48,64,72];function F(e,t){return N(e,t)}function I(e,t){let n=e[t];return Array.isArray(n)?n.filter(e=>typeof e==`string`):[]}function L(e){return P(e)?Object.values(e).filter(P).toSorted((e,t)=>(N(e,`name`)??``).localeCompare(N(t,`name`)??``)):[]}function R(e){return(N(e,`name`)??N(e,`title`)??`font`).trim().replaceAll(/[^\w-]+/g,`-`).replaceAll(/-{2,}/g,`-`).replaceAll(/^-|-$/g,``).toLowerCase()||`font`}function z(e){let t=/* @__PURE__ */ new Map,n=/* @__PURE__ */ new Map;for(let r of e){let e=R(r),i=t.get(e)??0;t.set(e,i+1),n.set(r,i===0?e:`${e}-${i+1}`)}return n}const be={sans:`sans-serif`,serif:`serif`,mono:`monospace`,code:`monospace`,display:`sans-serif`,heading:`sans-serif`,body:`sans-serif`};function B(e){let t=e.trim();return!t||/^[a-z-]+$/i.test(t)&&!/\s/.test(t)?t:`"${t.replaceAll(`"`,`\\"`)}"`}function V(e){let t=[B(F(e,`family`)??F(e,`title`)??F(e,`name`)??`sans-serif`)];for(let n of I(e,`fallbacks`)){let e=B(n);e&&!t.includes(e)&&t.push(e)}let n=be[F(e,`role`)??``];return n&&!t.includes(n)&&t.push(n),t.filter(Boolean).join(`, `)}function H(e,t={}){let n=t.sampleText??E,r=e.map(e=>{let t=N(e,`name`)??`unknown`,n=V(e);return` ${w(t)}: {
|
|
369
|
+
family: ${w(n)},
|
|
370
|
+
title: ${w(N(e,`title`)??t)}
|
|
371
|
+
}`}).join(`,
|
|
372
|
+
`),i=`[${ye.join(`, `)}]`;return`import type { CSSProperties, ReactElement } from "react";
|
|
373
|
+
|
|
374
|
+
export interface FontSpecimenBlockProps {
|
|
375
|
+
/** Font entry name. Defaults to the first font. */
|
|
376
|
+
name?: string;
|
|
377
|
+
/** Override the rendered sample text. */
|
|
378
|
+
sampleText?: string;
|
|
379
|
+
/** Override the previewed sizes. */
|
|
380
|
+
sizes?: number[];
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
const FONT_FAMILIES: Record<string, { family: string; title: string }> = {
|
|
384
|
+
${r||` // No fonts`}
|
|
385
|
+
};
|
|
386
|
+
|
|
387
|
+
const DEFAULT_FONT = ${w(e[0]?N(e[0],`name`)??`unknown`:`unknown`)};
|
|
388
|
+
const DEFAULT_SIZES = ${i};
|
|
389
|
+
const DEFAULT_SAMPLE_TEXT = ${w(n)};
|
|
390
|
+
|
|
391
|
+
const labelStyle: CSSProperties = {
|
|
392
|
+
display: "block",
|
|
393
|
+
fontSize: "12px",
|
|
394
|
+
lineHeight: 1.4,
|
|
395
|
+
fontFamily: "system-ui, sans-serif",
|
|
396
|
+
color: "rgba(128, 128, 128, 0.9)"
|
|
397
|
+
};
|
|
398
|
+
|
|
399
|
+
/**
|
|
400
|
+
* Font specimen previews for Storybook MDX docs.
|
|
401
|
+
*/
|
|
402
|
+
export function FontSpecimenBlock({
|
|
403
|
+
name,
|
|
404
|
+
sampleText = DEFAULT_SAMPLE_TEXT,
|
|
405
|
+
sizes = DEFAULT_SIZES
|
|
406
|
+
}: FontSpecimenBlockProps = {}): ReactElement {
|
|
407
|
+
const entry = (name && FONT_FAMILIES[name]) || FONT_FAMILIES[DEFAULT_FONT];
|
|
408
|
+
|
|
409
|
+
if (!entry) {
|
|
410
|
+
return <p>No fonts found.</p>;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
return (
|
|
414
|
+
<div>
|
|
415
|
+
<div
|
|
416
|
+
style={{
|
|
417
|
+
fontFamily: entry.family,
|
|
418
|
+
fontSize: "32px",
|
|
419
|
+
lineHeight: 1.25,
|
|
420
|
+
margin: "0 0 0.5em"
|
|
421
|
+
}}>
|
|
422
|
+
AaBbCcDdEeFfGgHh 0123456789
|
|
423
|
+
</div>
|
|
424
|
+
{sizes.map(size => (
|
|
425
|
+
<div
|
|
426
|
+
key={size}
|
|
427
|
+
style={{
|
|
428
|
+
fontFamily: entry.family,
|
|
429
|
+
fontSize: \`\${size}px\`,
|
|
430
|
+
lineHeight: 1.45,
|
|
431
|
+
margin: "0 0 0.4em"
|
|
432
|
+
}}>
|
|
433
|
+
<span style={labelStyle}>{size}px</span>
|
|
434
|
+
{sampleText}
|
|
435
|
+
</div>
|
|
436
|
+
))}
|
|
437
|
+
</div>
|
|
438
|
+
);
|
|
439
|
+
}
|
|
440
|
+
`}function xe(e){let t=N(e,`name`)??`unknown`,n=N(e,`source`)??`local`,r=N(e,`role`),i=N(e,`category`),a=N(e,`display`),o=I(e,`fallbacks`),s=Array.isArray(e.weights)?e.weights.filter(e=>typeof e==`string`||typeof e==`number`):[],c=I(e,`styles`),l=I(e,`subsets`),u=I(e,`tags`);return[`- **Name:** \`${t}\``,`- **Source:** \`${n}\``,`- **Family:** \`${C(V(e))}\``,...r?[`- **Role:** \`${r}\``]:[],...i?[`- **Category:** \`${i}\``]:[],...a?[`- **Display:** \`${a}\``]:[],...o.length>0?[`- **Fallbacks:** ${o.map(e=>`\`${e}\``).join(`, `)}`]:[],...s.length>0?[`- **Weights:** ${s.map(e=>`\`${e}\``).join(`, `)}`]:[],...c.length>0?[`- **Styles:** ${c.map(e=>`\`${e}\``).join(`, `)}`]:[],...l.length>0?[`- **Subsets:** ${l.map(e=>`\`${e}\``).join(`, `)}`]:[],...u.length>0?[`- **Tags:** ${u.map(e=>`\`${e}\``).join(`, `)}`]:[]].join(`
|
|
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";
|
|
442
|
+
|
|
443
|
+
<Meta title="${C(t)}/Fonts" />
|
|
444
|
+
|
|
445
|
+
# Fonts
|
|
446
|
+
|
|
447
|
+
${e.fonts.length} font${e.fonts.length===1?``:`s`} in the design system.
|
|
448
|
+
|
|
449
|
+
${n.join(`
|
|
450
|
+
`)}
|
|
451
|
+
`}function W(e,t,n={}){let r=n.titlePrefix??`Design Tokens`,i=N(e,`name`)??`unknown`,a=N(e,`title`)??i,o=N(e,`description`);return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
452
|
+
import { FontSpecimenBlock } from "../blocks/FontSpecimen";
|
|
453
|
+
|
|
454
|
+
<Meta title="${C(r)}/Fonts/${C(a)}" />
|
|
455
|
+
|
|
456
|
+
# ${a}
|
|
457
|
+
|
|
458
|
+
${o??`${a} font specimen.`}
|
|
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";
|
|
364
466
|
export type { ColorPaletteBlockProps } from "./ColorPalette";
|
|
365
467
|
${e?`export { IconGalleryBlock } from "./IconGallery";
|
|
366
|
-
`:``}
|
|
367
|
-
export {
|
|
468
|
+
`:``}${t?`export { FontSpecimenBlock } from "./FontSpecimen";
|
|
469
|
+
export type { FontSpecimenBlockProps } from "./FontSpecimen";
|
|
470
|
+
`:``}export { TokenTableBlock } from "./TokenTable";
|
|
368
471
|
export type { TokenTableBlockProps, TokenTableRow } from "./TokenTable";
|
|
369
472
|
export { TypesetBlock } from "./Typeset";
|
|
370
473
|
export type { TypesetBlockProps } from "./Typeset";
|
|
371
|
-
`}const
|
|
372
|
-
`)}\n${t}})`}function
|
|
474
|
+
`}const Ce=/* @__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 G(e){return P(e)?e.base===`light`||e.base===`dark`:!1}function K(e){return P(e)?G(e)?!0:Object.keys(e).some(e=>Ce.has(e)):!1}function q(e){if(!P(e)||K(e))return!1;let t=Object.values(e);return t.length>0&&t.every(K)}function we(e,t,n){return t.base===`light`||t.base===`dark`?t.base:`${e} ${n??``}`.toLowerCase().includes(`light`)?`light`:`dark`}function Te(e){return/^[a-z_$][\w$]*$/i.test(e)?e:w(e)}function J(e,t){let n=e.find(e=>e.id===a);return!n||d(t.id)?t.tokens:p(t.tokens,n.tokens)}function Ee(e){return P(e)&&`$value`in e&&!(`colorSpace`in e)&&!(`hex`in e)?e.$value:e}function De(e,t){let n=Ee(e),r=/* @__PURE__ */ new Set;for(let e=0;e<8;e++){let e=k(n);if(!e||r.has(e))break;r.add(e);let i=t.get(e);if(!i)break;n=i.value}return n}function Oe(e){return e==null||typeof e==`string`||typeof e==`number`||typeof e==`boolean`?e:l(e)}function ke(e,t){let n=m(e),r=n.find(e=>e.id===t)??(n.length===1?n[0]:void 0),i=r?J(n,r):e,a=/* @__PURE__ */ new Map;for(let e of S(i))(!a.get(e.path)||e.theme===t)&&a.set(e.path,e);return a}function Ae(e,t){let n={...e};for(let[r,i]of Object.entries(e))r!==`base`&&i!==void 0&&(n[r]=Oe(De(i,t)));return n}function je(e,t,n,r,i){let a=Ae(t,ke(i.tokens,e));return Y(we(e,a,i.theme),a,n,r)}function Y(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 X(e,t=``){return`create({\n${Object.entries(e).filter(([,e])=>e!==void 0).map(([e,n])=>`${t} ${e}: ${w(n)}`).join(`,
|
|
475
|
+
`)}\n${t}})`}function Z(e){return`import { create } from "storybook/theming";
|
|
373
476
|
|
|
374
477
|
/**
|
|
375
478
|
* Storybook UI theme generated by \`@razorwind/storybook\`.
|
|
376
479
|
*
|
|
377
480
|
* @see https://storybook.js.org/docs/configure/user-interface/theming
|
|
378
481
|
*/
|
|
379
|
-
export default ${
|
|
380
|
-
`}function
|
|
482
|
+
export default ${X(e)};
|
|
483
|
+
`}function Q(e){return`import { create } from "storybook/theming";
|
|
381
484
|
|
|
382
485
|
/**
|
|
383
486
|
* Storybook UI themes generated by \`@razorwind/storybook\`.
|
|
@@ -385,8 +488,8 @@ export default ${J(e)};
|
|
|
385
488
|
* @see https://storybook.js.org/docs/configure/user-interface/theming
|
|
386
489
|
*/
|
|
387
490
|
export default {
|
|
388
|
-
${Object.entries(e).map(([e,t])=>` ${
|
|
491
|
+
${Object.entries(e).map(([e,t])=>` ${Te(e)}: ${X(t,` `)}`).join(`,
|
|
389
492
|
`)}
|
|
390
493
|
};
|
|
391
|
-
`}function
|
|
494
|
+
`}function $(e){if(G(e))return Z(e);let t=Object.entries(e);if(t.length!==1)return Q(e);let[,n]=t[0]??[];return n?Z(n):Q(e)}function Me(e,t,n,r){let i=(e,r)=>je(e,r,n,t.fonts,t);if(q(e))return Object.fromEntries(Object.entries(e).map(([e,t])=>[e,i(e,t)]));let a=m(t.tokens),o=a.filter(e=>!d(e.id));if(o.length>1){let e={};for(let t of o){let n=r(J(a,t));if(q(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}K(n)&&(e[t.id]=i(t.id,n))}return e}if(K(e)){let n=o[0]&&o[0].id!=="default"?o[0].id:t.theme??`default`;return{[n]:i(n,e)}}return{}}const Ne=e=>(t,n,r)=>o(v(e,t),n,{name:`razorwind-storybook`},!1,r);function Pe(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=S(e.tokens,a),c=ce(e.tokens,a),l=o.some(e=>e.type===`color`),u=e.fonts&&Object.keys(e.fonts).length>0||o.some(D),d=O(o,[`size`]),f=O(o,[`space`,`spacing`]),p=!t.skipIcons&&P(e.icons)&&Object.keys(e.icons).length>0,m=t.skipFonts?[]:L(e.fonts),h=m.length>0,g=z(m),_=Ne(n),y={[v(n,`blocks/ColorPalette.tsx`)]:_(`blocks/ColorPalette.tsx`,de(c,a),`tsx`),[v(n,`blocks/Typeset.tsx`)]:_(`blocks/Typeset.tsx`,fe(c,{...a,fonts:e.fonts}),`tsx`),[v(n,`blocks/TokenTable.tsx`)]:_(`blocks/TokenTable.tsx`,pe(c),`tsx`),[v(n,`blocks/index.ts`)]:_(`blocks/index.ts`,Se(p,h),`typescript`),[v(n,`Tokens.mdx`)]:_(`Tokens.mdx`,me({titlePrefix:i,hasColors:l,hasTypography:u,hasSizes:d,hasSpaces:f,hasFonts:h}),`mdx`)};if(p&&(y[v(n,`blocks/IconGallery.tsx`)]=_(`blocks/IconGallery.tsx`,_e(e.icons),`tsx`)),M(c)&&(y[v(n,`blocks/ThemeVariant.ts`)]=_(`blocks/ThemeVariant.ts`,se(),`typescript`)),l&&(y[v(n,`Colors.mdx`)]=_(`Colors.mdx`,he(a),`mdx`)),u&&(y[v(n,`Typography.mdx`)]=_(`Typography.mdx`,ge(a),`mdx`)),p&&(y[v(n,`Icons.mdx`)]=_(`Icons.mdx`,ve(a),`mdx`)),h){y[v(n,`blocks/FontSpecimen.tsx`)]=_(`blocks/FontSpecimen.tsx`,H(m,a),`tsx`),y[v(n,`Fonts.mdx`)]=_(`Fonts.mdx`,U({...a,fonts:m,slugs:g}),`mdx`);for(let e of m){let t=g.get(e)??R(e),r=N(e,`name`)??`unknown`,i=v(`Fonts`,`${t}.mdx`);y[v(n,i)]=_(i,W(e,r,a),`mdx`)}}y[v(n,`tokens.json`)]=_(`tokens.json`,`${JSON.stringify(o,null,2)}\n`,`json`);let b;if(t.mapTheme){let i=Me(t.mapTheme(e.tokens),e,r,t.mapTheme);Object.keys(i).length>0&&(b=Object.keys(i),y[v(n,`theme.ts`)]=_(`theme.ts`,$(i),`typescript`))}let x=`INSTALL.md`;return y[v(n,x)]=_(x,t.installGuide??T({outputPath:n,titlePrefix:i,themeFiles:b?[`theme.ts`]:void 0,themeNames:b,tokenThemeNames:Object.keys(c)}),`markdown`),y}var Fe=e(e=>({name:`storybook`,themeGeneration:`combined`,generate:async t=>Pe(t,e??{})}));export{Y as applyBrandDefaults,Fe as default,L as extractFonts,S as flattenTokens,R as fontSlug,z as fontSlugs,l as formatTokenValue,Pe as generateTokenDocs,Me as normalizeThemes,W as renderFontMdx,H as renderFontSpecimenBlock,U as renderFontsMdx,T as renderInstallMd,$ as renderThemeFile,V as resolveFontStack,m as resolveTokenSets,h as toCssVar};
|
|
392
495
|
//# 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","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","renderColorsMdx","renderTypographyMdx","readString","item","isObject$1","renderIconGalleryBlock","icons","icon","svg","file","preview","renderIconsMdx","renderBlocksIndex","hasIcons","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","
|
|
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","FONT_SPECIMEN_SIZES","readFontString","readFontStringArray","entry","extractFonts","fonts","fontSlug","fontSlugs","slugs","font","count","GENERIC_FALLBACK_FROM_ROLE","quoteFontFamily","trimmed","family","resolveFontStack","parts","fallback","quoted","generic","renderFontSpecimenBlock","entries","renderFontMeta","source","role","category","display","fallbacks","weights","styles","subsets","tags","renderFontsMdx","links","renderFontMdx","description","fontName","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","installPath","src_default","definePlugin","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.75",
|
|
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,7 @@
|
|
|
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.77",
|
|
89
89
|
"@stryke/path": "^0.29.43",
|
|
90
90
|
"@stryke/type-checks": "^0.6.49"
|
|
91
91
|
},
|
|
@@ -106,5 +106,5 @@
|
|
|
106
106
|
"typescript": "^6.0.3"
|
|
107
107
|
},
|
|
108
108
|
"publishConfig": { "access": "public" },
|
|
109
|
-
"gitHead": "
|
|
109
|
+
"gitHead": "8ee43cd3d54f8ae7de2442124d43e16b388f6db2"
|
|
110
110
|
}
|