@tpitre/story-ui 2.7.1 → 2.8.0

package/dist/visual-builder/store/visualBuilderStore.js

@@ -1,305 +0,0 @@
-import { create } from 'zustand';
-import { devtools } from 'zustand/middleware';
-import { removeComponentFromTree, insertComponentInTree, findComponentWithParent, isDescendant } from '../utils/componentTreeUtils';
-import { saveStory, loadStory, scheduleAutoSave, cancelAutoSave } from '../utils/storyPersistence';
-export const useVisualBuilderStore = create()(devtools((set, _get) => ({
-    // Initial state
-    components: [],
-    selectedComponent: null,
-    draggedComponent: null,
-    isCodeModalOpen: false,
-    isImportedFromStory: false,
-    // Story management state
-    currentStoryId: null,
-    currentStoryName: 'Untitled Story',
-    isDirty: false,
-    // Actions
-    addComponent: (component, targetId, insertIndex) => {
-        set((state) => {
-            const newComponent = { ...component, id: `${component.type}-${Date.now()}` };
-            let newComponents;
-            if (targetId) {
-                // Add as child to target component
-                const updateComponents = (components) => {
-                    return components.map(comp => {
-                        if (comp.id === targetId) {
-                            const children = comp.children || [];
-                            const newChildren = insertIndex !== undefined
-                                ? [...children.slice(0, insertIndex), newComponent, ...children.slice(insertIndex)]
-                                : [...children, newComponent];
-                            return {
-                                ...comp,
-                                children: newChildren
-                            };
-                        }
-                        if (comp.children) {
-                            return {
-                                ...comp,
-                                children: updateComponents(comp.children)
-                            };
-                        }
-                        return comp;
-                    });
-                };
-                newComponents = updateComponents(state.components);
-            }
-            else {
-                // Add to root level
-                newComponents = insertIndex !== undefined
-                    ? [...state.components.slice(0, insertIndex), newComponent, ...state.components.slice(insertIndex)]
-                    : [...state.components, newComponent];
-            }
-            // Mark as dirty and schedule auto-save
-            scheduleAutoSave(state.currentStoryName, newComponents, state.currentStoryId || undefined);
-            return { components: newComponents, isDirty: true };
-        });
-    },
-    removeComponent: (id) => {
-        set((state) => {
-            const removeFromComponents = (components) => {
-                return components
-                    .filter(comp => comp.id !== id)
-                    .map(comp => ({
-                    ...comp,
-                    children: comp.children ? removeFromComponents(comp.children) : undefined
-                }));
-            };
-            const newComponents = removeFromComponents(state.components);
-            // Mark as dirty and schedule auto-save
-            scheduleAutoSave(state.currentStoryName, newComponents, state.currentStoryId || undefined);
-            return {
-                components: newComponents,
-                selectedComponent: state.selectedComponent?.id === id ? null : state.selectedComponent,
-                isDirty: true
-            };
-        });
-    },
-    updateComponent: (id, updates) => {
-        set((state) => {
-            const updateComponents = (components) => {
-                return components.map(comp => {
-                    if (comp.id === id) {
-                        return { ...comp, ...updates };
-                    }
-                    if (comp.children) {
-                        return {
-                            ...comp,
-                            children: updateComponents(comp.children)
-                        };
-                    }
-                    return comp;
-                });
-            };
-            const newComponents = updateComponents(state.components);
-            // Mark as dirty and schedule auto-save
-            scheduleAutoSave(state.currentStoryName, newComponents, state.currentStoryId || undefined);
-            return { components: newComponents, isDirty: true };
-        });
-    },
-    selectComponent: (component) => {
-        set({ selectedComponent: component });
-    },
-    setDraggedComponent: (component) => {
-        set({ draggedComponent: component });
-    },
-    openCodeModal: () => {
-        set({ isCodeModalOpen: true });
-    },
-    closeCodeModal: () => {
-        set({ isCodeModalOpen: false });
-    },
-    clearCanvas: () => {
-        set({
-            components: [],
-            selectedComponent: null,
-            isImportedFromStory: false,
-            isDirty: true
-        });
-    },
-    moveComponent: (activeId, overId, insertIndex, insertPosition) => {
-        set((state) => {
-            // Prevent moving a component into itself or its descendants
-            if (activeId === overId || isDescendant(state.components, activeId, overId)) {
-                return state;
-            }
-            // Remove the component from its current location
-            const { components: updatedComponents, removed } = removeComponentFromTree(state.components, activeId);
-            if (!removed) {
-                return state; // Component not found
-            }
-            // Determine insertion target and index
-            let targetContainerId = null;
-            let insertionIndex = insertIndex;
-            if (insertIndex !== undefined) {
-                // Direct insertion at specific index (root level)
-                targetContainerId = null;
-            }
-            else {
-                // Insert relative to another component
-                const overComponent = findComponentWithParent(updatedComponents, overId);
-                if (overComponent) {
-                    if (overComponent.parent) {
-                        targetContainerId = overComponent.parent.id;
-                        insertionIndex = overComponent.index + (insertPosition === 'after' ? 1 : 0);
-                    }
-                    else {
-                        // Insert at root level
-                        targetContainerId = null;
-                        insertionIndex = overComponent.index + (insertPosition === 'after' ? 1 : 0);
-                    }
-                }
-            }
-            // Insert the component at the new location
-            const finalComponents = insertComponentInTree(updatedComponents, removed, targetContainerId, insertionIndex);
-            // Mark as dirty and schedule auto-save
-            scheduleAutoSave(state.currentStoryName, finalComponents, state.currentStoryId || undefined);
-            return { components: finalComponents, isDirty: true };
-        });
-    },
-    moveComponentBetweenContainers: (activeId, _fromParentId, toParentId, insertIndex) => {
-        set((state) => {
-            // Prevent moving a component into itself or its descendants
-            if (activeId === toParentId || (toParentId && isDescendant(state.components, activeId, toParentId))) {
-                return state;
-            }
-            // Remove component from its current location
-            const { components: afterRemoval, removed } = removeComponentFromTree(state.components, activeId);
-            if (!removed) {
-                return state; // Component not found
-            }
-            // Add component to new location
-            const finalComponents = insertComponentInTree(afterRemoval, removed, toParentId, insertIndex);
-            // Mark as dirty and schedule auto-save
-            scheduleAutoSave(state.currentStoryName, finalComponents, state.currentStoryId || undefined);
-            return { components: finalComponents, isDirty: true };
-        });
-    },
-    loadFromAI: (components) => {
-        set({
-            components,
-            selectedComponent: null,
-            isImportedFromStory: false,
-            isDirty: true
-        });
-    },
-    loadFromCode: async (code) => {
-        try {
-            const { parseAIGeneratedCode } = await import('../utils/aiParser');
-            const result = parseAIGeneratedCode(code);
-            if (result.errors.length === 0) {
-                set({
-                    components: result.components,
-                    selectedComponent: null,
-                    isImportedFromStory: false,
-                    isDirty: true
-                });
-            }
-            return {
-                success: result.errors.length === 0,
-                errors: result.errors,
-                warnings: result.warnings
-            };
-        }
-        catch (error) {
-            return {
-                success: false,
-                errors: [`Failed to load parser: ${error instanceof Error ? error.message : 'Unknown error'}`],
-                warnings: []
-            };
-        }
-    },
-    importFromStoryUI: async (storyCode) => {
-        try {
-            const { parseStoryUIToBuilder, validateParsedComponents, extractStoryName } = await import('../utils/storyToBuilder');
-            const parseResult = parseStoryUIToBuilder(storyCode);
-            // Validate the parsed components
-            const validationIssues = validateParsedComponents(parseResult.components);
-            const allWarnings = [...parseResult.warnings, ...validationIssues];
-            // Extract story name using the improved extraction function
-            const storyName = extractStoryName(storyCode);
-            // Determine if this is an existing story (has a valid extracted name)
-            const isEditingExistingStory = storyName !== 'Imported Story' && storyName !== 'Untitled Story';
-            if (parseResult.errors.length === 0) {
-                // Generate or use existing story ID
-                const state = _get();
-                const storyId = state.currentStoryId || `story-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-                set({
-                    components: parseResult.components,
-                    selectedComponent: null,
-                    isImportedFromStory: true, // Mark as imported from story
-                    currentStoryName: storyName, // Set the extracted story name
-                    currentStoryId: storyId, // Set the story ID
-                    isDirty: isEditingExistingStory ? false : true // Start clean for existing stories, dirty for new imports
-                });
-            }
-            return {
-                success: parseResult.errors.length === 0,
-                errors: parseResult.errors,
-                warnings: allWarnings
-            };
-        }
-        catch (error) {
-            return {
-                success: false,
-                errors: [`Failed to import from Story UI: ${error instanceof Error ? error.message : 'Unknown error'}`],
-                warnings: []
-            };
-        }
-    },
-    // Story management actions
-    saveCurrentStory: (name) => {
-        const state = _get();
-        const storyName = name || state.currentStoryName;
-        const savedStory = saveStory(storyName, state.components, state.currentStoryId || undefined);
-        set({
-            currentStoryId: savedStory.id,
-            currentStoryName: savedStory.name,
-            isDirty: false
-        });
-        // Update URL with story ID
-        const url = new URL(window.location.href);
-        url.searchParams.set('story', savedStory.id);
-        window.history.replaceState({}, '', url.toString());
-        return savedStory;
-    },
-    loadStoryById: (id) => {
-        const story = loadStory(id);
-        if (story) {
-            cancelAutoSave(); // Cancel any pending auto-save
-            set({
-                components: story.components,
-                currentStoryId: story.id,
-                currentStoryName: story.name,
-                isDirty: false,
-                selectedComponent: null,
-                isImportedFromStory: false
-            });
-            return true;
-        }
-        return false;
-    },
-    markDirty: () => {
-        set({ isDirty: true });
-    },
-    markClean: () => {
-        set({ isDirty: false });
-    },
-    setCurrentStoryName: (name) => {
-        set({ currentStoryName: name, isDirty: true });
-    },
-    newStory: () => {
-        cancelAutoSave();
-        set({
-            components: [],
-            selectedComponent: null,
-            currentStoryId: null,
-            currentStoryName: 'Untitled Story',
-            isDirty: false,
-            isImportedFromStory: false
-        });
-        // Remove story parameter from URL
-        const url = new URL(window.location.href);
-        url.searchParams.delete('story');
-        window.history.replaceState({}, '', url.toString());
-    }
-}), { name: 'visual-builder-store' }));

package/dist/visual-builder/types/index.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,145 +0,0 @@
-import { generateStoryFileContent, generatePropsString } from '../storyFileUpdater';
-describe('storyFileUpdater', () => {
-    describe('generatePropsString', () => {
-        it('should generate correct style props with double curly braces', () => {
-            const props = {
-                style: { maxWidth: 400, padding: '1rem' }
-            };
-            const result = generatePropsString(props, 'Card');
-            // Should have double curly braces for style object
-            expect(result).toBe(' style={{ maxWidth: 400, padding: \'1rem\' }}');
-            expect(result).not.toContain('style="');
-            expect(result).toContain('style={{');
-        });
-        it('should handle numeric values in style objects correctly', () => {
-            const props = {
-                style: { width: 300, height: 200, zIndex: 10 }
-            };
-            const result = generatePropsString(props, 'div');
-            expect(result).toBe(' style={{ width: 300, height: 200, zIndex: 10 }}');
-        });
-        it('should handle string values in style objects with quotes', () => {
-            const props = {
-                style: { color: 'red', backgroundColor: '#fff', display: 'flex' }
-            };
-            const result = generatePropsString(props, 'div');
-            expect(result).toBe(' style={{ color: \'red\', backgroundColor: \'#fff\', display: \'flex\' }}');
-        });
-        it('should handle mixed style values correctly', () => {
-            const props = {
-                style: {
-                    maxWidth: 400,
-                    padding: '1rem',
-                    margin: 0,
-                    display: 'block'
-                }
-            };
-            const result = generatePropsString(props, 'Card');
-            expect(result).toBe(' style={{ maxWidth: 400, padding: \'1rem\', margin: 0, display: \'block\' }}');
-        });
-        it('should handle other prop types correctly alongside style', () => {
-            const props = {
-                shadow: 'md',
-                padding: 'xl',
-                radius: 'md',
-                withBorder: true,
-                style: { maxWidth: 400 }
-            };
-            const result = generatePropsString(props, 'Card');
-            expect(result).toContain('shadow="md"');
-            expect(result).toContain('padding="xl"');
-            expect(result).toContain('radius="md"');
-            expect(result).toContain('withBorder');
-            expect(result).toContain('style={{ maxWidth: 400 }}');
-            expect(result).not.toContain('style="');
-        });
-        it('should filter out children prop for Text components', () => {
-            const props = {
-                children: 'Some text',
-                size: 'lg'
-            };
-            const result = generatePropsString(props, 'Text');
-            expect(result).toBe(' size="lg"');
-            expect(result).not.toContain('children');
-        });
-        it('should keep children prop for Button components', () => {
-            const props = {
-                children: 'Click me',
-                variant: 'outline'
-            };
-            const result = generatePropsString(props, 'Button');
-            expect(result).toContain('children="Click me"');
-            expect(result).toContain('variant="outline"');
-        });
-    });
-    describe('generateStoryFileContent', () => {
-        it('should generate story with correct style syntax', () => {
-            const components = [{
-                    id: 'card1',
-                    type: 'Card',
-                    displayName: 'Card',
-                    category: 'mantine',
-                    props: {
-                        shadow: 'md',
-                        padding: 'xl',
-                        radius: 'md',
-                        withBorder: true,
-                        style: { maxWidth: 400 }
-                    },
-                    children: []
-                }];
-            const result = generateStoryFileContent(components, 'TestStory', 'test.stories.tsx');
-            // Should contain double curly braces, not single quotes around object
-            expect(result).toContain('style={{ maxWidth: 400 }}');
-            expect(result).not.toContain('style="{ maxWidth: 400 }"');
-            expect(result).not.toContain('style="');
-        });
-        it('should generate story with complex style objects correctly', () => {
-            const components = [{
-                    id: 'div1',
-                    type: 'div',
-                    displayName: 'div',
-                    category: 'html',
-                    props: {
-                        style: {
-                            maxWidth: 400,
-                            padding: '1rem',
-                            margin: 0,
-                            backgroundColor: '#f8f9fa',
-                            borderRadius: '8px'
-                        }
-                    },
-                    children: []
-                }];
-            const result = generateStoryFileContent(components, 'ComplexStyle', 'complex.stories.tsx');
-            expect(result).toContain('style={{ maxWidth: 400, padding: \'1rem\', margin: 0, backgroundColor: \'#f8f9fa\', borderRadius: \'8px\' }}');
-            expect(result).not.toContain('style="');
-        });
-        it('should handle nested components with styles correctly', () => {
-            const components = [{
-                    id: 'card1',
-                    type: 'Card',
-                    displayName: 'Card',
-                    category: 'mantine',
-                    props: {
-                        style: { maxWidth: 400 }
-                    },
-                    children: [{
-                            id: 'stack1',
-                            type: 'Stack',
-                            displayName: 'Stack',
-                            category: 'mantine',
-                            props: {
-                                gap: 'md',
-                                style: { padding: '1rem' }
-                            },
-                            children: []
-                        }]
-                }];
-            const result = generateStoryFileContent(components, 'NestedStyles', 'nested.stories.tsx');
-            expect(result).toContain('style={{ maxWidth: 400 }}');
-            expect(result).toContain('style={{ padding: \'1rem\' }}');
-            expect(result).not.toContain('style="');
-        });
-    });
-});