@tpitre/story-ui 2.7.1 → 2.8.0

package/dist/templates/production-app/src/LivePreviewRenderer.d.ts

@@ -1,24 +0,0 @@
-/**
- * Live Preview Renderer
- *
- * This component takes generated JSX code as a string and renders it live
- * using Babel standalone for JSX compilation and the component registry
- * for component resolution.
- */
-import React from 'react';
-interface LivePreviewRendererProps {
-    /** The JSX code string to render */
-    code: string;
-    /** Optional error handler */
-    onError?: (error: Error) => void;
-    /** Optional success handler */
-    onSuccess?: () => void;
-    /** Custom styles for the container */
-    containerStyle?: React.CSSProperties;
-}
-/**
- * Live Preview Renderer Component
- */
-export declare const LivePreviewRenderer: React.FC<LivePreviewRendererProps>;
-export default LivePreviewRenderer;
-//# sourceMappingURL=LivePreviewRenderer.d.ts.map

package/dist/templates/production-app/src/LivePreviewRenderer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LivePreviewRenderer.d.ts","sourceRoot":"","sources":["../../../../templates/production-app/src/LivePreviewRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,UAAU,wBAAwB;IAChC,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,sCAAsC;IACtC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAuJD;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAgGlE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/templates/production-app/src/LivePreviewRenderer.js

