@sxl-studio/storybook-addon 1.0.7 → 1.0.8

package/dist/manager.js

@@ -9,7 +9,61 @@ var PARAM_KEY = "sxl";
 
 // src/components/SxlPanel.tsx
 import React from "react";
-import { useParameter } from "@storybook/manager-api";
+import { useParameter, useStorybookState } from "@storybook/manager-api";
+
+// src/convert.ts
+function fromDiffCodeConnect(data) {
+  if (!data || typeof data !== "object") {
+    return { version: 1, figmaFileKey: "", entries: [] };
+  }
+  const d = data;
+  const fileKey = typeof d.$figmaFileKey === "string" ? d.$figmaFileKey : "";
+  const fileName = typeof d.$figmaFileName === "string" ? d.$figmaFileName : void 0;
+  const rawEntries = Array.isArray(d.entries) ? d.entries : [];
+  const entries = rawEntries.filter((e) => {
+    if (!e || typeof e !== "object") return false;
+    const o = e;
+    return o.linked === true && !!o.binding;
+  }).map((e) => {
+    const b = e.binding;
+    const sb = b.storybook ?? {};
+    const nodeId = String(e.nodeId ?? "");
+    const figmaUrl = fileKey ? `https://www.figma.com/design/${fileKey}?node-id=${nodeId.replace(":", "-")}` : void 0;
+    const tokenStatus = sb.tokensReady === true ? "assigned" : void 0;
+    const statusRaw = typeof sb.status === "string" ? sb.status : void 0;
+    const readiness = statusRaw === "complete" || statusRaw === "ready-for-dev" || statusRaw === "in-progress" || statusRaw === "backlog" ? statusRaw : void 0;
+    const rawFiles = Array.isArray(b.files) ? b.files : [];
+    const files = rawFiles.filter((f) => !!f && typeof f === "object").map((f) => ({
+      framework: String(f.framework ?? ""),
+      filePath: String(f.filePath ?? ""),
+      ...f.componentName ? { componentName: String(f.componentName) } : {},
+      ...f.importPath ? { importPath: String(f.importPath) } : {}
+    }));
+    return {
+      nodeId,
+      displayName: String(b.displayName ?? e.nodeName ?? ""),
+      description: sb.description ? String(sb.description) : void 0,
+      figmaUrl,
+      designEmbed: sb.designEmbed === true,
+      compositionJson: sb.compositionJson === true,
+      metadata: sb.metadata === true,
+      updatedAt: typeof e.updatedAt === "string" ? e.updatedAt : void 0,
+      importPath: typeof b.importPath === "string" ? b.importPath : void 0,
+      snippetTemplate: typeof b.snippetTemplate === "string" ? b.snippetTemplate : void 0,
+      files: files.length > 0 ? files : void 0,
+      meta: {
+        ...tokenStatus ? { tokenStatus } : {},
+        ...readiness ? { readiness } : {}
+      }
+    };
+  });
+  return {
+    version: 1,
+    figmaFileKey: fileKey,
+    figmaFileName: fileName,
+    entries
+  };
+}
 
 // src/components/styles.ts
 var FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
@@ -237,25 +291,39 @@ var READINESS_MAP = {
   "in-progress": { label: "In Progress", fg: "#92400e", bg: "#fef3c7", dot: "#f59e0b" },
   "backlog": { label: "Backlog", fg: "#6b7280", bg: "#f3f4f6", dot: "#9ca3af" }
 };
