@sxl-studio/storybook-addon 1.0.18 → 1.1.1

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+## 1.1.1
+
+- **Registry matching:** removed the behavior where a **single** registry entry was applied to **every** story. Matching now always uses the same story-context heuristic (or explicit `sxl.component` / `sxl.figmaNodeId`). Unrelated stories show the “no Figma integration” state.
+
+## 1.1.0
+
+- **Preset (zero-config):** merges Content-Security-Policy so the Figma embed iframe can load (`frame-src` includes `https://www.figma.com`).
+- **Local composition JSON:** if a `tokens/tokens` directory is found next to the Storybook project (or above `.storybook`), files are served in dev at `/sxl-tokens/…` and copied for `storybook build` via `staticDirs`, so `compositionFilePath` from the registry resolves without hand-written Vite config.
+- **Registry filename:** if `diff-code-connect.SXL-Components.json` is absent but another `diff-code-connect.*.json` exists in that folder, Vite `resolve.alias` maps the legacy path to the first matching file (deterministic sort). Import path in `preview.ts` stays stable while the plugin emits `diff-code-connect.<figmaFileKey>.json`.
+- **Logging:** removed informational `console` output from the manager and panel; one `console.warn` remains when Design Embed is on but no Figma URL can be resolved (misconfiguration).
+
+## Earlier
+
+See git history for releases before this file was added.

package/README.md

@@ -2,6 +2,10 @@
 
 Storybook addon for [SXL Studio](https://sxl-studio.com) — displays Figma Embed, component info, and design token status for components linked via the SXL Studio Figma plugin.
 
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md) (e.g. **1.1.1** registry matching fix; **1.1.0** preset CSP, `/sxl-tokens`, legacy filename alias, quieter logs).
+
 ## Features
 
 - **Figma Embed** — live Figma design iframe centered in the addon panel
@@ -17,9 +21,11 @@ npm install @sxl-studio/storybook-addon --save-dev
 
 ## Setup
 
-### 1. Register the addon
+### 1. Register the addon (`main`)
+
+List **`@sxl-studio/storybook-addon`** in **`addons`**. The preset ships with the package and is applied when Storybook loads the addon (no separate preset import in `main` unless your setup requires the explicit `@sxl-studio/storybook-addon/preset` entry — see troubleshooting in docs).
 
-`.storybook/main.ts`:
+**Minimal `main.ts`:**
 
 ```ts
 export default {
@@ -30,21 +36,35 @@ export default {
 };
 ```
 
-### 2. Import the registry
+**With a shared Storybook config** (internal design-system package, monorepo): **append** to the shared addons array — do not drop existing entries.
 
-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.
+```ts
+import sharedMain from '@your-org/storybook-vue/main';
 
-**Preset (automatic):** when the addon preset is loaded (default if the package is listed under `addons`), it:
+const config = {
+  ...sharedMain,
+  addons: [...(sharedMain.addons ?? []), '@sxl-studio/storybook-addon'],
+};
 
-- 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`.
+export default config;
+```
 
-**Option A** — using `sxl-codeconnect.json` (exported from plugin):
+### 2. Import the registry (`preview`)
 
-`.storybook/preview.ts`:
+The SXL Studio Figma plugin generates **`diff-code-connect.<figmaFileKey>.json`** (or an exported `sxl-codeconnect.json`). Put it in **`parameters.sxl.registry`**. The **relative import path is up to your repo** (e.g. `../../tokens/tokens/diff-code-connect.xxx.json`).
+
+- **`fromDiffCodeConnect(raw)`** — explicit normalization; use if you prefer one code path.
+- **Raw `import registry from '...json'`** — often enough for current plugin output.
+
+**Preset (automatic):** when the addon preset runs, it:
+
+- Serves a nearby **`tokens/tokens`** folder at **`/sxl-tokens/…`** (dev + `storybook build` via `staticDirs`) so `compositionFilePath` in the registry resolves without extra Vite config.
+- Can **`resolve.alias`** a stable filename like `diff-code-connect.SXL-Components.json` to the real `diff-code-connect.*.json` when only one candidate exists in that folder (see CHANGELOG).
+
+**Minimal `preview.ts`:**
 
 ```ts
