@sxl-studio/storybook-addon 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,4 +1,75 @@
1
- export { ADDON_ID, PANEL_ID, PARAM_KEY } from "./constants";
2
- export type { SxlRegistry, SxlRegistryEntry, SxlRegistryMeta, SxlStoryParameters, SxlTokenStatus, SxlReadiness, } from "./types";
3
- export { fromDiffCodeConnect } from "./convert";
4
- //# sourceMappingURL=index.d.ts.map
1
+ declare const ADDON_ID: "sxl-studio";
2
+ declare const PANEL_ID: "sxl-studio/panel";
3
+ declare const PARAM_KEY: "sxl";
4
+
5
+ /** Token assignment status on the Figma component. */
6
+ type SxlTokenStatus = "assigned" | "partial" | "none";
7
+ /** Design readiness stage. */
8
+ type SxlReadiness = "complete" | "ready-for-dev" | "in-progress" | "backlog";
9
+ /** Extended metadata for a single Figma component (exported by the plugin). */
10
+ type SxlRegistryMeta = {
11
+ variantCount?: number;
12
+ componentProperties?: string[];
13
+ tokenStatus?: SxlTokenStatus;
14
+ readiness?: SxlReadiness;
15
+ };
16
+ /** One component entry inside the registry. */
17
+ type SxlRegistryEntry = {
18
+ nodeId: string;
19
+ displayName: string;
20
+ description?: string;
21
+ /** Direct Figma design URL (not embed). */
22
+ figmaUrl?: string;
23
+ designEmbed?: boolean;
24
+ compositionJson?: boolean;
25
+ metadata?: boolean;
26
+ meta?: SxlRegistryMeta;
27
+ };
28
+ /**
29
+ * Root registry object — typically imported from `sxl-codeconnect.json`
30
+ * or generated via `fromDiffCodeConnect()`.
31
+ */
32
+ type SxlRegistry = {
33
+ version: number;
34
+ figmaFileKey: string;
35
+ figmaFileName?: string;
36
+ updatedAt?: string;
37
+ entries: SxlRegistryEntry[];
38
+ };
39
+ /**
40
+ * Shape of `parameters.sxl` that the addon reads from each story.
41
+ * Can be set globally in `preview.ts` or per-story.
42
+ */
43
+ type SxlStoryParameters = {
44
+ /** Explicit match by display name from the registry. */
45
+ component?: string;
46
+ /** Explicit match by Figma node ID. */
47
+ figmaNodeId?: string;
48
+ /** Direct Figma design URL (overrides registry lookup). */
49
+ figmaUrl?: string;
50
+ /** Direct description (overrides registry). */
51
+ description?: string;
52
+ /** Override token status per-story. */
53
+ tokenStatus?: SxlTokenStatus;
54
+ /** Override readiness per-story. */
55
+ readiness?: SxlReadiness;
56
+ /** Registry data (typically set globally in preview.ts). */
57
+ registry?: SxlRegistry;
58
+ };
59
+
60
+ /**
61
+ * Converts the plugin's `diff-code-connect.<fileKey>.json` to the addon registry format.
62
+ *
63
+ * Usage in `.storybook/preview.ts`:
64
+ * ```ts
65
+ * import raw from '../diff-code-connect.abc123.json';
66
+ * import { fromDiffCodeConnect } from '@sxl-studio/storybook-addon';
67
+ *
68
+ * export default {
69
+ * parameters: { sxl: { registry: fromDiffCodeConnect(raw) } },
70
+ * };
71
+ * ```
72
+ */
73
+ declare function fromDiffCodeConnect(data: unknown): SxlRegistry;
74
+
75
+ export { ADDON_ID, PANEL_ID, PARAM_KEY, type SxlReadiness, type SxlRegistry, type SxlRegistryEntry, type SxlRegistryMeta, type SxlStoryParameters, type SxlTokenStatus, fromDiffCodeConnect };
package/dist/index.js CHANGED
@@ -1,3 +1,53 @@
1
- export { ADDON_ID, PANEL_ID, PARAM_KEY } from "./constants";
2
- export { fromDiffCodeConnect } from "./convert";
3
- //# sourceMappingURL=index.js.map
1
+ // src/constants.ts
2
+ var ADDON_ID = "sxl-studio";
3
+ var PANEL_ID = `${ADDON_ID}/panel`;
4
+ var PARAM_KEY = "sxl";
5
+
6
+ // src/convert.ts
7
+ function fromDiffCodeConnect(data) {
8
+ if (!data || typeof data !== "object") {
9
+ return { version: 1, figmaFileKey: "", entries: [] };
10
+ }
11
+ const d = data;
12
+ const fileKey = typeof d.$figmaFileKey === "string" ? d.$figmaFileKey : "";
13
+ const fileName = typeof d.$figmaFileName === "string" ? d.$figmaFileName : void 0;
14
+ const rawEntries = Array.isArray(d.entries) ? d.entries : [];
15
+ const entries = rawEntries.filter((e) => {
16
+ if (!e || typeof e !== "object") return false;
17
+ const o = e;
18
+ return o.linked === true && !!o.binding;
19
+ }).map((e) => {
20
+ const b = e.binding;
21
+ const sb = b.storybook ?? {};
22
+ const nodeId = String(e.nodeId ?? "");
23
+ const figmaUrl = fileKey ? `https://www.figma.com/design/${fileKey}?node-id=${nodeId.replace(":", "-")}` : void 0;
24
+ const tokenStatus = sb.tokensReady === true ? "assigned" : void 0;
25
+ const statusRaw = typeof sb.status === "string" ? sb.status : void 0;
26
+ const readiness = statusRaw === "complete" || statusRaw === "ready-for-dev" || statusRaw === "in-progress" || statusRaw === "backlog" ? statusRaw : void 0;
27
+ return {
28
+ nodeId,
29
+ displayName: String(b.displayName ?? e.nodeName ?? ""),
30
+ description: sb.description ? String(sb.description) : void 0,
31
+ figmaUrl,
32
+ designEmbed: sb.designEmbed === true,
33
+ compositionJson: sb.compositionJson === true,
34
+ metadata: sb.metadata === true,
35
+ meta: {
36
+ ...tokenStatus ? { tokenStatus } : {},
37
+ ...readiness ? { readiness } : {}
38
+ }
39
+ };
40
+ });
41
+ return {
42
+ version: 1,
43
+ figmaFileKey: fileKey,
44
+ figmaFileName: fileName,
45
+ entries
46
+ };
47
+ }
48
+ export {
49
+ ADDON_ID,
50
+ PANEL_ID,
51
+ PARAM_KEY,
52
+ fromDiffCodeConnect
53
+ };
package/dist/manager.js CHANGED
@@ -1,13 +1,325 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ // src/manager.tsx
2
2
  import { addons, types } from "@storybook/manager-api";
