@tpitre/story-ui 2.6.1 → 2.7.1

package/dist/visual-builder/components/StoryManager/SaveOnlyManager.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActionIcon, Tooltip } from '@mantine/core';
+import { IconDeviceFloppy } from '@tabler/icons-react';
+import { useVisualBuilderStore } from '../../store/visualBuilderStore';
+import { saveStoryFile, getCleanFileName, filePathToStoryName } from '../../utils/storyFileManager';
+export const SaveOnlyManager = ({ storyFilePath, size = 'xs' }) => {
+    const { components, isDirty, markClean } = useVisualBuilderStore();
+    const handleSave = async () => {
+        if (!storyFilePath) {
+            // If no file path, save to sessionStorage for now
+            const storyData = {
+                components,
+                timestamp: Date.now()
+            };
+            sessionStorage.setItem('visualBuilderComponents', JSON.stringify(storyData));
+            markClean();
+            console.log('✅ Saved to session storage');
+            return;
+        }
+        try {
+            // Debug: Check components before saving
+            console.log('🔍 Components before save:', JSON.stringify(components, null, 2));
+            // Fix style props if they're strings
+            const fixedComponents = JSON.parse(JSON.stringify(components, (key, value) => {
+                if (key === 'style' && typeof value === 'string') {
+                    console.warn('⚠️ Found string style prop, attempting to parse:', value);
+                    // Try to parse string style back to object
+                    try {
+                        // Remove outer quotes if present
+                        let styleStr = value;
+                        if (styleStr.startsWith('"') && styleStr.endsWith('"')) {
+                            styleStr = styleStr.slice(1, -1);
+                        }
+                        // Check if it looks like an object string
+                        if (styleStr.startsWith('{') && styleStr.endsWith('}')) {
+                            // Remove braces and parse
+                            const innerStr = styleStr.slice(1, -1).trim();
+                            const styleObj = {};
+                            // Split by comma (careful with values that might contain commas)
+                            const pairs = innerStr.split(/,(?![^(]*\))/);
+                            for (const pair of pairs) {
+                                const colonIndex = pair.indexOf(':');
+                                if (colonIndex > -1) {
+                                    const prop = pair.substring(0, colonIndex).trim();
+                                    let val = pair.substring(colonIndex + 1).trim();
+                                    // Remove quotes from property name
+                                    const cleanProp = prop.replace(/['"]/g, '');
+                                    // Parse value
+                                    if (val.startsWith("'") && val.endsWith("'")) {
+                                        val = val.slice(1, -1);
+                                    }
+                                    else if (val.startsWith('"') && val.endsWith('"')) {
+                                        val = val.slice(1, -1);
+                                    }
+                                    else if (/^\d+$/.test(val)) {
+                                        val = parseInt(val, 10);
+                                    }
+                                    else if (/^\d*\.\d+$/.test(val)) {
+                                        val = parseFloat(val);
+                                    }
+                                    styleObj[cleanProp] = val;
+                                }
+                            }
+                            console.log('✅ Parsed style object:', styleObj);
+                            return styleObj;
+                        }
+                    }
+                    catch (e) {
+                        console.error('❌ Failed to parse style string:', e);
+                    }
+                }
+                return value;
+            }));
+            // Use the new simplified save system
+            const cleanFileName = getCleanFileName(storyFilePath.split('/').pop() || storyFilePath);
+            const storyName = filePathToStoryName(cleanFileName);
+            const result = await saveStoryFile(storyFilePath, fixedComponents, {
+                storyName,
+                createBackup: false // Visual Builder never creates backups
+            });
+            if (result.success) {
+                markClean();
+                console.log(`✅ Saved story: ${result.fileName}`);
+            }
+            else {
+                console.error(`❌ Failed to save: ${result.error}`);
+            }
+        }
+        catch (error) {
+            console.error('Failed to save story:', error);
+        }
+    };
+    return (_jsx(Tooltip, { label: isDirty ? "Save changes" : "No changes to save", children: _jsx(ActionIcon, { size: size, variant: isDirty ? 'filled' : 'subtle', color: isDirty ? 'blue' : 'gray', onClick: handleSave, disabled: !isDirty, children: _jsx(IconDeviceFloppy, { size: 14 }) }) }));
+};

package/dist/visual-builder/components/StoryManager/StoryManager.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Group, ActionIcon, Tooltip, Modal, TextInput, Button, Text, Stack, List } from '@mantine/core';
+import { IconDeviceFloppy, IconFolderOpen, IconPlus, IconTrash } from '@tabler/icons-react';
+import { useVisualBuilderStore } from '../../store/visualBuilderStore';
+import { getSavedStories, deleteStory } from '../../utils/storyPersistence';
+export const StoryManager = ({ size = 'xs' }) => {
+    const [isLoadModalOpen, setIsLoadModalOpen] = useState(false);
+    const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
+    const [savedStories, setSavedStories] = useState([]);
+    const [saveStoryName, setSaveStoryName] = useState('');
+    const { saveCurrentStory, loadStoryById, newStory, currentStoryName, currentStoryId, isDirty } = useVisualBuilderStore();
+    const refreshSavedStories = () => {
+        setSavedStories(getSavedStories());
+    };
+    const handleOpenLoadModal = () => {
+        refreshSavedStories();
+        setIsLoadModalOpen(true);
+    };
+    const handleOpenSaveModal = () => {
+        setSaveStoryName(currentStoryName);
+        setIsSaveModalOpen(true);
+    };
+    const handleQuickSave = () => {
+        if (currentStoryId || currentStoryName !== 'Untitled Story') {
+            saveCurrentStory();
+        }
+        else {
+            handleOpenSaveModal();
+        }
+    };
+    const handleSaveStory = () => {
+        if (saveStoryName.trim()) {
+            saveCurrentStory(saveStoryName.trim());
+            setIsSaveModalOpen(false);
+            setSaveStoryName('');
+        }
+    };
+    const handleLoadStory = (storyId) => {
+        const success = loadStoryById(storyId);
+        if (success) {
+            setIsLoadModalOpen(false);
+        }
+    };
+    const handleDeleteStory = (storyId, event) => {
+        event.stopPropagation();
+        if (confirm('Are you sure you want to delete this story?')) {
+            deleteStory(storyId);
+            refreshSavedStories();
+            // If we deleted the current story, create a new one
+            if (currentStoryId === storyId) {
+                newStory();
+            }
+        }
+    };
+    const handleNewStory = () => {
+        if (isDirty && !confirm('You have unsaved changes. Are you sure you want to create a new story?')) {
+            return;
+        }
+        newStory();
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Group, { gap: "xs", children: [_jsx(Tooltip, { label: "New Story", children: _jsx(ActionIcon, { size: size, variant: "subtle", onClick: handleNewStory, children: _jsx(IconPlus, { size: 14 }) }) }), _jsx(Tooltip, { label: "Save Story", children: _jsx(ActionIcon, { size: size, variant: isDirty ? 'filled' : 'subtle', color: isDirty ? 'blue' : 'gray', onClick: handleQuickSave, children: _jsx(IconDeviceFloppy, { size: 14 }) }) }), _jsx(Tooltip, { label: "Load Story", children: _jsx(ActionIcon, { size: size, variant: "subtle", onClick: handleOpenLoadModal, children: _jsx(IconFolderOpen, { size: 14 }) }) })] }), _jsx(Modal, { opened: isSaveModalOpen, onClose: () => setIsSaveModalOpen(false), title: "Save Story", size: "sm", children: _jsxs(Stack, { gap: "md", children: [_jsx(TextInput, { label: "Story Name", placeholder: "Enter story name...", value: saveStoryName, onChange: (event) => setSaveStoryName(event.currentTarget.value), "data-autofocus": true }), _jsxs(Group, { justify: "flex-end", gap: "xs", children: [_jsx(Button, { variant: "outline", onClick: () => setIsSaveModalOpen(false), children: "Cancel" }), _jsx(Button, { onClick: handleSaveStory, disabled: !saveStoryName.trim(), children: "Save" })] })] }) }), _jsx(Modal, { opened: isLoadModalOpen, onClose: () => setIsLoadModalOpen(false), title: "Load Story", size: "md", children: _jsxs(Stack, { gap: "md", children: [savedStories.length === 0 ? (_jsx(Text, { c: "dimmed", ta: "center", py: "lg", children: "No saved stories found" })) : (_jsx(List, { spacing: "xs", size: "sm", children: savedStories.map((story) => (_jsx(List.Item, { style: { listStyle: 'none', padding: 0 }, children: _jsxs(Group, { justify: "space-between", p: "sm", style: {
+                                        border: '1px solid #e9ecef',
+                                        borderRadius: '4px',
+                                        cursor: 'pointer',
+                                        backgroundColor: story.id === currentStoryId ? '#f1f3f4' : 'white'
+                                    }, onClick: () => handleLoadStory(story.id), children: [_jsxs(Stack, { gap: "xs", style: { flex: 1 }, children: [_jsx(Text, { fw: 500, children: story.name }), _jsxs(Text, { size: "xs", c: "dimmed", children: [story.components.length, " components \u2022 Updated ", new Date(story.updatedAt).toLocaleDateString()] })] }), _jsx(ActionIcon, { size: "sm", variant: "subtle", color: "red", onClick: (e) => handleDeleteStory(story.id, e), children: _jsx(IconTrash, { size: 14 }) })] }) }, story.id))) })), _jsx(Group, { justify: "flex-end", children: _jsx(Button, { variant: "outline", onClick: () => setIsLoadModalOpen(false), children: "Close" }) })] }) })] }));
+};