-import registry from '../sxl-codeconnect.json';
+import registry from '../path/to/diff-code-connect.<fileKey>.json';
 
 export default {
   parameters: {
@@ -53,10 +73,25 @@ export default {
 };
 ```
 
-**Option B** — using the existing `diff-code-connect` file:
+**With a shared `preview`** — merge **`parameters`** so shared decorators/globals stay intact:
 
 ```ts
-import raw from '../diff-code-connect.abc123.json';
+import sharedPreview from '@your-org/storybook-vue/preview';
+import registry from '../../tokens/tokens/diff-code-connect.<fileKey>.json';
+
+export default {
+  ...sharedPreview,
+  parameters: {
+    ...sharedPreview.parameters,
+    sxl: { registry },
+  },
+};
+```
+
+**Alternative — converter:**
+
+```ts
+import raw from '../diff-code-connect.<fileKey>.json';
 import { fromDiffCodeConnect } from '@sxl-studio/storybook-addon';
 
 export default {
@@ -68,6 +103,8 @@ export default {
 
 ### 3. Match stories to Figma components
 
+Stories are matched to registry entries by explicit `sxl.component` / `sxl.figmaNodeId`, or by a **heuristic** on story title and file path. **A registry with a single component is not shown on every story** — unrelated stories show a “no integration” state until the story context matches or you set parameters manually.
+
 Per-story matching:
 
 ```ts

package/dist/manager.js

@@ -3706,10 +3706,7 @@ function resolveEntry(params, ctx) {
       found = registry.entries.find((e) => e.displayName.toLowerCase() === name);
     }
   }
-  if (!found && registry.entries.length === 1) {
-    found = registry.entries[0];
-  }
-  if (!found && registry.entries.length > 1) {
+  if (!found) {
     found = matchByStoryContext(registry.entries, ctx);
   }
   if (!found) {
@@ -3955,17 +3952,8 @@ var SxlPanel = () => {
         "[SXL Studio addon] Embed requested but no Figma URL could be resolved. Set top-level `$figmaFileKey` / registry `figmaFileKey`, or `storybook.figmaUrl` on the entry, then re-export.",
         { nodeId: entryForRender.nodeId, displayName: entryForRender.displayName }
       );
-      return;
     }
-    if (!showEmbed || !entryForRender.figmaUrl) return;
-    const embedUrl = buildEmbedUrl(entryForRender.figmaUrl);
-    console.info("[SXL Studio addon] Figma embed", {
-      designEmbed: entryForRender.designEmbed,
-      figmaUrl: entryForRender.figmaUrl,
-      embedUrl,
-      hint: "If iframe is blank, verify Storybook CSP frame-src includes https://www.figma.com"
-    });
-  }, [showEmbed, entryForRender?.figmaUrl, entryForRender?.designEmbed, entryForRender?.nodeId, entryForRender?.displayName]);
+  }, [entryForRender?.designEmbed, entryForRender?.figmaUrl, entryForRender?.nodeId, entryForRender?.displayName]);
   if (result.status === "no-registry") {
     return React2.createElement(NoRegistryState, null);
   }
@@ -3987,10 +3975,7 @@ var SxlPanel = () => {
       style: iframe,
       allowFullScreen: true,
       allow: "clipboard-write; fullscreen",
-      referrerPolicy: "no-referrer-when-downgrade",
-      onLoad: () => {
-        console.info("[SXL Studio addon] Figma iframe load event fired");
-      }
+      referrerPolicy: "no-referrer-when-downgrade"
     }
   ), /* @__PURE__ */ React2.createElement("div", { style: embedFooter }, /* @__PURE__ */ React2.createElement(
     "a",
@@ -4066,7 +4051,6 @@ var FigmaIcon = () => /* @__PURE__ */ React2.createElement("svg", { width: "14",
 var REGISTRY_GUARD_KEY = "__sxlStudioAddonRegistered__";
 if (!globalThis[REGISTRY_GUARD_KEY]) {
   globalThis[REGISTRY_GUARD_KEY] = true;
-  console.info("[SXL Storybook Addon] register manager addon");
   addons.register(ADDON_ID, () => {
     addons.add(PANEL_ID, {
       type: types.PANEL,
@@ -4077,8 +4061,6 @@ if (!globalThis[REGISTRY_GUARD_KEY]) {
       }
     });
   });
-} else {
-  console.warn("[SXL Storybook Addon] skip duplicate manager registration");
 }
 /*! Bundled license information:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sxl-studio/storybook-addon",
-  "version": "1.0.18",
+  "version": "1.1.1",
   "description": "Storybook addon for SXL Studio — displays Figma Embed, component info and design token status for linked components",
   "type": "module",
   "main": "dist/index.js",
@@ -16,6 +16,7 @@
   "files": [
     "dist",
     "README.md",
+    "CHANGELOG.md",
     "preset.js"
   ],
   "publishConfig": {
@@ -25,7 +26,8 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "lint": "tsc --noEmit",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "push": "npm run build && npm publish"
   },
   "keywords": [
     "storybook",