@sxl-studio/storybook-addon 1.0.16 → 1.0.18

package/README.md

@@ -32,7 +32,12 @@ export default {
 
 ### 2. Import the registry
 
-The SXL Studio Figma plugin generates a `sxl-codeconnect.json` (or `diff-code-connect.<fileKey>.json`) file that maps Figma components to your codebase. Import it in your Storybook preview config:
+The SXL Studio Figma plugin generates a `sxl-codeconnect.json` (or `diff-code-connect.<fileKey>.json`) file that maps Figma components to your codebase. Import it in your Storybook preview config.
+
+**Preset (automatic):** when the addon preset is loaded (default if the package is listed under `addons`), it:
+
+- Serves the sibling folder `tokens/tokens` (if present next to the Storybook app or two levels above `.storybook`) at **`/sxl-tokens/…`**, so composition JSON paths from the registry resolve in dev and via `staticDirs` in `storybook build`.
+- If `diff-code-connect.SXL-Components.json` is **missing** but another `diff-code-connect.*.json` exists in that folder, Vite gets a **`resolve.alias`** from the legacy path to the first matching file (sorted by name). You can keep a stable import path in preview while the plugin emits `diff-code-connect.<figmaFileKey>.json`.
 
 **Option A** — using `sxl-codeconnect.json` (exported from plugin):
 

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 declare const ADDON_ID: "sxl-studio";
 declare const PANEL_ID: "sxl-studio/panel";
 declare const PARAM_KEY: "sxl";
+/** Same-origin path where the preset may serve `tokens/tokens` (composition JSON). */
+declare const SXL_TOKENS_URL_PREFIX: "/sxl-tokens";
 
 /** Token row: green "True" or gray "False" (from `tokensReady` in registry). */
 type SxlTokensBool = "true" | "false";
@@ -141,4 +143,4 @@ declare function loadCompositionJsonText(path: string | undefined, legacyInline:
     error: string;
 }>;
 
-export { ADDON_ID, PANEL_ID, PARAM_KEY, type SxlComponentApiProp, type SxlFileBinding, type SxlReadiness, type SxlRegistry, type SxlRegistryEntry, type SxlRegistryMeta, type SxlStoryParameters, type SxlTokenStatus, type SxlTokensBool, fromDiffCodeConnect, loadCompositionJsonText, normalizeCompositionPath };
+export { ADDON_ID, PANEL_ID, PARAM_KEY, SXL_TOKENS_URL_PREFIX, type SxlComponentApiProp, type SxlFileBinding, type SxlReadiness, type SxlRegistry, type SxlRegistryEntry, type SxlRegistryMeta, type SxlStoryParameters, type SxlTokenStatus, type SxlTokensBool, fromDiffCodeConnect, loadCompositionJsonText, normalizeCompositionPath };

package/dist/index.js

@@ -2,6 +2,7 @@
 var ADDON_ID = "sxl-studio";
 var PANEL_ID = `${ADDON_ID}/panel`;
 var PARAM_KEY = "sxl";
+var SXL_TOKENS_URL_PREFIX = "/sxl-tokens";
 
 // src/convert.ts
 function fromDiffCodeConnect(data) {
@@ -269,6 +270,11 @@ async function loadCompositionJsonText(path, legacyInline, params) {
       };
     }
   }
+  const sxlPresetUrls = candidateRelativePaths(p).map((rel) => joinFetchUrl(SXL_TOKENS_URL_PREFIX, rel));
+  const sxlPresetHit = await fetchFirstOk(sxlPresetUrls);
+  if (sxlPresetHit) {
+    return { text: sxlPresetHit.text, source: "fetch" };
+  }
   const repoUrl = extractRepositoryUrl(params);
   if (repoUrl) {
     const gitlabCandidates = buildGitlabRawCandidates(repoUrl, p);
@@ -290,6 +296,7 @@ export {
   ADDON_ID,
   PANEL_ID,
   PARAM_KEY,
+  SXL_TOKENS_URL_PREFIX,
   fromDiffCodeConnect,
   loadCompositionJsonText,
   normalizeCompositionPath

package/dist/manager.js

@@ -6,6 +6,7 @@ import { addons, types } from "@storybook/manager-api";
 var ADDON_ID = "sxl-studio";
 var PANEL_ID = `${ADDON_ID}/panel`;
 var PARAM_KEY = "sxl";
+var SXL_TOKENS_URL_PREFIX = "/sxl-tokens";
 
 // src/components/SxlPanel.tsx
 import React2, { useCallback as useCallback3, useEffect, useState } from "react";
@@ -277,6 +278,11 @@ async function loadCompositionJsonText(path, legacyInline, params) {
       };
     }
   }
