@razorwind/sandpack 0.0.2

package/dist/index.mjs

@@ -0,0 +1,67 @@
+import{definePlugin as e}from"@razorwind/core/plugin";import{createDocument as t,flattenTokens as n,formatTokenValue as r,isObject as i,resolveTokenSets as a,themeDisplayName as o,titleCase as s,toCssVar as c}from"@razorwind/core/utils";import{MONO_ROLES as l,SANS_ROLES as u,fontFamilyName as d,pickFontByRole as f}from"@razorwind/core/lib/fonts";import{join as p}from"node:path";function m(e){let t=e.themes[0],n=e.themes.length===1?t.displayName:`Sandpack Themes`,r=e.themes.map(e=>`- \`themes/${e.fileName}\` — ${e.displayName} (\`theme\` id: \`${e.name}\`)`).join(`
+`),i=e.usages.length>0?e.usages.map(e=>{let t=e.component?`${e.displayName} (\`${e.component}\`)`:e.displayName;return`- \`usage/${e.fileName}\` — ${t}`}).join(`
+`):`_No component usage demos were generated._`,a=e.usages.length>0?`import demo from "./sandpack/usage/${e.usages[0].fileName}";
+
+<Sandpack
+  template={demo.template}
+  files={demo.files}
+  theme={theme}
+  customSetup={
+    demo.dependencies ? { dependencies: demo.dependencies } : undefined
+  }
+/>`:`import { Sandpack } from "@codesandbox/sandpack-react";
+import theme from "./sandpack/themes/${t.fileName}";
+
+<Sandpack theme={theme} template="react" />`;return`# Installing ${n}
+
+Generated by \`@razorwind/sandpack\`.
+
+These artifacts target [Sandpack](https://sandpack.codesandbox.io/)
+(\`@codesandbox/sandpack-react\`).
+
+## Files
+
+### Themes
+
+${r}
+
+### Usage demos
+
+${i}
+
+## Setup
+
+1. Install Sandpack React:
+
+\`\`\`sh
+pnpm add @codesandbox/sandpack-react
+\`\`\`
+
+2. Import a generated theme and pass it to \`theme\`:
+
+\`\`\`tsx
+import { Sandpack } from "@codesandbox/sandpack-react";
+import theme from "./sandpack/themes/${t.fileName}";
+
+export function Demo() {
+  return <Sandpack theme={theme} template="react" />;
+}
+\`\`\`
+
+Custom themes override the default light theme. See
+[Sandpack custom themes](https://sandpack.codesandbox.io/docs/getting-started/themes#custom-theme).
+
+## Select / load usage files
+
+Each usage JSON is shaped for the Sandpack [\`files\` prop](https://sandpack.codesandbox.io/docs/getting-started/usage#files):
+
+\`\`\`tsx
+${a}
+\`\`\`
+
+Available theme ids:
+
+${e.themes.map(e=>`- \`${e.name}\` (${e.displayName})`).join(`
+`)}
+`}function h(e){return o(e)}function g(e,t){return e===`tsx`||e===`jsx`?e:e===`ts`?`ts`:e===`js`?`js`:e===`css`?`css`:e===`html`?`html`:e===`md`||e===`mdx`?e:t.match(/\.([^.]+)$/)?.[1]??`js`}function _(e){let t=g(e.language,e.path);return t===`css`?`/styles.css`:t===`html`?`/index.html`:t===`tsx`?`/App.tsx`:t===`jsx`||t===`js`?`/App.js`:t===`ts`?`/App.ts`:`/App.${t}`}function v(e,t){let n=(t??e).replaceAll(`\\`,`/`).replace(/^@components\//,`/`).replace(/^@ui\//,`/`).replace(/^@lib\//,`/`).replace(/^@hooks\//,`/`);return n.startsWith(`/`)?n:`/${n.replace(/^\.\//,``)}`}function y(e,t){let n=e.content?.trim();if(!n)return;let r={[_(e)]:{code:n,active:!0}};for(let e of t.files??[]){if(!e.content?.trim())continue;let t=v(e.path,e.target);t in r||(r[t]={code:e.content,readOnly:!0,hidden:!0})}return r}function b(e,t){let n=t.name??t.path.split(`/`).pop()?.replace(/\.[^.]+$/,``)??`default`;return`${e.name}-${n}`}function x(e,t={}){if(!i(e))return[];let n=t.template??`react`,r=[];for(let t of Object.values(e))if(t?.usage?.length)for(let e of t.usage){let i=y(e,t);if(!i)continue;let a=b(t,e);r.push({name:a,displayName:e.title??s(a),component:t.name,title:e.title,description:e.description,template:n,files:i,...t.dependencies?{dependencies:t.dependencies}:{}})}return r}function S(e){return e.displayName??e.title??s(e.name)}const C={name:`razorwind-sandpack`};function w(e,n,r){return t(e,n,C,r)}function T(e){return e.trim().toLowerCase().replaceAll(/[^a-z0-9]+/g,`-`).replaceAll(/^-+|-+$/g,``)}function E(e,t){let n=T(e);if(!n)throw TypeError(`@razorwind/sandpack name "${e}" slugifies to an empty string`);if(t.has(n)){let r=2;for(;t.has(`${T(e)}-${r}`);)r+=1;n=`${T(e)}-${r}`}return t.add(n),n}function D(e){return i(e)&&typeof e.name==`string`&&e.name.length>0}function O(e){return i(e)&&typeof e.name==`string`&&e.name.length>0&&i(e.files)}function k(e){if(Array.isArray(e))return e.map((e,t)=>{if(!D(e))throw TypeError(`@razorwind/sandpack mapTheme()[${t}] must be a SandpackTheme with name`);return e});if(D(e))return[e];if(!i(e))throw TypeError(`@razorwind/sandpack mapTheme() must return a theme, theme array, or theme record`);return Object.entries(e).map(([e,t])=>{if(!D(t))throw TypeError(`@razorwind/sandpack mapTheme()["${e}"] must be a SandpackTheme with name`);return{...t,name:t.name||e}})}function A(e){if(Array.isArray(e))return e.map((e,t)=>{if(!O(e))throw TypeError(`@razorwind/sandpack mapFiles()[${t}] must be a SandpackUsage with name + files`);return e});if(O(e))return[e];if(!i(e))throw TypeError(`@razorwind/sandpack mapFiles() must return a usage, usage array, or usage record`);return Object.entries(e).map(([e,t])=>{if(!O(t))throw TypeError(`@razorwind/sandpack mapFiles()["${e}"] must be a SandpackUsage with name + files`);return{...t,name:t.name||e}})}function j(e){if(!e.mapTheme)throw Error(`@razorwind/sandpack requires options.mapTheme`)}function M(e,t){if(!t||Object.keys(t).length===0)return e;let n=f(t,u),r=f(t,l),i=e.font?.body??(n?d(n):void 0),a=e.font?.mono??(r?d(r):void 0);return!i&&!a&&!e.font?e:{...e,font:{...e.font,...i?{body:i}:{},...a?{mono:a}:{}}}}function N(e){let t={};return e.colors&&(t.colors=e.colors),e.syntax&&(t.syntax=e.syntax),e.font&&(t.font=e.font),`${JSON.stringify(t,null,2)}\n`}function P(e){let t={name:e.name,template:e.template??`react`,files:e.files};return e.displayName&&(t.displayName=e.displayName),e.component&&(t.component=e.component),e.title&&(t.title=e.title),e.description&&(t.description=e.description),e.theme!==void 0&&(t.theme=e.theme),e.dependencies&&(t.dependencies=e.dependencies),e.entry&&(t.entry=e.entry),`${JSON.stringify(t,null,2)}\n`}function F(e,t){j(t);let n=t.outputPath??`sandpack`,r=k(t.mapTheme(e.tokens)).map(t=>M(t,e.fonts));if(r.length===0)throw Error(`@razorwind/sandpack mapTheme() returned no themes`);let i=t.includeUsage!==!1,a=[];i&&(a=A(t.mapFiles?t.mapFiles(e.components,e.tokens):x(e.components,{template:t.template})));let o={},s=/* @__PURE__ */ new Set,c=/* @__PURE__ */ new Set,l=[],u=[];for(let e of r){let t=E(e.name,s),r=`${t}.json`,i=p(n,`themes`,r);o[i]=w(i,N(e),`json`),l.push({name:t,displayName:h(e),fileName:r})}for(let e of a){let t=E(e.name,c),r=e.component?T(e.component):void 0,i=r?p(r,`${t}.json`):`${t}.json`,a=p(n,`usage`,i);o[a]=w(a,P({...e,name:t}),`json`),u.push({name:t,displayName:S(e),fileName:i.replaceAll(`\\`,`/`),component:e.component})}let d=t.installGuide??m({themes:l,usages:u}),f=p(n,`INSTALL.md`);return o[f]=w(f,d,`markdown`),o}var I=e(e=>({name:`sandpack`,generate:async t=>{if(!e)throw Error(`@razorwind/sandpack requires options: { mapTheme }`);return F(t,e)}}));export{x as buildUsageFromComponents,I as default,n as flattenTokens,r as formatTokenValue,F as generateSandpackTheme,k as normalizeThemes,A as normalizeUsages,m as renderInstallMd,N as renderThemeJson,P as renderUsageJson,a as resolveTokenSets,c as toCssVar,y as usageToSandpackFiles};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":[],"mappings":""}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@razorwind/sandpack",
+  "version": "0.0.2",
+  "type": "module",
+  "description": "Razorwind plugin that generates Sandpack themes and component usage demos from design tokens.",
+  "repository": {
+    "type": "github",
+    "url": "https://github.com/storm-software/razorwind.git",
+    "directory": "packages/sandpack"
+  },
+  "homepage": "https://stormsoftware.com",
+  "bugs": {
+    "url": "https://stormsoftware.com/support",
+    "email": "support@stormsoftware.com"
+  },
+  "author": {
+    "name": "Storm Software",
+    "email": "contact@stormsoftware.com",
+    "url": "https://stormsoftware.com"
+  },
+  "license": "Apache-2.0",
+  "private": false,
+  "files": ["dist"],
+  "keywords": [
+    "sandpack",
+    "codesandbox",
+    "theme",
+    "razorwind",
+    "design-tokens",
+    "dtcg",
+    "storm-software"
+  ],
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      },
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "default": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      }
+    },
+    "./generate": {
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      },
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "default": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts",
+  "typings": "dist/index.d.mts",
+  "dependencies": {
+    "@power-plant/core": "^0.0.93",
+    "@power-plant/dtcg-schema": "^0.0.1",
+    "@razorwind/core": "^0.0.68"
+  },
+  "devDependencies": {
+    "@powerlines/plugin-tsdown": "^0.1.614",
+    "@types/node": "^25.9.7",
+    "typescript": "^6.0.3"
+  },
+  "publishConfig": { "access": "public" },
+  "gitHead": "1498cb7254b4a24cdbe7b1143cc513438148b863"
+}