@tpitre/story-ui 2.6.1 → 2.7.1

package/dist/visual-builder/utils/storyFileUpdater.js

@@ -0,0 +1,326 @@
+/**
+ * Generate a complete story file content from components
+ */
+export function generateStoryFileContent(components, storyName, fileName) {
+    // Generate the JSX code for the render function
+    const jsxCode = generateComponentJSX(components);
+    const imports = generateImports(components);
+    // Extract the story title from the name, removing any existing prefix
+    const baseTitle = storyName
+        .replace(/^(Generated|Edited)\//i, '') // Remove existing prefix
+        .replace(/([A-Z])/g, ' $1')
+        .replace(/^\s+/, '')
+        .trim();
+    // Use "Edited" prefix for stories that have been edited in Visual Builder
+    // Properly escape apostrophes and quotes in the title for JavaScript strings
+    const storyTitle = baseTitle.replace(/'/g, "\\'").replace(/"/g, '\\"');
+    const storyPrefix = 'Edited'; // Changed from 'Generated' to distinguish edited stories
+    // Always use the standard decorator path
+    const decoratorPath = '../decorators/VisualBuilderDecorator';
+    const content = `import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+${imports}
+import { withVisualBuilderButton } from '${decoratorPath}';
+
+const meta = {
+  title: '${storyPrefix}/${storyTitle}',
+  parameters: {
+    layout: 'centered',
+    visualBuilder: true,
+    fileName: '${fileName}',
+    isEdited: true,
+  },
+  decorators: [withVisualBuilderButton],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+${jsxCode.split('\n').map(line => '    ' + line).join('\n')}
+  )
+};`;
+    // Fix and validate the generated content to ensure correct style syntax
+    const fixedContent = validateGeneratedContent(content);
+    return fixedContent;
+}
+/**
+ * Generate imports for the components
+ */
+function generateImports(components) {
+    const usedComponents = new Set();
+    const collectComponents = (comps) => {
+        comps.forEach(comp => {
+            // Map CardSection back to Card for imports
+            if (comp.type === 'CardSection') {
+                usedComponents.add('Card');
+            }
+            else {
+                usedComponents.add(comp.type);
+            }
+            if (comp.children) {
+                collectComponents(comp.children);
+            }
+        });
+    };
+    collectComponents(components);
+    const sortedComponents = Array.from(usedComponents).sort();
+    return `import { ${sortedComponents.join(', ')} } from '@mantine/core';`;
+}
+/**
+ * Generate JSX code for components
+ */
+function generateComponentJSX(components, indent = 0) {
+    const indentStr = '  '.repeat(indent);
+    return components.map(component => {
+        const { type, props, children } = component;
+        const hasChildren = children && children.length > 0;
+        const hasTextContent = props.children && typeof props.children === 'string';
+        // Map CardSection to Card.Section
+        const componentName = type === 'CardSection' ? 'Card.Section' : type;
+        // Generate props string
+        const propsString = generatePropsString(props, type);
+        if (hasChildren) {
+            // Component with children
+            return `${indentStr}<${componentName}${propsString}>
+${generateComponentJSX(children, indent + 1)}
+${indentStr}</${componentName}>`;
+        }
+        else if (hasTextContent) {
+            // Component with text content
+            const textContent = props.children;
+            // For multi-line text, preserve line breaks and handle indentation properly
+            if (textContent.includes('\n')) {
+                const lines = textContent.split('\n');
+                const indentedLines = lines.map((line, index) => {
+                    if (index === 0 && line.trim() === '')
+                        return '';
+                    return line.trim() === '' ? '' : `${indentStr}  ${line.trim()}`;
+                }).filter((line, index, arr) => {
+                    // Remove empty lines at the start and end
+                    if (index === 0 || index === arr.length - 1) {
+                        return line.trim() !== '';
+                    }
+                    return true;
+                });
+                return `${indentStr}<${componentName}${propsString}>\n${indentedLines.join('\n')}\n${indentStr}</${componentName}>`;
+            }
+            // Single line text - check if it should be on the same line
+            else if (textContent.length < 50) {
+                return `${indentStr}<${componentName}${propsString}>${textContent}</${componentName}>`;
+            }
+            return `${indentStr}<${componentName}${propsString}>\n${indentStr}  ${textContent}\n${indentStr}</${componentName}>`;
+        }
+        else {
+            // Self-closing component
+            return `${indentStr}<${componentName}${propsString} />`;
+        }
+    }).join('\n');
+}
+/**
+ * Generate props string for a component
+ */
+export function generatePropsString(props, componentType) {
+    const propEntries = Object.entries(props);
+    // Filter out children prop for components that handle text content between tags
+    const filteredProps = propEntries.filter(([key, value]) => {
+        if (key === 'children') {
+            // Never include children as a prop for Text components - they use content between tags
+            if (componentType === 'Text' || componentType === 'Title') {
+                return false;
+            }
+            // Keep children prop only for other text-based components that use it as a prop
+            return ['Button', 'Badge', 'Code', 'Mark', 'Anchor'].includes(componentType) &&
+                typeof value === 'string';
+        }
+        // IMPORTANT: Skip problematic style props that are strings
+        // These cause repeated JSX syntax errors and aren't essential
+        if (key === 'style' && typeof value === 'string') {
+            console.warn('Skipping string style prop to prevent JSX syntax errors:', value);
+            return false;
+        }
+        // Filter out undefined, null, empty string
+        if (value === undefined || value === null || value === '')
+            return false;
+        // Filter out default values for specific props
+        if (key === 'size' && value === 'sm')
+            return false;
+        if (key === 'variant' && value === 'filled')
+            return false;
+        return true;
+    });
+    if (filteredProps.length === 0)
+        return '';
+    const propsString = filteredProps
+        .map(([key, value]) => {
+        // Handle special cases
+        if (key === 'style') {
+            // Check if value is already a string (incorrectly formatted)
+            if (typeof value === 'string') {
+                console.warn('Style prop received as string:', value);
+                // Try to parse it if it looks like an object string
+                if (value.startsWith('{') && value.endsWith('}')) {
+                    try {
+                        // Remove outer braces and parse
+                        const styleStr = value.slice(1, -1).trim();
+                        const stylePairs = styleStr.split(',').map(pair => {
+                            const [k, v] = pair.split(':').map(s => s.trim());
+                            // Keep numeric values as numbers, quote strings
+                            let cssValue = v;
+                            if (v && !v.includes("'") && !v.includes('"')) {
+                                // Check if it's a number
+                                if (/^\d+$/.test(v)) {
+                                    cssValue = v; // Keep as numeric string for now
+                                }
+                                else if (/^\d*\.\d+$/.test(v)) {
+                                    cssValue = v; // Keep as numeric string for now
+                                }
+                                else {
+                                    cssValue = `'${v}'`; // Quote non-numeric strings
+                                }
+                            }
+                            return `${k}: ${cssValue}`;
+                        }).join(', ');
+                        // Return properly formatted JSX style prop
+                        return `style={{ ${stylePairs} }}`;
+                    }
+                    catch (e) {
+                        console.error('Failed to parse style string:', e);
+                        // Fallback: clean up the string and wrap properly
+                        const cleanStyle = value.replace(/[{}]/g, '').trim();
+                        return `style={{ ${cleanStyle} }}`;
+                    }
+                }
+                // If it doesn't look like an object, try to clean it up
+                const cleanStyle = value.replace(/[{}]/g, '').trim();
+                return `style={{ ${cleanStyle} }}`;
+            }
+            else if (typeof value === 'object') {
+                const styleEntries = Object.entries(value)
+                    .map(([k, v]) => {
+                    // Convert camelCase to proper CSS property names if needed
+                    const cssKey = k;
+                    const cssValue = typeof v === 'string' ? `'${v}'` : v;
+                    return `${cssKey}: ${cssValue}`;
+                })
+                    .join(', ');
+                return `style={{ ${styleEntries} }}`;
+            }
+        }
+        if (typeof value === 'boolean') {
+            return value ? key : `${key}={false}`;
+        }
+        else if (typeof value === 'string') {
+            // Special check: if key is 'style' and value looks like an object string, handle it
+            if (key === 'style' && (value.includes('{') || value.includes(':'))) {
+                console.warn('Style prop detected as string in fallback:', value);
+                // Try to clean it up
+                const cleanStyle = value.replace(/^["']|["']$/g, '').replace(/[{}]/g, '').trim();
+                return `style={{ ${cleanStyle} }}`;
+            }
+            return `${key}="${value}"`;
+        }
+        else if (typeof value === 'number') {
+            return `${key}={${value}}`;
+        }
+        else if (Array.isArray(value)) {
+            return `${key}={${JSON.stringify(value)}}`;
+        }
+        else {
+            // Check if this is a style object that wasn't caught earlier
+            if (key === 'style' && typeof value === 'object') {
+                console.warn('Style object detected in fallback:', value);
+                const styleEntries = Object.entries(value)
+                    .map(([k, v]) => {
+                    const cssValue = typeof v === 'string' ? `'${v}'` : v;
+                    return `${k}: ${cssValue}`;
+                })
+                    .join(', ');
+                return `style={{ ${styleEntries} }}`;
+            }
+            return `${key}={${JSON.stringify(value)}}`;
+        }
+    })
+        .join(' ');
+    return propsString ? ` ${propsString}` : '';
+}
+/**
+ * Update story file via Story UI MCP server
+ */
+export async function updateStoryFile(filePath, components, storyName) {
+    try {
+        // Extract fileName from filePath - let the MCP server handle file naming logic
+        let fileName = filePath.split('/').pop() || filePath;
+        // Remove file extension if present - MCP server will add it back
+        fileName = fileName.replace(/\.stories\.(tsx?|jsx?)$/, '');
+        // Don't apply any prefix transformations here - let the MCP server handle it
+        // The MCP server has the smart logic to detect existing files and update them properly
+        // Determine the API port from environment or default
+        const apiPort = window.STORY_UI_MCP_PORT ||
+            window.__STORY_UI_PORT__ ||
+            '4001';
+        // Call the Story UI server to update the file
+        const response = await fetch(`http://localhost:${apiPort}/story-ui/visual-builder/update`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                fileName,
+                filePath,
+                components,
+                storyName,
+                isEdited: true, // Flag to indicate this is an edited story
+                createBackup: false // Never create backups from Visual Builder
+            })
+        });
+        const result = await response.json();
+        if (result.success) {
+            console.log(`✅ Story file updated via MCP server: ${result.fileName}`);
+            return {
+                success: true,
+                message: result.message || 'Story updated successfully'
+            };
+        }
+        else {
+            console.error('Failed to update story file:', result.error);
+            return {
+                success: false,
+                error: result.error || 'Unknown error'
+            };
+        }
+    }
+    catch (error) {
+        console.error('Failed to connect to Story UI server:', error);
+        // Fallback to localStorage if server is not available
+        const fileName = filePath.split('/').pop() || filePath;
+        const newContent = generateStoryFileContent(components, storyName, fileName);
+        const updateKey = `story-update-${filePath.replace(/[^a-zA-Z0-9]/g, '-')}`;
+        localStorage.setItem(updateKey, newContent);
+        console.warn('⚠️ Server unavailable, saved to localStorage as fallback');
+        return {
+            success: false,
+            error: 'Story UI server not available. Changes saved locally.'
+        };
+    }
+}
+/**
+ * Fix and validate generated content to ensure correct style syntax
+ */
+function validateGeneratedContent(content) {
+    // Check for incorrect style syntax: style="{ ... }" and fix it
+    const incorrectStylePattern = /style="(\{[^}]*\})"/g;
+    let fixedContent = content;
+    let matchFound = false;
+    fixedContent = content.replace(incorrectStylePattern, (match, styleContent) => {
+        matchFound = true;
+        console.warn(`⚠️ Fixing style syntax: ${match} → style={${styleContent}}`);
+        // Convert style="{ ... }" to style={{ ... }}
+        return `style={${styleContent}}`;
+    });
+    if (matchFound) {
+        console.log('✅ Automatically fixed style syntax issues in generated content');
+    }
+    return fixedContent;
+}

