@tpitre/story-ui 2.2.0 → 2.3.1

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

@@ -0,0 +1,315 @@
+/**
+ * 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: React.FC<{
+  children?: React.ReactNode;
+  variant?: 'filled' | 'outline' | 'subtle' | 'light';
+  color?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  disabled?: boolean;
+  onClick?: () => void;
+}> = ({ 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: React.CSSProperties = {
+    ...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: Record<string, React.CSSProperties> = {
+    filled: { backgroundColor: color, color: 'white' },
+    outline: { backgroundColor: 'transparent', border: `1px solid ${color}`, color },
+    subtle: { backgroundColor: `${color}20`, color },
+    light: { backgroundColor: `${color}15`, color },
+  };
+
+  return (
+    <button
+      style={{ ...baseStyles, ...variantStyles[variant] }}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+
+const PlaceholderCard: React.FC<{
+  children?: React.ReactNode;
+  shadow?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  padding?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  radius?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  withBorder?: boolean;
+}> = ({ 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 (
+    <div
+      style={{
+        backgroundColor: '#1e1e1e',
+        padding: paddings[padding],
+        borderRadius: radii[radius],
+        boxShadow: shadows[shadow],
+        border: withBorder ? '1px solid #27272a' : 'none',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const PlaceholderText: React.FC<{
+  children?: React.ReactNode;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  weight?: number;
+  color?: string;
+  align?: 'left' | 'center' | 'right';
+}> = ({ children, size = 'md', weight = 400, color, align = 'left' }) => {
+  const sizes = { xs: '11px', sm: '13px', md: '14px', lg: '16px', xl: '18px' };
+
+  return (
+    <p
+      style={{
+        fontSize: sizes[size],
+        fontWeight: weight,
+        color: color || '#fafafa',
+        textAlign: align,
+        margin: 0,
+        lineHeight: 1.5,
+      }}
+    >
+      {children}
+    </p>
+  );
+};
+
+const PlaceholderTitle: React.FC<{
+  children?: React.ReactNode;
+  order?: 1 | 2 | 3 | 4 | 5 | 6;
+  color?: string;
+  align?: 'left' | 'center' | 'right';
+}> = ({ children, order = 1, color, align = 'left' }) => {
+  const sizes = {
+    1: '32px',
+    2: '28px',
+    3: '24px',
+    4: '20px',
+    5: '18px',
+    6: '16px',
+  };
+
+  const Tag = `h${order}` as keyof JSX.IntrinsicElements;
+
+  return (
+    <Tag
+      style={{
+        fontSize: sizes[order],
+        fontWeight: 700,
+        color: color || '#fafafa',
+        textAlign: align,
+        margin: 0,
+        lineHeight: 1.25,
+      }}
+    >
+      {children}
+    </Tag>
+  );
+};
+
+const PlaceholderStack: React.FC<{
+  children?: React.ReactNode;
+  spacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  align?: 'flex-start' | 'center' | 'flex-end' | 'stretch';
+}> = ({ children, spacing = 'md', align = 'stretch' }) => {
+  const spacings = { xs: '4px', sm: '8px', md: '16px', lg: '24px', xl: '32px' };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacings[spacing],
+        alignItems: align,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const PlaceholderGroup: React.FC<{
+  children?: React.ReactNode;
+  spacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+  align?: 'flex-start' | 'center' | 'flex-end' | 'stretch';
+  wrap?: 'wrap' | 'nowrap';
+}> = ({ children, spacing = 'md', justify = 'flex-start', align = 'center', wrap = 'wrap' }) => {
+  const spacings = { xs: '4px', sm: '8px', md: '16px', lg: '24px', xl: '32px' };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        gap: spacings[spacing],
+        justifyContent: justify,
+        alignItems: align,
+        flexWrap: wrap,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const PlaceholderBadge: React.FC<{
+  children?: React.ReactNode;
+  color?: string;
+  variant?: 'filled' | 'outline' | 'light';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}> = ({ 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: Record<string, React.CSSProperties> = {
+    filled: { backgroundColor: color, color: 'white' },
+    outline: { backgroundColor: 'transparent', border: `1px solid ${color}`, color },
+    light: { backgroundColor: `${color}20`, color },
+  };
+
+  return (
+    <span
+      style={{
+        ...sizes[size],
+        ...variantStyles[variant],
+        borderRadius: '9999px',
+        fontWeight: 500,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {children}
+    </span>
+  );
+};
+
+const PlaceholderTextInput: React.FC<{
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  error?: string;
+  description?: string;
+}> = ({ label, placeholder, value, onChange, disabled, error, description }) => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+      {label && (
+        <label style={{ fontSize: '14px', fontWeight: 500, color: '#fafafa' }}>
+          {label}
+        </label>
+      )}
+      {description && (
+        <span style={{ fontSize: '12px', color: '#71717a' }}>{description}</span>
+      )}
+      <input
+        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 && <span 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: Record<string, React.ComponentType<any>> = {
+  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: string): React.ComponentType<any> | undefined {
+  return componentRegistry[name];
+}
+
+// Check if a component exists
+export function hasComponent(name: string): boolean {
+  return name in componentRegistry;
+}

package/templates/production-app/src/considerations.ts

@@ -0,0 +1,16 @@
+/**
+ * AI Considerations - Template File
+ *
+ * This file is replaced during build with design-system-specific
+ * instructions from your story-ui-considerations.md file.
+ *
+ * To customize AI behavior:
+ * 1. Create story-ui-considerations.md in your project root
+ * 2. Define your design system's rules, patterns, and common mistakes
+ * 3. Run the build - this file gets auto-generated
+ */
+
+// Default empty considerations - replaced during build
+export const aiConsiderations = '';
+
+export const hasConsiderations = false;

