@tpitre/story-ui 2.6.1 → 2.7.1

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

@@ -0,0 +1,336 @@
+import { getComponentConfig } from '../config/componentRegistry';
+/**
+ * Parse AI-generated JSX code into Visual Builder component definitions
+ */
+export const parseAIGeneratedCode = (code) => {
+    const result = {
+        components: [],
+        errors: [],
+        warnings: []
+    };
+    try {
+        // Clean and extract the component JSX
+        const jsxContent = extractJSXContent(code);
+        if (!jsxContent) {
+            result.errors.push('No JSX content found in the provided code');
+            return result;
+        }
+        // Parse the JSX into component definitions
+        const parsedComponents = parseJSXToComponents(jsxContent);
+        result.components = parsedComponents;
+        // Validate components against registry
+        validateComponents(result.components, result);
+    }
+    catch (error) {
+        result.errors.push(`Failed to parse code: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+    return result;
+};
+/**
+ * Extract JSX content from the AI-generated code
+ */
+const extractJSXContent = (code) => {
+    // Remove imports and exports to focus on JSX
+    const lines = code.split('\n');
+    const jsxLines = [];
+    let inJSX = false;
+    let bracketCount = 0;
+    let parenthesesCount = 0;
+    for (const line of lines) {
+        const trimmed = line.trim();
+        // Skip import statements
+        if (trimmed.startsWith('import ') || trimmed.startsWith('export ')) {
+            continue;
+        }
+        // Skip function declaration lines
+        if (trimmed.includes('= () => {') || trimmed.includes('function ') || trimmed === '{' || trimmed === '}') {
+            continue;
+        }
+        // Skip return statement
+        if (trimmed.startsWith('return (') || trimmed.startsWith('return')) {
+            inJSX = true;
+            if (trimmed.includes('(')) {
+                parenthesesCount += (trimmed.match(/\(/g) || []).length;
+                parenthesesCount -= (trimmed.match(/\)/g) || []).length;
+            }
+            continue;
+        }
+        if (inJSX) {
+            // Track brackets and parentheses
+            bracketCount += (line.match(/</g) || []).length;
+            bracketCount -= (line.match(/>/g) || []).length;
+            parenthesesCount += (line.match(/\(/g) || []).length;
+            parenthesesCount -= (line.match(/\)/g) || []).length;
+            // Add line if it contains actual JSX content
+            if (trimmed && !trimmed.startsWith('//') && trimmed !== ';') {
+                jsxLines.push(line);
+            }
+            // Stop when we've closed all parentheses (end of return statement)
+            if (parenthesesCount <= 0 && bracketCount <= 0) {
+                break;
+            }
+        }
+    }
+    return jsxLines.length > 0 ? jsxLines.join('\n') : null;
+};
+/**
+ * Parse JSX string into component definitions
+ */
+const parseJSXToComponents = (jsx) => {
+    const components = [];
+    // Simple regex-based parsing for common patterns
+    // This is a basic implementation - in production, you'd want a proper JSX parser
+    // Remove extra whitespace and normalize
+    const cleanJSX = jsx.replace(/\s+/g, ' ').trim();
+    // Parse top-level components
+    const topLevelComponents = extractTopLevelComponents(cleanJSX);
+    topLevelComponents.forEach((componentString, index) => {
+        const parsed = parseComponentString(componentString, index);
+        if (parsed) {
+            components.push(parsed);
+        }
+    });
+    return components;
+};
+/**
+ * Extract top-level components from JSX string
+ */
+const extractTopLevelComponents = (jsx) => {
+    const components = [];
+    let currentComponent = '';
+    let depth = 0;
+    let i = 0;
+    while (i < jsx.length) {
+        const char = jsx[i];
+        if (char === '<') {
+            const nextChar = jsx[i + 1];
+            if (nextChar === '/') {
+                // Closing tag
+                depth--;
+                currentComponent += char;
+            }
+            else if (nextChar === '!') {
+                // Comment or doctype, skip
+                const endComment = jsx.indexOf('>', i);
+                i = endComment;
+                continue;
+            }
+            else {
+                // Opening tag
+                depth++;
+                currentComponent += char;
+            }
+        }
+        else {
+            currentComponent += char;
+        }
+        // If we've closed all tags and have content, we have a complete component
+        if (depth === 0 && currentComponent.trim()) {
+            const trimmed = currentComponent.trim();
+            if (trimmed.startsWith('<') && (trimmed.endsWith('>') || trimmed.endsWith('/>'))) {
+                components.push(trimmed);
+                currentComponent = '';
+            }
+        }
+        i++;
+    }
+    // Add any remaining component
+    if (currentComponent.trim()) {
+        components.push(currentComponent.trim());
+    }
+    return components;
+};
+/**
+ * Parse individual component string into ComponentDefinition
+ */
+const parseComponentString = (componentString, index) => {
+    // Extract component type
+    const typeMatch = componentString.match(/<(\w+)/);
+    if (!typeMatch)
+        return null;
+    const type = typeMatch[1];
+    const config = getComponentConfig(type);
+    if (!config) {
+        // Return a basic definition even for unknown components
+        return {
+            id: `${type.toLowerCase()}-${Date.now()}-${index}`,
+            type,
+            displayName: type,
+            category: 'Unknown',
+            props: {},
+            children: []
+        };
+    }
+    // Extract props
+    const props = extractProps(componentString, config.defaultProps);
+    // Extract children
+    const children = extractChildren(componentString, index);
+    return {
+        id: `${type.toLowerCase()}-${Date.now()}-${index}`,
+        type,
+        displayName: config.displayName,
+        category: config.category,
+        props,
+        children
+    };
+};
+/**
+ * Extract props from component string
+ */
+const extractProps = (componentString, defaultProps) => {
+    const props = { ...defaultProps };
+    // Extract attributes using regex
+    const attrRegex = /(\w+)=(?:"([^"]*)"|{([^}]*)}|(\w+))/g;
+    let match;
+    while ((match = attrRegex.exec(componentString)) !== null) {
+        const [, propName, stringValue, jsValue, boolValue] = match;
+        if (stringValue !== undefined) {
+            props[propName] = stringValue;
+        }
+        else if (jsValue !== undefined) {
+            // Try to parse JavaScript value
+            try {
+                props[propName] = JSON.parse(jsValue);
+            }
+            catch {
+                // If parsing fails, treat as string
+                props[propName] = jsValue;
+            }
+        }
+        else if (boolValue !== undefined) {
+            props[propName] = true;
+        }
+    }
+    // Extract text content for components that support it
+    const textContentMatch = componentString.match(/>([^<]+)</);
+    if (textContentMatch && textContentMatch[1].trim()) {
+        const textContent = textContentMatch[1].trim();
+        if (!textContent.startsWith('<')) {
+            props.children = textContent;
+        }
+    }
+    return props;
+};
+/**
+ * Extract children components
+ */
+const extractChildren = (componentString, parentIndex) => {
+    // Check if component is self-closing
+    if (componentString.endsWith('/>')) {
+        return [];
+    }
+    // Extract content between opening and closing tags
+    const contentMatch = componentString.match(/>(.+)</s);
+    if (!contentMatch)
+        return [];
+    const content = contentMatch[1];
+    // If content doesn't contain tags, it's just text
+    if (!content.includes('<')) {
+        return [];
+    }
+    // Recursively parse child components
+    const childComponents = extractTopLevelComponents(content);
+    const children = [];
+    childComponents.forEach((childString, index) => {
+        const parsed = parseComponentString(childString, parentIndex * 100 + index);
+        if (parsed) {
+            children.push(parsed);
+        }
+    });
+    return children;
+};
+/**
+ * Validate components against the registry and collect warnings
+ */
+const validateComponents = (components, result) => {
+    const validateComponent = (component) => {
+        const config = getComponentConfig(component.type);
+        if (!config) {
+            result.warnings.push(`Component "${component.type}" is not in the Mantine component registry`);
+            return;
+        }
+        // Validate props
+        Object.keys(component.props).forEach(propName => {
+            const propConfig = config.properties.find(p => p.name === propName);
+            if (!propConfig) {
+                result.warnings.push(`Property "${propName}" is not defined for ${component.type}`);
+            }
+        });
+        // Recursively validate children
+        if (component.children) {
+            component.children.forEach(validateComponent);
+        }
+    };
+    components.forEach(validateComponent);
+};
+/**
+ * Create a simplified component structure for basic layouts
+ */
+export const createBasicLayout = (description) => {
+    // This can be enhanced to create basic layouts based on keywords
+    const lowerDesc = description.toLowerCase();
+    if (lowerDesc.includes('button')) {
+        return [{
+                id: `button-${Date.now()}`,
+                type: 'Button',
+                displayName: 'Button',
+                category: 'Inputs',
+                props: {
+                    children: 'Click me',
+                    variant: 'filled',
+                    size: 'sm'
+                }
+            }];
+    }
+    if (lowerDesc.includes('form')) {
+        return [
+            {
+                id: `stack-${Date.now()}`,
+                type: 'Stack',
+                displayName: 'Stack',
+                category: 'Layout',
+                props: { gap: 'md' },
+                children: [
+                    {
+                        id: `textinput-${Date.now()}`,
+                        type: 'TextInput',
+                        displayName: 'Text Input',
+                        category: 'Inputs',
+                        props: {
+                            placeholder: 'Enter text...',
+                            label: 'Input Label'
+                        }
+                    },
+                    {
+                        id: `button-${Date.now()}`,
+                        type: 'Button',
+                        displayName: 'Button',
+                        category: 'Inputs',
+                        props: {
+                            children: 'Submit',
+                            variant: 'filled'
+                        }
+                    }
+                ]
+            }
+        ];
+    }
+    // Default: simple container with text
+    return [{
+            id: `container-${Date.now()}`,
+            type: 'Container',
+            displayName: 'Container',
+            category: 'Layout',
+            props: { size: 'md' },
+            children: [{
+                    id: `text-${Date.now()}`,
+                    type: 'Text',
+                    displayName: 'Text',
+                    category: 'Typography',
+                    props: {
+                        children: 'Generated component',
+                        size: 'md'
+                    }
+                }]
+        }];
+};

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

@@ -0,0 +1,111 @@
+/**
+ * Find a component and its parent in the component tree
+ */
+export const findComponentWithParent = (components, targetId, parent = null) => {
+    for (let i = 0; i < components.length; i++) {
+        const component = components[i];
+        if (component.id === targetId) {
+            return {
+                component,
+                parent,
+                index: i
+            };
+        }
+        if (component.children && component.children.length > 0) {
+            const result = findComponentWithParent(component.children, targetId, component);
+            if (result) {
+                return result;
+            }
+        }
+    }
+    return null;
+};
+/**
+ * Remove a component from the tree and return the updated tree and removed component
+ */
+export const removeComponentFromTree = (components, targetId) => {
+    for (let i = 0; i < components.length; i++) {
+        if (components[i].id === targetId) {
+            const removed = components[i];
+            return {
+                components: [...components.slice(0, i), ...components.slice(i + 1)],
+                removed
+            };
+        }
+        if (components[i].children && components[i].children.length > 0) {
+            const result = removeComponentFromTree(components[i].children, targetId);
+            if (result.removed) {
+                return {
+                    components: components.map(comp => comp.id === components[i].id
+                        ? { ...comp, children: result.components }
+                        : comp),
+                    removed: result.removed
+                };
+            }
+        }
+    }
+    return { components, removed: null };
+};
+/**
+ * Insert a component at a specific location in the tree
+ */
+export const insertComponentInTree = (components, component, parentId, index) => {
+    if (!parentId) {
+        // Insert at root level
+        if (index !== undefined) {
+            return [...components.slice(0, index), component, ...components.slice(index)];
+        }
+        return [...components, component];
+    }
+    // Insert into specific parent
+    return components.map(comp => {
+        if (comp.id === parentId) {
+            const children = comp.children || [];
+            const newChildren = index !== undefined
+                ? [...children.slice(0, index), component, ...children.slice(index)]
+                : [...children, component];
+            return { ...comp, children: newChildren };
+        }
+        if (comp.children) {
+            return {
+                ...comp,
+                children: insertComponentInTree(comp.children, component, parentId, index)
+            };
+        }
+        return comp;
+    });
+};
+/**
+ * Check if a component is a container (can accept children)
+ */
+export const isContainerComponent = (componentType) => {
+    const containerTypes = [
+        'Container', 'Group', 'Stack', 'Card', 'Paper', 'Box',
+        'Flex', 'Grid', 'GridCol', 'SimpleGrid', 'Tabs'
+    ];
+    return containerTypes.includes(componentType);
+};
+/**
+ * Get all parent IDs of a component (path from root to component)
+ */
+export const getComponentPath = (components, targetId, path = []) => {
+    for (const component of components) {
+        if (component.id === targetId) {
+            return path;
+        }
+        if (component.children && component.children.length > 0) {
+            const result = getComponentPath(component.children, targetId, [...path, component.id]);
+            if (result) {
+                return result;
+            }
+        }
+    }
+    return null;
+};
+/**
+ * Check if one component is a descendant of another
+ */
+export const isDescendant = (components, ancestorId, descendantId) => {
+    const path = getComponentPath(components, descendantId);
+    return path ? path.includes(ancestorId) : false;
+};

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

@@ -0,0 +1,122 @@
+// Validation utility to test the parser fix
+import { parseStoryUIToBuilder } from './storyToBuilder';
+/**
+ * Test the JSX parser with the recipe card story
+ */
+export function validateParserFix() {
+    console.log('🧪 Validating JSX Parser Fix');
+    console.log('='.repeat(40));
+    // Sample JSX from the recipe card story (simplified for testing)
+    const testJSX = `
+export const Default: Story = {
+  render: () => (
+    <Card shadow="sm" padding="lg" radius="md" withBorder>
+      <Card.Section>
+        <Image
+          src="https://picsum.photos/400/200?random=1"
+          height={200}
+          alt="Test image"
+        />
+      </Card.Section>
+      <Stack gap="md" mt="md">
+        <Group justify="space-between" align="flex-start">
+          <Text fw={500} size="lg">
+            Test Title
+          </Text>
+          <Badge color="green" variant="light">
+            30 min
+          </Badge>
+        </Group>
+        <Text size="sm" c="dimmed">
+          Test description text
+        </Text>
+      </Stack>
+    </Card>
+  ),
+};`;
+    try {
+        const result = parseStoryUIToBuilder(testJSX);
+        console.log('📊 Parse Results:');
+        console.log(`  Components: ${result.components.length}`);
+        console.log(`  Errors: ${result.errors.length}`);
+        console.log(`  Warnings: ${result.warnings.length}`);
+        if (result.errors.length > 0) {
+            console.log('❌ Errors:');
+            result.errors.forEach(error => console.log(`    ${error}`));
+            return;
+        }
+        // Test the component structure
+        if (result.components.length > 0) {
+            const rootComponent = result.components[0];
+            console.log(`\n🏗️ Root Component: ${rootComponent.type}`);
+            if (rootComponent.type === 'Card' && rootComponent.children) {
+                console.log(`✅ Card has ${rootComponent.children.length} children`);
+                // Check for Card.Section -> CardSection mapping
+                const cardSection = rootComponent.children.find(c => c.type === 'CardSection');
+                if (cardSection) {
+                    console.log('✅ Found CardSection component');
+                    console.log(`   CardSection children: ${cardSection.children?.length || 0}`);
+                    if (cardSection.children && cardSection.children.length > 0) {
+                        const image = cardSection.children.find(c => c.type === 'Image');
+                        if (image) {
+                            console.log('✅ Found Image inside CardSection');
+                        }
+                        else {
+                            console.log('❌ Image not found inside CardSection');
+                        }
+                    }
+                }
+                else {
+                    console.log('❌ CardSection not found');
+                }
+                // Check for Stack component
+                const stack = rootComponent.children.find(c => c.type === 'Stack');
+                if (stack) {
+                    console.log('✅ Found Stack component');
+                    console.log(`   Stack children: ${stack.children?.length || 0}`);
+                    if (stack.children && stack.children.length >= 2) {
+                        const group = stack.children.find(c => c.type === 'Group');
+                        if (group) {
+                            console.log('✅ Found Group inside Stack');
+                            console.log(`   Group children: ${group.children?.length || 0}`);
+                        }
+                    }
+                }
+                else {
+                    console.log('❌ Stack not found');
+                }
+                // Display full tree structure
+                console.log('\n🌳 Full Component Tree:');
+                printComponentTree(result.components, 0);
+                // Success criteria
+                const hasCorrectNesting = rootComponent.type === 'Card' &&
+                    rootComponent.children?.some(c => c.type === 'CardSection') &&
+                    rootComponent.children?.some(c => c.type === 'Stack');
+                if (hasCorrectNesting) {
+                    console.log('\n🎉 SUCCESS: Parser correctly maintains nested structure!');
+                }
+                else {
+                    console.log('\n❌ FAILED: Parser still losing nested structure');
+                }
+            }
+            else {
+                console.log('❌ Root component is not Card or has no children');
+            }
+        }
+        else {
+            console.log('❌ No components parsed');
+        }
+    }
+    catch (error) {
+        console.error('❌ Validation failed:', error);
+    }
+}
+function printComponentTree(components, depth) {
+    const indent = '  '.repeat(depth);
+    components.forEach(comp => {
+        console.log(`${indent}📦 ${comp.type} (${comp.id})`);
+        if (comp.children && comp.children.length > 0) {
+            printComponentTree(comp.children, depth + 1);
+        }
+    });
+}

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

@@ -0,0 +1,73 @@
+/**
+ * Unified Story File Management System
+ *
+ * This replaces the complex multi-path save logic with a simple, predictable system:
+ * 1. Always save to the main /generated/ directory
+ * 2. Overwrite existing files by default
+ * 3. Optional backup creation (only when explicitly requested)
+ * 4. No subdirectories, no versioning, no confusion
+ */
+import { updateStoryFile } from './storyFileUpdater';
+/**
+ * Save components to a story file using the new simplified architecture
+ * Always saves to the main /generated/ directory, never creates subdirectories
+ */
+export async function saveStoryFile(filePath, components, options = {}) {
+    try {
+        const fileName = filePath.split('/').pop() || filePath;
+        const storyName = options.storyName ||
+            fileName.replace('.stories.tsx', '').replace(/[-_]/g, ' ');
+        // Use the existing updateStoryFile function with createBackup option
+        const result = await updateStoryFile(filePath, components, storyName);
+        if (result.success) {
+            return {
+                success: true,
+                filePath,
+                fileName,
+                action: 'updated', // We don't distinguish between create/update anymore
+                hasBackup: options.createBackup,
+            };
+        }
+        else {
+            return {
+                success: false,
+                action: 'updated',
+                error: result.error || 'Unknown error occurred'
+            };
+        }
+    }
+    catch (error) {
+        return {
+            success: false,
+            action: 'updated',
+            error: error instanceof Error ? error.message : 'Unknown error occurred'
+        };
+    }
+}
+/**
+ * Get a clean filename for saving
+ * Removes duplicate prefixes and ensures .stories.tsx extension
+ */
+export function getCleanFileName(originalName) {
+    let cleanName = originalName;
+    // Remove duplicate "generated-" prefixes
+    while (cleanName.startsWith('generated-generated-')) {
+        cleanName = cleanName.replace(/^generated-/, '');
+    }
+    // Ensure .stories.tsx extension
+    if (!cleanName.endsWith('.stories.tsx')) {
+        cleanName = cleanName.replace(/\.tsx$/, '') + '.stories.tsx';
+    }
+    return cleanName;
+}
+/**
+ * Convert a file path to a story name
+ * Extracts a human-readable name from the file path
+ */
+export function filePathToStoryName(filePath) {
+    const fileName = filePath.split('/').pop() || filePath;
+    return fileName
+        .replace('.stories.tsx', '')
+        .replace(/[-_]/g, ' ')
+        .replace(/\b\w/g, l => l.toUpperCase()); // Title case
+}