package/dist/visual-builder/utils/storyNameExtraction.test.js

@@ -0,0 +1,211 @@
+/**
+ * Test cases for enhanced story name extraction
+ * This verifies that the Visual Builder properly extracts story names
+ * from various story formats and never prompts when editing existing stories.
+ */
+import { extractStoryName } from './storyToBuilder';
+describe('Enhanced Story Name Extraction', () => {
+    test('extracts name from export const statement', () => {
+        const storyCode = `
+      import React from 'react';
+      import { Button, Card } from '@mantine/core';
+      
+      export const LoginButton = {
+        render: () => (
+          <Card>
+            <Button>Login</Button>
+          </Card>
+        )
+      };
+    `;
+        expect(extractStoryName(storyCode)).toBe('Login Button');
+    });
+    test('extracts name from title property', () => {
+        const storyCode = `
+      import React from 'react';
+      import { Button } from '@mantine/core';
+      
+      export const MyStory = {
+        title: "User Profile Card",
+        render: () => <Button>Click me</Button>
+      };
+    `;
+        expect(extractStoryName(storyCode)).toBe('User Profile Card');
+    });
+    test('extracts name from meta export default title', () => {
+        const storyCode = `
+      export default {
+        title: "Navigation Menu",
+        component: MyComponent
+      };
+      
+      export const Default = {
+        render: () => <div>Menu</div>
+      };
+    `;
+        expect(extractStoryName(storyCode)).toBe('Navigation Menu');
+    });
+    test('extracts name from comment annotation', () => {
+        const storyCode = `
+      // @title Shopping Cart
+      import React from 'react';
+      
+      export const CartStory = {
+        render: () => <div>Cart</div>
+      };
+    `;
+        expect(extractStoryName(storyCode)).toBe('Shopping Cart');
+    });
+    test('extracts name from JSDoc comment', () => {
+        const storyCode = `
+      /**
+       * @title Product Gallery
+       * @description Shows product images
+       */
+      export const Gallery = {
+        render: () => <div>Gallery</div>
+      };
+    `;
+        expect(extractStoryName(storyCode)).toBe('Product Gallery');
+    });
+    test('extracts name from component name in JSX', () => {
+        const storyCode = `
+      export const Example = {
+        render: () => (
+          <UserDashboard>
+            <div>Content</div>
+          </UserDashboard>
+        )
+      };
+    `;
+        expect(extractStoryName(storyCode)).toBe('User Dashboard');
+    });
+    test('extracts name from function export', () => {
+        const storyCode = `
+      export function ContactForm() {
+        return <form>Contact</form>;
+      }
+    `;
+        expect(extractStoryName(storyCode)).toBe('Contact Form');
+    });
+    test('handles complex PascalCase to readable conversion', () => {
+        const storyCode = `
+      export const MyComplexUIComponentStory = {
+        render: () => <div>Complex UI</div>
+      };
+    `;
+        expect(extractStoryName(storyCode)).toBe('My Complex UI Component Story');
+    });
+    test('ignores generic HTML elements', () => {
+        const storyCode = `
+      export const Example = {
+        render: () => (
+          <div>
+            <span>Some text</span>
+          </div>
+        )
+      };
+    `;
+        expect(extractStoryName(storyCode)).toBe('Example');
+    });
+    test('prefers explicit title over export name', () => {
+        const storyCode = `
+      export const GenericName = {
+        title: "Specific Title",
+        render: () => <div>Content</div>
+      };
+    `;
+        expect(extractStoryName(storyCode)).toBe('Specific Title');
+    });
+    test('returns fallback for unrecognizable code', () => {
+        const storyCode = `
+      const someRandomCode = "hello";
+      console.log(someRandomCode);
+    `;
+        expect(extractStoryName(storyCode)).toBe('Imported Story');
+    });
+    test('handles Vite-transformed code gracefully', () => {
+        const storyCode = `
+      import { __vite__cjsImport } from "something";
+      const _jsxDEV = __vite__cjsImport.default;
+      export const TransformedStory = {};
+    `;
+        expect(extractStoryName(storyCode)).toBe('Transformed Story');
+    });
+    // Real-world examples
+    test('handles real Mantine story format', () => {
+        const storyCode = `
+      import React from 'react';
+      import { Button, Card, Stack, Title } from '@mantine/core';
+      
+      export const UserCard = {
+        render: () => (
+          <Card shadow="sm" padding="lg" radius="md" withBorder>
+            <Stack>
+              <Title order={3}>John Doe</Title>
+              <Button variant="light">View Profile</Button>
+            </Stack>
+          </Card>
+        )
+      };
+    `;
+        expect(extractStoryName(storyCode)).toBe('User Card');
+    });
+    test('handles Story UI generated format', () => {
+        const storyCode = `
+      // Generated by Story UI
+      import React from 'react';
+      import { Container, Title, Text, Button } from '@mantine/core';
+      
+      export const WelcomeScreen = {
+        render: () => (
+          <Container>
+            <Title>Welcome</Title>
+            <Text>Get started with our app</Text>
+            <Button>Continue</Button>
+          </Container>
+        )
+      };
+    `;
+        expect(extractStoryName(storyCode)).toBe('Welcome Screen');
+    });
+});
+// Integration test for the full flow
+describe('Story Name Integration', () => {
+    test('existing story should not prompt for name', async () => {
+        const existingStoryCode = `
+      export const DashboardLayout = {
+        title: "Admin Dashboard",
+        render: () => <div>Dashboard</div>
+      };
+    `;
+        const extractedName = extractStoryName(existingStoryCode);
+        // Should extract a valid name
+        expect(extractedName).toBe('Admin Dashboard');
+        expect(extractedName).not.toBe('Imported Story');
+        expect(extractedName).not.toBe('Untitled Story');
+        // In the Visual Builder, this should NOT trigger a name prompt
+        const isGenericName = extractedName === 'Untitled Story' || extractedName === 'Imported Story';
+        expect(isGenericName).toBe(false);
+    });
+    test('new AI-generated story should work normally', () => {
+        const newStoryCode = `
+      // This is raw AI-generated JSX without story metadata
+      import React from 'react';
+      
+      const MyComponent = () => (
+        <div>
+          <h1>Hello World</h1>
+        </div>
+      );
+      
+      export default MyComponent;
+    `;
+        const extractedName = extractStoryName(newStoryCode);
+        // Should fall back to generic name
+        expect(extractedName).toBe('Imported Story');
+        // In the Visual Builder, this SHOULD trigger a name prompt for new stories
+        const isGenericName = extractedName === 'Untitled Story' || extractedName === 'Imported Story';
+        expect(isGenericName).toBe(true);
+    });
+});