3
- import { AddonPanel } from "@storybook/components";
4
- import { ADDON_ID, PANEL_ID } from "./constants";
5
- import { SxlPanel } from "./components/SxlPanel";
6
- addons.register(ADDON_ID, () => {
3
+
4
+ // src/constants.ts
5
+ var ADDON_ID = "sxl-studio";
6
+ var PANEL_ID = `${ADDON_ID}/panel`;
7
+ var PARAM_KEY = "sxl";
8
+
9
+ // src/components/SxlPanel.tsx
10
+ import { useParameter } from "@storybook/manager-api";
11
+
12
+ // src/components/styles.ts
13
+ var FONT_STACK = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
14
+ var MONO_STACK = "'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace";
15
+ var container = {
16
+ padding: "16px",
17
+ fontFamily: FONT_STACK,
18
+ fontSize: "13px",
19
+ lineHeight: 1.5,
20
+ color: "var(--sxl-text, #333)",
21
+ overflow: "auto",
22
+ height: "100%"
23
+ };
24
+ var embedSection = {
25
+ marginBottom: "16px",
26
+ borderRadius: "8px",
27
+ overflow: "hidden",
28
+ border: "1px solid var(--sxl-border, #e6e6e6)",
29
+ display: "flex",
30
+ justifyContent: "center"
31
+ };
32
+ var iframe = {
33
+ width: "100%",
34
+ height: "420px",
35
+ border: "none"
36
+ };
37
+ var section = {
38
+ marginBottom: "12px",
39
+ padding: "12px",
40
+ borderRadius: "6px",
41
+ backgroundColor: "var(--sxl-section-bg, #fafafa)",
42
+ border: "1px solid var(--sxl-border, #eee)"
43
+ };
44
+ var sectionTitle = {
45
+ fontSize: "11px",
46
+ fontWeight: 600,
47
+ textTransform: "uppercase",
48
+ letterSpacing: "0.5px",
49
+ color: "var(--sxl-muted, #999)",
50
+ marginBottom: "8px"
51
+ };
52
+ var infoRow = {
53
+ display: "flex",
54
+ alignItems: "baseline",
55
+ gap: "8px",
56
+ marginBottom: "4px"
57
+ };
58
+ var infoLabel = {
59
+ fontSize: "12px",
60
+ fontWeight: 500,
61
+ color: "var(--sxl-label, #666)",
62
+ minWidth: "90px",
63
+ flexShrink: 0
64
+ };
65
+ var infoValue = {
66
+ fontSize: "13px",
67
+ color: "var(--sxl-text, #333)",
68
+ wordBreak: "break-word"
69
+ };
70
+ var mono = {
71
+ fontFamily: MONO_STACK,
72
+ fontSize: "12px"
73
+ };
74
+ var statusBadge = {
75
+ display: "inline-flex",
76
+ alignItems: "center",
77
+ gap: "6px",
78
+ fontSize: "12px",
79
+ fontWeight: 500
80
+ };
81
+ var statusDot = {
82
+ width: "8px",
83
+ height: "8px",
84
+ borderRadius: "50%",
85
+ display: "inline-block",
86
+ flexShrink: 0
87
+ };
88
+ var propsList = {
89
+ display: "flex",
90
+ flexWrap: "wrap",
91
+ gap: "4px"
92
+ };
93
+ var propBadge = {
94
+ fontSize: "11px",
95
+ fontFamily: MONO_STACK,
96
+ backgroundColor: "var(--sxl-badge-bg, #eef)",
97
+ color: "var(--sxl-badge-text, #336)",
98
+ padding: "2px 6px",
99
+ borderRadius: "4px"
100
+ };
101
+ var emptyState = {
102
+ textAlign: "center",
103
+ padding: "32px 16px"
104
+ };
105
+ var emptyTitle = {
106
+ fontSize: "14px",
107
+ fontWeight: 600,
108
+ color: "var(--sxl-muted, #666)",
109
+ marginBottom: "16px",
110
+ marginTop: 0
111
+ };
112
+ var emptyHint = {
113
+ fontSize: "12px",
114
+ color: "var(--sxl-muted, #999)",
115
+ marginBottom: "8px"
116
+ };
117
+ var code = {
118
+ fontFamily: MONO_STACK,
119
+ fontSize: "11px",
120
+ backgroundColor: "var(--sxl-code-bg, #f0f0f0)",
121
+ padding: "1px 4px",
122
+ borderRadius: "3px"
123
+ };
124
+ var codeBlock = {
125
+ fontFamily: MONO_STACK,
126
+ fontSize: "11px",
127
+ backgroundColor: "var(--sxl-code-bg, #f5f5f5)",
128
+ border: "1px solid var(--sxl-border, #e6e6e6)",
129
+ borderRadius: "6px",
130
+ padding: "12px",
131
+ textAlign: "left",
132
+ overflow: "auto",
133
+ marginBottom: "12px",
134
+ lineHeight: 1.6,
135
+ whiteSpace: "pre"
136
+ };
137
+ var figmaLink = {
138
+ fontSize: "11px",
139
+ color: "var(--sxl-link, #18a0fb)",
140
+ textDecoration: "none"
141
+ };
142
+
143
+ // src/components/SxlPanel.tsx
144
+ import { jsx, jsxs } from "react/jsx-runtime";
145
+ var TOKEN_STATUS_MAP = {
146
+ assigned: { label: "Assigned", color: "#1bc47d" },
147
+ partial: { label: "Partial", color: "#f5a623" },
148
+ none: { label: "None", color: "#b0b0b0" }
149
+ };
150
+ var READINESS_MAP = {
151
+ "complete": { label: "Complete", color: "#1bc47d" },
152
+ "ready-for-dev": { label: "Ready for Dev", color: "#18a0fb" },
153
+ "in-progress": { label: "In Progress", color: "#f5a623" },
154
+ "backlog": { label: "Backlog", color: "#b0b0b0" }
155
+ };
156
+ function resolveEntry(params) {
157
+ if (!params) return null;
158
+ const registry = params.registry;
159
+ if (params.figmaUrl || params.description) {
160
+ return {
161
+ nodeId: params.figmaNodeId ?? "",
162
+ displayName: params.component ?? "",
163
+ description: params.description,
164
+ figmaUrl: params.figmaUrl,
165
+ designEmbed: !!params.figmaUrl,
166
+ metadata: !!params.description,
167
+ meta: {
168
+ tokenStatus: params.tokenStatus,
169
+ readiness: params.readiness
170
+ }
171
+ };
172
+ }
173
+ if (!registry?.entries?.length) return null;
174
+ let found;
175
+ if (params.figmaNodeId) {
176
+ found = registry.entries.find((e) => e.nodeId === params.figmaNodeId);
177
+ }
178
+ if (!found && params.component) {
179
+ const name = params.component.toLowerCase();
180
+ found = registry.entries.find((e) => e.displayName.toLowerCase() === name);
181
+ }
182
+ if (!found) return null;
183
+ return {
184
+ ...found,
185
+ meta: {
186
+ ...found.meta,
187
+ tokenStatus: params.tokenStatus ?? found.meta?.tokenStatus,
188
+ readiness: params.readiness ?? found.meta?.readiness
189
+ },
190
+ description: params.description ?? found.description
191
+ };
192
+ }
193
+ function buildEmbedUrl(figmaUrl) {
194
+ if (figmaUrl.includes("figma.com/embed")) return figmaUrl;
195
+ return `https://www.figma.com/embed?embed_host=storybook&url=${encodeURIComponent(figmaUrl)}`;
196
+ }
197
+ function buildDesignUrl(figmaUrl) {
198
+ if (figmaUrl.includes("figma.com/embed")) {
199
+ try {
200
+ const u = new URL(figmaUrl);
201
+ return u.searchParams.get("url") ?? figmaUrl;
202
+ } catch {
203
+ return figmaUrl;
204
+ }
205
+ }
206
+ return figmaUrl;
207
+ }
208
+ var EmptyState = () => /* @__PURE__ */ jsx("div", { style: container, children: /* @__PURE__ */ jsxs("div", { style: emptyState, children: [
209
+ /* @__PURE__ */ jsx("p", { style: emptyTitle, children: "No SXL data for this story" }),
210
+ /* @__PURE__ */ jsxs("p", { style: emptyHint, children: [
211
+ "Import the registry in\xA0",
212
+ /* @__PURE__ */ jsx("code", { style: code, children: ".storybook/preview.ts" }),
213
+ ":"
214
+ ] }),
215
+ /* @__PURE__ */ jsx("pre", { style: codeBlock, children: `import registry from '../sxl-codeconnect.json';
216
+
217
+ export default {
218
+ parameters: {
219
+ sxl: { registry },
220
+ },
221
+ };` }),
222
+ /* @__PURE__ */ jsx("p", { style: emptyHint, children: "Then match a story to a Figma component:" }),
223
+ /* @__PURE__ */ jsx("pre", { style: codeBlock, children: `export const Default = {
224
+ parameters: {
225
+ sxl: { component: 'ButtonPrimary' },
226
+ },
227
+ };` })
228
+ ] }) });
229
+ var StatusRow = ({
230
+ label,
231
+ status,
232
+ color
233
+ }) => /* @__PURE__ */ jsxs("div", { style: infoRow, children: [
234
+ /* @__PURE__ */ jsx("span", { style: infoLabel, children: label }),
235
+ /* @__PURE__ */ jsxs("span", { style: statusBadge, children: [
236
+ /* @__PURE__ */ jsx("span", { style: { ...statusDot, backgroundColor: color } }),
237
+ status
238
+ ] })
239
+ ] });
240
+ var SxlPanel = () => {
241
+ const params = useParameter(PARAM_KEY);
242
+ const entry = resolveEntry(params);
243
+ if (!entry) return /* @__PURE__ */ jsx(EmptyState, {});
244
+ const tokenStatus = entry.meta?.tokenStatus;
245
+ const readiness = entry.meta?.readiness;
246
+ const tokenInfo = tokenStatus ? TOKEN_STATUS_MAP[tokenStatus] : null;
247
+ const readinessInfo = readiness ? READINESS_MAP[readiness] : null;
248
+ const hasProps = !!entry.meta?.componentProperties?.length;
249
+ const hasStatus = !!(tokenInfo || readinessInfo);
250
+ return /* @__PURE__ */ jsxs("div", { style: container, children: [
251
+ entry.figmaUrl && entry.designEmbed !== false && /* @__PURE__ */ jsx("div", { style: embedSection, children: /* @__PURE__ */ jsx(
252
+ "iframe",
253
+ {
254
+ title: "Figma Design",
255
+ src: buildEmbedUrl(entry.figmaUrl),
256
+ style: iframe,
257
+ allowFullScreen: true
258
+ }
259
+ ) }),
260
+ (entry.displayName || entry.description || entry.nodeId) && /* @__PURE__ */ jsxs("div", { style: section, children: [
261
+ /* @__PURE__ */ jsx("div", { style: sectionTitle, children: "Component" }),
262
+ entry.displayName && /* @__PURE__ */ jsxs("div", { style: infoRow, children: [
263
+ /* @__PURE__ */ jsx("span", { style: infoLabel, children: "Name" }),
264
+ /* @__PURE__ */ jsx("span", { style: infoValue, children: entry.displayName })
265
+ ] }),
266
+ entry.description && /* @__PURE__ */ jsxs("div", { style: infoRow, children: [
267
+ /* @__PURE__ */ jsx("span", { style: infoLabel, children: "Description" }),
268
+ /* @__PURE__ */ jsx("span", { style: infoValue, children: entry.description })
269
+ ] }),
270
+ entry.nodeId && /* @__PURE__ */ jsxs("div", { style: infoRow, children: [
271
+ /* @__PURE__ */ jsx("span", { style: infoLabel, children: "Node ID" }),
272
+ /* @__PURE__ */ jsx("span", { style: { ...infoValue, ...mono }, children: entry.nodeId })
273
+ ] }),
274
+ entry.figmaUrl && /* @__PURE__ */ jsxs("div", { style: infoRow, children: [
275
+ /* @__PURE__ */ jsx("span", { style: infoLabel, children: "Figma" }),
276
+ /* @__PURE__ */ jsx(
277
+ "a",
278
+ {
279
+ href: buildDesignUrl(entry.figmaUrl),
280
+ target: "_blank",
281
+ rel: "noopener noreferrer",
282
+ style: figmaLink,
283
+ children: "Open in Figma \u2197"
284
+ }
285
+ )
286
+ ] })
287
+ ] }),
288
+ hasProps && /* @__PURE__ */ jsxs("div", { style: section, children: [
289
+ /* @__PURE__ */ jsx("div", { style: sectionTitle, children: "Contract" }),
290
+ /* @__PURE__ */ jsxs("div", { style: infoRow, children: [
291
+ /* @__PURE__ */ jsx("span", { style: infoLabel, children: "Properties" }),
292
+ /* @__PURE__ */ jsx("span", { style: propsList, children: entry.meta.componentProperties.map((p) => /* @__PURE__ */ jsx("span", { style: propBadge, children: p }, p)) })
293
+ ] }),
294
+ entry.meta.variantCount != null && /* @__PURE__ */ jsxs("div", { style: infoRow, children: [
295
+ /* @__PURE__ */ jsx("span", { style: infoLabel, children: "Variants" }),
296
+ /* @__PURE__ */ jsx("span", { style: infoValue, children: entry.meta.variantCount })
297
+ ] })
298
+ ] }),
299
+ hasStatus && /* @__PURE__ */ jsxs("div", { style: section, children: [
300
+ /* @__PURE__ */ jsx("div", { style: sectionTitle, children: "Status" }),
301
+ tokenInfo && /* @__PURE__ */ jsx(StatusRow, { label: "Tokens", status: tokenInfo.label, color: tokenInfo.color }),
302
+ readinessInfo && /* @__PURE__ */ jsx(StatusRow, { label: "Readiness", status: readinessInfo.label, color: readinessInfo.color })
303
+ ] })
304
+ ] });
305
+ };
306
+
307
+ // src/manager.tsx
308
+ import { jsx as jsx2 } from "react/jsx-runtime";
309
+ var REGISTRY_GUARD_KEY = "__sxlStudioAddonRegistered__";
310
+ if (!globalThis[REGISTRY_GUARD_KEY]) {
311
+ globalThis[REGISTRY_GUARD_KEY] = true;
312
+ console.info("[SXL Storybook Addon] register manager addon");
313
+ addons.register(ADDON_ID, () => {
7
314
  addons.add(PANEL_ID, {
8
- type: types.PANEL,
9
- title: "SXL Studio",
10
- render: ({ active }) => (_jsx(AddonPanel, { active: active ?? false, children: _jsx(SxlPanel, {}) })),
315
+ type: types.PANEL,
316
+ title: "SXL Studio",
317
+ render: ({ active }) => {
318
+ if (!active) return null;
319
+ return /* @__PURE__ */ jsx2(SxlPanel, {});
320
+ }
11
321
  });
12
- });
13
- //# sourceMappingURL=manager.js.map
322
+ });
323
+ } else {
324
+ console.warn("[SXL Storybook Addon] skip duplicate manager registration");
325
+ }
package/dist/preset.js CHANGED
@@ -1,7 +1,10 @@
1
- import { dirname, join } from "node:path";
2
- import { fileURLToPath } from "node:url";
3
- const dir = dirname(fileURLToPath(import.meta.url));
4
- export function managerEntries(entry = []) {
5
- return [...entry, join(dir, "manager.js")];
1
+ // src/preset.ts
2
+ import { dirname, join } from "path";
3
+ import { fileURLToPath } from "url";
4
+ var dir = dirname(fileURLToPath(import.meta.url));
5
+ function managerEntries(entry = []) {
6
+ return [...entry, join(dir, "manager.js")];
6
7
  }
7
- //# sourceMappingURL=preset.js.map
8
+ export {
9
+ managerEntries
10
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sxl-studio/storybook-addon",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "Storybook addon for SXL Studio — displays Figma Embed, component info and design token status for linked components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -21,8 +21,8 @@
21
21
  "access": "public"
22
22
  },
23
23
  "scripts": {
24
- "build": "tsc",
25
- "dev": "tsc --watch",
24
+ "build": "tsup",
25
+ "dev": "tsup --watch",
26
26
  "lint": "tsc --noEmit",
27
27
  "prepublishOnly": "npm run build"
28
28
  },
@@ -47,6 +47,7 @@
47
47
  "@types/react": "^18.0.0",
48
48
  "react": "^18.0.0",
49
49
  "storybook": "^8.0.0",
50
+ "tsup": "^8.5.1",
50
51
  "typescript": "^5.7.0"
51
52
  },