package/templates/production-app/src/index.css

@@ -0,0 +1,284 @@
+/**
+ * Production App Global Styles
+ *
+ * Dark theme styles for the Story UI production app.
+ * Provides a modern, Lovable/Bolt-inspired aesthetic.
+ */
+
+/* Reset */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Root variables */
+:root {
+  /* Dark theme colors */
+  --color-bg-primary: #0a0a0a;
+  --color-bg-secondary: #111111;
+  --color-bg-tertiary: #1a1a1a;
+  --color-bg-elevated: #1e1e1e;
+  --color-bg-hover: #262626;
+
+  /* Text colors */
+  --color-text-primary: #fafafa;
+  --color-text-secondary: #a1a1a1;
+  --color-text-tertiary: #71717a;
+  --color-text-muted: #52525b;
+
+  /* Accent colors */
+  --color-accent-primary: #6366f1;
+  --color-accent-primary-hover: #4f46e5;
+  --color-accent-secondary: #8b5cf6;
+
+  /* Status colors */
+  --color-success: #22c55e;
+  --color-error: #ef4444;
+  --color-warning: #f59e0b;
+  --color-info: #3b82f6;
+
+  /* Border colors */
+  --color-border: #27272a;
+  --color-border-subtle: #1f1f1f;
+  --color-border-focus: #6366f1;
+
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-2xl: 48px;
+
+  /* Border radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-normal: 200ms ease;
+  --transition-slow: 300ms ease;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
+  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
+
+  /* Typography */
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'Fira Code', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
+
+  --font-size-xs: 11px;
+  --font-size-sm: 13px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 24px;
+  --font-size-3xl: 32px;
+
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+}
+
+/* Base styles */
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-primary);
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-tertiary);
+}
+
+/* Selection styling */
+::selection {
+  background-color: var(--color-accent-primary);
+  color: white;
+}
+
+/* Focus styles */
+:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Button reset */
+button {
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+  color: inherit;
+}
+
+/* Input reset */
+input, textarea {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background: transparent;
+  border: none;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+/* Link reset */
+a {
+  color: var(--color-accent-primary);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Code styling */
+code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background-color: var(--color-bg-tertiary);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+}
+
+pre {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  background-color: var(--color-bg-tertiary);
+  padding: var(--spacing-md);
+  border-radius: var(--radius-md);
+  overflow-x: auto;
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+/* Utility classes */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Animation keyframes */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn var(--transition-normal) ease-out;
+}
+
+.animate-slide-up {
+  animation: slideUp var(--transition-normal) ease-out;
+}
+
+.animate-pulse {
+  animation: pulse 2s infinite;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Loading dots animation */
+@keyframes loadingDots {
+  0%, 20% {
+    content: '.';
+  }
+  40% {
+    content: '..';
+  }
+  60%, 100% {
+    content: '...';
+  }
+}
+
+.loading-dots::after {
+  content: '.';
+  animation: loadingDots 1.5s infinite;
+}

package/templates/production-app/src/main.tsx

@@ -0,0 +1,25 @@
+/**
+ * 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(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/templates/production-app/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@components/*": ["./src/components/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/production-app/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}