@razorwind/storybook 0.0.22 → 0.0.24

package/dist/index.cjs

@@ -180,11 +180,40 @@ import { TypesetBlock } from "./blocks/Typeset";
 # Typography
 
 <TypesetBlock />
-`}function x(){return`export { ColorPaletteBlock } from "./ColorPalette";
+`}function x(e,t){let n=e[t];return typeof n==`string`?n:void 0}function S(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function C(e){return`import { IconGallery, IconItem } from "@storybook/addon-docs/blocks";
+
+/**
+ * Icons rendered with Storybook's IconGallery doc block.
+ *
+ * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-icongallery
+ */
+export function IconGalleryBlock() {
+  return (
+    <IconGallery>
+${(S(e)?Object.values(e).filter(S).toSorted((e,t)=>(x(e,`name`)??``).localeCompare(x(t,`name`)??``)):[]).map(e=>{let t=x(e,`name`)??`unknown`,n=(Array.isArray(e.files)?e.files:[]).find(e=>S(e)&&x(e,`type`)===`svg`&&typeof e.content==`string`),a=S(n)&&typeof n.content==`string`?`<span
+          style={{ display: "inline-flex", width: 24, height: 24 }}
+          dangerouslySetInnerHTML={{ __html: ${i(n.content)} }}
+        />`:`<code>${r(t)}</code>`;return`    <IconItem name={${i(t)}}>
+      ${a}
+    </IconItem>`}).join(`
+`)||`      {/* No icons */}`}
+    </IconGallery>
+  );
+}
+`}function w(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
+import { IconGalleryBlock } from "./blocks/IconGallery";
+
+<Meta title="${r(e.titlePrefix??`Design Tokens`)}/Icons" />
+
+# Icons
+
+<IconGalleryBlock />
+`}function T(){return`export { ColorPaletteBlock } from "./ColorPalette";
+export { IconGalleryBlock } from "./IconGallery";
 export { TokenTableBlock } from "./TokenTable";
 export type { TokenTableBlockProps, TokenTableRow } from "./TokenTable";
 export { TypesetBlock } from "./Typeset";
-`}function S(e){return`import { create } from "storybook/theming";
+`}function E(e){return`import { create } from "storybook/theming";
 
 /**
  * Storybook UI theme generated by \`@razorwind/storybook\`.
@@ -195,4 +224,4 @@ export default create({
 ${Object.entries(e).filter(([,e])=>e!==void 0).map(([e,t])=>`  ${e}: ${i(t)}`).join(`,
 `)}
 });
-`}function C(e,n,r){return(0,t.createDocument)(e,n,{name:`razorwind-storybook`},r)}function w(e,t={}){let r=t.outputPath??`storybook/tokens`,i=f(e.tokens,t),a=i.some(e=>e.type===`color`),o=i.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)),s={[(0,n.join)(r,`blocks/ColorPalette.tsx`)]:C((0,n.join)(r,`blocks/ColorPalette.tsx`),h(i,t),`tsx`),[(0,n.join)(r,`blocks/Typeset.tsx`)]:C((0,n.join)(r,`blocks/Typeset.tsx`),g(i,t),`tsx`),[(0,n.join)(r,`blocks/TokenTable.tsx`)]:C((0,n.join)(r,`blocks/TokenTable.tsx`),_(i),`tsx`),[(0,n.join)(r,`blocks/index.ts`)]:C((0,n.join)(r,`blocks/index.ts`),x(),`typescript`),[(0,n.join)(r,`Tokens.mdx`)]:C((0,n.join)(r,`Tokens.mdx`),v({titlePrefix:t.titlePrefix,hasColors:a,hasTypography:o}),`mdx`)};if(a&&(s[(0,n.join)(r,`Colors.mdx`)]=C((0,n.join)(r,`Colors.mdx`),y(t),`mdx`)),o&&(s[(0,n.join)(r,`Typography.mdx`)]=C((0,n.join)(r,`Typography.mdx`),b(t),`mdx`)),s[(0,n.join)(r,`tokens.json`)]=C((0,n.join)(r,`tokens.json`),`${JSON.stringify(i,null,2)}\n`,`json`),t.generateTheme){let i=t.generateTheme(e.tokens);if(typeof i==`object`&&i)for(let[e,t]of Object.entries(i))s[(0,n.join)(r,`theme-${e}.ts`)]=C((0,n.join)(r,`theme-${e}.ts`),S(t),`typescript`);else s[(0,n.join)(r,`theme.ts`)]=C((0,n.join)(r,`theme.ts`),S(i),`typescript`)}return s}var T=(0,e.definePlugin)(e=>({name:`storybook`,generate:async t=>w(t,e??{})}));exports.default=T,exports.flattenTokens=f,Object.defineProperty(exports,"formatTokenValue",{enumerable:!0,get:function(){return t.formatTokenValue}}),exports.generateTokenDocs=w,exports.renderThemeFile=S,exports.resolveTokenSets=d,Object.defineProperty(exports,"toCssVar",{enumerable:!0,get:function(){return t.toCssVar}});
+`}function D(e,n,r){return(0,t.createDocument)(e,n,{name:`razorwind-storybook`},r)}function O(e,t={}){let r=t.outputPath??`storybook/tokens`,i=f(e.tokens,t),a=i.some(e=>e.type===`color`),o=i.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)),s=!t.skipIcons&&S(e.icons)&&Object.keys(e.icons).length>0,c={[(0,n.join)(r,`blocks/ColorPalette.tsx`)]:D((0,n.join)(r,`blocks/ColorPalette.tsx`),h(i,t),`tsx`),[(0,n.join)(r,`blocks/Typeset.tsx`)]:D((0,n.join)(r,`blocks/Typeset.tsx`),g(i,t),`tsx`),[(0,n.join)(r,`blocks/TokenTable.tsx`)]:D((0,n.join)(r,`blocks/TokenTable.tsx`),_(i),`tsx`),[(0,n.join)(r,`blocks/IconGallery.tsx`)]:D((0,n.join)(r,`blocks/IconGallery.tsx`),C(t.skipIcons?{}:e.icons),`tsx`),[(0,n.join)(r,`blocks/index.ts`)]:D((0,n.join)(r,`blocks/index.ts`),T(),`typescript`),[(0,n.join)(r,`Tokens.mdx`)]:D((0,n.join)(r,`Tokens.mdx`),v({titlePrefix:t.titlePrefix,hasColors:a,hasTypography:o}),`mdx`)};if(a&&(c[(0,n.join)(r,`Colors.mdx`)]=D((0,n.join)(r,`Colors.mdx`),y(t),`mdx`)),o&&(c[(0,n.join)(r,`Typography.mdx`)]=D((0,n.join)(r,`Typography.mdx`),b(t),`mdx`)),s&&(c[(0,n.join)(r,`Icons.mdx`)]=D((0,n.join)(r,`Icons.mdx`),w(t),`mdx`)),c[(0,n.join)(r,`tokens.json`)]=D((0,n.join)(r,`tokens.json`),`${JSON.stringify(i,null,2)}\n`,`json`),t.generateTheme){let i=t.generateTheme(e.tokens);if(typeof i==`object`&&i)for(let[e,t]of Object.entries(i))c[(0,n.join)(r,`theme-${e}.ts`)]=D((0,n.join)(r,`theme-${e}.ts`),E(t),`typescript`);else c[(0,n.join)(r,`theme.ts`)]=D((0,n.join)(r,`theme.ts`),E(i),`typescript`)}return c}var k=(0,e.definePlugin)(e=>({name:`storybook`,generate:async t=>O(t,e??{})}));exports.default=k,exports.flattenTokens=f,Object.defineProperty(exports,"formatTokenValue",{enumerable:!0,get:function(){return t.formatTokenValue}}),exports.generateTokenDocs=O,exports.renderThemeFile=E,exports.resolveTokenSets=d,Object.defineProperty(exports,"toCssVar",{enumerable:!0,get:function(){return t.toCssVar}});

package/dist/index.d.cts

@@ -116,6 +116,12 @@ interface StorybookPluginOptions {
    * @see https://storybook.js.org/docs/configure/user-interface/theming
    */
   generateTheme?: GenerateStorybookTheme;
+  /**
+   * Skip generating icon documentation pages.
+   *
+   * @defaultValue `false`
+   */
+  skipIcons?: boolean;
 }
 //#endregion
 //#region src/flatten.d.ts
@@ -150,7 +156,7 @@ declare function generateTokenDocs(spec: Schema, options?: StorybookPluginOption
 //#region src/index.d.ts
 /**
  * Razorwind plugin that turns design tokens into Storybook MDX doc blocks
- * (`ColorPalette`, `Typeset`, `TokenTable`) and optional UI themes.
+ * (`ColorPalette`, `Typeset`, `TokenTable`, `IconGallery`) and optional UI themes.
  *
  * @see https://storybook.js.org/docs/writing-docs/doc-blocks
  * @see https://storybook.js.org/docs/configure/user-interface/theming

package/dist/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types.ts","../src/flatten.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,gBAAgB;;;;UCrCD;EACf;EACA,QAAQ;;;;;;;;iBASM,iBACd,QAAQ,WAAS,eAAe,YAC/B;;;;iBAwBa,cACd,QAAQ,WAAS,eAAe,WAChC,UAAS,KAAK,2DACb;;;;;;;;iBCwOa,gBAAgB,OAAO;;;;iBAmCvB,kBACd,MAAM,QACN,UAAS,yBACR,wBAAwB,QAAQ"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types.ts","../src/flatten.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,gBAAgB;;;;;;EAOhB;;;;UC5Ce;EACf;EACA,QAAQ;;;;;;;;iBASM,iBACd,QAAQ,WAAS,eAAe,YAC/B;;;;iBAwBa,cACd,QAAQ,WAAS,eAAe,WAChC,UAAS,KAAK,2DACb;;;;;;;;iBC8Ta,gBAAgB,OAAO;;;;iBAmCvB,kBACd,MAAM,QACN,UAAS,yBACR,wBAAwB,QAAQ"}

package/dist/index.d.mts

@@ -116,6 +116,12 @@ interface StorybookPluginOptions {
    * @see https://storybook.js.org/docs/configure/user-interface/theming
    */
   generateTheme?: GenerateStorybookTheme;
+  /**
+   * Skip generating icon documentation pages.
+   *
+   * @defaultValue `false`
+   */
+  skipIcons?: boolean;
 }
 //#endregion
 //#region src/flatten.d.ts
@@ -150,7 +156,7 @@ declare function generateTokenDocs(spec: Schema, options?: StorybookPluginOption
 //#region src/index.d.ts
 /**
  * Razorwind plugin that turns design tokens into Storybook MDX doc blocks
- * (`ColorPalette`, `Typeset`, `TokenTable`) and optional UI themes.
+ * (`ColorPalette`, `Typeset`, `TokenTable`, `IconGallery`) and optional UI themes.
  *
  * @see https://storybook.js.org/docs/writing-docs/doc-blocks
  * @see https://storybook.js.org/docs/configure/user-interface/theming

package/dist/index.mjs

@@ -180,11 +180,40 @@ import { TypesetBlock } from "./blocks/Typeset";
 # Typography
 
 <TypesetBlock />
-`}function w(){return`export { ColorPaletteBlock } from "./ColorPalette";
+`}function w(e,t){let n=e[t];return typeof n==`string`?n:void 0}function T(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function E(e){return`import { IconGallery, IconItem } from "@storybook/addon-docs/blocks";
+
+/**
+ * Icons rendered with Storybook's IconGallery doc block.
+ *
+ * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-icongallery
+ */
+export function IconGalleryBlock() {
+  return (
+    <IconGallery>
+${(T(e)?Object.values(e).filter(T).toSorted((e,t)=>(w(e,`name`)??``).localeCompare(w(t,`name`)??``)):[]).map(e=>{let t=w(e,`name`)??`unknown`,n=(Array.isArray(e.files)?e.files:[]).find(e=>T(e)&&w(e,`type`)===`svg`&&typeof e.content==`string`),r=T(n)&&typeof n.content==`string`?`<span
+          style={{ display: "inline-flex", width: 24, height: 24 }}
+          dangerouslySetInnerHTML={{ __html: ${s(n.content)} }}
+        />`:`<code>${o(t)}</code>`;return`    <IconItem name={${s(t)}}>
+      ${r}
+    </IconItem>`}).join(`
+`)||`      {/* No icons */}`}
+    </IconGallery>
+  );
+}
+`}function D(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
+import { IconGalleryBlock } from "./blocks/IconGallery";
+
+<Meta title="${o(e.titlePrefix??`Design Tokens`)}/Icons" />
+
+# Icons
+
+<IconGalleryBlock />
+`}function O(){return`export { ColorPaletteBlock } from "./ColorPalette";
+export { IconGalleryBlock } from "./IconGallery";
 export { TokenTableBlock } from "./TokenTable";
 export type { TokenTableBlockProps, TokenTableRow } from "./TokenTable";
 export { TypesetBlock } from "./Typeset";
-`}function T(e){return`import { create } from "storybook/theming";
+`}function k(e){return`import { create } from "storybook/theming";
 
 /**
  * Storybook UI theme generated by \`@razorwind/storybook\`.
@@ -195,5 +224,5 @@ export default create({
 ${Object.entries(e).filter(([,e])=>e!==void 0).map(([e,t])=>`  ${e}: ${s(t)}`).join(`,
 `)}
 });
-`}function E(e,n,r){return t(e,n,{name:`razorwind-storybook`},r)}function D(e,t={}){let n=t.outputPath??`storybook/tokens`,r=h(e.tokens,t),i=r.some(e=>e.type===`color`),o=r.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)),s={[a(n,`blocks/ColorPalette.tsx`)]:E(a(n,`blocks/ColorPalette.tsx`),v(r,t),`tsx`),[a(n,`blocks/Typeset.tsx`)]:E(a(n,`blocks/Typeset.tsx`),y(r,t),`tsx`),[a(n,`blocks/TokenTable.tsx`)]:E(a(n,`blocks/TokenTable.tsx`),b(r),`tsx`),[a(n,`blocks/index.ts`)]:E(a(n,`blocks/index.ts`),w(),`typescript`),[a(n,`Tokens.mdx`)]:E(a(n,`Tokens.mdx`),x({titlePrefix:t.titlePrefix,hasColors:i,hasTypography:o}),`mdx`)};if(i&&(s[a(n,`Colors.mdx`)]=E(a(n,`Colors.mdx`),S(t),`mdx`)),o&&(s[a(n,`Typography.mdx`)]=E(a(n,`Typography.mdx`),C(t),`mdx`)),s[a(n,`tokens.json`)]=E(a(n,`tokens.json`),`${JSON.stringify(r,null,2)}\n`,`json`),t.generateTheme){let r=t.generateTheme(e.tokens);if(typeof r==`object`&&r)for(let[e,t]of Object.entries(r))s[a(n,`theme-${e}.ts`)]=E(a(n,`theme-${e}.ts`),T(t),`typescript`);else s[a(n,`theme.ts`)]=E(a(n,`theme.ts`),T(r),`typescript`)}return s}var O=e(e=>({name:`storybook`,generate:async t=>D(t,e??{})}));export{O as default,h as flattenTokens,n as formatTokenValue,D as generateTokenDocs,T as renderThemeFile,m as resolveTokenSets,i as toCssVar};
+`}function A(e,n,r){return t(e,n,{name:`razorwind-storybook`},r)}function j(e,t={}){let n=t.outputPath??`storybook/tokens`,r=h(e.tokens,t),i=r.some(e=>e.type===`color`),o=r.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)),s=!t.skipIcons&&T(e.icons)&&Object.keys(e.icons).length>0,c={[a(n,`blocks/ColorPalette.tsx`)]:A(a(n,`blocks/ColorPalette.tsx`),v(r,t),`tsx`),[a(n,`blocks/Typeset.tsx`)]:A(a(n,`blocks/Typeset.tsx`),y(r,t),`tsx`),[a(n,`blocks/TokenTable.tsx`)]:A(a(n,`blocks/TokenTable.tsx`),b(r),`tsx`),[a(n,`blocks/IconGallery.tsx`)]:A(a(n,`blocks/IconGallery.tsx`),E(t.skipIcons?{}:e.icons),`tsx`),[a(n,`blocks/index.ts`)]:A(a(n,`blocks/index.ts`),O(),`typescript`),[a(n,`Tokens.mdx`)]:A(a(n,`Tokens.mdx`),x({titlePrefix:t.titlePrefix,hasColors:i,hasTypography:o}),`mdx`)};if(i&&(c[a(n,`Colors.mdx`)]=A(a(n,`Colors.mdx`),S(t),`mdx`)),o&&(c[a(n,`Typography.mdx`)]=A(a(n,`Typography.mdx`),C(t),`mdx`)),s&&(c[a(n,`Icons.mdx`)]=A(a(n,`Icons.mdx`),D(t),`mdx`)),c[a(n,`tokens.json`)]=A(a(n,`tokens.json`),`${JSON.stringify(r,null,2)}\n`,`json`),t.generateTheme){let r=t.generateTheme(e.tokens);if(typeof r==`object`&&r)for(let[e,t]of Object.entries(r))c[a(n,`theme-${e}.ts`)]=A(a(n,`theme-${e}.ts`),k(t),`typescript`);else c[a(n,`theme.ts`)]=A(a(n,`theme.ts`),k(r),`typescript`)}return c}var M=e(e=>({name:`storybook`,generate:async t=>j(t,e??{})}));export{M as default,h as flattenTokens,n as formatTokenValue,j as generateTokenDocs,k as renderThemeFile,m as resolveTokenSets,i as toCssVar};
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@razorwind/storybook",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "type": "module",
   "description": "Razorwind plugin that creates Storybook MDX token doc blocks from Razorwind design tokens.",
   "repository": {
@@ -83,10 +83,10 @@
   "types": "./dist/index.d.cts",
   "typings": "dist/index.d.mts",
   "dependencies": {
-    "@power-plant/core": "^0.0.67",
+    "@power-plant/core": "^0.0.75",
     "@power-plant/dtcg-schema": "^0.0.1",
-    "@razorwind/core": "^0.0.25",
-    "@stryke/type-checks": "^0.6.34"
+    "@razorwind/core": "0.0.27",
+    "@stryke/type-checks": "^0.6.35"
   },
   "peerDependencies": {
     "@storybook/addon-docs": ">=8",
@@ -99,10 +99,10 @@
     "storybook": { "optional": true }
   },
   "devDependencies": {
-    "@powerlines/plugin-tsdown": "^0.1.586",
+    "@powerlines/plugin-tsdown": "^0.1.589",
     "@types/node": "^25.9.5",
     "typescript": "^6.0.3"
   },
   "publishConfig": { "access": "public" },
-  "gitHead": "4cac94d47388e7e4d0739cde32600845340eaba2"
+  "gitHead": "556f2499e0ef94c0463e86c2d8f9b42bbdb0bc08"
 }