@sxl-studio/storybook-addon 1.0.2 → 1.0.3
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 +75 -4
- package/dist/index.js +53 -3
- package/dist/manager.js +312 -9
- package/dist/preset.js +9 -6
- package/package.json +5 -5
- package/dist/components/SxlPanel.d.ts +0 -3
- package/dist/components/SxlPanel.d.ts.map +0 -1
- package/dist/components/SxlPanel.js +0 -102
- package/dist/components/SxlPanel.js.map +0 -1
- package/dist/components/styles.d.ts +0 -21
- package/dist/components/styles.d.ts.map +0 -1
- package/dist/components/styles.js +0 -130
- package/dist/components/styles.js.map +0 -1
- package/dist/constants.d.ts +0 -4
- package/dist/constants.d.ts.map +0 -1
- package/dist/constants.js +0 -4
- package/dist/constants.js.map +0 -1
- package/dist/convert.d.ts +0 -16
- package/dist/convert.d.ts.map +0 -1
- package/dist/convert.js +0 -61
- package/dist/convert.js.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/manager.d.ts +0 -2
- package/dist/manager.d.ts.map +0 -1
- package/dist/manager.js.map +0 -1
- package/dist/preset.d.ts +0 -2
- package/dist/preset.d.ts.map +0 -1
- package/dist/preset.js.map +0 -1
- package/dist/types.d.ts +0 -55
- package/dist/types.d.ts.map +0 -1
- package/dist/types.js +0 -2
- package/dist/types.js.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,75 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
|
|
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,316 @@
|
|
|
1
|
-
|
|
1
|
+
// src/manager.tsx
|
|
2
2
|
import { addons, types } from "@storybook/manager-api";
|
|
3
3
|
import { AddonPanel } from "@storybook/components";
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
|
|
5
|
+
// src/constants.ts
|
|
6
|
+
var ADDON_ID = "sxl-studio";
|
|
7
|
+
var PANEL_ID = `${ADDON_ID}/panel`;
|
|
8
|
+
var PARAM_KEY = "sxl";
|
|
9
|
+
|
|
10
|
+
// src/components/SxlPanel.tsx
|
|
11
|
+
import { useParameter } from "@storybook/manager-api";
|
|
12
|
+
|
|
13
|
+
// src/components/styles.ts
|
|
14
|
+
var FONT_STACK = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
|
|
15
|
+
var MONO_STACK = "'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace";
|
|
16
|
+
var container = {
|
|
17
|
+
padding: "16px",
|
|
18
|
+
fontFamily: FONT_STACK,
|
|
19
|
+
fontSize: "13px",
|
|
20
|
+
lineHeight: 1.5,
|
|
21
|
+
color: "var(--sxl-text, #333)",
|
|
22
|
+
overflow: "auto",
|
|
23
|
+
height: "100%"
|
|
24
|
+
};
|
|
25
|
+
var embedSection = {
|
|
26
|
+
marginBottom: "16px",
|
|
27
|
+
borderRadius: "8px",
|
|
28
|
+
overflow: "hidden",
|
|
29
|
+
border: "1px solid var(--sxl-border, #e6e6e6)",
|
|
30
|
+
display: "flex",
|
|
31
|
+
justifyContent: "center"
|
|
32
|
+
};
|
|
33
|
+
var iframe = {
|
|
34
|
+
width: "100%",
|
|
35
|
+
height: "420px",
|
|
36
|
+
border: "none"
|
|
37
|
+
};
|
|
38
|
+
var section = {
|
|
39
|
+
marginBottom: "12px",
|
|
40
|
+
padding: "12px",
|
|
41
|
+
borderRadius: "6px",
|
|
42
|
+
backgroundColor: "var(--sxl-section-bg, #fafafa)",
|
|
43
|
+
border: "1px solid var(--sxl-border, #eee)"
|
|
44
|
+
};
|
|
45
|
+
var sectionTitle = {
|
|
46
|
+
fontSize: "11px",
|
|
47
|
+
fontWeight: 600,
|
|
48
|
+
textTransform: "uppercase",
|
|
49
|
+
letterSpacing: "0.5px",
|
|
50
|
+
color: "var(--sxl-muted, #999)",
|
|
51
|
+
marginBottom: "8px"
|
|
52
|
+
};
|
|
53
|
+
var infoRow = {
|
|
54
|
+
display: "flex",
|
|
55
|
+
alignItems: "baseline",
|
|
56
|
+
gap: "8px",
|
|
57
|
+
marginBottom: "4px"
|
|
58
|
+
};
|
|
59
|
+
var infoLabel = {
|
|
60
|
+
fontSize: "12px",
|
|
61
|
+
fontWeight: 500,
|
|
62
|
+
color: "var(--sxl-label, #666)",
|
|
63
|
+
minWidth: "90px",
|
|
64
|
+
flexShrink: 0
|
|
65
|
+
};
|
|
66
|
+
var infoValue = {
|
|
67
|
+
fontSize: "13px",
|
|
68
|
+
color: "var(--sxl-text, #333)",
|
|
69
|
+
wordBreak: "break-word"
|
|
70
|
+
};
|
|
71
|
+
var mono = {
|
|
72
|
+
fontFamily: MONO_STACK,
|
|
73
|
+
fontSize: "12px"
|
|
74
|
+
};
|
|
75
|
+
var statusBadge = {
|
|
76
|
+
display: "inline-flex",
|
|
77
|
+
alignItems: "center",
|
|
78
|
+
gap: "6px",
|
|
79
|
+
fontSize: "12px",
|
|
80
|
+
fontWeight: 500
|
|
81
|
+
};
|
|
82
|
+
var statusDot = {
|
|
83
|
+
width: "8px",
|
|
84
|
+
height: "8px",
|
|
85
|
+
borderRadius: "50%",
|
|
86
|
+
display: "inline-block",
|
|
87
|
+
flexShrink: 0
|
|
88
|
+
};
|
|
89
|
+
var propsList = {
|
|
90
|
+
display: "flex",
|
|
91
|
+
flexWrap: "wrap",
|
|
92
|
+
gap: "4px"
|
|
93
|
+
};
|
|
94
|
+
var propBadge = {
|
|
95
|
+
fontSize: "11px",
|
|
96
|
+
fontFamily: MONO_STACK,
|
|
97
|
+
backgroundColor: "var(--sxl-badge-bg, #eef)",
|
|
98
|
+
color: "var(--sxl-badge-text, #336)",
|
|
99
|
+
padding: "2px 6px",
|
|
100
|
+
borderRadius: "4px"
|
|
101
|
+
};
|
|
102
|
+
var emptyState = {
|
|
103
|
+
textAlign: "center",
|
|
104
|
+
padding: "32px 16px"
|
|
105
|
+
};
|
|
106
|
+
var emptyTitle = {
|
|
107
|
+
fontSize: "14px",
|
|
108
|
+
fontWeight: 600,
|
|
109
|
+
color: "var(--sxl-muted, #666)",
|
|
110
|
+
marginBottom: "16px",
|
|
111
|
+
marginTop: 0
|
|
112
|
+
};
|
|
113
|
+
var emptyHint = {
|
|
114
|
+
fontSize: "12px",
|
|
115
|
+
color: "var(--sxl-muted, #999)",
|
|
116
|
+
marginBottom: "8px"
|
|
117
|
+
};
|
|
118
|
+
var code = {
|
|
119
|
+
fontFamily: MONO_STACK,
|
|
120
|
+
fontSize: "11px",
|
|
121
|
+
backgroundColor: "var(--sxl-code-bg, #f0f0f0)",
|
|
122
|
+
padding: "1px 4px",
|
|
123
|
+
borderRadius: "3px"
|
|
124
|
+
};
|
|
125
|
+
var codeBlock = {
|
|
126
|
+
fontFamily: MONO_STACK,
|
|
127
|
+
fontSize: "11px",
|
|
128
|
+
backgroundColor: "var(--sxl-code-bg, #f5f5f5)",
|
|
129
|
+
border: "1px solid var(--sxl-border, #e6e6e6)",
|
|
130
|
+
borderRadius: "6px",
|
|
131
|
+
padding: "12px",
|
|
132
|
+
textAlign: "left",
|
|
133
|
+
overflow: "auto",
|
|
134
|
+
marginBottom: "12px",
|
|
135
|
+
lineHeight: 1.6,
|
|
136
|
+
whiteSpace: "pre"
|
|
137
|
+
};
|
|
138
|
+
var figmaLink = {
|
|
139
|
+
fontSize: "11px",
|
|
140
|
+
color: "var(--sxl-link, #18a0fb)",
|
|
141
|
+
textDecoration: "none"
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
// src/components/SxlPanel.tsx
|
|
145
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
146
|
+
var TOKEN_STATUS_MAP = {
|
|
147
|
+
assigned: { label: "Assigned", color: "#1bc47d" },
|
|
148
|
+
partial: { label: "Partial", color: "#f5a623" },
|
|
149
|
+
none: { label: "None", color: "#b0b0b0" }
|
|
150
|
+
};
|
|
151
|
+
var READINESS_MAP = {
|
|
152
|
+
"complete": { label: "Complete", color: "#1bc47d" },
|
|
153
|
+
"ready-for-dev": { label: "Ready for Dev", color: "#18a0fb" },
|
|
154
|
+
"in-progress": { label: "In Progress", color: "#f5a623" },
|
|
155
|
+
"backlog": { label: "Backlog", color: "#b0b0b0" }
|
|
156
|
+
};
|
|
157
|
+
function resolveEntry(params) {
|
|
158
|
+
if (!params) return null;
|
|
159
|
+
const registry = params.registry;
|
|
160
|
+
if (params.figmaUrl || params.description) {
|
|
161
|
+
return {
|
|
162
|
+
nodeId: params.figmaNodeId ?? "",
|
|
163
|
+
displayName: params.component ?? "",
|
|
164
|
+
description: params.description,
|
|
165
|
+
figmaUrl: params.figmaUrl,
|
|
166
|
+
designEmbed: !!params.figmaUrl,
|
|
167
|
+
metadata: !!params.description,
|
|
168
|
+
meta: {
|
|
169
|
+
tokenStatus: params.tokenStatus,
|
|
170
|
+
readiness: params.readiness
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
if (!registry?.entries?.length) return null;
|
|
175
|
+
let found;
|
|
176
|
+
if (params.figmaNodeId) {
|
|
177
|
+
found = registry.entries.find((e) => e.nodeId === params.figmaNodeId);
|
|
178
|
+
}
|
|
179
|
+
if (!found && params.component) {
|
|
180
|
+
const name = params.component.toLowerCase();
|
|
181
|
+
found = registry.entries.find((e) => e.displayName.toLowerCase() === name);
|
|
182
|
+
}
|
|
183
|
+
if (!found) return null;
|
|
184
|
+
return {
|
|
185
|
+
...found,
|
|
186
|
+
meta: {
|
|
187
|
+
...found.meta,
|
|
188
|
+
tokenStatus: params.tokenStatus ?? found.meta?.tokenStatus,
|
|
189
|
+
readiness: params.readiness ?? found.meta?.readiness
|
|
190
|
+
},
|
|
191
|
+
description: params.description ?? found.description
|
|
192
|
+
};
|
|
193
|
+
}
|
|
194
|
+
function buildEmbedUrl(figmaUrl) {
|
|
195
|
+
if (figmaUrl.includes("figma.com/embed")) return figmaUrl;
|
|
196
|
+
return `https://www.figma.com/embed?embed_host=storybook&url=${encodeURIComponent(figmaUrl)}`;
|
|
197
|
+
}
|
|
198
|
+
function buildDesignUrl(figmaUrl) {
|
|
199
|
+
if (figmaUrl.includes("figma.com/embed")) {
|
|
200
|
+
try {
|
|
201
|
+
const u = new URL(figmaUrl);
|
|
202
|
+
return u.searchParams.get("url") ?? figmaUrl;
|
|
203
|
+
} catch {
|
|
204
|
+
return figmaUrl;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
return figmaUrl;
|
|
208
|
+
}
|
|
209
|
+
var EmptyState = () => /* @__PURE__ */ jsx("div", { style: container, children: /* @__PURE__ */ jsxs("div", { style: emptyState, children: [
|
|
210
|
+
/* @__PURE__ */ jsx("p", { style: emptyTitle, children: "No SXL data for this story" }),
|
|
211
|
+
/* @__PURE__ */ jsxs("p", { style: emptyHint, children: [
|
|
212
|
+
"Import the registry in\xA0",
|
|
213
|
+
/* @__PURE__ */ jsx("code", { style: code, children: ".storybook/preview.ts" }),
|
|
214
|
+
":"
|
|
215
|
+
] }),
|
|
216
|
+
/* @__PURE__ */ jsx("pre", { style: codeBlock, children: `import registry from '../sxl-codeconnect.json';
|
|
217
|
+
|
|
218
|
+
export default {
|
|
219
|
+
parameters: {
|
|
220
|
+
sxl: { registry },
|
|
221
|
+
},
|
|
222
|
+
};` }),
|
|
223
|
+
/* @__PURE__ */ jsx("p", { style: emptyHint, children: "Then match a story to a Figma component:" }),
|
|
224
|
+
/* @__PURE__ */ jsx("pre", { style: codeBlock, children: `export const Default = {
|
|
225
|
+
parameters: {
|
|
226
|
+
sxl: { component: 'ButtonPrimary' },
|
|
227
|
+
},
|
|
228
|
+
};` })
|
|
229
|
+
] }) });
|
|
230
|
+
var StatusRow = ({
|
|
231
|
+
label,
|
|
232
|
+
status,
|
|
233
|
+
color
|
|
234
|
+
}) => /* @__PURE__ */ jsxs("div", { style: infoRow, children: [
|
|
235
|
+
/* @__PURE__ */ jsx("span", { style: infoLabel, children: label }),
|
|
236
|
+
/* @__PURE__ */ jsxs("span", { style: statusBadge, children: [
|
|
237
|
+
/* @__PURE__ */ jsx("span", { style: { ...statusDot, backgroundColor: color } }),
|
|
238
|
+
status
|
|
239
|
+
] })
|
|
240
|
+
] });
|
|
241
|
+
var SxlPanel = () => {
|
|
242
|
+
const params = useParameter(PARAM_KEY);
|
|
243
|
+
const entry = resolveEntry(params);
|
|
244
|
+
if (!entry) return /* @__PURE__ */ jsx(EmptyState, {});
|
|
245
|
+
const tokenStatus = entry.meta?.tokenStatus;
|
|
246
|
+
const readiness = entry.meta?.readiness;
|
|
247
|
+
const tokenInfo = tokenStatus ? TOKEN_STATUS_MAP[tokenStatus] : null;
|
|
248
|
+
const readinessInfo = readiness ? READINESS_MAP[readiness] : null;
|
|
249
|
+
const hasProps = !!entry.meta?.componentProperties?.length;
|
|
250
|
+
const hasStatus = !!(tokenInfo || readinessInfo);
|
|
251
|
+
return /* @__PURE__ */ jsxs("div", { style: container, children: [
|
|
252
|
+
entry.figmaUrl && entry.designEmbed !== false && /* @__PURE__ */ jsx("div", { style: embedSection, children: /* @__PURE__ */ jsx(
|
|
253
|
+
"iframe",
|
|
254
|
+
{
|
|
255
|
+
title: "Figma Design",
|
|
256
|
+
src: buildEmbedUrl(entry.figmaUrl),
|
|
257
|
+
style: iframe,
|
|
258
|
+
allowFullScreen: true
|
|
259
|
+
}
|
|
260
|
+
) }),
|
|
261
|
+
(entry.displayName || entry.description || entry.nodeId) && /* @__PURE__ */ jsxs("div", { style: section, children: [
|
|
262
|
+
/* @__PURE__ */ jsx("div", { style: sectionTitle, children: "Component" }),
|
|
263
|
+
entry.displayName && /* @__PURE__ */ jsxs("div", { style: infoRow, children: [
|
|
264
|
+
/* @__PURE__ */ jsx("span", { style: infoLabel, children: "Name" }),
|
|
265
|
+
/* @__PURE__ */ jsx("span", { style: infoValue, children: entry.displayName })
|
|
266
|
+
] }),
|
|
267
|
+
entry.description && /* @__PURE__ */ jsxs("div", { style: infoRow, children: [
|
|
268
|
+
/* @__PURE__ */ jsx("span", { style: infoLabel, children: "Description" }),
|
|
269
|
+
/* @__PURE__ */ jsx("span", { style: infoValue, children: entry.description })
|
|
270
|
+
] }),
|
|
271
|
+
entry.nodeId && /* @__PURE__ */ jsxs("div", { style: infoRow, children: [
|
|
272
|
+
/* @__PURE__ */ jsx("span", { style: infoLabel, children: "Node ID" }),
|
|
273
|
+
/* @__PURE__ */ jsx("span", { style: { ...infoValue, ...mono }, children: entry.nodeId })
|
|
274
|
+
] }),
|
|
275
|
+
entry.figmaUrl && /* @__PURE__ */ jsxs("div", { style: infoRow, children: [
|
|
276
|
+
/* @__PURE__ */ jsx("span", { style: infoLabel, children: "Figma" }),
|
|
277
|
+
/* @__PURE__ */ jsx(
|
|
278
|
+
"a",
|
|
279
|
+
{
|
|
280
|
+
href: buildDesignUrl(entry.figmaUrl),
|
|
281
|
+
target: "_blank",
|
|
282
|
+
rel: "noopener noreferrer",
|
|
283
|
+
style: figmaLink,
|
|
284
|
+
children: "Open in Figma \u2197"
|
|
285
|
+
}
|
|
286
|
+
)
|
|
287
|
+
] })
|
|
288
|
+
] }),
|
|
289
|
+
hasProps && /* @__PURE__ */ jsxs("div", { style: section, children: [
|
|
290
|
+
/* @__PURE__ */ jsx("div", { style: sectionTitle, children: "Contract" }),
|
|
291
|
+
/* @__PURE__ */ jsxs("div", { style: infoRow, children: [
|
|
292
|
+
/* @__PURE__ */ jsx("span", { style: infoLabel, children: "Properties" }),
|
|
293
|
+
/* @__PURE__ */ jsx("span", { style: propsList, children: entry.meta.componentProperties.map((p) => /* @__PURE__ */ jsx("span", { style: propBadge, children: p }, p)) })
|
|
294
|
+
] }),
|
|
295
|
+
entry.meta.variantCount != null && /* @__PURE__ */ jsxs("div", { style: infoRow, children: [
|
|
296
|
+
/* @__PURE__ */ jsx("span", { style: infoLabel, children: "Variants" }),
|
|
297
|
+
/* @__PURE__ */ jsx("span", { style: infoValue, children: entry.meta.variantCount })
|
|
298
|
+
] })
|
|
299
|
+
] }),
|
|
300
|
+
hasStatus && /* @__PURE__ */ jsxs("div", { style: section, children: [
|
|
301
|
+
/* @__PURE__ */ jsx("div", { style: sectionTitle, children: "Status" }),
|
|
302
|
+
tokenInfo && /* @__PURE__ */ jsx(StatusRow, { label: "Tokens", status: tokenInfo.label, color: tokenInfo.color }),
|
|
303
|
+
readinessInfo && /* @__PURE__ */ jsx(StatusRow, { label: "Readiness", status: readinessInfo.label, color: readinessInfo.color })
|
|
304
|
+
] })
|
|
305
|
+
] });
|
|
306
|
+
};
|
|
307
|
+
|
|
308
|
+
// src/manager.tsx
|
|
309
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
6
310
|
addons.register(ADDON_ID, () => {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
311
|
+
addons.add(PANEL_ID, {
|
|
312
|
+
type: types.PANEL,
|
|
313
|
+
title: "SXL Studio",
|
|
314
|
+
render: ({ active }) => /* @__PURE__ */ jsx2(AddonPanel, { active: active ?? false, children: /* @__PURE__ */ jsx2(SxlPanel, {}) })
|
|
315
|
+
});
|
|
12
316
|
});
|
|
13
|
-
//# sourceMappingURL=manager.js.map
|
package/dist/preset.js
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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
|
-
|
|
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.
|
|
3
|
+
"version": "1.0.3",
|
|
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": "
|
|
25
|
-
"dev": "
|
|
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 +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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"}
|
package/dist/constants.d.ts
DELETED
package/dist/constants.d.ts.map
DELETED
|
@@ -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
package/dist/constants.js.map
DELETED
|
@@ -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
|
package/dist/convert.d.ts.map
DELETED
|
@@ -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
|
package/dist/convert.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"convert.js","sourceRoot":"","sources":["../src/convert.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts.map
DELETED
|
@@ -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
package/dist/manager.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"manager.d.ts","sourceRoot":"","sources":["../src/manager.tsx"],"names":[],"mappings":""}
|
package/dist/manager.js.map
DELETED
|
@@ -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
package/dist/preset.d.ts.map
DELETED
|
@@ -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"}
|
package/dist/preset.js.map
DELETED
|
@@ -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
|
package/dist/types.d.ts.map
DELETED
|
@@ -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
package/dist/types.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}
|