+  const sxlPresetUrls = candidateRelativePaths(p).map((rel) => joinFetchUrl(SXL_TOKENS_URL_PREFIX, rel));
+  const sxlPresetHit = await fetchFirstOk(sxlPresetUrls);
+  if (sxlPresetHit) {
+    return { text: sxlPresetHit.text, source: "fetch" };
+  }
   const repoUrl = extractRepositoryUrl(params);
   if (repoUrl) {
     const gitlabCandidates = buildGitlabRawCandidates(repoUrl, p);

package/dist/preset.js

@@ -1,10 +1,170 @@
 // src/preset.ts
 import { dirname, join } from "path";
 import { fileURLToPath } from "url";
+
+// src/sxlTokensServe.ts
+import fs from "fs";
+import path from "path";
+
+// src/constants.ts
+var ADDON_ID = "sxl-studio";
+var PANEL_ID = `${ADDON_ID}/panel`;
+var SXL_TOKENS_URL_PREFIX = "/sxl-tokens";
+
+// src/sxlTokensServe.ts
+var LEGACY_DIFF_CODE_CONNECT_BASENAME = "diff-code-connect.SXL-Components.json";
+function resolveDiffCodeConnectAliasFallback(tokensRoot) {
+  const legacyPath = path.resolve(tokensRoot, LEGACY_DIFF_CODE_CONNECT_BASENAME);
+  if (fs.existsSync(legacyPath)) return null;
+  let names = [];
+  try {
+    names = fs.readdirSync(tokensRoot).filter((f) => f.startsWith("diff-code-connect.") && f.endsWith(".json"));
+  } catch {
+    return null;
+  }
+  if (names.length === 0) return null;
+  names.sort();
+  const replacement = path.resolve(tokensRoot, names[0]);
+  return { legacyAbsolutePath: legacyPath, replacementAbsolutePath: replacement };
+}
+function resolveSxlTokensRootSync(baseDirs) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const base of baseDirs) {
+    if (!base) continue;
+    const resolvedBase = path.resolve(base);
+    const candidates = [
+      path.join(resolvedBase, "tokens", "tokens"),
+      path.join(resolvedBase, "..", "tokens", "tokens"),
+      path.join(resolvedBase, "..", "..", "tokens", "tokens")
+    ];
+    for (const c of candidates) {
+      try {
+        const rp = path.resolve(c);
+        if (seen.has(rp)) continue;
+        seen.add(rp);
+        if (fs.existsSync(rp) && fs.statSync(rp).isDirectory()) {
+          return rp;
+        }
+      } catch {
+      }
+    }
+  }
+  return null;
+}
+function isPathInsideRoot(root, filePath) {
+  const r = path.resolve(root) + path.sep;
+  const f = path.resolve(filePath);
+  return f === path.resolve(root) || f.startsWith(r);
+}
+function createSxlTokensDevPlugin(tokensRoot) {
+  return {
+    name: "sxl-studio-tokens-static",
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        const rawUrl = req.url ?? "";
+        if (!rawUrl.startsWith(`${SXL_TOKENS_URL_PREFIX}/`) && rawUrl !== `${SXL_TOKENS_URL_PREFIX}`) {
+          next();
+          return;
+        }
+        const rel = decodeURIComponent(rawUrl.slice(SXL_TOKENS_URL_PREFIX.length).replace(/^\//, ""));
+        if (!rel || rel.includes("..")) {
+          res.statusCode = 400;
+          res.end();
+          return;
+        }
+        const fp = path.join(tokensRoot, rel);
+        if (!isPathInsideRoot(tokensRoot, fp)) {
+          res.statusCode = 403;
+          res.end();
+          return;
+        }
+        fs.readFile(fp, (err, data) => {
+          if (err) {
+            res.statusCode = 404;
+            res.end();
+            return;
+          }
+          if (fp.endsWith(".json")) {
+            res.setHeader("Content-Type", "application/json; charset=utf-8");
+          }
+          res.end(data);
+        });
+      });
+    }
+  };
+}
+
+// src/preset.ts
 var dir = dirname(fileURLToPath(import.meta.url));
 function managerEntries(entry = []) {
   return [...entry, join(dir, "manager.js")];
 }