@@ -1,199 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Live Preview Renderer
- *
- * This component takes generated JSX code as a string and renders it live
- * using Babel standalone for JSX compilation and the component registry
- * for component resolution.
- */
-import React, { useState, useEffect, useRef } from 'react';
-import * as Babel from '@babel/standalone';
-// This import will be replaced with the actual component registry at build time
-import { componentRegistry, React as ReactExport } from './componentRegistry';
-// Error boundary to catch render errors
-class ErrorBoundary extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false, error: null };
-    }
-    static getDerivedStateFromError(error) {
-        return { hasError: true, error };
-    }
-    componentDidCatch(error) {
-        this.props.onError?.(error);
-    }
-    componentDidUpdate(prevProps) {
-        // Reset error state when children change
-        if (prevProps.children !== this.props.children && this.state.hasError) {
-            this.setState({ hasError: false, error: null });
-        }
-    }
-    render() {
-        if (this.state.hasError) {
-            return (_jsxs("div", { style: {
-                    padding: '16px',
-                    background: 'rgba(239, 68, 68, 0.1)',
-                    borderLeft: '3px solid #ef4444',
-                    borderRadius: '4px',
-                    color: '#ef4444',
-                    fontFamily: 'monospace',
-                    fontSize: '13px',
-                    whiteSpace: 'pre-wrap',
-                }, children: [_jsx("strong", { children: "Render Error:" }), _jsx("br", {}), this.state.error?.message] }));
-        }
-        return this.props.children;
-    }
-}
-/**
- * Extract JSX from generated code
- * The AI typically returns a full story file, but we only need the JSX render content
- */
-function extractJSX(code) {
-    // Remove markdown code blocks if present
-    let cleanCode = code.trim();
-    if (cleanCode.startsWith('```')) {
-        cleanCode = cleanCode
-            .replace(/^```(?:jsx|tsx|javascript|js|typescript|ts)?\n?/, '')
-            .replace(/\n?```$/, '');
-    }
-    // Try to extract JSX from a render function
-    const renderMatch = cleanCode.match(/render:\s*\(\)\s*=>\s*\(?([\s\S]*?)\)?\s*,?\s*\}/);
-    if (renderMatch) {
-        const jsx = renderMatch[1].trim();
-        // Remove trailing paren if present
-        return jsx.endsWith(')') && !jsx.includes('(') ? jsx.slice(0, -1) : jsx;
-    }
-    // Try to extract from args.children
-    const childrenMatch = cleanCode.match(/children:\s*\(?([\s\S]*?)\)?\s*\}/);
-    if (childrenMatch) {
-        const jsx = childrenMatch[1].trim();
-        return jsx.endsWith(')') && !jsx.includes('(') ? jsx.slice(0, -1) : jsx;
-    }
-    // If it looks like a JSX expression (starts with <), use it directly
-    if (cleanCode.trim().startsWith('<')) {
-        return cleanCode;
-    }
-    // Try to extract any JSX from the code
-    const jsxMatch = cleanCode.match(/<[A-Z][^]*$/);
-    if (jsxMatch) {
-        return jsxMatch[0];
-    }
-    // Return as-is and let Babel fail if it's not valid
-    return cleanCode;
-}
-/**
- * Compile JSX code string to a React component
- */
-function compileJSX(jsxCode) {
-    try {
-        // Create a scope object with all available components and React
-        const scope = {
-            React: ReactExport,
-            ...componentRegistry,
-            // Add common React hooks
-            useState: React.useState,
-            useEffect: React.useEffect,
-            useCallback: React.useCallback,
-            useMemo: React.useMemo,
-            useRef: React.useRef,
-        };
-        // Extract the JSX to render
-        const extractedJSX = extractJSX(jsxCode);
-        // Wrap in a function component
-        const wrappedCode = `
-      (function() {
-        const { ${Object.keys(scope).join(', ')} } = scope;
-        return function PreviewComponent() {
-          return (${extractedJSX});
-        };
-      })()
-    `;
-        // Transform JSX to JavaScript
-        const transformed = Babel.transform(wrappedCode, {
-            presets: ['react'],
-            filename: 'preview.tsx',
-        });
-        if (!transformed.code) {
-            throw new Error('Babel transformation produced no output');
-        }
-        // Create the component using Function constructor
-        // eslint-disable-next-line no-new-func
-        const createComponent = new Function('scope', `return ${transformed.code}`);
-        const Component = createComponent(scope);
-        return Component;
-    }
-    catch (error) {
-        console.error('JSX compilation error:', error);
-        throw error;
-    }
-}
-/**
- * Live Preview Renderer Component
- */
-export const LivePreviewRenderer = ({ code, onError, onSuccess, containerStyle, }) => {
-    const [compiledComponent, setCompiledComponent] = useState(null);
-    const [error, setError] = useState(null);
-    const previousCodeRef = useRef('');
-    // Compile the code when it changes
-    useEffect(() => {
-        if (!code || code === previousCodeRef.current) {
-            return;
-        }
-        previousCodeRef.current = code;
-        setError(null);
-        try {
-            const Component = compileJSX(code);
-            setCompiledComponent(() => Component);
-            onSuccess?.();
-        }
-        catch (err) {
-            const error = err instanceof Error ? err : new Error(String(err));
-            setError(error);
-            setCompiledComponent(null);
-            onError?.(error);
-        }
-    }, [code, onError, onSuccess]);
-    // Render error state
-    if (error) {
-        return (_jsx("div", { style: {
-                padding: '24px',
-                ...containerStyle,
-            }, children: _jsxs("div", { style: {
-                    padding: '16px',
-                    background: 'rgba(239, 68, 68, 0.1)',
-                    borderLeft: '3px solid #ef4444',
-                    borderRadius: '4px',
-                    color: '#ef4444',
-                }, children: [_jsx("div", { style: {
-                            fontWeight: 600,
-                            marginBottom: '8px',
-                            fontSize: '14px',
-                        }, children: "Compilation Error" }), _jsx("pre", { style: {
-                            margin: 0,
-                            fontFamily: '"Fira Code", Monaco, monospace',
-                            fontSize: '12px',
-                            lineHeight: 1.5,
-                            whiteSpace: 'pre-wrap',
-                            wordBreak: 'break-word',
-                        }, children: error.message })] }) }));
-    }
-    // Render empty state
-    if (!compiledComponent) {
-        return (_jsx("div", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                color: '#71717a',
-                ...containerStyle,
-            }, children: "Waiting for code..." }));
-    }
-    // Render the compiled component
-    const Component = compiledComponent;
-    return (_jsx("div", { style: {
-            padding: '24px',
-            minHeight: '200px',
-            ...containerStyle,
-        }, children: _jsx(ErrorBoundary, { onError: onError, children: _jsx(Component, {}) }) }));
-};
-export default LivePreviewRenderer;

package/dist/templates/production-app/src/componentRegistry.d.ts

