@tpitre/story-ui 2.6.1 → 2.7.1

package/dist/visual-builder/decorators/VisualBuilderDecorator.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+const VisualBuilderButton = ({ fileName, title, storyVariant }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const handleOpenVisualBuilder = async () => {
+        // Check if this is an edited story
+        const isEditedStory = title?.startsWith('Edited/');
+        // Get the story source code
+        let sourceCode = '';
+        console.log('🚀 Starting Visual Builder source fetch:', {
+            fileName,
+            title,
+            isEditedStory,
+            storyVariant
+        });
+        try {
+            // Try to get raw source from Vite plugin endpoint
+            const cleanFileName = fileName.replace(/\.stories\.tsx$/, '').replace(/\.stories$/, '');
+            try {
+                console.log(`🔍 Trying Vite plugin endpoint: /api/raw-source?file=${encodeURIComponent(cleanFileName)}&isEdited=${isEditedStory}`);
+                const response = await fetch(`/api/raw-source?file=${encodeURIComponent(cleanFileName)}&isEdited=${isEditedStory}`);
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data.success && data.source) {
+                        sourceCode = data.source;
+                        console.log('✅ Got raw source code from Vite plugin endpoint');
+                    }
+                }
+            }
+            catch (pluginError) {
+                console.log('❌ Vite plugin endpoint not available:', pluginError);
+            }
+            // Fallback - try to get from MCP server if available
+            if (!sourceCode) {
+                const apiPort = window.STORY_UI_MCP_PORT ||
+                    window.__STORY_UI_PORT__ ||
+                    import.meta.env?.VITE_STORY_UI_PORT ||
+                    '4001';
+                try {
+                    const possibleNames = [
+                        fileName,
+                        cleanFileName,
+                        `${cleanFileName}.stories.tsx`,
+                        `${fileName}.stories.tsx`
+                    ];
+                    for (const name of possibleNames) {
+                        try {
+                            const mpcResponse = await fetch(`http://localhost:${apiPort}/story-ui/visual-builder/load?fileName=${encodeURIComponent(name)}&isEdited=${isEditedStory}`);
+                            if (mpcResponse.ok) {
+                                const data = await mpcResponse.json();
+                                if (data.success && data.content && data.content.trim().length > 0) {
+                                    sourceCode = data.content;
+                                    console.log('✅ Got source code from Visual Builder endpoint:', name);
+                                    break;
+                                }
+                            }
+                        }
+                        catch (nameError) {
+                            console.log(`❌ Failed to fetch "${name}":`, nameError.message);
+                        }
+                    }
+                }
+                catch (mpcError) {
+                    console.log('❌ MCP server not available:', mpcError);
+                }
+            }
+            // If no source code available, create a template
+            if (!sourceCode) {
+                console.warn('⚠️ Creating fallback template - no source available');
+                sourceCode = `// Source code not available - creating template
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: '${title || 'Generated/Component'}',
+  parameters: {
+    layout: 'centered',
+    visualBuilder: true,
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div>Component ready for editing in Visual Builder</div>
+  ),
+};`;
+            }
+        }
+        catch (error) {
+            console.error('❌ Error fetching story source:', error);
+        }
+        // Store the source code in sessionStorage for Visual Builder to pick up
+        sessionStorage.setItem('visualBuilderInitialCode', sourceCode);
+        sessionStorage.setItem('visualBuilderSourceFile', fileName);
+        sessionStorage.setItem('visualBuilderStoryVariant', storyVariant || 'Default');
+        sessionStorage.setItem('visualBuilderIsEdited', isEditedStory ? 'true' : 'false');
+        // Clear any previous Visual Builder draft to ensure clean start
+        sessionStorage.removeItem('visualBuilderDraft');
+        console.log('📝 Stored source code for Visual Builder:', {
+            fileName,
+            sourceLength: sourceCode.length,
+            preview: sourceCode.substring(0, 200) + '...'
+        });
+        // Open Visual Builder in a new tab
+        const visualBuilderUrl = `${window.location.origin}${window.location.pathname}?path=/story/story-ui--generator`;
+        // Navigate to the Visual Builder story
+        window.location.href = visualBuilderUrl;
+    };
+    return (_jsx("button", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: handleOpenVisualBuilder, style: {
+            position: 'fixed',
+            top: '12px',
+            right: '12px',
+            padding: '4px 8px',
+            fontSize: '11px',
+            fontWeight: 500,
+            color: isHovered ? '#8b5cf6' : '#94a3b8',
+            backgroundColor: isHovered ? 'rgba(139, 92, 246, 0.1)' : 'rgba(255, 255, 255, 0.9)',
+            border: `1px solid ${isHovered ? '#8b5cf6' : 'rgba(148, 163, 184, 0.3)'}`,
+            borderRadius: '4px',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
+            zIndex: 9999,
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif',
+            boxShadow: isHovered ? '0 2px 8px rgba(139, 92, 246, 0.3)' : '0 1px 3px rgba(0, 0, 0, 0.1)',
+            backdropFilter: 'blur(8px)',
+        }, title: "Open in Visual Builder for advanced editing", children: "\uD83C\uDFA8 Edit in Visual Builder" }));
+};
+export const withVisualBuilderButton = (Story, context) => {
+    const [showButton, setShowButton] = useState(false);
+    useEffect(() => {
+        // Show button for ALL generated AND edited stories
+        const isEditableStory = context.title?.startsWith('Generated/') ||
+            context.title?.startsWith('Edited/') ||
+            context.id?.toLowerCase().includes('generated') ||
+            context.id?.toLowerCase().includes('edited') ||
+            context.parameters?.visualBuilder === true ||
+            context.parameters?.isEdited === true;
+        setShowButton(isEditableStory);
+    }, [context.title, context.id, context.parameters]);
+    // Extract fileName from the story ID or parameters
+    const storyId = context.id || '';
+    const storyName = context.name || 'Default';
+    const isEditedStory = context.title?.startsWith('Edited/') || context.parameters?.isEdited === true;
+    let fileName = context.parameters?.fileName || 'unknown';
+    // Clean the fileName if it contains a path
+    if (fileName && fileName !== 'unknown') {
+        fileName = fileName
+            .replace(/^\.\//, '')
+            .replace(/^.*\//, '')
+            .replace(/\.stories\.(tsx?|jsx?)$/, '')
+            .replace(/\.(tsx?|jsx?)$/, '');
+    }
+    // If no fileName parameter, try to extract from story ID
+    if (!fileName || fileName === 'unknown' && storyId) {
+        const baseId = storyId.split('--')[0];
+        if (baseId.startsWith('generated-')) {
+            fileName = baseId.substring(10);
+        }
+        else if (baseId.startsWith('edited-')) {
+            fileName = baseId.substring(7);
+        }
+        else {
+            fileName = baseId;
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Story, { ...context }), showButton && (_jsx(VisualBuilderButton, { fileName: fileName, title: context.title, storyVariant: storyName }))] }));
+};
+// Helper function to apply decorator to generated stories
+export const applyToGeneratedStories = (storyExports) => {
+    if (storyExports.default) {
+        storyExports.default.decorators = [
+            ...(storyExports.default.decorators || []),
+            withVisualBuilderButton
+        ];
+        // Add visual builder parameter to mark this as editable
+        storyExports.default.parameters = {
+            ...storyExports.default.parameters,
+            visualBuilder: true,
+        };
+    }
+    return storyExports;
+};

