@tpitre/story-ui 3.6.2 → 3.8.0

package/dist/story-generator/validateStory.js

@@ -9,12 +9,17 @@ export function validateStoryCode(code, fileName = 'story.tsx', config) {
         errors: [],
         warnings: []
     };
+    // Determine framework from config
+    const framework = config?.componentFramework || config?.framework || 'react';
+    const isJsxFramework = framework === 'react' || framework === 'vue';
     try {
         // Create a TypeScript source file
-        const sourceFile = ts.createSourceFile(fileName, code, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+        // Use appropriate script kind based on framework
+        const scriptKind = isJsxFramework ? ts.ScriptKind.TSX : ts.ScriptKind.TS;
+        const sourceFile = ts.createSourceFile(fileName, code, ts.ScriptTarget.Latest, true, scriptKind);
         // Check for syntax errors using the program API
         const compilerOptions = {
-            jsx: ts.JsxEmit.ReactJSX,
+            jsx: isJsxFramework ? ts.JsxEmit.ReactJSX : ts.JsxEmit.None,
             target: ts.ScriptTarget.Latest,
             module: ts.ModuleKind.ESNext,
             allowJs: true,
@@ -47,11 +52,13 @@ export function validateStoryCode(code, fileName = 'story.tsx', config) {
                 }
             }
         }
-        // Additional semantic checks
-        const semanticErrors = performSemanticChecks(sourceFile, config);
-        result.errors.push(...semanticErrors);
+        // Additional semantic checks - only for JSX frameworks (React, Vue with JSX)
+        // For non-JSX frameworks (Angular, Svelte, Web Components), skip JSX-specific validation
+        if (isJsxFramework) {
+            const semanticErrors = performSemanticChecks(sourceFile, config);
+            result.errors.push(...semanticErrors);
+        }
         // Check for React import - but only for React-based frameworks
-        const framework = config?.framework || 'react';
         const isReactFramework = framework === 'react' || framework.includes('react');
         const hasJSX = code.includes('<') || code.includes('/>');
         const hasReactImport = code.includes('import React from \'react\';');
@@ -61,6 +68,12 @@ export function validateStoryCode(code, fileName = 'story.tsx', config) {
             result.errors.push('Missing React import - add "import React from \'react\';" at the top of the file');
             result.isValid = false;
         }
+        // CRITICAL: For non-React frameworks, REMOVE any React imports that the LLM incorrectly generated
+        if (!isReactFramework && hasReactImport) {
+            result.warnings.push(`Removed incorrect React import for ${framework} framework`);
+            code = removeReactImport(code);
+            result.fixedCode = code;
+        }
         if (result.errors.length > 0) {
             result.isValid = false;
             // Attempt to fix common issues
@@ -89,6 +102,7 @@ function performSemanticChecks(sourceFile, config) {
     const errors = [];
     const availableComponents = new Set();
     const importedComponents = new Set();
+    const usedJsxComponents = new Set();
     // If config is provided, collect available components
     if (config && config.componentsToImport) {
         config.componentsToImport.forEach((comp) => availableComponents.add(comp));
@@ -127,19 +141,54 @@ function performSemanticChecks(sourceFile, config) {
                         });
                     }
                 }
+                // Track all named imports from any module (React, icons, etc.)
+                if (ts.isNamedImports(node.importClause.namedBindings)) {
+                    node.importClause.namedBindings.elements.forEach(element => {
+                        importedComponents.add(element.name.text);
+                    });
+                }
             }
         }
-        // Check for unclosed JSX elements
-        if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
-            // Additional JSX-specific checks could go here
+        // Track default imports (e.g., import React from 'react')
+        if (ts.isImportDeclaration(node) && node.importClause && node.importClause.name) {
+            importedComponents.add(node.importClause.name.text);
         }
