@tpitre/story-ui 3.3.0 → 3.4.0

package/dist/playground/stories/PlaygroundPhase5.stories.js

@@ -0,0 +1,512 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Storybook stories for testing Phase 5 features
+ */
+import React from 'react';
+import { Playground } from '../components/Playground/Playground';
+import { usePlaygroundStore } from '../store/playgroundStore';
+const meta = {
+    title: 'StoryUI/Playground/Phase5',
+    component: Playground,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+// Helper to create test components for code generation
+const createTestComponents = () => {
+    const store = usePlaygroundStore.getState();
+    store.components.clear();
+    // Root container
+    store.addComponent({
+        id: 'root',
+        type: 'Container',
+        displayName: 'Dashboard',
+        props: {
+            style: {
+                padding: '32px',
+                minHeight: '100vh',
+                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+            }
+        },
+        children: []
+    });
+    // Header with layout helpers
+    store.addComponent({
+        id: 'header',
+        type: 'Box',
+        displayName: 'Header',
+        parentId: 'root',
+        isHelper: true,
+        props: {
+            style: {
+                padding: '24px',
+                background: 'white',
+                borderRadius: '12px',
+                marginBottom: '32px',
+                boxShadow: '0 10px 30px rgba(0,0,0,0.1)'
+            }
+        },
+        children: []
+    });
+    // Title
+    store.addComponent({
+        id: 'title',
+        type: 'Heading',
+        displayName: 'Dashboard Title',
+        parentId: 'header',
+        textContent: 'Analytics Dashboard',
+        props: {
+            style: {
+                fontSize: '28px',
+                fontWeight: 'bold',
+                color: '#1a202c',
+                marginBottom: '8px'
+            }
+        }
+    });
+    // Subtitle
+    store.addComponent({
+        id: 'subtitle',
+        type: 'Text',
+        displayName: 'Subtitle',
+        parentId: 'header',
+        textContent: 'Real-time insights and performance metrics',
+        props: {
+            style: {
+                fontSize: '16px',
+                color: '#718096'
+            }
+        }
+    });
+    // Stats Grid using Grid helper
+    store.addComponent({
+        id: 'stats-grid',
+        type: 'Grid',
+        displayName: 'Stats Grid',
+        parentId: 'root',
+        isHelper: true,
+        props: {
+            style: {
+                display: 'grid',
+                gridTemplateColumns: 'repeat(4, 1fr)',
+                gap: '24px',
+                marginBottom: '32px'
+            }
+        },
+        children: []
+    });
+    // Create stat cards
+    const stats = [
+        { label: 'Total Users', value: '12,543', change: '+12%' },
+        { label: 'Revenue', value: '$45,678', change: '+23%' },
+        { label: 'Conversion', value: '3.45%', change: '+5%' },
+        { label: 'Active Now', value: '1,234', change: '+8%' }
+    ];
+    stats.forEach((stat, index) => {
+        const cardId = `stat-card-${index}`;
+        store.addComponent({
+            id: cardId,
+            type: 'Box',
+            displayName: `Stat Card: ${stat.label}`,
+            parentId: 'stats-grid',
+            isHelper: true,
+            props: {
+                style: {
+                    padding: '20px',
+                    background: 'white',
+                    borderRadius: '8px',
+                    boxShadow: '0 4px 6px rgba(0,0,0,0.07)'
+                }
+            },
+            children: []
+        });
+        const stackId = `stat-stack-${index}`;
+        store.addComponent({
+            id: stackId,
+            type: 'Stack',
+            displayName: 'Stat Content',
+            parentId: cardId,
+            isHelper: true,
+            props: {
+                style: {
+                    gap: '8px'
+                }
+            },
+            children: []
+        });
+        store.addComponent({
+            id: `stat-label-${index}`,
+            type: 'Text',
+            displayName: 'Stat Label',
+            parentId: stackId,
+            textContent: stat.label,
+            props: {
+                style: {
+                    fontSize: '14px',
+                    color: '#718096',
+                    fontWeight: '500'
+                }
+            }
+        });
+        store.addComponent({
+            id: `stat-value-${index}`,
+            type: 'Heading',
+            displayName: 'Stat Value',
+            parentId: stackId,
+            textContent: stat.value,
+            props: {
+                style: {
+                    fontSize: '24px',
+                    fontWeight: 'bold',
+                    color: '#2d3748'
+                }
+            }
+        });
+        store.addComponent({
+            id: `stat-change-${index}`,
+            type: 'Badge',
+            displayName: 'Stat Change',
+            parentId: stackId,
+            textContent: stat.change,
+            props: {
+                style: {
+                    fontSize: '12px',
+                    color: '#48bb78',
+                    background: '#c6f6d5',
+                    padding: '2px 8px',
+                    borderRadius: '4px',
+                    display: 'inline-block'
+                }
+            }
+        });
+    });
+    // Main content area with charts
+    store.addComponent({
+        id: 'charts-container',
+        type: 'HStack',
+        displayName: 'Charts Container',
+        parentId: 'root',
+        isHelper: true,
+        props: {
+            style: {
+                gap: '24px',
+                alignItems: 'stretch'
+            }
+        },
+        children: []
+    });
+    // Chart 1
+    store.addComponent({
+        id: 'chart-1',
+        type: 'Box',
+        displayName: 'Revenue Chart',
+        parentId: 'charts-container',
+        isHelper: true,
+        props: {
+            style: {
+                flex: '2',
+                padding: '24px',
+                background: 'white',
+                borderRadius: '8px',
+                boxShadow: '0 4px 6px rgba(0,0,0,0.07)'
+            }
+        },
+        children: []
+    });
+    store.addComponent({
+        id: 'chart-1-title',
+        type: 'Heading',
+        displayName: 'Chart Title',
+        parentId: 'chart-1',
+        textContent: 'Revenue Trend',
+        props: {
+            style: {
+                fontSize: '18px',
+                fontWeight: '600',
+                color: '#2d3748',
+                marginBottom: '16px'
+            }
+        }
+    });
+    store.addComponent({
+        id: 'chart-1-placeholder',
+        type: 'Center',
+        displayName: 'Chart Placeholder',
+        parentId: 'chart-1',
+        isHelper: true,
+        props: {
+            style: {
+                height: '200px',
+                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                borderRadius: '8px',
+                color: 'white',
+                fontSize: '14px',
+                fontWeight: '500'
+            }
+        },
+        children: []
+    });
+    store.addComponent({
+        id: 'chart-1-text',
+        type: 'Text',
+        displayName: 'Chart Text',
+        parentId: 'chart-1-placeholder',
+        textContent: 'Chart Component Here',
+        props: {
+            style: {
+                color: 'white'
+            }
+        }
+    });
+    // Chart 2
+    store.addComponent({
+        id: 'chart-2',
+        type: 'Box',
+        displayName: 'Activity Chart',
+        parentId: 'charts-container',
+        isHelper: true,
+        props: {
+            style: {
+                flex: '1',
+                padding: '24px',
+                background: 'white',
+                borderRadius: '8px',
+                boxShadow: '0 4px 6px rgba(0,0,0,0.07)'
+            }
+        },
+        children: []
+    });
+    store.addComponent({
+        id: 'chart-2-title',
+        type: 'Heading',
+        displayName: 'Activity Title',
+        parentId: 'chart-2',
+        textContent: 'Recent Activity',
+        props: {
+            style: {
+                fontSize: '18px',
+                fontWeight: '600',
+                color: '#2d3748',
+                marginBottom: '16px'
+            }
+        }
+    });
+    // Activity list
+    const activities = [
+        'New user registered',
+        'Payment received',
+        'Order completed',
+        'Review posted',
+        'Support ticket closed'
+    ];
+    const listId = 'activity-list';
+    store.addComponent({
+        id: listId,
+        type: 'Stack',
+        displayName: 'Activity List',
+        parentId: 'chart-2',
+        isHelper: true,
+        props: {
+            style: {
+                gap: '12px'
+            }
+        },
+        children: []
+    });
+    activities.forEach((activity, index) => {
+        store.addComponent({
+            id: `activity-${index}`,
+            type: 'Text',
+            displayName: `Activity ${index + 1}`,
+            parentId: listId,
+            textContent: `• ${activity}`,
+            props: {
+                style: {
+                    fontSize: '14px',
+                    color: '#4a5568'
+                }
+            }
+        });
+    });
+    // Build the tree structure
+    const components = store.components;
+    const root = components.get('root');
+    const header = components.get('header');
+    const title = components.get('title');
+    const subtitle = components.get('subtitle');
+    const statsGrid = components.get('stats-grid');
+    const chartsContainer = components.get('charts-container');
+    const chart1 = components.get('chart-1');
+    const chart2 = components.get('chart-2');
+    if (root && header && statsGrid && chartsContainer) {
+        // Build header children
+        header.children = ['title', 'subtitle'];
+        // Build stat cards
+        for (let i = 0; i < 4; i++) {
+            const card = components.get(`stat-card-${i}`);
+            const stack = components.get(`stat-stack-${i}`);
+            const label = components.get(`stat-label-${i}`);
+            const value = components.get(`stat-value-${i}`);
+            const change = components.get(`stat-change-${i}`);
+            if (stack && label && value && change) {
+                stack.children = [`stat-label-${i}`, `stat-value-${i}`, `stat-change-${i}`];
+                components.set(`stat-stack-${i}`, stack);
+            }
+            if (card && stack) {
+                card.children = [`stat-stack-${i}`];
+                components.set(`stat-card-${i}`, card);
+            }
+        }
+        // Build stats grid
+        statsGrid.children = ['stat-card-0', 'stat-card-1', 'stat-card-2', 'stat-card-3'];
+        // Build chart 1
+        const chart1Title = components.get('chart-1-title');
+        const chart1Placeholder = components.get('chart-1-placeholder');
+        const chart1Text = components.get('chart-1-text');
+        if (chart1Placeholder && chart1Text) {
+            chart1Placeholder.children = ['chart-1-text'];
+            components.set('chart-1-placeholder', chart1Placeholder);
+        }
+        if (chart1 && chart1Title && chart1Placeholder) {
+            chart1.children = ['chart-1-title', 'chart-1-placeholder'];
+            components.set('chart-1', chart1);
+        }
+        // Build chart 2
+        const chart2Title = components.get('chart-2-title');
+        const activityList = components.get('activity-list');
+        if (activityList) {
+            activityList.children = ['activity-0', 'activity-1', 'activity-2', 'activity-3', 'activity-4'];
+            components.set('activity-list', activityList);
+        }
+        if (chart2 && chart2Title && activityList) {
+            chart2.children = ['chart-2-title', 'activity-list'];
+            components.set('chart-2', chart2);
+        }
+        // Build charts container
+        chartsContainer.children = ['chart-1', 'chart-2'];
+        // Build root
+        root.children = ['header', 'stats-grid', 'charts-container'];
+        // Update all components
+        components.set('header', header);
+        components.set('stats-grid', statsGrid);
+        components.set('charts-container', chartsContainer);
+        components.set('root', root);
+    }
+    store.setMode('code');
+};
+export const CodeGeneration = {
+    render: () => {
+        React.useEffect(() => {
+            createTestComponents();
+        }, []);
+        return _jsx(Playground, { initialMode: "code" });
+    },
+    name: 'Code Generation & Export',
+    parameters: {
+        docs: {
+            description: {
+                story: 'Test the code generation feature. Switch to Code mode to see generated story code. Click Export to download or copy the code. Uses layout helpers and various component types.'
+            }
+        }
+    }
+};
+export const UndoRedo = {
+    render: () => {
+        React.useEffect(() => {
+            createTestComponents();
+            const store = usePlaygroundStore.getState();
+            store.setMode('edit');
+            // Show undo/redo in action
+            setTimeout(() => {
+                store.saveSnapshot('Initial state');
+            }, 100);
+        }, []);
+        return _jsx(Playground, { initialMode: "edit" });
+    },
+    name: 'Undo/Redo Functionality',
+    parameters: {
+        docs: {
+            description: {
+                story: 'Test undo/redo functionality. Use Cmd/Ctrl+Z to undo and Cmd/Ctrl+Shift+Z to redo. Make changes to components and test the history navigation.'
+            }
+        }
+    }
+};
+export const KeyboardShortcuts = {
+    render: () => {
+        React.useEffect(() => {
+            createTestComponents();
+            const store = usePlaygroundStore.getState();
+            store.setMode('edit');
+            // Select a component to test shortcuts
+            setTimeout(() => {
+                store.selectComponent('stat-card-0');
+            }, 100);
+        }, []);
+        return _jsx(Playground, { initialMode: "edit" });
+    },
+    name: 'Keyboard Shortcuts',
+    parameters: {
+        docs: {
+            description: {
+                story: `Test keyboard shortcuts:
+        - Cmd/Ctrl+Z: Undo
+        - Cmd/Ctrl+Shift+Z: Redo
+        - Delete: Delete selected
+        - Cmd/Ctrl+D: Duplicate selected
+        - Cmd/Ctrl+A: Select all
+        - Escape: Deselect all
+        - 1/2/3: Switch modes (Edit/Preview/Code)
+        - Cmd/Ctrl+P: Toggle properties panel
+        - Cmd/Ctrl+=/−/0: Zoom controls`
+            }
+        }
+    }
+};
+export const ExportDialog = {
+    render: () => {
+        React.useEffect(() => {
+            createTestComponents();
+            const store = usePlaygroundStore.getState();
+            store.setMode('edit');
+        }, []);
+        return _jsx(Playground, { initialMode: "edit" });
+    },
+    name: 'Export Dialog',
+    parameters: {
+        docs: {
+            description: {
+                story: 'Test the export dialog. Click the Export button in the header to open the dialog. Configure export options and download the generated story file.'
+            }
+        }
+    }
+};
+export const CompletePhase5 = {
+    render: () => {
+        React.useEffect(() => {
+            createTestComponents();
+            const store = usePlaygroundStore.getState();
+            store.setMode('code');
+            // Show all features working together
+            console.log('Phase 5 Features:');
+            console.log('1. Code Generation ✅');
+            console.log('2. Code View with Syntax Highlighting ✅');
+            console.log('3. Undo/Redo Functionality ✅');
+            console.log('4. Keyboard Shortcuts ✅');
+            console.log('5. Export Dialog ✅');
+            console.log('6. Copy to Clipboard ✅');
+            console.log('7. File Download ✅');
+        }, []);
+        return _jsx(Playground, { initialMode: "code" });
+    },
+    name: 'All Phase 5 Features',
+    parameters: {
+        docs: {
+            description: {
+                story: 'All Phase 5 features working together: Code generation from visual edits, syntax highlighting, undo/redo history, keyboard shortcuts, and export functionality. This completes the Polish & Export phase.'
+            }
+        }
+    }
+};
+//# sourceMappingURL=PlaygroundPhase5.stories.js.map

package/dist/playground/stories/PlaygroundPhase5.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaygroundPhase5.stories.js","sourceRoot":"","sources":["../../../playground/stories/PlaygroundPhase5.stories.tsx"],"names":[],"mappings":"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"}

package/dist/playground/stories/PlaygroundProperties.stories.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Storybook stories for testing Properties Panel functionality
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+import { Playground } from '../components/Playground/Playground';
+declare const meta: Meta<typeof Playground>;
+export default meta;
+type Story = StoryObj<typeof Playground>;
+export declare const SpacingEditor: Story;
+export declare const AllPropertyTypes: Story;
+export declare const RealTimeUpdates: Story;
+export declare const StyleGroups: Story;
+//# sourceMappingURL=PlaygroundProperties.stories.d.ts.map

package/dist/playground/stories/PlaygroundProperties.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaygroundProperties.stories.d.ts","sourceRoot":"","sources":["../../../playground/stories/PlaygroundProperties.stories.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AAGjE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAMjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAoKzC,eAAO,MAAM,aAAa,EAAE,KAgB3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAgB9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8E7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAuFzB,CAAC"}