@@ -1,20 +0,0 @@
-/**
- * Component Registry
- *
- * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
- * This file is generated at build time by story-ui
- *
- * It exports all components from your component library
- * for use in the live preview renderer.
- *
- * NOTE: This is a sample/placeholder registry for development.
- * When you run `story-ui deploy`, this file will be regenerated
- * with your actual component library imports.
- */
-import React from 'react';
-export declare const componentRegistry: Record<string, React.ComponentType<any>>;
-export declare const availableComponents: string[];
-export { React };
-export declare function getComponent(name: string): React.ComponentType<any> | undefined;
-export declare function hasComponent(name: string): boolean;
-//# sourceMappingURL=componentRegistry.d.ts.map

package/dist/templates/production-app/src/componentRegistry.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"componentRegistry.d.ts","sourceRoot":"","sources":["../../../../templates/production-app/src/componentRegistry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AA0Q1B,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAStE,CAAC;AAGF,eAAO,MAAM,mBAAmB,UAS/B,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC;AAGjB,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAE/E;AAGD,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAElD"}

package/dist/templates/production-app/src/componentRegistry.js

@@ -1,316 +0,0 @@
-/**
- * Component Registry
- *
- * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
- * This file is generated at build time by story-ui
- *
- * It exports all components from your component library
- * for use in the live preview renderer.
- *
- * NOTE: This is a sample/placeholder registry for development.
- * When you run `story-ui deploy`, this file will be regenerated
- * with your actual component library imports.
- */
-import React from 'react';
-// Sample placeholder components for development/testing
-// These will be replaced with actual component imports from your library
-const PlaceholderButton = ({ children, variant = 'filled', color = '#6366f1', size = 'md', disabled, onClick }) => {
-    const sizes = {
-        xs: { padding: '4px 8px', fontSize: '11px' },
-        sm: { padding: '6px 12px', fontSize: '12px' },
-        md: { padding: '8px 16px', fontSize: '14px' },
-        lg: { padding: '10px 20px', fontSize: '16px' },
-        xl: { padding: '12px 24px', fontSize: '18px' },
-    };
-    const baseStyles = {
-        ...sizes[size],
-        borderRadius: '6px',
-        fontWeight: 500,
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        opacity: disabled ? 0.5 : 1,
-        transition: 'all 150ms ease',
-        border: 'none',
-        fontFamily: 'inherit',
-    };
-    const variantStyles = {
-        filled: { backgroundColor: color, color: 'white' },
-        outline: { backgroundColor: 'transparent', border: `1px solid ${color}`, color },
-        subtle: { backgroundColor: `${color}20`, color },
-        light: { backgroundColor: `${color}15`, color },
-    };
-    return style = {};
-    {
-        baseStyles, ;
-        variantStyles[variant];
-    }
-};
-disabled = { disabled };
-onClick = { onClick }
-    >
-        { children }
-    < /button>;
-;
-;
-const PlaceholderCard = ({ children, shadow = 'sm', padding = 'md', radius = 'md', withBorder = false }) => {
-    const paddings = { xs: '8px', sm: '12px', md: '16px', lg: '24px', xl: '32px' };
-    const radii = { xs: '4px', sm: '6px', md: '8px', lg: '12px', xl: '16px' };
-    const shadows = {
-        xs: '0 1px 2px rgba(0,0,0,0.05)',
-        sm: '0 1px 3px rgba(0,0,0,0.1)',
-        md: '0 4px 6px rgba(0,0,0,0.1)',
-        lg: '0 10px 15px rgba(0,0,0,0.1)',
-        xl: '0 20px 25px rgba(0,0,0,0.15)',
-    };
-    return style = {};
-    {
-        backgroundColor: '#1e1e1e',
-            padding;
-        paddings[padding],
-            borderRadius;
-        radii[radius],
-            boxShadow;
-        shadows[shadow],
-            border;
-        withBorder ? '1px solid #27272a' : 'none',
-        ;
-    }
-};
-    >
-        { children }
-    < /div>;
-;
-;
-const PlaceholderText = ({ children, size = 'md', weight = 400, color, align = 'left' }) => {
-    const sizes = { xs: '11px', sm: '13px', md: '14px', lg: '16px', xl: '18px' };
-    return style = {};
-    {
-        fontSize: sizes[size],
-            fontWeight;
-        weight,
-            color;
-        color || '#fafafa',
-            textAlign;
-        align,
-            margin;
-        0,
-            lineHeight;
-        1.5,
-        ;
-    }
-};
-    >
-        { children }
-    < /p>;
-;
-;
-const PlaceholderTitle = ({ children, order = 1, color, align = 'left' }) => {
-    const sizes = {
-        1: '32px',
-        2: '28px',
-        3: '24px',
-        4: '20px',
-        5: '18px',
-        6: '16px',
-    };
-    const Tag = `h${order}`;
-    return style = {};
-    {
-        fontSize: sizes[order],
-            fontWeight;
-        700,
-            color;
-        color || '#fafafa',
-            textAlign;
-        align,
-            margin;
-        0,
-            lineHeight;
-        1.25,
-        ;
-    }
-};
-    >
-        { children }
-    < /Tag>;
-;
-;
-const PlaceholderStack = ({ children, spacing = 'md', align = 'stretch' }) => {
-    const spacings = { xs: '4px', sm: '8px', md: '16px', lg: '24px', xl: '32px' };
-    return style = {};
-    {
-        display: 'flex',
-            flexDirection;
-        'column',
-            gap;
-        spacings[spacing],
-            alignItems;
-        align,
-        ;
-    }
-};
-    >
-        { children }
-    < /div>;
-;
-;
-const PlaceholderGroup = ({ children, spacing = 'md', justify = 'flex-start', align = 'center', wrap = 'wrap' }) => {
-    const spacings = { xs: '4px', sm: '8px', md: '16px', lg: '24px', xl: '32px' };
-    return style = {};
-    {
-        display: 'flex',
-            flexDirection;
-        'row',
-            gap;
-        spacings[spacing],
-            justifyContent;
-        justify,
-            alignItems;
-        align,
-            flexWrap;
-        wrap,
-        ;
-    }
-};
-    >
-        { children }
-    < /div>;
-;
-;
-const PlaceholderBadge = ({ children, color = '#6366f1', variant = 'light', size = 'md' }) => {
-    const sizes = {
-        xs: { padding: '2px 6px', fontSize: '10px' },
-        sm: { padding: '3px 8px', fontSize: '11px' },
-        md: { padding: '4px 10px', fontSize: '12px' },
-        lg: { padding: '5px 12px', fontSize: '13px' },
-        xl: { padding: '6px 14px', fontSize: '14px' },
-    };
-    const variantStyles = {
-        filled: { backgroundColor: color, color: 'white' },
-        outline: { backgroundColor: 'transparent', border: `1px solid ${color}`, color },
-        light: { backgroundColor: `${color}20`, color },
-    };
-    return style = {};
-    {
-    }
-};
-sizes[size],
-;
-variantStyles[variant],
-    borderRadius;
-'9999px',
-    fontWeight;
-500,
-    display;
-'inline-flex',
-    alignItems;
-'center',
-    justifyContent;
-'center',
-;
-    >
-        { children }
-    < /span>;
-;
-;
-const PlaceholderTextInput = ({ label, placeholder, value, onChange, disabled, error, description }) => {
-    return style = {};
-    {
-        display: 'flex', flexDirection;
-        'column', gap;
-        '4px';
-    }
-};
- >
-    { label } && style;
-{
-    {
-        fontSize: '14px', fontWeight;
-        500, color;
-        '#fafafa';
-    }
-}
- >
-    { label }
-    < /label>;
-{
-    description && style;
-    {
-        {
-            fontSize: '12px', color;
-            '#71717a';
-        }
-    }
-     > { description } < /span>;
-}
-type;
-"text";
-placeholder = { placeholder };
-value = { value };
-onChange = { onChange };
-disabled = { disabled };
-style = {};
-{
-    padding: '8px 12px',
-        fontSize;
-    '14px',
-        borderRadius;
-    '6px',
-        border;
-    `1px solid ${error ? '#ef4444' : '#27272a'}`,
-        backgroundColor;
-    '#1a1a1a',
-        color;
-    '#fafafa',
-        outline;
-    'none',
-        opacity;
-    disabled ? 0.5 : 1,
-    ;
-}
-/>;
-{
-    error && style;
-    {
-        {
-            fontSize: '12px', color;
-            '#ef4444';
-        }
-    }
-     > { error } < /span>;
-}
-/div>;
-;
-;
-// Component registry - maps component names to their implementations
-// This will be replaced with actual component imports at build time
-export const componentRegistry = {
-    Button: PlaceholderButton,
-    Card: PlaceholderCard,
-    Text: PlaceholderText,
-    Title: PlaceholderTitle,
-    Stack: PlaceholderStack,
-    Group: PlaceholderGroup,
-    Badge: PlaceholderBadge,
-    TextInput: PlaceholderTextInput,
-};
-// List of available component names
-export const availableComponents = [
-    'Button',
-    'Card',
-    'Text',
-    'Title',
-    'Stack',
-    'Group',
-    'Badge',
-    'TextInput',
-];
-// Export React for use in compiled code
-export { React };
-// Helper to get a component by name
-export function getComponent(name) {
-    return componentRegistry[name];
-}
-// Check if a component exists
-export function hasComponent(name) {
-    return name in componentRegistry;
-}