-function resolveEntry(params) {
-  if (!params) return null;
-  const registry = params.registry;
+function normalizeRegistry(raw) {
+  if (!raw || typeof raw !== "object") return null;
+  const obj = raw;
+  const entries = Array.isArray(obj.entries) ? obj.entries : [];
+  if (entries.length === 0) return null;
+  const first = entries[0];
+  if (first && "binding" in first && "linked" in first) {
+    return fromDiffCodeConnect(raw);
+  }
+  if (first && "nodeId" in first && "displayName" in first) {
+    return raw;
+  }
+  return null;
+}
+function resolveEntry(params, ctx) {
+  if (!params) return { status: "no-registry" };
+  const registry = normalizeRegistry(params.registry);
   if (params.figmaUrl || params.description) {
     return {
-      nodeId: params.figmaNodeId ?? "",
-      displayName: params.component ?? params.componentName ?? "",
-      description: params.description,
-      figmaUrl: params.figmaUrl,
-      designEmbed: params.designEmbed ?? !!params.figmaUrl,
-      compositionJson: params.compositionJson,
-      metadata: params.metadata,
-      meta: {
-        tokenStatus: params.tokenStatus,
-        readiness: params.readiness
+      status: "found",
+      entry: {
+        nodeId: params.figmaNodeId ?? "",
+        displayName: params.component ?? params.componentName ?? "",
+        description: params.description,
+        figmaUrl: params.figmaUrl,
+        designEmbed: params.designEmbed ?? !!params.figmaUrl,
+        compositionJson: params.compositionJson,
+        metadata: params.metadata,
+        meta: { tokenStatus: params.tokenStatus, readiness: params.readiness }
       }
     };
   }
-  if (!registry?.entries?.length) return null;
+  if (!registry) return { status: "no-registry" };
   let found;
   if (params.figmaNodeId) {
     found = registry.entries.find((e) => e.nodeId === params.figmaNodeId);
@@ -269,27 +337,92 @@ function resolveEntry(params) {
   if (!found && registry.entries.length === 1) {
     found = registry.entries[0];
   }
-  if (!found) return null;
+  if (!found && registry.entries.length > 1) {
+    found = matchByStoryContext(registry.entries, ctx);
+  }
+  if (!found) {
+    const hint = extractComponentName(ctx.title) || ctx.name || "";
+    return { status: "no-match", componentHint: hint };
+  }
   return {
-    ...found,
-    meta: {
-      ...found.meta,
-      tokenStatus: params.tokenStatus ?? found.meta?.tokenStatus,
-      readiness: params.readiness ?? found.meta?.readiness
-    },
-    description: params.description ?? found.description,
-    compositionJson: params.compositionJson ?? found.compositionJson,
-    metadata: params.metadata ?? found.metadata,
-    designEmbed: params.designEmbed ?? found.designEmbed
+    status: "found",
+    entry: {
+      ...found,
+      meta: {
+        ...found.meta,
+        tokenStatus: params.tokenStatus ?? found.meta?.tokenStatus,
+        readiness: params.readiness ?? found.meta?.readiness
+      },
+      description: params.description ?? found.description,
+      compositionJson: params.compositionJson ?? found.compositionJson,
+      metadata: params.metadata ?? found.metadata,
+      designEmbed: params.designEmbed ?? found.designEmbed
+    }
   };
 }
+function matchByStoryContext(entries, ctx) {
+  const tokens = [
+    extractComponentName(ctx.title),
+    ctx.name,
+    ctx.storyId,
+    ctx.importPath,
+    fileStem(ctx.importPath)
+  ].filter(Boolean).map(norm);
+  if (tokens.length === 0) return void 0;
+  let best;
+  let bestScore = 0;
+  let tie = false;
+  for (const entry of entries) {
+    const s = score(entry, tokens);
+    if (s > bestScore) {
+      bestScore = s;
+      best = entry;
+      tie = false;
+    } else if (s === bestScore && s > 0) {
+      tie = true;
+    }
+  }
+  if (tie || bestScore < 60) return void 0;
+  return best;
+}
+function score(entry, tokens) {
+  const display = norm(entry.displayName);
+  const imprt = norm(entry.importPath ?? "");
+  const stems = (entry.files ?? []).map((f) => norm(fileStem(f.filePath))).filter(Boolean);
+  let s = 0;
+  for (const t of tokens) {
+    if (!t) continue;
+    if (display && t === display) s += 120;
+    else if (display && t.includes(display)) s += 70;
+    else if (display && display.includes(t)) s += 65;
+    if (imprt && t.includes(imprt)) s += 55;
+    for (const stem of stems) {
+      if (stem && t.includes(stem)) s += 30;
+    }
+  }
+  return s;
+}
+function extractComponentName(title) {
+  if (!title) return "";
+  const parts = title.split("/");
+  return parts[parts.length - 1].trim();
+}
+function norm(v) {
+  return v.toLowerCase().replace(/[^a-z0-9]+/g, "");
+}
+function fileStem(p) {
+  const f = (p || "").split("/").pop() ?? "";
+  const d = f.lastIndexOf(".");
+  return d > 0 ? f.slice(0, d) : f;
+}
 function buildEmbedUrl(figmaUrl) {
   if (figmaUrl.includes("figma.com/embed")) return figmaUrl;
   return `https://www.figma.com/embed?embed_host=storybook&url=${encodeURIComponent(figmaUrl)}`;
 }
 function buildDevModeUrl(figmaUrl) {
   try {
-    const u = new URL(figmaUrl.includes("figma.com/embed") ? new URL(figmaUrl).searchParams.get("url") ?? figmaUrl : figmaUrl);
+    const raw = figmaUrl.includes("figma.com/embed") ? new URL(figmaUrl).searchParams.get("url") ?? figmaUrl : figmaUrl;
+    const u = new URL(raw);
     u.searchParams.set("m", "dev");
     return u.toString();
   } catch {
@@ -316,22 +449,33 @@ var Badge = ({
   bg,
   dot
 }) => /* @__PURE__ */ React.createElement("span", { style: { ...badge, color: fg, backgroundColor: bg } }, /* @__PURE__ */ React.createElement("span", { style: { ...badgeDot, backgroundColor: dot } }), label);
-var EmptyState = () => /* @__PURE__ */ React.createElement("div", { style: emptyContainer }, /* @__PURE__ */ React.createElement("p", { style: emptyTitle }, "No SXL data for this story"), /* @__PURE__ */ React.createElement("p", { style: emptyHint }, "Import the registry in ", /* @__PURE__ */ React.createElement("code", { style: emptyCode }, ".storybook/preview.ts"), ":"), /* @__PURE__ */ React.createElement("pre", { style: codeBlock }, `import raw from '../diff-code-connect.YOUR_KEY.json';
+var NoRegistryState = () => /* @__PURE__ */ React.createElement("div", { style: emptyContainer }, /* @__PURE__ */ React.createElement("p", { style: emptyTitle }, "SXL Studio not configured"), /* @__PURE__ */ React.createElement("p", { style: emptyHint }, "Import the registry in ", /* @__PURE__ */ React.createElement("code", { style: emptyCode }, ".storybook/preview.ts"), ":"), /* @__PURE__ */ React.createElement("pre", { style: codeBlock }, `import raw from '../diff-code-connect.YOUR_KEY.json';
 import { fromDiffCodeConnect } from '@sxl-studio/storybook-addon';
 
 export default {
   parameters: {
     sxl: { registry: fromDiffCodeConnect(raw) },
   },
-};`), /* @__PURE__ */ React.createElement("p", { style: emptyHint }, "Then match a story to a Figma component:"), /* @__PURE__ */ React.createElement("pre", { style: codeBlock }, `export const Default = {
-  parameters: {
-    sxl: { component: 'ButtonPrimary' },
-  },
 };`));
+var NoMatchState = ({ componentHint }) => /* @__PURE__ */ React.createElement("div", { style: emptyContainer }, /* @__PURE__ */ React.createElement("p", { style: emptyTitle }, "No Figma integration for this component"), /* @__PURE__ */ React.createElement("p", { style: emptyHint }, componentHint ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("strong", null, componentHint), " has not been linked in the SXL Studio Figma plugin.") : /* @__PURE__ */ React.createElement(React.Fragment, null, "This story has not been linked to a Figma component.")), /* @__PURE__ */ React.createElement("p", { style: emptyHint }, "To add integration, open the component in Figma, go to ", /* @__PURE__ */ React.createElement("strong", null, "Code \u2192 Storybook Integration"), ", and click ", /* @__PURE__ */ React.createElement("strong", null, "Connect"), "."));
 var SxlPanel = () => {
   const params = useParameter(PARAM_KEY);
-  const entry = resolveEntry(params);
-  if (!entry) return React.createElement(EmptyState, null);
+  const state = useStorybookState();
+  const selected = state.storyId && state.index ? state.index[state.storyId] : void 0;
+  const ctx = {
+    storyId: state.storyId ?? "",
+    title: selected?.title ?? "",
+    name: selected?.name ?? "",
+    importPath: selected?.importPath ?? ""
+  };
+  const result = resolveEntry(params, ctx);
+  if (result.status === "no-registry") {
+    return React.createElement(NoRegistryState, null);
+  }
+  if (result.status === "no-match") {
+    return React.createElement(NoMatchState, { componentHint: result.componentHint });
+  }
+  const entry = result.entry;
   const tokenStatus = entry.meta?.tokenStatus;
   const readiness = entry.meta?.readiness;
   const tokenInfo = tokenStatus ? TOKEN_MAP[tokenStatus] : null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sxl-studio/storybook-addon",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Storybook addon for SXL Studio — displays Figma Embed, component info and design token status for linked components",
   "type": "module",
   "main": "dist/index.js",