-        // Check for missing imports
-        if (ts.isIdentifier(node) && node.text && /^[A-Z]/.test(node.text)) {
-            // This is a potential component reference - would need more context to validate
+        // Track JSX element names - CRITICAL: Catch undefined components
+        if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+            const tagName = node.tagName;
+            // Handle different tag name types
+            if (ts.isIdentifier(tagName)) {
+                // Simple identifier like <Card> or <CardSection>
+                const name = tagName.text;
+                // Only track PascalCase names (components, not HTML elements like div, span)
+                if (/^[A-Z]/.test(name)) {
+                    usedJsxComponents.add(name);
+                }
+            }
+            else if (ts.isPropertyAccessExpression(tagName)) {
+                // Compound component like <Card.Section>
+                // The parent (Card) needs to be imported, not Card.Section
+                if (ts.isIdentifier(tagName.expression)) {
+                    const parentName = tagName.expression.text;
+                    if (/^[A-Z]/.test(parentName)) {
+                        usedJsxComponents.add(parentName);
+                    }
+                }
+            }
         }
         ts.forEachChild(node, visit);
     }
     visit(sourceFile);
+    // CRITICAL CHECK: Verify all used JSX components are imported
+    // This catches bugs where a component is used but never imported
+    // This is framework-agnostic - works for any JSX-based framework
+    for (const componentName of usedJsxComponents) {
+        if (!importedComponents.has(componentName)) {
+            errors.push(`JSX error: "${componentName}" is used but was never imported. ` +
+                `Either add it to your imports, or if you intended to use a sub-component, ` +
+                `use the correct syntax (e.g., Parent.Child instead of ParentChild).`);
+        }
+    }
     return errors;
 }
 /**
@@ -307,6 +356,26 @@ function fixMissingReactImport(code) {
     }
     return code;
 }
+/**
+ * Removes React import for non-React frameworks (Vue, Angular, Svelte, Web Components)
+ * The LLM sometimes incorrectly generates React imports for these frameworks
+ */
+function removeReactImport(code) {
+    // Remove various forms of React import
+    const reactImportPatterns = [
+        /import\s+React\s+from\s+['"]react['"]\s*;?\n?/g,
+        /import\s+\*\s+as\s+React\s+from\s+['"]react['"]\s*;?\n?/g,
+        /import\s+React,?\s*\{[^}]*\}\s+from\s+['"]react['"]\s*;?\n?/g,
+        /import\s+\{[^}]*\}\s+from\s+['"]react['"]\s*;?\n?/g,
+    ];
+    let cleanedCode = code;
+    for (const pattern of reactImportPatterns) {
+        cleanedCode = cleanedCode.replace(pattern, '');
+    }
+    // Clean up any resulting double newlines
+    cleanedCode = cleanedCode.replace(/\n\n\n+/g, '\n\n');
+    return cleanedCode;
+}
 /**
  * Fixes unclosed JSX elements
  */

package/dist/story-ui.config.d.ts

@@ -59,6 +59,8 @@ export interface StoryUIConfig {
     componentPrefix: string;
     /** Framework type for story generation (e.g., 'react', 'web-components', 'angular', 'vue', 'svelte') */
     framework?: string;
+    /** Component framework type for discovery routing (e.g., 'react', 'vue', 'angular', 'svelte', 'web-components') */
+    componentFramework?: string;
     components: ComponentConfig[];
     layoutComponents?: ComponentConfig[];
     layoutRules: LayoutRules;

package/dist/story-ui.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"story-ui.config.d.ts","sourceRoot":"","sources":["../story-ui.config.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"story-ui.config.d.ts","sourceRoot":"","sources":["../story-ui.config.ts"],"names":[],"mappings":"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"}

package/dist/templates/StoryUI/StoryUIPanel.d.ts

@@ -1,8 +1,3 @@
-declare global {
-    interface Window {
-        __STORY_UI_GENERATED_CODE__?: Record<string, string>;
-    }
-}
 declare function StoryUIPanel(): import("react/jsx-runtime").JSX.Element;
 export default StoryUIPanel;
 export { StoryUIPanel };

package/dist/templates/StoryUI/StoryUIPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAkTA,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,2BAA2B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KACtD;CACF;AAooCD,iBAAS,YAAY,4CAkvCpB;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAymDA,iBAAS,YAAY,4CAuyCpB;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}