52
53
  "storybook": {
@@ -56,7 +57,6 @@
56
57
  "angular",
57
58
  "web-components",
58
59
  "svelte"
59
- ],
60
- "addons": true
60
+ ]
61
61
  }
62
62
  }
@@ -1,3 +0,0 @@
1
- import React from "react";
2
- export declare const SxlPanel: React.FC;
3
- //# sourceMappingURL=SxlPanel.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SxlPanel.d.ts","sourceRoot":"","sources":["../../src/components/SxlPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuI1B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EA0G5B,CAAC"}
@@ -1,102 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useParameter } from "@storybook/manager-api";
3
- import { PARAM_KEY } from "../constants";
4
- import * as S from "./styles";
5
- // ── Lookup helpers ──────────────────────────────────────────────
6
- const TOKEN_STATUS_MAP = {
7
- assigned: { label: "Assigned", color: "#1bc47d" },
8
- partial: { label: "Partial", color: "#f5a623" },
9
- none: { label: "None", color: "#b0b0b0" },
10
- };
11
- const READINESS_MAP = {
12
- "complete": { label: "Complete", color: "#1bc47d" },
13
- "ready-for-dev": { label: "Ready for Dev", color: "#18a0fb" },
14
- "in-progress": { label: "In Progress", color: "#f5a623" },
15
- "backlog": { label: "Backlog", color: "#b0b0b0" },
16
- };
17
- // ── Entry resolution ────────────────────────────────────────────
18
- function resolveEntry(params) {
19
- if (!params)
20
- return null;
21
- const registry = params.registry;
22
- if (params.figmaUrl || params.description) {
23
- return {
24
- nodeId: params.figmaNodeId ?? "",
25
- displayName: params.component ?? "",
26
- description: params.description,
27
- figmaUrl: params.figmaUrl,
28
- designEmbed: !!params.figmaUrl,
29
- metadata: !!params.description,
30
- meta: {
31
- tokenStatus: params.tokenStatus,
32
- readiness: params.readiness,
33
- },
34
- };
35
- }
36
- if (!registry?.entries?.length)
37
- return null;
38
- let found;
39
- if (params.figmaNodeId) {
40
- found = registry.entries.find((e) => e.nodeId === params.figmaNodeId);
41
- }
42
- if (!found && params.component) {
43
- const name = params.component.toLowerCase();
44
- found = registry.entries.find((e) => e.displayName.toLowerCase() === name);
45
- }
46
- if (!found)
47
- return null;
48
- return {
49
- ...found,
50
- meta: {
51
- ...found.meta,
52
- tokenStatus: params.tokenStatus ?? found.meta?.tokenStatus,
53
- readiness: params.readiness ?? found.meta?.readiness,
54
- },
55
- description: params.description ?? found.description,
56
- };
57
- }
58
- function buildEmbedUrl(figmaUrl) {
59
- if (figmaUrl.includes("figma.com/embed"))
60
- return figmaUrl;
61
- return `https://www.figma.com/embed?embed_host=storybook&url=${encodeURIComponent(figmaUrl)}`;
62
- }
63
- function buildDesignUrl(figmaUrl) {
64
- if (figmaUrl.includes("figma.com/embed")) {
65
- try {
66
- const u = new URL(figmaUrl);
67
- return u.searchParams.get("url") ?? figmaUrl;
68
- }
69
- catch {
70
- return figmaUrl;
71
- }
72
- }
73
- return figmaUrl;
74
- }
75
- // ── Sub-components ──────────────────────────────────────────────
76
- const EmptyState = () => (_jsx("div", { style: S.container, children: _jsxs("div", { style: S.emptyState, children: [_jsx("p", { style: S.emptyTitle, children: "No SXL data for this story" }), _jsxs("p", { style: S.emptyHint, children: ["Import the registry in\u00A0", _jsx("code", { style: S.code, children: ".storybook/preview.ts" }), ":"] }), _jsx("pre", { style: S.codeBlock, children: `import registry from '../sxl-codeconnect.json';
77
-
78
- export default {
79
- parameters: {
80
- sxl: { registry },
81
- },
82
- };` }), _jsx("p", { style: S.emptyHint, children: "Then match a story to a Figma component:" }), _jsx("pre", { style: S.codeBlock, children: `export const Default = {
83
- parameters: {
84
- sxl: { component: 'ButtonPrimary' },
85
- },
86
- };` })] }) }));
87
- const StatusRow = ({ label, status, color, }) => (_jsxs("div", { style: S.infoRow, children: [_jsx("span", { style: S.infoLabel, children: label }), _jsxs("span", { style: S.statusBadge, children: [_jsx("span", { style: { ...S.statusDot, backgroundColor: color } }), status] })] }));
88
- // ── Main panel ──────────────────────────────────────────────────
89
- export const SxlPanel = () => {
90
- const params = useParameter(PARAM_KEY);
91
- const entry = resolveEntry(params);
92
- if (!entry)
93
- return _jsx(EmptyState, {});
94
- const tokenStatus = entry.meta?.tokenStatus;
95
- const readiness = entry.meta?.readiness;
96
- const tokenInfo = tokenStatus ? TOKEN_STATUS_MAP[tokenStatus] : null;
97
- const readinessInfo = readiness ? READINESS_MAP[readiness] : null;
98
- const hasProps = !!entry.meta?.componentProperties?.length;
99
- const hasStatus = !!(tokenInfo || readinessInfo);
100
- return (_jsxs("div", { style: S.container, children: [entry.figmaUrl && entry.designEmbed !== false && (_jsx("div", { style: S.embedSection, children: _jsx("iframe", { title: "Figma Design", src: buildEmbedUrl(entry.figmaUrl), style: S.iframe, allowFullScreen: true }) })), (entry.displayName || entry.description || entry.nodeId) && (_jsxs("div", { style: S.section, children: [_jsx("div", { style: S.sectionTitle, children: "Component" }), entry.displayName && (_jsxs("div", { style: S.infoRow, children: [_jsx("span", { style: S.infoLabel, children: "Name" }), _jsx("span", { style: S.infoValue, children: entry.displayName })] })), entry.description && (_jsxs("div", { style: S.infoRow, children: [_jsx("span", { style: S.infoLabel, children: "Description" }), _jsx("span", { style: S.infoValue, children: entry.description })] })), entry.nodeId && (_jsxs("div", { style: S.infoRow, children: [_jsx("span", { style: S.infoLabel, children: "Node ID" }), _jsx("span", { style: { ...S.infoValue, ...S.mono }, children: entry.nodeId })] })), entry.figmaUrl && (_jsxs("div", { style: S.infoRow, children: [_jsx("span", { style: S.infoLabel, children: "Figma" }), _jsx("a", { href: buildDesignUrl(entry.figmaUrl), target: "_blank", rel: "noopener noreferrer", style: S.figmaLink, children: "Open in Figma \u2197" })] }))] })), hasProps && (_jsxs("div", { style: S.section, children: [_jsx("div", { style: S.sectionTitle, children: "Contract" }), _jsxs("div", { style: S.infoRow, children: [_jsx("span", { style: S.infoLabel, children: "Properties" }), _jsx("span", { style: S.propsList, children: entry.meta.componentProperties.map((p) => (_jsx("span", { style: S.propBadge, children: p }, p))) })] }), entry.meta.variantCount != null && (_jsxs("div", { style: S.infoRow, children: [_jsx("span", { style: S.infoLabel, children: "Variants" }), _jsx("span", { style: S.infoValue, children: entry.meta.variantCount })] }))] })), hasStatus && (_jsxs("div", { style: S.section, children: [_jsx("div", { style: S.sectionTitle, children: "Status" }), tokenInfo && (_jsx(StatusRow, { label: "Tokens", status: tokenInfo.label, color: tokenInfo.color })), readinessInfo && (_jsx(StatusRow, { label: "Readiness", status: readinessInfo.label, color: readinessInfo.color }))] }))] }));
101
- };
102
- //# sourceMappingURL=SxlPanel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SxlPanel.js","sourceRoot":"","sources":["../../src/components/SxlPanel.tsx"],"names":[],"mappings":"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"}
@@ -1,21 +0,0 @@
1
- import type { CSSProperties } from "react";
2
- export declare const container: CSSProperties;
3
- export declare const embedSection: CSSProperties;
4
- export declare const iframe: CSSProperties;
5
- export declare const section: CSSProperties;
6
- export declare const sectionTitle: CSSProperties;
7
- export declare const infoRow: CSSProperties;
8
- export declare const infoLabel: CSSProperties;
9
- export declare const infoValue: CSSProperties;
10
- export declare const mono: CSSProperties;
11
- export declare const statusBadge: CSSProperties;
12
- export declare const statusDot: CSSProperties;
13
- export declare const propsList: CSSProperties;
14
- export declare const propBadge: CSSProperties;
15
- export declare const emptyState: CSSProperties;
16
- export declare const emptyTitle: CSSProperties;
17
- export declare const emptyHint: CSSProperties;
18
- export declare const code: CSSProperties;
19
- export declare const codeBlock: CSSProperties;
20
- export declare const figmaLink: CSSProperties;
21
- //# sourceMappingURL=styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/components/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAM3C,eAAO,MAAM,SAAS,EAAE,aAQvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,aAO1B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,aAIpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,aAMrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,aAO1B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,aAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAMvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAIvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,aAGlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,aAMzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAMvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAIvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAOvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,aAGxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,aAMxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAIvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,aAMlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAYvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAIvB,CAAC"}
@@ -1,130 +0,0 @@
1
- const FONT_STACK = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
2
- const MONO_STACK = "'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace";
3
- export const container = {
4
- padding: "16px",
5
- fontFamily: FONT_STACK,
6
- fontSize: "13px",
7
- lineHeight: 1.5,
8
- color: "var(--sxl-text, #333)",
9
- overflow: "auto",
10
- height: "100%",
11
- };
12
- export const embedSection = {
13
- marginBottom: "16px",
14
- borderRadius: "8px",
15
- overflow: "hidden",
16
- border: "1px solid var(--sxl-border, #e6e6e6)",
17
- display: "flex",
18
- justifyContent: "center",
19
- };
20
- export const iframe = {
21
- width: "100%",
22
- height: "420px",
23
- border: "none",
24
- };
25
- export const section = {
26
- marginBottom: "12px",
27
- padding: "12px",
28
- borderRadius: "6px",
29
- backgroundColor: "var(--sxl-section-bg, #fafafa)",
30
- border: "1px solid var(--sxl-border, #eee)",
31
- };
32
- export const sectionTitle = {
33
- fontSize: "11px",
34
- fontWeight: 600,
35
- textTransform: "uppercase",
36
- letterSpacing: "0.5px",
37
- color: "var(--sxl-muted, #999)",
38
- marginBottom: "8px",
39
- };
40
- export const infoRow = {
41
- display: "flex",
42
- alignItems: "baseline",
43
- gap: "8px",
44
- marginBottom: "4px",
45
- };
46
- export const infoLabel = {
47
- fontSize: "12px",
48
- fontWeight: 500,
49
- color: "var(--sxl-label, #666)",
50
- minWidth: "90px",
51
- flexShrink: 0,
52
- };
53
- export const infoValue = {
54
- fontSize: "13px",
55
- color: "var(--sxl-text, #333)",
56
- wordBreak: "break-word",
57
- };
58
- export const mono = {
59
- fontFamily: MONO_STACK,
60
- fontSize: "12px",
61
- };
62
- export const statusBadge = {
63
- display: "inline-flex",
64
- alignItems: "center",
65
- gap: "6px",
66
- fontSize: "12px",
67
- fontWeight: 500,
68
- };
69
- export const statusDot = {
70
- width: "8px",
71
- height: "8px",
72
- borderRadius: "50%",
73
- display: "inline-block",
74
- flexShrink: 0,
75
- };
76
- export const propsList = {
77
- display: "flex",
78
- flexWrap: "wrap",
79
- gap: "4px",
80
- };
81
- export const propBadge = {
82
- fontSize: "11px",
83
- fontFamily: MONO_STACK,
84
- backgroundColor: "var(--sxl-badge-bg, #eef)",
85
- color: "var(--sxl-badge-text, #336)",
86
- padding: "2px 6px",
87
- borderRadius: "4px",
88
- };
89
- export const emptyState = {
90
- textAlign: "center",
91
- padding: "32px 16px",
92
- };
93
- export const emptyTitle = {
94
- fontSize: "14px",
95
- fontWeight: 600,
96
- color: "var(--sxl-muted, #666)",
97
- marginBottom: "16px",
98
- marginTop: 0,
99
- };
100
- export const emptyHint = {
101
- fontSize: "12px",
102
- color: "var(--sxl-muted, #999)",
103
- marginBottom: "8px",
104
- };
105
- export const code = {
106
- fontFamily: MONO_STACK,
107
- fontSize: "11px",
108
- backgroundColor: "var(--sxl-code-bg, #f0f0f0)",
109
- padding: "1px 4px",
110
- borderRadius: "3px",
111
- };
112
- export const codeBlock = {
113
- fontFamily: MONO_STACK,
114
- fontSize: "11px",
115
- backgroundColor: "var(--sxl-code-bg, #f5f5f5)",
116
- border: "1px solid var(--sxl-border, #e6e6e6)",
117
- borderRadius: "6px",
118
- padding: "12px",
119
- textAlign: "left",
120
- overflow: "auto",
121
- marginBottom: "12px",
122
- lineHeight: 1.6,
123
- whiteSpace: "pre",
124
- };
125
- export const figmaLink = {
126
- fontSize: "11px",
127
- color: "var(--sxl-link, #18a0fb)",
128
- textDecoration: "none",
129
- };
130
- //# sourceMappingURL=styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/components/styles.ts"],"names":[],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- export declare const ADDON_ID: "sxl-studio";
2
- export declare const PANEL_ID: "sxl-studio/panel";
3
- export declare const PARAM_KEY: "sxl";
4
- //# sourceMappingURL=constants.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,EAAG,YAAqB,CAAC;AAC9C,eAAO,MAAM,QAAQ,oBAA+B,CAAC;AACrD,eAAO,MAAM,SAAS,EAAG,KAAc,CAAC"}
package/dist/constants.js DELETED
@@ -1,4 +0,0 @@
1
- export const ADDON_ID = "sxl-studio";
2
- export const PANEL_ID = `${ADDON_ID}/panel`;
3
- export const PARAM_KEY = "sxl";
4
- //# sourceMappingURL=constants.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,YAAqB,CAAC;AAC9C,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,QAAQ,QAAiB,CAAC;AACrD,MAAM,CAAC,MAAM,SAAS,GAAG,KAAc,CAAC"}
package/dist/convert.d.ts DELETED
@@ -1,16 +0,0 @@
1
- import type { SxlRegistry } from "./types";
2
- /**
3
- * Converts the plugin's `diff-code-connect.<fileKey>.json` to the addon registry format.
4
- *
5
- * Usage in `.storybook/preview.ts`:
6
- * ```ts
7
- * import raw from '../diff-code-connect.abc123.json';
8
- * import { fromDiffCodeConnect } from '@sxl-studio/storybook-addon';
9
- *
10
- * export default {
11
- * parameters: { sxl: { registry: fromDiffCodeConnect(raw) } },
12
- * };
13
- * ```
14
- */
15
- export declare function fromDiffCodeConnect(data: unknown): SxlRegistry;
16
- //# sourceMappingURL=convert.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"convert.d.ts","sourceRoot":"","sources":["../src/convert.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAoB,MAAM,SAAS,CAAC;AAE7D;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,OAAO,GAAG,WAAW,CAqD9D"}
package/dist/convert.js DELETED
@@ -1,61 +0,0 @@
1
- /**
2
- * Converts the plugin's `diff-code-connect.<fileKey>.json` to the addon registry format.
3
- *
4
- * Usage in `.storybook/preview.ts`:
5
- * ```ts
6
- * import raw from '../diff-code-connect.abc123.json';
7
- * import { fromDiffCodeConnect } from '@sxl-studio/storybook-addon';
8
- *
9
- * export default {
10
- * parameters: { sxl: { registry: fromDiffCodeConnect(raw) } },
11
- * };
12
- * ```
13
- */
14
- export function fromDiffCodeConnect(data) {
15
- if (!data || typeof data !== "object") {
16
- return { version: 1, figmaFileKey: "", entries: [] };
17
- }
18
- const d = data;
19
- const fileKey = typeof d.$figmaFileKey === "string" ? d.$figmaFileKey : "";
20
- const fileName = typeof d.$figmaFileName === "string" ? d.$figmaFileName : undefined;
21
- const rawEntries = Array.isArray(d.entries) ? d.entries : [];
22
- const entries = rawEntries
23
- .filter((e) => {
24
- if (!e || typeof e !== "object")
25
- return false;
26
- const o = e;
27
- return o.linked === true && !!o.binding;
28
- })
29
- .map((e) => {
30
- const b = e.binding;
31
- const sb = (b.storybook ?? {});
32
- const nodeId = String(e.nodeId ?? "");
33
- const figmaUrl = fileKey
34
- ? `https://www.figma.com/design/${fileKey}?node-id=${nodeId.replace(":", "-")}`
35
- : undefined;
36
- const tokenStatus = sb.tokensReady === true ? "assigned" : undefined;
37
- const statusRaw = typeof sb.status === "string" ? sb.status : undefined;
38
- const readiness = (statusRaw === "complete" || statusRaw === "ready-for-dev" ||
39
- statusRaw === "in-progress" || statusRaw === "backlog") ? statusRaw : undefined;
40
- return {
41
- nodeId,
42
- displayName: String(b.displayName ?? e.nodeName ?? ""),
43
- description: sb.description ? String(sb.description) : undefined,
44
- figmaUrl,
45
- designEmbed: sb.designEmbed === true,
46
- compositionJson: sb.compositionJson === true,
47
- metadata: sb.metadata === true,
48
- meta: {
49
- ...(tokenStatus ? { tokenStatus } : {}),
50
- ...(readiness ? { readiness } : {}),
51
- },
52
- };
53
- });
54
- return {
55
- version: 1,
56
- figmaFileKey: fileKey,
57
- figmaFileName: fileName,
58
- entries,
59
- };
60
- }
61
- //# sourceMappingURL=convert.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"convert.js","sourceRoot":"","sources":["../src/convert.ts"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE5D,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,YAAY,GACb,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC"}
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAW5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC"}
package/dist/manager.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=manager.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"manager.d.ts","sourceRoot":"","sources":["../src/manager.tsx"],"names":[],"mappings":""}
@@ -1 +0,0 @@
1
- {"version":3,"file":"manager.js","sourceRoot":"","sources":["../src/manager.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IAC7B,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE;QACnB,IAAI,EAAE,KAAK,CAAC,KAAK;QACjB,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACtB,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,IAAI,KAAK,YACjC,KAAC,QAAQ,KAAG,GACD,CACd;KACF,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
package/dist/preset.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export declare function managerEntries(entry?: string[]): string[];
2
- //# sourceMappingURL=preset.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../src/preset.ts"],"names":[],"mappings":"AAKA,wBAAgB,cAAc,CAAC,KAAK,GAAE,MAAM,EAAO,GAAG,MAAM,EAAE,CAE7D"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"preset.js","sourceRoot":"","sources":["../src/preset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,GAAG,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAEpD,MAAM,UAAU,cAAc,CAAC,QAAkB,EAAE;IACjD,OAAO,CAAC,GAAG,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC;AAC7C,CAAC"}
package/dist/types.d.ts DELETED
@@ -1,55 +0,0 @@
1
- /** Token assignment status on the Figma component. */
2
- export type SxlTokenStatus = "assigned" | "partial" | "none";
3
- /** Design readiness stage. */
4
- export type SxlReadiness = "complete" | "ready-for-dev" | "in-progress" | "backlog";
5
- /** Extended metadata for a single Figma component (exported by the plugin). */
6
- export type SxlRegistryMeta = {
7
- variantCount?: number;
8
- componentProperties?: string[];
9
- tokenStatus?: SxlTokenStatus;
10
- readiness?: SxlReadiness;
11
- };
12
- /** One component entry inside the registry. */
13
- export type SxlRegistryEntry = {
14
- nodeId: string;
15
- displayName: string;
16
- description?: string;
17
- /** Direct Figma design URL (not embed). */
18
- figmaUrl?: string;
19
- designEmbed?: boolean;
20
- compositionJson?: boolean;
21
- metadata?: boolean;
22
- meta?: SxlRegistryMeta;
23
- };
24
- /**
25
- * Root registry object — typically imported from `sxl-codeconnect.json`
26
- * or generated via `fromDiffCodeConnect()`.
27
- */
28
- export type SxlRegistry = {
29
- version: number;
30
- figmaFileKey: string;
31
- figmaFileName?: string;
32
- updatedAt?: string;
33
- entries: SxlRegistryEntry[];
34
- };
35
- /**
36
- * Shape of `parameters.sxl` that the addon reads from each story.
37
- * Can be set globally in `preview.ts` or per-story.
38
- */
39
- export type SxlStoryParameters = {
40
- /** Explicit match by display name from the registry. */
41
- component?: string;
42
- /** Explicit match by Figma node ID. */
43
- figmaNodeId?: string;
44
- /** Direct Figma design URL (overrides registry lookup). */
45
- figmaUrl?: string;
46
- /** Direct description (overrides registry). */
47
- description?: string;
48
- /** Override token status per-story. */
49
- tokenStatus?: SxlTokenStatus;
50
- /** Override readiness per-story. */
51
- readiness?: SxlReadiness;
52
- /** Registry data (typically set globally in preview.ts). */
53
- registry?: SxlRegistry;
54
- };
55
- //# sourceMappingURL=types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAE7D,8BAA8B;AAC9B,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,eAAe,GAAG,aAAa,GAAG,SAAS,CAAC;AAEpF,+EAA+E;AAC/E,MAAM,MAAM,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B,CAAC;AAEF,+CAA+C;AAC/C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,oCAAoC;IACpC,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,WAAW,CAAC;CACxB,CAAC"}
package/dist/types.js DELETED
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=types.js.map
package/dist/types.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}