@tpitre/story-ui 2.7.1 → 2.8.0

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

@@ -1,94 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

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

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

@@ -1,256 +0,0 @@
-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, {})] }) }));
-};