package/dist/templates/production-app/src/main.d.ts

@@ -1,9 +0,0 @@
-/**
- * Production App Entry Point
- *
- * This is the main entry point for the Story UI production app.
- * It renders the main App component which provides the Lovable/Bolt-style
- * interface for generating and previewing UI components.
- */
-import './index.css';
-//# sourceMappingURL=main.d.ts.map

package/dist/templates/production-app/src/main.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../templates/production-app/src/main.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,OAAO,aAAa,CAAC"}

package/dist/templates/production-app/src/main.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Production App Entry Point
- *
- * This is the main entry point for the Story UI production app.
- * It renders the main App component which provides the Lovable/Bolt-style
- * interface for generating and previewing UI components.
- */
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import './index.css';
-// Mount the app
-const rootElement = document.getElementById('root');
-if (!rootElement) {
-    throw new Error('Root element not found. Make sure there is a <div id="root"></div> in your HTML.');
-}
-ReactDOM.createRoot(rootElement).render(_jsx(React.StrictMode, { children: _jsx(App, {}) }));

package/dist/templates/production-app/vite.config.d.ts

@@ -1,3 +0,0 @@
-declare const _default: any;
-export default _default;
-//# sourceMappingURL=vite.config.d.ts.map

package/dist/templates/production-app/vite.config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../../../templates/production-app/vite.config.ts"],"names":[],"mappings":";AAKA,wBA6EG"}