package/dist/visual-builder/components/StoryManager/index.js

@@ -0,0 +1 @@
+export { StoryManager } from './StoryManager';

package/dist/visual-builder/components/VisualBuilder.js

@@ -0,0 +1,256 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { DndContext } from '@dnd-kit/core';
+import { Box, Group, Button, Badge, Text } from '@mantine/core';
+import { IconDeviceFloppy } from '@tabler/icons-react';
+import { Canvas } from './Canvas/Canvas';
+import { ComponentPalette } from './ComponentPalette/ComponentPalette';
+import { PropertyEditor } from './PropertyEditor/PropertyEditor';
+import { CodeExporter } from './CodeExporter/CodeExporter';
+import { useDragAndDrop } from '../hooks/useDragAndDrop';
+import { useVisualBuilderStore } from '../store/visualBuilderStore';
+import { getStoryIdFromURL, saveDraft, restoreDraft, getVisualBuilderEditURL } from '../utils/storyPersistence';
+import { updateStoryFile } from '../utils/storyFileUpdater';
+export const VisualBuilder = ({ style, height = '100vh', initialCode, initialContent, onCodeExport, storyFilePath }) => {
+    const { sensors, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel } = useDragAndDrop();
+    const { components, clearCanvas, openCodeModal, loadFromCode, loadFromAI, importFromStoryUI, saveCurrentStory, loadStoryById, currentStoryName, isDirty, isImportedFromStory } = useVisualBuilderStore();
+    // Create a stable story ID for drafts
+    const [storyId] = React.useState(() => {
+        const urlStoryId = getStoryIdFromURL();
+        const urlParams = new URLSearchParams(window.location.search);
+        const editId = urlParams.get('edit');
+        return editId || urlStoryId || `story-${Date.now()}`;
+    });
+    // Update URL when story ID changes
+    React.useEffect(() => {
+        if (storyId) {
+            const url = new URL(window.location.href);
+            url.searchParams.set('story', storyId);
+            window.history.replaceState({}, '', url.toString());
+        }
+    }, [storyId]);
+    // Track if initial load is complete
+    const [isInitialLoadComplete, setIsInitialLoadComplete] = React.useState(false);
+    // Load story from URL or initial code
+    React.useEffect(() => {
+        console.log('🚀 Visual Builder initializing...');
+        // Check for story ID in URL first
+        const storyIdFromURL = getStoryIdFromURL();
+        if (storyIdFromURL) {
+            const success = loadStoryById(storyIdFromURL);
+            if (success) {
+                console.log('✅ Loaded story from URL:', storyIdFromURL);
+                setIsInitialLoadComplete(true);
+                return; // Successfully loaded story from URL
+            }
+        }
+        // Check for sessionStorage content from Visual Builder button
+        let sessionStorageCode = '';
+        let sourceFile = '';
+        try {
+            sessionStorageCode = sessionStorage.getItem('visualBuilderInitialCode') || '';
+            sourceFile = sessionStorage.getItem('visualBuilderSourceFile') || '';
+            console.log('📂 SessionStorage check:', {
+                hasCode: !!sessionStorageCode,
+                codeLength: sessionStorageCode.length,
+                sourceFile: sourceFile,
+                preview: sessionStorageCode.substring(0, 100) + '...'
+            });
+            // Clear sessionStorage after reading to prevent re-loading
+            if (sessionStorageCode) {
+                sessionStorage.removeItem('visualBuilderInitialCode');
+                sessionStorage.removeItem('visualBuilderSourceFile');
+                sessionStorage.removeItem('visualBuilderStoryVariant');
+            }
+        }
+        catch (e) {
+            console.error('❌ Error reading from sessionStorage:', e);
+        }
+        // Prioritize sessionStorage code over props
+        const codeToLoad = sessionStorageCode || initialContent || initialCode;
+        // Try to restore draft if no explicit code to load
+        if (!codeToLoad) {
+            const draft = restoreDraft(storyId);
+            if (draft && draft.components && draft.components.length > 0) {
+                console.log('📝 Restored draft from localStorage');
+                // Load components and restore the isImportedFromStory flag
+                loadFromAI(draft.components);
+                // Restore the isImportedFromStory flag and other metadata
+                if (draft.isImportedFromStory) {
+                    useVisualBuilderStore.setState({ isImportedFromStory: true });
+                }
+                if (draft.storyName) {
+                    useVisualBuilderStore.setState({ currentStoryName: draft.storyName });
+                }
+                if (draft.sourceFile) {
+                    // Store source file in sessionStorage for later use
+                    sessionStorage.setItem('visualBuilderSourceFile', draft.sourceFile);
+                }
+                setIsInitialLoadComplete(true);
+                return;
+            }
+        }
+        // Load the code if available
+        if (codeToLoad) {
+            console.log('📎 Loading code into Visual Builder:', {
+                source: sessionStorageCode ? 'sessionStorage' : 'props',
+                length: codeToLoad.length,
+                hasRender: codeToLoad.includes('render:'),
+                hasStories: codeToLoad.includes('.stories'),
+                isTemplate: codeToLoad.includes('Component ready for editing')
+            });
+            // Try Story UI import first if content looks like a story
+            if (codeToLoad.includes('render:') || codeToLoad.includes('.stories')) {
+                importFromStoryUI(codeToLoad).then((result) => {
+                    console.log('🎉 Story UI import result:', result);
+                    setIsInitialLoadComplete(true);
+                }).catch((error) => {
+                    console.error('❌ Story UI import failed, falling back to regular load:', error);
+                    loadFromCode(codeToLoad).then(() => {
+                        setIsInitialLoadComplete(true);
+                    }).catch(console.error);
+                });
+            }
+            else {
+                loadFromCode(codeToLoad).then(() => {
+                    setIsInitialLoadComplete(true);
+                }).catch(console.error);
+            }
+        }
+        else {
+            console.log('🎨 No code to load, starting with empty canvas');
+            setIsInitialLoadComplete(true);
+        }
+    }, []); // Run only once on mount
+    // Save components to draft when they change after initial load
+    React.useEffect(() => {
+        if (isInitialLoadComplete && components.length > 0) {
+            // Save immediately when components are loaded from initial content
+            const sourceFile = sessionStorage.getItem('visualBuilderSourceFile') || storyFilePath || undefined;
+            saveDraft(storyId, components, isImportedFromStory, currentStoryName, sourceFile);
+            console.log('💾 Saved story to draft with ID:', storyId);
+        }
+    }, [components, isInitialLoadComplete, storyId, isImportedFromStory, currentStoryName, storyFilePath]);
+    // Auto-save drafts when dirty
+    React.useEffect(() => {
+        if (components.length > 0 && isDirty && isInitialLoadComplete) {
+            const timer = setTimeout(() => {
+                const sourceFile = sessionStorage.getItem('visualBuilderSourceFile') || storyFilePath || undefined;
+                saveDraft(storyId, components, isImportedFromStory, currentStoryName, sourceFile);
+                console.log('💾 Auto-saved draft');
+            }, 2000);
+            return () => clearTimeout(timer);
+        }
+    }, [components, isDirty, storyId, isImportedFromStory, isInitialLoadComplete, currentStoryName, storyFilePath]);
+    // Update URL when editing
+    React.useEffect(() => {
+        if (window.location.pathname.includes('visual-builder')) {
+            const editURL = getVisualBuilderEditURL(storyId);
+            window.history.replaceState({}, '', editURL);
+        }
+    }, [storyId]);
+    return (_jsx(DndContext, { sensors: sensors, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: _jsxs(Box, { style: {
+                display: 'flex',
+                height,
+                backgroundColor: '#f8f9fa',
+                ...style
+            }, children: [_jsxs(Box, { style: {
+                        width: 280,
+                        backgroundColor: 'white',
+                        borderRight: '1px solid #e9ecef',
+                        display: 'flex',
+                        flexDirection: 'column'
+                    }, children: [_jsxs(Box, { p: "sm", style: { borderBottom: '1px solid #e9ecef' }, children: [_jsx(Group, { justify: "space-between", mb: "sm", children: _jsx("h3", { style: { margin: 0, fontSize: '1.1rem' }, children: "Components" }) }), _jsxs(Group, { gap: "xs", children: [_jsx(Button, { size: "xs", variant: "outline", onClick: clearCanvas, children: "Clear" }), _jsx(Button, { size: "xs", variant: "filled", onClick: async () => {
+                                                if (onCodeExport) {
+                                                    try {
+                                                        const { generateJSXCode } = await import('./CodeExporter/codeGenerator');
+                                                        const { components } = useVisualBuilderStore.getState();
+                                                        const code = generateJSXCode(components);
+                                                        onCodeExport(code);
+                                                    }
+                                                    catch (error) {
+                                                        console.error('Failed to generate code:', error);
+                                                        openCodeModal();
+                                                    }
+                                                }
+                                                else {
+                                                    openCodeModal();
+                                                }
+                                            }, children: "Export" })] })] }), _jsx(Box, { style: { flex: 1, overflow: 'auto' }, children: _jsx(ComponentPalette, {}) })] }), _jsxs(Box, { style: { flex: 1, display: 'flex', flexDirection: 'column' }, children: [_jsx(Box, { p: "sm", style: { borderBottom: '1px solid #e9ecef', backgroundColor: 'white' }, children: _jsxs(Group, { justify: "space-between", align: "center", children: [_jsxs(Group, { align: "center", gap: "sm", children: [_jsx(Text, { fw: 500, size: "lg", children: "Canvas" }), currentStoryName && currentStoryName !== 'Untitled Story' && (_jsxs(Group, { gap: "xs", align: "center", children: [_jsx(Text, { size: "sm", c: "dimmed", children: "\u2022" }), _jsx(Text, { size: "sm", c: "dimmed", children: currentStoryName }), isDirty && (_jsx(Badge, { size: "xs", color: "orange", variant: "filled", children: "Unsaved" }))] }))] }), _jsx(Button, { size: "sm", variant: isDirty ? 'filled' : 'outline', color: isDirty ? 'blue' : 'gray', leftSection: _jsx(IconDeviceFloppy, { size: 16 }), onClick: async () => {
+                                            // Check if we're editing an existing story (came from Storybook)
+                                            const sourceFile = sessionStorage.getItem('visualBuilderSourceFile');
+                                            const isEditingExistingStory = Boolean(sourceFile) || isImportedFromStory || Boolean(storyFilePath);
+                                            let finalName = currentStoryName;
+                                            let fileToUpdate = storyFilePath;
+                                            if (isEditingExistingStory) {
+                                                // We're editing an existing story - NEVER prompt for a name
+                                                // Use the source file as the file to update
+                                                if (sourceFile) {
+                                                    fileToUpdate = sourceFile;
+                                                    // Extract a clean name from the file if we don't have one
+                                                    if (!currentStoryName || currentStoryName === 'Untitled Story' || currentStoryName === 'Imported Story') {
+                                                        finalName = sourceFile
+                                                            .replace(/^(edited-|generated-)/, '') // Remove prefixes
+                                                            .replace(/\.stories\.(tsx?|jsx?)$/, '') // Remove extension
+                                                            .replace(/[_-]/g, ' ')
+                                                            .split(' ')
+                                                            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+                                                            .join(' ');
+                                                        console.log(`Using name from source file: ${sourceFile} → ${finalName}`);
+                                                    }
+                                                }
+                                                else if (!fileToUpdate) {
+                                                    // Fallback: use the current story name to generate a file path
+                                                    fileToUpdate = `${(currentStoryName || 'updated-story').toLowerCase().replace(/[^a-z0-9]+/g, '-')}.stories.tsx`;
+                                                }
+                                            }
+                                            else {
+                                                // We're creating a new story - may need to prompt for a name
+                                                const isGenericName = !currentStoryName ||
+                                                    currentStoryName === 'Untitled Story' ||
+                                                    currentStoryName === 'Imported Story';
+                                                if (isGenericName) {
+                                                    const name = prompt('Enter story name:', currentStoryName || '');
+                                                    if (name && name.trim()) {
+                                                        finalName = name.trim();
+                                                    }
+                                                    else {
+                                                        return; // User cancelled
+                                                    }
+                                                }
+                                                // Generate file path from the story name
+                                                fileToUpdate = `${finalName.toLowerCase().replace(/[^a-z0-9]+/g, '-')}.stories.tsx`;
+                                            }
+                                            // Save to store
+                                            saveCurrentStory(finalName);
+                                            // Always try to update the story file if we have components
+                                            if (components.length > 0 && fileToUpdate) {
+                                                const result = await updateStoryFile(fileToUpdate, components, finalName);
+                                                if (result.success) {
+                                                    console.log(`✅ Updated story file: ${fileToUpdate}`);
+                                                    // Show success message
+                                                    const message = result.message || 'Story saved successfully!';
+                                                    alert(`${message}\n\nRefresh Storybook to see your changes.`);
+                                                }
+                                                else {
+                                                    console.error('Failed to update story file:', result.error);
+                                                    // Show error but reassure user that changes are saved locally
+                                                    if (result.error?.includes('server not available')) {
+                                                        alert('Story UI server is not running.\n\nYour changes have been saved locally.\nMake sure the Story UI server is running to save to files.');
+                                                    }
+                                                    else {
+                                                        alert(`Failed to save story: ${result.error}\n\nPlease try again.`);
+                                                    }
+                                                }
+                                            }
+                                            else {
+                                                console.log(`✅ Saved story: ${finalName}`);
+                                            }
+                                        }, disabled: !isDirty && !components.length, children: "Save Story" })] }) }), _jsx(Box, { style: { flex: 1, overflow: 'auto' }, children: _jsx(Canvas, {}) })] }), _jsxs(Box, { style: {
+                        width: 320,
+                        backgroundColor: 'white',
+                        borderLeft: '1px solid #e9ecef',
+                        display: 'flex',
+                        flexDirection: 'column'
+                    }, children: [_jsx(Box, { p: "sm", style: { borderBottom: '1px solid #e9ecef' }, children: _jsx("h3", { style: { margin: 0, fontSize: '1.1rem' }, children: "Properties" }) }), _jsx(Box, { style: { flex: 1, overflow: 'auto' }, children: _jsx(PropertyEditor, {}) })] }), _jsx(CodeExporter, {})] }) }));
+};