package/dist/visual-builder/example-integration.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StoryUIPanel } from '../templates/StoryUI/StoryUIPanel';
+/**
+ * Example integration showing how the Visual Builder integrates with Story UI Panel
+ *
+ * This demonstrates the complete workflow:
+ * 1. User describes a component in the AI chat
+ * 2. AI generates component code
+ * 3. User can click "Edit in Visual Builder"
+ * 4. Visual Builder loads the generated code and allows visual editing
+ * 5. User can export the updated code
+ */
+export const IntegrationExample = () => {
+    return (_jsx("div", { style: { height: '100vh' }, children: _jsx(StoryUIPanel, {}) }));
+};
+/**
+ * Example AI-generated code that the parser should handle well
+ */
+export const sampleAICode = `
+import React from 'react';
+import { Button, TextInput, Stack, Card, Title, Group } from '@mantine/core';
+
+export const LoginForm = () => {
+  return (
+    <Card shadow="sm" padding="lg" radius="md" withBorder>
+      <Stack gap="md">
+        <Title order={2}>Login</Title>
+        <TextInput
+          label="Email"
+          placeholder="Enter your email"
+          required
+        />
+        <TextInput
+          label="Password"
+          placeholder="Enter your password"
+          type="password"
+          required
+        />
+        <Group justify="space-between">
+          <Button variant="outline">Cancel</Button>
+          <Button>Login</Button>
+        </Group>
+      </Stack>
+    </Card>
+  );
+};
+`;
+/**
+ * Test the parser with sample code
+ */
+export const testParser = () => {
+    const { parseAIGeneratedCode } = require('./utils/aiParser');
+    const result = parseAIGeneratedCode(sampleAICode);
+    console.log('Parse Result:', result);
+    console.log('Errors:', result.errors);
+    console.log('Warnings:', result.warnings);
+    console.log('Components:', result.components);
+    return result;
+};