package/dist/templates/production-app/vite.config.js

@@ -1,71 +0,0 @@
-import { defineConfig, loadEnv } from 'vite';
-import react from '@vitejs/plugin-react';
-import path from 'path';
-// https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
-    // Load env file based on mode
-    const env = loadEnv(mode, process.cwd(), '');
-    return {
-        plugins: [react()],
-        // Define environment variables to expose to the client
-        define: {
-            // Backend API URL - required for production
-            'import.meta.env.VITE_BACKEND_URL': JSON.stringify(env.VITE_BACKEND_URL || 'http://localhost:4001'),
-            // App title customization
-            'import.meta.env.VITE_APP_TITLE': JSON.stringify(env.VITE_APP_TITLE || 'Story UI'),
-        },
-        // Resolve aliases for cleaner imports
-        resolve: {
-            alias: {
-                '@': path.resolve(__dirname, './src'),
-                '@components': path.resolve(__dirname, './src/components'),
-            },
-        },
-        // Server configuration for development
-        server: {
-            port: 5173,
-            strictPort: false,
-            host: true, // Listen on all addresses
-            // Proxy API requests to backend in development
-            proxy: {
-                '/mcp': {
-                    target: env.VITE_BACKEND_URL || 'http://localhost:4001',
-                    changeOrigin: true,
-                },
-                '/story-ui': {
-                    target: env.VITE_BACKEND_URL || 'http://localhost:4001',
-                    changeOrigin: true,
-                },
-            },
-        },
-        // Build configuration
-        build: {
-            outDir: 'dist',
-            sourcemap: mode === 'development',
-            // Optimize chunk size
-            rollupOptions: {
-                output: {
-                    manualChunks: {
-                        // Split vendor chunks for better caching
-                        'vendor-react': ['react', 'react-dom'],
-                        'vendor-babel': ['@babel/standalone'],
-                    },
-                },
-            },
-            // Target modern browsers
-            target: 'es2020',
-            // Minification
-            minify: 'esbuild',
-        },
-        // Optimize dependencies
-        optimizeDeps: {
-            include: ['react', 'react-dom', '@babel/standalone'],
-        },
-        // Preview server configuration (for testing production build locally)
-        preview: {
-            port: 4173,
-            strictPort: false,
-            host: true,
-        },
-    };
-});