@tpitre/story-ui 4.16.5 → 4.16.6
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"canvasSave.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/canvasSave.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA0I5C;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,
|
|
1
|
+
{"version":3,"file":"canvasSave.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/canvasSave.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA0I5C;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAkDzF;AAID,+DAA+D;AAC/D,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAatD;AAED,wBAAsB,iBAAiB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,+CAiHlE"}
|
|
@@ -127,7 +127,11 @@ ${jsx}
|
|
|
127
127
|
*/
|
|
128
128
|
export function jsxCodeToStory(jsxCode, title, importPath) {
|
|
129
129
|
// Remove the render(<Canvas />) call at the end
|
|
130
|
-
|
|
130
|
+
let cleanCode = jsxCode.replace(/\nrender\s*\(<Canvas\s*\/>\);?\s*$/, '').trim();
|
|
131
|
+
// The canvas code is generated for react-live where `React` is a global.
|
|
132
|
+
// Replace `React.useState(...)` → `useState(...)` etc. so the saved story
|
|
133
|
+
// works with named imports and doesn't need a default React import.
|
|
134
|
+
cleanCode = cleanCode.replace(/\bReact\.(useState|useEffect|useCallback|useMemo|useRef|useReducer|useContext|createElement|Fragment)\b/g, '$1');
|
|
131
135
|
// Extract component names used in JSX (uppercase identifiers after '<')
|
|
132
136
|
const tagMatches = cleanCode.match(/(?<=<)([A-Z][a-zA-Z.]*)/g) ?? [];
|
|
133
137
|
const componentSet = new Set();
|
|
@@ -137,14 +141,19 @@ export function jsxCodeToStory(jsxCode, title, importPath) {
|
|
|
137
141
|
componentSet.add(base);
|
|
138
142
|
}
|
|
139
143
|
const sortedComponents = Array.from(componentSet).sort();
|
|
140
|
-
// Detect React hooks used
|
|
141
|
-
const hookNames = ['useState', 'useEffect', 'useCallback', 'useMemo', 'useRef', 'useReducer', 'useContext'];
|
|
144
|
+
// Detect React hooks and utilities used
|
|
145
|
+
const hookNames = ['useState', 'useEffect', 'useCallback', 'useMemo', 'useRef', 'useReducer', 'useContext', 'createElement', 'Fragment'];
|
|
142
146
|
const usedHooks = hookNames.filter(h => new RegExp(`\\b${h}\\b`).test(cleanCode));
|
|
147
|
+
// If the code still references `React.` for anything else, import React as a whole
|
|
148
|
+
const needsReactImport = /\bReact\./.test(cleanCode);
|
|
143
149
|
const lines = [];
|
|
144
|
-
if (sortedComponents.length > 0) {
|
|
150
|
+
if (sortedComponents.length > 0 && importPath) {
|
|
145
151
|
lines.push(`import { ${sortedComponents.join(', ')} } from '${importPath}';`);
|
|
146
152
|
}
|
|
147
|
-
if (
|
|
153
|
+
if (needsReactImport) {
|
|
154
|
+
lines.push(`import React${usedHooks.length > 0 ? `, { ${usedHooks.join(', ')} }` : ''} from 'react';`);
|
|
155
|
+
}
|
|
156
|
+
else if (usedHooks.length > 0) {
|
|
148
157
|
lines.push(`import { ${usedHooks.join(', ')} } from 'react';`);
|
|
149
158
|
}
|
|
150
159
|
lines.push(`import type { Meta, StoryObj } from '@storybook/react';`);
|