package/dist/visual-builder/example.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MantineProvider, createTheme } from '@mantine/core';
+import { VisualBuilder } from './components/VisualBuilder';
+const theme = createTheme({
+/** Put your mantine theme override here */
+});
+/**
+ * Example usage of the Visual Builder component
+ *
+ * This demonstrates how to integrate the Visual Builder into your React application.
+ * The Visual Builder provides a complete drag-and-drop interface for building UI components.
+ */
+export const VisualBuilderExample = () => {
+    return (_jsx(MantineProvider, { theme: theme, children: _jsx("div", { style: { height: '100vh', width: '100vw' }, children: _jsx(VisualBuilder, {}) }) }));
+};
+/**
+ * Standalone Visual Builder for development/testing
+ */
+export const StandaloneVisualBuilder = () => {
+    return (_jsx(MantineProvider, { children: _jsx(VisualBuilder, { height: "100vh", style: {
+                fontFamily: 'system-ui, sans-serif'
+            } }) }));
+};

package/dist/visual-builder/hooks/useDragAndDrop.js

@@ -0,0 +1,137 @@
+import { useCallback } from 'react';
+import { PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { useVisualBuilderStore } from '../store/visualBuilderStore';
+import { getComponentConfig, CONTAINER_COMPONENTS } from '../config/componentRegistry';
+export const useDragAndDrop = () => {
+    const { setDraggedComponent, addComponent, moveComponent, moveComponentBetweenContainers, selectComponent } = useVisualBuilderStore();
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 8,
+        },
+    }));
+    const handleDragStart = useCallback((event) => {
+        const { active } = event;
+        const dragData = active.data.current;
+        if (dragData?.isFromPalette) {
+            // Dragging from component palette
+            const config = getComponentConfig(dragData.componentType);
+            if (config) {
+                const component = {
+                    id: `temp-${Date.now()}`,
+                    type: config.type,
+                    displayName: config.displayName,
+                    category: config.category,
+                    props: { ...config.defaultProps },
+                    children: []
+                };
+                setDraggedComponent(component);
+            }
+        }
+        else {
+            // Dragging existing component (reordering)
+            setDraggedComponent(dragData?.component || null);
+        }
+    }, [setDraggedComponent]);
+    const handleDragOver = useCallback((_event) => {
+        // Handle drag over for visual feedback
+        // Add visual feedback logic here if needed
+        // This could include highlighting valid drop zones
+    }, []);
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        if (!over) {
+            setDraggedComponent(null);
+            return;
+        }
+        const dragData = active.data.current;
+        const dropData = over.data.current;
+        if (dragData?.isFromPalette) {
+            // Adding new component from palette
+            const config = getComponentConfig(dragData.componentType);
+            if (config) {
+                const component = {
+                    id: `${config.type}-${Date.now()}`,
+                    type: config.type,
+                    displayName: config.displayName,
+                    category: config.category,
+                    props: { ...config.defaultProps },
+                    children: CONTAINER_COMPONENTS.includes(config.type) ? [] : undefined
+                };
+                // Determine the target for drop
+                let targetId = undefined;
+                let insertIndex = undefined;
+                // Check if dropped on an insertion point
+                if (dropData?.isInsertionPoint) {
+                    // Insert at specific index in specific parent (or root)
+                    targetId = dropData.parentId || undefined; // null means root level
+                    insertIndex = dropData.insertIndex;
+                }
+                // Check if dropped on a container drop zone
+                else if (dropData?.isContainer && dropData?.componentId) {
+                    targetId = dropData.componentId;
+                    insertIndex = dropData.insertIndex; // Append to end
+                }
+                // Check if dropped on canvas
+                else if (dropData?.isCanvas || over.id === 'canvas') {
+                    targetId = undefined; // Root level
+                }
+                // Check if over.id ends with '-drop' (container drop zone)
+                else if (typeof over.id === 'string' && over.id.endsWith('-drop')) {
+                    targetId = over.id.replace('-drop', '');
+                }
+                addComponent(component, targetId, insertIndex);
+                // Auto-select the new component
+                selectComponent({
+                    id: component.id,
+                    type: component.type,
+                    props: component.props
+                });
+            }
+        }
+        else if (dragData?.component) {
+            // Reordering existing components
+            const componentId = dragData.component.id;
+            if (dropData?.isInsertionPoint) {
+                // Handle insertion point drops for precise positioning
+                const targetParentId = dropData.parentId;
+                const insertIndex = dropData.insertIndex;
+                // Move to the specific insertion point
+                moveComponentBetweenContainers(componentId, dragData.parentId || null, targetParentId, insertIndex);
+            }
+            else if (dropData?.isContainer && dropData?.componentId) {
+                // Move to container - determine if it's between containers or within same container
+                const targetContainerId = dropData.componentId;
+                const insertIndex = dropData.insertIndex;
+                // Use the enhanced move function for better container handling
+                moveComponentBetweenContainers(componentId, dragData.parentId || null, targetContainerId, insertIndex);
+            }
+            else if (dropData?.isCanvas || over.id === 'canvas') {
+                // Move to root level (canvas)
+                moveComponentBetweenContainers(componentId, dragData.parentId || null, null, undefined);
+            }
+            else if (typeof over.id === 'string' && over.id.endsWith('-drop')) {
+                // Handle container drop zones
+                const containerId = over.id.replace('-drop', '');
+                moveComponentBetweenContainers(componentId, dragData.parentId || null, containerId, undefined);
+            }
+            else {
+                // Default: try to move relative to the over component
+                const overComponentId = typeof over.id === 'string' ? over.id : String(over.id);
+                if (overComponentId !== componentId) {
+                    moveComponent(componentId, overComponentId, undefined, 'after');
+                }
+            }
+        }
+        setDraggedComponent(null);
+    }, [setDraggedComponent, addComponent, moveComponent, selectComponent]);
+    const handleDragCancel = useCallback(() => {
+        setDraggedComponent(null);
+    }, [setDraggedComponent]);
+    return {
+        sensors,
+        handleDragStart,
+        handleDragOver,
+        handleDragEnd,
+        handleDragCancel
+    };
+};