+function escapeRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function aliasEntriesToArray(alias) {
+  if (alias === void 0) return [];
+  if (Array.isArray(alias)) {
+    return [...alias];
+  }
+  if (typeof alias === "object" && alias !== null) {
+    return Object.entries(alias).map(([find, replacement]) => ({
+      find,
+      replacement
+    }));
+  }
+  return [];
+}
+function mergeViteResolveAlias(config, legacyPath, replacement) {
+  const prevResolve = config.resolve;
+  const prevAlias = prevResolve?.alias;
+  const { alias: _drop, ...resolveRest } = typeof prevResolve === "object" && prevResolve !== null ? prevResolve : {};
+  const entry = {
+    find: new RegExp(`^${escapeRegExp(legacyPath)}$`),
+    replacement
+  };
+  const nextAlias = [...aliasEntriesToArray(prevAlias), entry];
+  return {
+    ...config,
+    resolve: {
+      ...resolveRest,
+      alias: nextAlias
+    }
+  };
+}
+async function viteFinal(config, options) {
+  const c = config;
+  const withCsp = mergeSxlFigmaFrameSrcHeader(
+    c
+  );
+  const bases = [];
+  if (options?.configDir) bases.push(options.configDir);
+  bases.push(process.cwd());
+  const tokensRoot = resolveSxlTokensRootSync(bases);
+  if (!tokensRoot) {
+    return withCsp;
+  }
+  const plugins = c.plugins ?? [];
+  let next = {
+    ...withCsp,
+    plugins: [...plugins, createSxlTokensDevPlugin(tokensRoot)]
+  };
+  const fb = resolveDiffCodeConnectAliasFallback(tokensRoot);
+  if (fb) {
+    next = mergeViteResolveAlias(next, fb.legacyAbsolutePath, fb.replacementAbsolutePath);
+  }
+  return next;
+}
+function staticDirs(entries, options) {
+  const e = Array.isArray(entries) ? entries : [];
+  const bases = [];
+  if (options?.configDir) bases.push(options.configDir);
+  bases.push(process.cwd());
+  const root = resolveSxlTokensRootSync(bases);
+  if (!root) return e;
+  const mount = SXL_TOKENS_URL_PREFIX.replace(/^\//, "") || "sxl-tokens";
+  return [...e, { from: root, to: `/${mount}` }];
+}
 function mergeSxlFigmaFrameSrcHeader(config) {
   const directive = "frame-src 'self' https://www.figma.com https://*.figma.com data: blob:;";
   const prev = config.server?.headers?.["Content-Security-Policy"];
@@ -22,5 +182,7 @@ function mergeSxlFigmaFrameSrcHeader(config) {
 }
 export {
   managerEntries,
-  mergeSxlFigmaFrameSrcHeader
+  mergeSxlFigmaFrameSrcHeader,
+  staticDirs,
+  viteFinal
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sxl-studio/storybook-addon",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "Storybook addon for SXL Studio — displays Figma Embed, component info and design token status for linked components",
   "type": "module",
   "main": "dist/index.js",
@@ -11,11 +11,12 @@
       "default": "./dist/index.js"
     },
     "./manager": "./dist/manager.js",
-    "./preset": "./dist/preset.js"
+    "./preset": "./preset.js"
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "preset.js"
   ],
   "publishConfig": {
     "access": "public"
@@ -51,6 +52,7 @@
     "typescript": "^5.7.0"
   },
   "storybook": {
+    "preset": "./preset.js",
     "supportedFrameworks": [
       "react",
       "vue",

package/preset.js

@@ -0,0 +1 @@
+export * from "./dist/preset.js";