@razorwind/storybook 0.0.44 → 0.0.46
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 +33 -33
- package/dist/index.d.cts.map +1 -1
- package/dist/index.mjs +33 -33
- 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"),n=require("@razorwind/core/utils"),r=require("node:path");function
|
|
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/core/lib/fonts"),n=require("@razorwind/core/utils"),r=require("@stryke/path/join"),i=require("node:path");function a(e,t={}){let r=t.cssVarPrefix??`rw`;return(0,n.flattenTokens)(e,{includeTypes:t.includeTypes,enrichToken:e=>({...e,cssVar:(0,n.toCssVar)(e.path,r)})})}function o(e){return e.replaceAll(`\\`,`\\\\`).replaceAll(`"`,`\\"`).replaceAll(`
|
|
2
|
+
`,`\\n`).replaceAll(`\r`,`\\r`)}function s(e){return typeof e==`string`?`"${o(e)}"`:typeof e==`number`||typeof e==`boolean`?String(e):e==null?`undefined`:JSON.stringify(e)}function c(e){let t=e.titlePrefix??`Design Tokens`,n=e.themeFiles&&e.themeFiles.length>0?`
|
|
3
3
|
## Storybook UI theme
|
|
4
4
|
|
|
5
5
|
Generated theme module(s):
|
|
@@ -50,7 +50,7 @@ import { ColorPaletteBlock } from "./blocks";
|
|
|
50
50
|
## Regenerate
|
|
51
51
|
|
|
52
52
|
Re-run Razorwind generate when tokens change to refresh docs under \`${e.outputPath}/\`.
|
|
53
|
-
`}function
|
|
53
|
+
`}function l(e,t){let n=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 u(e,t){return e===t?e.split(`.`).at(-1)??e:e.startsWith(`${t}.`)?e.slice(t.length+1):e.split(`.`).at(-1)??e}function d(e,t={}){return`import { ColorPalette, ColorItem } from "@storybook/addon-docs/blocks";
|
|
54
54
|
|
|
55
55
|
/**
|
|
56
56
|
* Color tokens rendered with Storybook's ColorPalette doc block.
|
|
@@ -60,10 +60,10 @@ Re-run Razorwind generate when tokens change to refresh docs under \`${e.outputP
|
|
|
60
60
|
export function ColorPaletteBlock() {
|
|
61
61
|
return (
|
|
62
62
|
<ColorPalette>
|
|
63
|
-
${[...
|
|
63
|
+
${[...l(e.filter(e=>e.type===`color`),t.colorGroupBy??2).entries()].toSorted(([e],[t])=>e.localeCompare(t)).map(([e,t])=>{let n=t.map(t=>` ${s(u(t.path,e))}: ${s(t.cssValue)}`).join(`,
|
|
64
64
|
`),r=t.find(e=>e.description)?.description??`${t.length} token${t.length===1?``:`s`}`;return` <ColorItem
|
|
65
|
-
title={${
|
|
66
|
-
subtitle={${
|
|
65
|
+
title={${s(e)}}
|
|
66
|
+
subtitle={${s(r)}}
|
|
67
67
|
colors={{
|
|
68
68
|
${n}
|
|
69
69
|
}}
|
|
@@ -72,7 +72,7 @@ ${n}
|
|
|
72
72
|
</ColorPalette>
|
|
73
73
|
);
|
|
74
74
|
}
|
|
75
|
-
`}function
|
|
75
|
+
`}function f(e,n={}){let r=n.sampleText??`The quick brown fox jumps over the lazy dog`,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),c=(o?(0,t.cssFontFamily)(o):void 0)??e.find(e=>e.type===`fontFamily`)?.cssValue??`system-ui, sans-serif`,l=e.find(e=>e.type===`fontWeight`),u=l&&Number.parseFloat(l.cssValue)||400,d=a.length>0?`[${a.map(e=>s(e)).join(`, `)}]`:`[12, 14, 16, 20, 24, 32]`;return`import { Typeset } from "@storybook/addon-docs/blocks";
|
|
76
76
|
|
|
77
77
|
/**
|
|
78
78
|
* Typography tokens rendered with Storybook's Typeset doc block.
|
|
@@ -82,14 +82,14 @@ ${n}
|
|
|
82
82
|
export function TypesetBlock() {
|
|
83
83
|
return (
|
|
84
84
|
<Typeset
|
|
85
|
-
fontFamily={${
|
|
85
|
+
fontFamily={${s(c)}}
|
|
86
86
|
fontSizes={${d}}
|
|
87
|
-
fontWeight={${
|
|
88
|
-
sampleText={${
|
|
87
|
+
fontWeight={${s(u)}}
|
|
88
|
+
sampleText={${s(r)}}
|
|
89
89
|
/>
|
|
90
90
|
);
|
|
91
91
|
}
|
|
92
|
-
`}function
|
|
92
|
+
`}function p(e){return`import type { CSSProperties, ReactElement } from "react";
|
|
93
93
|
|
|
94
94
|
export interface TokenTableRow {
|
|
95
95
|
path: string;
|
|
@@ -101,12 +101,12 @@ export interface TokenTableRow {
|
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
const TOKENS: TokenTableRow[] = [
|
|
104
|
-
${e.map(e=>{let t=e.theme?
|
|
105
|
-
path: ${
|
|
106
|
-
type: ${e.type?
|
|
107
|
-
value: ${
|
|
108
|
-
cssVar: ${
|
|
109
|
-
description: ${e.description?
|
|
104
|
+
${e.map(e=>{let t=e.theme?s(e.theme):`undefined`;return` {
|
|
105
|
+
path: ${s(e.path)},
|
|
106
|
+
type: ${e.type?s(e.type):`undefined`},
|
|
107
|
+
value: ${s(e.cssValue)},
|
|
108
|
+
cssVar: ${s(e.cssVar)},
|
|
109
|
+
description: ${e.description?s(e.description):`undefined`},
|
|
110
110
|
theme: ${t}
|
|
111
111
|
}`}).join(`,
|
|
112
112
|
`)||``}
|
|
@@ -193,7 +193,7 @@ export function TokenTableBlock({
|
|
|
193
193
|
</table>
|
|
194
194
|
);
|
|
195
195
|
}
|
|
196
|
-
`}function
|
|
196
|
+
`}function m(e){let t=e.titlePrefix??`Design Tokens`,n=e.hasColors?`
|
|
197
197
|
## Colors
|
|
198
198
|
|
|
199
199
|
<ColorPaletteBlock />
|
|
@@ -206,7 +206,7 @@ import { ColorPaletteBlock } from "./blocks/ColorPalette";
|
|
|
206
206
|
import { TokenTableBlock } from "./blocks/TokenTable";
|
|
207
207
|
import { TypesetBlock } from "./blocks/Typeset";
|
|
208
208
|
|
|
209
|
-
<Meta title="${
|
|
209
|
+
<Meta title="${o(t)}/Overview" />
|
|
210
210
|
|
|
211
211
|
# ${t}
|
|
212
212
|
|
|
@@ -215,23 +215,23 @@ ${n}${r}
|
|
|
215
215
|
## All tokens
|
|
216
216
|
|
|
217
217
|
<TokenTableBlock />
|
|
218
|
-
`}function
|
|
218
|
+
`}function h(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
219
219
|
import { ColorPaletteBlock } from "./blocks/ColorPalette";
|
|
220
220
|
|
|
221
|
-
<Meta title="${
|
|
221
|
+
<Meta title="${o(e.titlePrefix??`Design Tokens`)}/Colors" />
|
|
222
222
|
|
|
223
223
|
# Colors
|
|
224
224
|
|
|
225
225
|
<ColorPaletteBlock />
|
|
226
|
-
`}function
|
|
226
|
+
`}function g(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
227
227
|
import { TypesetBlock } from "./blocks/Typeset";
|
|
228
228
|
|
|
229
|
-
<Meta title="${
|
|
229
|
+
<Meta title="${o(e.titlePrefix??`Design Tokens`)}/Typography" />
|
|
230
230
|
|
|
231
231
|
# Typography
|
|
232
232
|
|
|
233
233
|
<TypesetBlock />
|
|
234
|
-
`}function
|
|
234
|
+
`}function _(e,t){let n=e[t];return typeof n==`string`?n:void 0}function v(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function y(e){return`import { IconGallery, IconItem } from "@storybook/addon-docs/blocks";
|
|
235
235
|
|
|
236
236
|
/**
|
|
237
237
|
* Icons rendered with Storybook's IconGallery doc block.
|
|
@@ -241,30 +241,30 @@ import { TypesetBlock } from "./blocks/Typeset";
|
|
|
241
241
|
export function IconGalleryBlock() {
|
|
242
242
|
return (
|
|
243
243
|
<IconGallery>
|
|
244
|
-
${(
|
|
244
|
+
${(v(e)?Object.values(e).filter(v).toSorted((e,t)=>(_(e,`name`)??``).localeCompare(_(t,`name`)??``)):[]).map(e=>{let t=_(e,`name`)??`unknown`,n=(Array.isArray(e.files)?e.files:[]).find(e=>v(e)&&_(e,`type`)===`svg`&&typeof e.content==`string`),r=v(n)&&typeof n.content==`string`?`<span
|
|
245
245
|
style={{ display: "inline-flex", width: 24, height: 24 }}
|
|
246
|
-
dangerouslySetInnerHTML={{ __html: ${
|
|
247
|
-
/>`:`<code>${
|
|
246
|
+
dangerouslySetInnerHTML={{ __html: ${s(n.content)} }}
|
|
247
|
+
/>`:`<code>${o(t)}</code>`;return` <IconItem name={${s(t)}}>
|
|
248
248
|
${r}
|
|
249
249
|
</IconItem>`}).join(`
|
|
250
250
|
`)||` {/* No icons */}`}
|
|
251
251
|
</IconGallery>
|
|
252
252
|
);
|
|
253
253
|
}
|
|
254
|
-
`}function
|
|
254
|
+
`}function b(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
255
255
|
import { IconGalleryBlock } from "./blocks/IconGallery";
|
|
256
256
|
|
|
257
|
-
<Meta title="${
|
|
257
|
+
<Meta title="${o(e.titlePrefix??`Design Tokens`)}/Icons" />
|
|
258
258
|
|
|
259
259
|
# Icons
|
|
260
260
|
|
|
261
261
|
<IconGalleryBlock />
|
|
262
|
-
`}function
|
|
262
|
+
`}function x(){return`export { ColorPaletteBlock } from "./ColorPalette";
|
|
263
263
|
export { IconGalleryBlock } from "./IconGallery";
|
|
264
264
|
export { TokenTableBlock } from "./TokenTable";
|
|
265
265
|
export type { TokenTableBlockProps, TokenTableRow } from "./TokenTable";
|
|
266
266
|
export { TypesetBlock } from "./Typeset";
|
|
267
|
-
`}function
|
|
267
|
+
`}function S(e){return v(e)?e.base===`light`||e.base===`dark`:!1}function C(e,n,r){let i=(0,t.pickFontByRole)(r,t.SANS_ROLES),a=(0,t.pickFontByRole)(r,t.MONO_ROLES);return{brandTarget:`_blank`,...e,brandTitle:e.brandTitle??n.title,brandUrl:e.brandUrl??n.homepage,brandImage:e.brandImage??n.logo,fontBase:e.fontBase??(i?(0,t.cssFontFamily)(i):void 0),fontCode:e.fontCode??(a?(0,t.cssFontFamily)(a):void 0)}}function w(e){return`import { create } from "storybook/theming";
|
|
268
268
|
|
|
269
269
|
/**
|
|
270
270
|
* Storybook UI theme generated by \`@razorwind/storybook\`.
|
|
@@ -272,7 +272,7 @@ export { TypesetBlock } from "./Typeset";
|
|
|
272
272
|
* @see https://storybook.js.org/docs/configure/user-interface/theming
|
|
273
273
|
*/
|
|
274
274
|
export default create({
|
|
275
|
-
${Object.entries(e).filter(([,e])=>e!==void 0).map(([e,t])=>` ${e}: ${
|
|
275
|
+
${Object.entries(e).filter(([,e])=>e!==void 0).map(([e,t])=>` ${e}: ${s(t)}`).join(`,
|
|
276
276
|
`)}
|
|
277
277
|
});
|
|
278
|
-
`}
|
|
278
|
+
`}const T=e=>(t,i,a)=>(0,n.createDocument)((0,r.joinPaths)(e,t),i,{name:`razorwind-storybook`},(i,a)=>(0,r.joinPaths)(e,(0,n.slugifyThemeName)(a),t),a);function E(e,t={}){let o=t.outputPath??`storybook/tokens`,s=(0,n.resolveSchemaIdentity)(e),l=t.titlePrefix??s.title??`Design Tokens`,u={...t,titlePrefix:l},_=a(e.tokens,t),E=_.some(e=>e.type===`color`),D=e.fonts&&Object.keys(e.fonts).length>0||_.some(e=>e.type===`fontFamily`||e.type===`fontWeight`||e.type===`typography`||e.type===`dimension`&&/(?:font|type|text).*size|size.*(?:font|type|text)/i.test(e.path)),O=!t.skipIcons&&v(e.icons)&&Object.keys(e.icons).length>0,k=T(o),A={[(0,r.joinPaths)(o,`blocks/ColorPalette.tsx`)]:k(`blocks/ColorPalette.tsx`,d(_,u),`tsx`),[(0,r.joinPaths)(o,`blocks/Typeset.tsx`)]:k(`blocks/Typeset.tsx`,f(_,{...u,fonts:e.fonts}),`tsx`),[(0,r.joinPaths)(o,`blocks/TokenTable.tsx`)]:k(`blocks/TokenTable.tsx`,p(_),`tsx`),[(0,r.joinPaths)(o,`blocks/IconGallery.tsx`)]:k(`blocks/IconGallery.tsx`,y(t.skipIcons?{}:e.icons),`tsx`),[(0,r.joinPaths)(o,`blocks/index.ts`)]:k(`blocks/index.ts`,x(),`typescript`),[(0,r.joinPaths)(o,`Tokens.mdx`)]:k(`Tokens.mdx`,m({titlePrefix:l,hasColors:E,hasTypography:D}),`mdx`)};if(E&&(A[(0,r.joinPaths)(o,`Colors.mdx`)]=k(`Colors.mdx`,h(u),`mdx`)),D&&(A[(0,r.joinPaths)(o,`Typography.mdx`)]=k(`Typography.mdx`,g(u),`mdx`)),O&&(A[(0,r.joinPaths)(o,`Icons.mdx`)]=k(`Icons.mdx`,b(u),`mdx`)),A[(0,r.joinPaths)(o,`tokens.json`)]=k(`tokens.json`,`${JSON.stringify(_,null,2)}\n`,`json`),t.mapTheme){let n=t.mapTheme(e.tokens);if(S(n))A[(0,r.joinPaths)(o,`theme.ts`)]=k(`theme.ts`,w(C(n,s,e.fonts)),`typescript`);else if(v(n))for(let[t,i]of Object.entries(n))S(i)&&(A[(0,r.joinPaths)(o,`theme-${t}.ts`)]=k(`theme-${t}.ts`,w(C(i,s,e.fonts)),`typescript`))}let j=Object.keys(A).filter(e=>e.startsWith((0,i.join)(o,`theme`))).map(e=>e.slice(o.length+1)),M=`INSTALL.md`;return A[(0,r.joinPaths)(o,M)]=k(M,t.installGuide??c({outputPath:o,titlePrefix:l,themeFiles:j.length>0?j:void 0}),`markdown`),A}var D=(0,e.definePlugin)(e=>({name:`storybook`,generate:async t=>E(t,e??{})}));exports.applyBrandDefaults=C,exports.default=D,exports.flattenTokens=a,Object.defineProperty(exports,"formatTokenValue",{enumerable:!0,get:function(){return n.formatTokenValue}}),exports.generateTokenDocs=E,exports.renderInstallMd=c,exports.renderThemeFile=w,exports.resolveTokenSets=n.resolveTokenSets,Object.defineProperty(exports,"toCssVar",{enumerable:!0,get:function(){return n.toCssVar}});
|
package/dist/index.d.cts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types.ts","../src/flatten.ts","../src/install.ts","../src/generate.ts","../src/index.ts"],"mappings":";;;;;;;;UAuBiB;;EAEf;;EAEA,OAAO;;EAEP;;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,uBACV,iBAAiB,eAAe;;;;;;KAOtB,0BACV,QAAQ,SAAS,eAAe,YAC7B;;;;UAKY;;;;;;EAMf;;;;;;EAOA;;;;;;EAOA;;;;;;EAOA;;;;;EAMA,eAAe;;;;;;EAOf;;;;;;;;;EAUA,WAAW;;;;;;EAOX;;;;;EAMA;;;;;;;iBC7Hc,cACd,QAAQ,WAAS,eAAe,WAChC,UAAS,KAAK,2DACb;;;;;;;;iBCba,gBAAgB;EAC9B;EACA;EACA;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types.ts","../src/flatten.ts","../src/install.ts","../src/generate.ts","../src/index.ts"],"mappings":";;;;;;;;UAuBiB;;EAEf;;EAEA,OAAO;;EAEP;;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,uBACV,iBAAiB,eAAe;;;;;;KAOtB,0BACV,QAAQ,SAAS,eAAe,YAC7B;;;;UAKY;;;;;;EAMf;;;;;;EAOA;;;;;;EAOA;;;;;;EAOA;;;;;EAMA,eAAe;;;;;;EAOf;;;;;;;;;EAUA,WAAW;;;;;;EAOX;;;;;EAMA;;;;;;;iBC7Hc,cACd,QAAQ,WAAS,eAAe,WAChC,UAAS,KAAK,2DACb;;;;;;;;iBCba,gBAAgB;EAC9B;EACA;EACA;;;;;;;iBC8cc,mBACd,OAAO,gBACP;EAAY;EAAgB;EAAmB;GAC/C,QAAQ,QACP;;;;;;iBAoBa,gBAAgB,OAAO;;;;iBA0CvB,kBACd,MAAM,QACN,UAAS,yBACR,wBAAwB,QAAQ"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{definePlugin as e}from"@razorwind/core/plugin";import{MONO_ROLES as t,SANS_ROLES as n,cssFontFamily as r,pickFontByRole as i}from"@razorwind/core/lib/fonts";import{createDocument as a,flattenTokens as o,formatTokenValue as s,resolveSchemaIdentity as c,resolveTokenSets as l,
|
|
2
|
-
`,`\\n`).replaceAll(`\r`,`\\r`)}function
|
|
1
|
+
import{definePlugin as e}from"@razorwind/core/plugin";import{MONO_ROLES as t,SANS_ROLES as n,cssFontFamily as r,pickFontByRole as i}from"@razorwind/core/lib/fonts";import{createDocument as a,flattenTokens as o,formatTokenValue as s,resolveSchemaIdentity as c,resolveTokenSets as l,slugifyThemeName as u,toCssVar as d,toCssVar as f}from"@razorwind/core/utils";import{joinPaths as p}from"@stryke/path/join";import{join as m}from"node:path";function h(e,t={}){let n=t.cssVarPrefix??`rw`;return o(e,{includeTypes:t.includeTypes,enrichToken:e=>({...e,cssVar:f(e.path,n)})})}function g(e){return e.replaceAll(`\\`,`\\\\`).replaceAll(`"`,`\\"`).replaceAll(`
|
|
2
|
+
`,`\\n`).replaceAll(`\r`,`\\r`)}function _(e){return typeof e==`string`?`"${g(e)}"`:typeof e==`number`||typeof e==`boolean`?String(e):e==null?`undefined`:JSON.stringify(e)}function v(e){let t=e.titlePrefix??`Design Tokens`,n=e.themeFiles&&e.themeFiles.length>0?`
|
|
3
3
|
## Storybook UI theme
|
|
4
4
|
|
|
5
5
|
Generated theme module(s):
|
|
@@ -50,7 +50,7 @@ import { ColorPaletteBlock } from "./blocks";
|
|
|
50
50
|
## Regenerate
|
|
51
51
|
|
|
52
52
|
Re-run Razorwind generate when tokens change to refresh docs under \`${e.outputPath}/\`.
|
|
53
|
-
`}function
|
|
53
|
+
`}function y(e,t){let n=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 b(e,t){return e===t?e.split(`.`).at(-1)??e:e.startsWith(`${t}.`)?e.slice(t.length+1):e.split(`.`).at(-1)??e}function x(e,t={}){return`import { ColorPalette, ColorItem } from "@storybook/addon-docs/blocks";
|
|
54
54
|
|
|
55
55
|
/**
|
|
56
56
|
* Color tokens rendered with Storybook's ColorPalette doc block.
|
|
@@ -60,10 +60,10 @@ Re-run Razorwind generate when tokens change to refresh docs under \`${e.outputP
|
|
|
60
60
|
export function ColorPaletteBlock() {
|
|
61
61
|
return (
|
|
62
62
|
<ColorPalette>
|
|
63
|
-
${[...
|
|
63
|
+
${[...y(e.filter(e=>e.type===`color`),t.colorGroupBy??2).entries()].toSorted(([e],[t])=>e.localeCompare(t)).map(([e,t])=>{let n=t.map(t=>` ${_(b(t.path,e))}: ${_(t.cssValue)}`).join(`,
|
|
64
64
|
`),r=t.find(e=>e.description)?.description??`${t.length} token${t.length===1?``:`s`}`;return` <ColorItem
|
|
65
|
-
title={${
|
|
66
|
-
subtitle={${
|
|
65
|
+
title={${_(e)}}
|
|
66
|
+
subtitle={${_(r)}}
|
|
67
67
|
colors={{
|
|
68
68
|
${n}
|
|
69
69
|
}}
|
|
@@ -72,7 +72,7 @@ ${n}
|
|
|
72
72
|
</ColorPalette>
|
|
73
73
|
);
|
|
74
74
|
}
|
|
75
|
-
`}function
|
|
75
|
+
`}function S(e,t={}){let a=t.sampleText??`The quick brown fox jumps over the lazy dog`,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=>_(e)).join(`, `)}]`:`[12, 14, 16, 20, 24, 32]`;return`import { Typeset } from "@storybook/addon-docs/blocks";
|
|
76
76
|
|
|
77
77
|
/**
|
|
78
78
|
* Typography tokens rendered with Storybook's Typeset doc block.
|
|
@@ -82,14 +82,14 @@ ${n}
|
|
|
82
82
|
export function TypesetBlock() {
|
|
83
83
|
return (
|
|
84
84
|
<Typeset
|
|
85
|
-
fontFamily={${
|
|
85
|
+
fontFamily={${_(l)}}
|
|
86
86
|
fontSizes={${f}}
|
|
87
|
-
fontWeight={${
|
|
88
|
-
sampleText={${
|
|
87
|
+
fontWeight={${_(d)}}
|
|
88
|
+
sampleText={${_(a)}}
|
|
89
89
|
/>
|
|
90
90
|
);
|
|
91
91
|
}
|
|
92
|
-
`}function
|
|
92
|
+
`}function C(e){return`import type { CSSProperties, ReactElement } from "react";
|
|
93
93
|
|
|
94
94
|
export interface TokenTableRow {
|
|
95
95
|
path: string;
|
|
@@ -101,12 +101,12 @@ export interface TokenTableRow {
|
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
const TOKENS: TokenTableRow[] = [
|
|
104
|
-
${e.map(e=>{let t=e.theme?
|
|
105
|
-
path: ${
|
|
106
|
-
type: ${e.type?
|
|
107
|
-
value: ${
|
|
108
|
-
cssVar: ${
|
|
109
|
-
description: ${e.description?
|
|
104
|
+
${e.map(e=>{let t=e.theme?_(e.theme):`undefined`;return` {
|
|
105
|
+
path: ${_(e.path)},
|
|
106
|
+
type: ${e.type?_(e.type):`undefined`},
|
|
107
|
+
value: ${_(e.cssValue)},
|
|
108
|
+
cssVar: ${_(e.cssVar)},
|
|
109
|
+
description: ${e.description?_(e.description):`undefined`},
|
|
110
110
|
theme: ${t}
|
|
111
111
|
}`}).join(`,
|
|
112
112
|
`)||``}
|
|
@@ -193,7 +193,7 @@ export function TokenTableBlock({
|
|
|
193
193
|
</table>
|
|
194
194
|
);
|
|
195
195
|
}
|
|
196
|
-
`}function
|
|
196
|
+
`}function w(e){let t=e.titlePrefix??`Design Tokens`,n=e.hasColors?`
|
|
197
197
|
## Colors
|
|
198
198
|
|
|
199
199
|
<ColorPaletteBlock />
|
|
@@ -206,7 +206,7 @@ import { ColorPaletteBlock } from "./blocks/ColorPalette";
|
|
|
206
206
|
import { TokenTableBlock } from "./blocks/TokenTable";
|
|
207
207
|
import { TypesetBlock } from "./blocks/Typeset";
|
|
208
208
|
|
|
209
|
-
<Meta title="${
|
|
209
|
+
<Meta title="${g(t)}/Overview" />
|
|
210
210
|
|
|
211
211
|
# ${t}
|
|
212
212
|
|
|
@@ -215,23 +215,23 @@ ${n}${r}
|
|
|
215
215
|
## All tokens
|
|
216
216
|
|
|
217
217
|
<TokenTableBlock />
|
|
218
|
-
`}function
|
|
218
|
+
`}function T(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
219
219
|
import { ColorPaletteBlock } from "./blocks/ColorPalette";
|
|
220
220
|
|
|
221
|
-
<Meta title="${
|
|
221
|
+
<Meta title="${g(e.titlePrefix??`Design Tokens`)}/Colors" />
|
|
222
222
|
|
|
223
223
|
# Colors
|
|
224
224
|
|
|
225
225
|
<ColorPaletteBlock />
|
|
226
|
-
`}function
|
|
226
|
+
`}function E(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
227
227
|
import { TypesetBlock } from "./blocks/Typeset";
|
|
228
228
|
|
|
229
|
-
<Meta title="${
|
|
229
|
+
<Meta title="${g(e.titlePrefix??`Design Tokens`)}/Typography" />
|
|
230
230
|
|
|
231
231
|
# Typography
|
|
232
232
|
|
|
233
233
|
<TypesetBlock />
|
|
234
|
-
`}function
|
|
234
|
+
`}function D(e,t){let n=e[t];return typeof n==`string`?n:void 0}function O(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function k(e){return`import { IconGallery, IconItem } from "@storybook/addon-docs/blocks";
|
|
235
235
|
|
|
236
236
|
/**
|
|
237
237
|
* Icons rendered with Storybook's IconGallery doc block.
|
|
@@ -241,30 +241,30 @@ import { TypesetBlock } from "./blocks/Typeset";
|
|
|
241
241
|
export function IconGalleryBlock() {
|
|
242
242
|
return (
|
|
243
243
|
<IconGallery>
|
|
244
|
-
${(
|
|
244
|
+
${(O(e)?Object.values(e).filter(O).toSorted((e,t)=>(D(e,`name`)??``).localeCompare(D(t,`name`)??``)):[]).map(e=>{let t=D(e,`name`)??`unknown`,n=(Array.isArray(e.files)?e.files:[]).find(e=>O(e)&&D(e,`type`)===`svg`&&typeof e.content==`string`),r=O(n)&&typeof n.content==`string`?`<span
|
|
245
245
|
style={{ display: "inline-flex", width: 24, height: 24 }}
|
|
246
|
-
dangerouslySetInnerHTML={{ __html: ${
|
|
247
|
-
/>`:`<code>${
|
|
246
|
+
dangerouslySetInnerHTML={{ __html: ${_(n.content)} }}
|
|
247
|
+
/>`:`<code>${g(t)}</code>`;return` <IconItem name={${_(t)}}>
|
|
248
248
|
${r}
|
|
249
249
|
</IconItem>`}).join(`
|
|
250
250
|
`)||` {/* No icons */}`}
|
|
251
251
|
</IconGallery>
|
|
252
252
|
);
|
|
253
253
|
}
|
|
254
|
-
`}function
|
|
254
|
+
`}function A(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
|
|
255
255
|
import { IconGalleryBlock } from "./blocks/IconGallery";
|
|
256
256
|
|
|
257
|
-
<Meta title="${
|
|
257
|
+
<Meta title="${g(e.titlePrefix??`Design Tokens`)}/Icons" />
|
|
258
258
|
|
|
259
259
|
# Icons
|
|
260
260
|
|
|
261
261
|
<IconGalleryBlock />
|
|
262
|
-
`}function
|
|
262
|
+
`}function j(){return`export { ColorPaletteBlock } from "./ColorPalette";
|
|
263
263
|
export { IconGalleryBlock } from "./IconGallery";
|
|
264
264
|
export { TokenTableBlock } from "./TokenTable";
|
|
265
265
|
export type { TokenTableBlockProps, TokenTableRow } from "./TokenTable";
|
|
266
266
|
export { TypesetBlock } from "./Typeset";
|
|
267
|
-
`}function
|
|
267
|
+
`}function M(e){return O(e)?e.base===`light`||e.base===`dark`:!1}function N(e,a,o){let s=i(o,n),c=i(o,t);return{brandTarget:`_blank`,...e,brandTitle:e.brandTitle??a.title,brandUrl:e.brandUrl??a.homepage,brandImage:e.brandImage??a.logo,fontBase:e.fontBase??(s?r(s):void 0),fontCode:e.fontCode??(c?r(c):void 0)}}function P(e){return`import { create } from "storybook/theming";
|
|
268
268
|
|
|
269
269
|
/**
|
|
270
270
|
* Storybook UI theme generated by \`@razorwind/storybook\`.
|
|
@@ -272,8 +272,8 @@ export { TypesetBlock } from "./Typeset";
|
|
|
272
272
|
* @see https://storybook.js.org/docs/configure/user-interface/theming
|
|
273
273
|
*/
|
|
274
274
|
export default create({
|
|
275
|
-
${Object.entries(e).filter(([,e])=>e!==void 0).map(([e,t])=>` ${e}: ${
|
|
275
|
+
${Object.entries(e).filter(([,e])=>e!==void 0).map(([e,t])=>` ${e}: ${_(t)}`).join(`,
|
|
276
276
|
`)}
|
|
277
277
|
});
|
|
278
|
-
`}
|
|
278
|
+
`}const F=e=>(t,n,r)=>a(p(e,t),n,{name:`razorwind-storybook`},(n,r)=>p(e,u(r),t),r);function I(e,t={}){let n=t.outputPath??`storybook/tokens`,r=c(e),i=t.titlePrefix??r.title??`Design Tokens`,a={...t,titlePrefix:i},o=h(e.tokens,t),s=o.some(e=>e.type===`color`),l=e.fonts&&Object.keys(e.fonts).length>0||o.some(e=>e.type===`fontFamily`||e.type===`fontWeight`||e.type===`typography`||e.type===`dimension`&&/(?:font|type|text).*size|size.*(?:font|type|text)/i.test(e.path)),u=!t.skipIcons&&O(e.icons)&&Object.keys(e.icons).length>0,d=F(n),f={[p(n,`blocks/ColorPalette.tsx`)]:d(`blocks/ColorPalette.tsx`,x(o,a),`tsx`),[p(n,`blocks/Typeset.tsx`)]:d(`blocks/Typeset.tsx`,S(o,{...a,fonts:e.fonts}),`tsx`),[p(n,`blocks/TokenTable.tsx`)]:d(`blocks/TokenTable.tsx`,C(o),`tsx`),[p(n,`blocks/IconGallery.tsx`)]:d(`blocks/IconGallery.tsx`,k(t.skipIcons?{}:e.icons),`tsx`),[p(n,`blocks/index.ts`)]:d(`blocks/index.ts`,j(),`typescript`),[p(n,`Tokens.mdx`)]:d(`Tokens.mdx`,w({titlePrefix:i,hasColors:s,hasTypography:l}),`mdx`)};if(s&&(f[p(n,`Colors.mdx`)]=d(`Colors.mdx`,T(a),`mdx`)),l&&(f[p(n,`Typography.mdx`)]=d(`Typography.mdx`,E(a),`mdx`)),u&&(f[p(n,`Icons.mdx`)]=d(`Icons.mdx`,A(a),`mdx`)),f[p(n,`tokens.json`)]=d(`tokens.json`,`${JSON.stringify(o,null,2)}\n`,`json`),t.mapTheme){let i=t.mapTheme(e.tokens);if(M(i))f[p(n,`theme.ts`)]=d(`theme.ts`,P(N(i,r,e.fonts)),`typescript`);else if(O(i))for(let[t,a]of Object.entries(i))M(a)&&(f[p(n,`theme-${t}.ts`)]=d(`theme-${t}.ts`,P(N(a,r,e.fonts)),`typescript`))}let g=Object.keys(f).filter(e=>e.startsWith(m(n,`theme`))).map(e=>e.slice(n.length+1)),_=`INSTALL.md`;return f[p(n,_)]=d(_,t.installGuide??v({outputPath:n,titlePrefix:i,themeFiles:g.length>0?g:void 0}),`markdown`),f}var L=e(e=>({name:`storybook`,generate:async t=>I(t,e??{})}));export{N as applyBrandDefaults,L as default,h as flattenTokens,s as formatTokenValue,I as generateTokenDocs,v as renderInstallMd,P as renderThemeFile,l as resolveTokenSets,d as toCssVar};
|
|
279
279
|
//# sourceMappingURL=index.mjs.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@razorwind/storybook",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.46",
|
|
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.90",
|
|
87
87
|
"@power-plant/dtcg-schema": "^0.0.1",
|
|
88
|
-
"@razorwind/core": "^0.0.
|
|
88
|
+
"@razorwind/core": "^0.0.49",
|
|
89
|
+
"@stryke/path": "^0.29.35",
|
|
89
90
|
"@stryke/type-checks": "^0.6.41"
|
|
90
91
|
},
|
|
91
92
|
"peerDependencies": {
|
|
@@ -104,5 +105,5 @@
|
|
|
104
105
|
"typescript": "^6.0.3"
|
|
105
106
|
},
|
|
106
107
|
"publishConfig": { "access": "public" },
|
|
107
|
-
"gitHead": "
|
|
108
|
+
"gitHead": "8dc94fb22937f30d41e97f3c6ecff7f45eb81202"
|
|
108
109
|
}
|