package/dist/visual-builder/hooks/useSelection.js

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+import { useVisualBuilderStore } from '../store/visualBuilderStore';
+export const useSelection = () => {
+    const { selectedComponent, selectComponent } = useVisualBuilderStore();
+    const handleComponentSelect = useCallback((component) => {
+        selectComponent({
+            id: component.id,
+            type: component.type,
+            props: component.props
+        });
+    }, [selectComponent]);
+    const handleCanvasClick = useCallback((event) => {
+        // If clicking on empty canvas area, deselect
+        if (event.target === event.currentTarget) {
+            selectComponent(null);
+        }
+    }, [selectComponent]);
+    const isSelected = useCallback((componentId) => {
+        return selectedComponent?.id === componentId;
+    }, [selectedComponent]);
+    return {
+        selectedComponent,
+        handleComponentSelect,
+        handleCanvasClick,
+        isSelected
+    };
+};

package/dist/visual-builder/index.js

@@ -0,0 +1,7 @@
+// Visual Builder exports
+export { VisualBuilder } from './components/VisualBuilder';
+export { EmbeddedVisualBuilder } from './components/EmbeddedVisualBuilder';
+export { useVisualBuilderStore } from './store/visualBuilderStore';
+export { getComponentConfig, getComponentsByCategory, MANTINE_COMPONENTS } from './config/componentRegistry';
+export { parseAIGeneratedCode, createBasicLayout } from './utils/aiParser';
+export { parseStoryUIToBuilder, extractJSXFromStory, validateParsedComponents, isViteTransformedCode, preprocessStoryCode } from './utils/storyToBuilder';