@12-apps/ui 1.4.1 → 1.5.1

package/src/components/form/CodeEditor/CodeEditor.stories.tsx

@@ -1,871 +0,0 @@
-import { Alert,Box, Button, Paper, Stack, Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { CodeEditor } from './CodeEditor';
-import type { EditorLanguage } from './CodeEditor.types';
-
-const meta: Meta<typeof CodeEditor> = {
-  title: 'Enhanced/CodeEditor',
-  component: CodeEditor,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'A powerful Monaco-based code editor with syntax highlighting, themes, and advanced features like auto-formatting, fullscreen mode, and live editing.',
-      },
-    },
-  },
-  tags: ['autodocs', 'component:CodeEditor'],
-  argTypes: {
-    language: {
-      control: { type: 'select' },
-      options: [
-        'javascript',
-        'typescript',
-        'json',
-        'css',
-        'html',
-        'yaml',
-        'markdown',
-        'sql',
-        'python',
-      ],
-      description: 'Programming language for syntax highlighting',
-    },
-    theme: {
-      control: { type: 'select' },
-      options: ['light', 'dark', 'auto'],
-      description: 'Editor color theme',
-    },
-    height: {
-      control: 'text',
-      description: 'Height of the editor',
-    },
-    readOnly: {
-      control: 'boolean',
-      description: 'Makes editor read-only',
-    },
-    lineNumbers: {
-      control: 'boolean',
-      description: 'Show line numbers',
-    },
-    minimap: {
-      control: 'boolean',
-      description: 'Show minimap navigation',
-    },
-    fontSize: {
-      control: { type: 'number', min: 10, max: 24 },
-      description: 'Font size in pixels',
-    },
-    wordWrap: {
-      control: 'boolean',
-      description: 'Enable word wrapping',
-    },
-    showToolbar: {
-      control: 'boolean',
-      description: 'Show editor toolbar',
-    },
-    autoFormat: {
-      control: 'boolean',
-      description: 'Auto-format code on load',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Sample code snippets for different languages
-const sampleCode = {
-  javascript: `// JavaScript Example
-function fibonacci(n) {
-  if (n <= 1) return n;
-  
-  const memo = [0, 1];
-  
-  for (let i = 2; i <= n; i++) {
-    memo[i] = memo[i - 1] + memo[i - 2];
-  }
-  
-  return memo[n];
-}
-
-// Test the function
-
-
-// ES6 Arrow Function
-const greet = (name = 'World') => {
-  return \`Hello, \${name}!\`;
-};
-
-// Array methods
-const numbers = [1, 2, 3, 4, 5];
-const doubled = numbers.map(n => n * 2);
-const sum = numbers.reduce((acc, n) => acc + n, 0);`,
-
-  typescript: `// TypeScript Example
-interface User {
-  id: number;
-  name: string;
-  email: string;
-  role: 'admin' | 'user' | 'guest';
-  metadata?: Record<string, any>;
-}
-
-class UserService {
-  private users: Map<number, User> = new Map();
-  
-  constructor(private apiUrl: string) {}
-  
-  async getUser(id: number): Promise<User | undefined> {
-    if (this.users.has(id)) {
-      return this.users.get(id);
-    }
-    
-    const response = await fetch(\`\${this.apiUrl}/users/\${id}\`);
-    const user = await response.json() as User;
-    
-    this.users.set(id, user);
-    return user;
-  }
-  
-  updateUser(id: number, updates: Partial<User>): void {
-    const existing = this.users.get(id);
-    if (existing) {
-      this.users.set(id, { ...existing, ...updates });
-    }
-  }
-}
-
-// Generic function
-function reverseArray<T>(arr: T[]): T[] {
-  return [...arr].reverse();
-}`,
-
-  json: `{
-  "name": "procurement-ui",
-  "version": "1.0.0",
-  "description": "Modern UI component library",
-  "main": "dist/index.js",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "tsc && vite build",
-    "test": "jest",
-    "lint": "eslint src --ext ts,tsx"
-  },
-  "dependencies": {
-    "@mui/material": "^5.14.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "typescript": "^5.0.0",
-    "vite": "^4.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/example/procurement-ui"
-  },
-  "keywords": ["ui", "components", "react", "typescript"],
-  "author": "Development Team",
-  "license": "MIT"
-}`,
-
-  css: `/* Modern CSS with Variables and Animations */
-:root {
-  --primary-color: #667eea;
-  --secondary-color: #764ba2;
-  --text-color: #2d3748;
-  --bg-color: #f7fafc;
-  --border-radius: 8px;
-  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.card {
-  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-  border-radius: var(--border-radius);
-  padding: 2rem;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-  transition: var(--transition);
-}
-
-.card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.animated {
-  animation: fadeIn 0.5s ease-out forwards;
-}
-
-@media (max-width: 768px) {
-  .card {
-    padding: 1rem;
-  }
-}`,
-
-  html: `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Modern Web App</title>
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <header class="navbar">
-    <nav>
-      <div class="logo">
-        <img src="logo.svg" alt="Logo">
-      </div>
-      <ul class="nav-links">
-        <li><a href="#home">Home</a></li>
-        <li><a href="#features">Features</a></li>
-        <li><a href="#about">About</a></li>
-        <li><a href="#contact">Contact</a></li>
-      </ul>
-    </nav>
-  </header>
-  
-  <main>
-    <section id="hero" class="hero-section">
-      <div class="container">
-        <h1>Welcome to Our Platform</h1>
-        <p>Build amazing things with modern tools</p>
-        <button class="cta-button">Get Started</button>
-      </div>
-    </section>
-    
-    <section id="features">
-      <div class="feature-grid">
-        <article class="feature-card">
-          <h3>Fast Performance</h3>
-          <p>Lightning-fast load times and smooth interactions</p>
-        </article>
-      </div>
-    </section>
-  </main>
-  
-  <script src="app.js"></script>
-</body>
-</html>`,
-
-  python: `# Python Example with Classes and Decorators
-import time
-from typing import List, Dict, Optional
-from functools import wraps
-
-def timer(func):
-    """Decorator to measure function execution time"""
-    @wraps(func)
-    def wrapper(*args, **kwargs):
-        start = time.time()
-        result = func(*args, **kwargs)
-        end = time.time()
-        print(f"{func.__name__} took {end - start:.4f} seconds")
-        return result
-    return wrapper
-
-class DataProcessor:
-    """Process and analyze data with various algorithms"""
-    
-    def __init__(self, data: List[int]):
-        self.data = data
-        self._cache: Dict[str, any] = {}
-    
-    @timer
-    def calculate_statistics(self) -> Dict[str, float]:
-        """Calculate basic statistics for the dataset"""
-        if 'stats' in self._cache:
-            return self._cache['stats']
-        
-        stats = {
-            'mean': sum(self.data) / len(self.data),
-            'min': min(self.data),
-            'max': max(self.data),
-            'median': self._calculate_median(),
-        }
-        
-        self._cache['stats'] = stats
-        return stats
-    
-    def _calculate_median(self) -> float:
-        """Calculate median value"""
-        sorted_data = sorted(self.data)
-        n = len(sorted_data)
-        
-        if n % 2 == 0:
-            return (sorted_data[n//2 - 1] + sorted_data[n//2]) / 2
-        return sorted_data[n//2]
-
-# Example usage
-if __name__ == "__main__":
-    processor = DataProcessor([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
-    stats = processor.calculate_statistics()
-    print(f"Statistics: {stats}")`,
-
-  sql: `-- SQL Example with Complex Queries
--- Create tables for an e-commerce system
-
-CREATE TABLE users (
-    id SERIAL PRIMARY KEY,
-    username VARCHAR(50) UNIQUE NOT NULL,
-    email VARCHAR(100) UNIQUE NOT NULL,
-    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-
-CREATE TABLE products (
-    id SERIAL PRIMARY KEY,
-    name VARCHAR(200) NOT NULL,
-    description TEXT,
-    price DECIMAL(10, 2) NOT NULL,
-    stock_quantity INTEGER DEFAULT 0,
-    category_id INTEGER REFERENCES categories(id),
-    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-
-CREATE TABLE orders (
-    id SERIAL PRIMARY KEY,
-    user_id INTEGER REFERENCES users(id),
-    total_amount DECIMAL(10, 2) NOT NULL,
-    status VARCHAR(20) DEFAULT 'pending',
-    order_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-
--- Complex query with JOIN and aggregation
-WITH monthly_sales AS (
-    SELECT 
-        DATE_TRUNC('month', o.order_date) as month,
-        p.category_id,
-        SUM(oi.quantity * oi.price) as revenue,
-        COUNT(DISTINCT o.user_id) as unique_customers
-    FROM orders o
-    JOIN order_items oi ON o.id = oi.order_id
-    JOIN products p ON oi.product_id = p.id
-    WHERE o.status = 'completed'
-    GROUP BY DATE_TRUNC('month', o.order_date), p.category_id
-)
-SELECT 
-    month,
-    c.name as category,
-    revenue,
-    unique_customers,
-    RANK() OVER (PARTITION BY month ORDER BY revenue DESC) as revenue_rank
-FROM monthly_sales ms
-JOIN categories c ON ms.category_id = c.id
-ORDER BY month DESC, revenue DESC;`,
-
-  yaml: `# YAML Configuration Example
-apiVersion: v1
-kind: Service
-metadata:
-  name: procurement-api
-  namespace: production
-  labels:
-    app: procurement
-    tier: backend
-    version: v1.0.0
-
-spec:
-  type: LoadBalancer
-  selector:
-    app: procurement
-    tier: backend
-  ports:
-    - name: http
-      port: 80
-      targetPort: 8080
-      protocol: TCP
-    - name: https
-      port: 443
-      targetPort: 8443
-      protocol: TCP
-
----
-
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: procurement-api
-  namespace: production
-  
-spec:
-  replicas: 3
-  strategy:
-    type: RollingUpdate
-    rollingUpdate:
-      maxSurge: 1
-      maxUnavailable: 0
-      
-  selector:
-    matchLabels:
-      app: procurement
-      tier: backend
-      
-  template:
-    metadata:
-      labels:
-        app: procurement
-        tier: backend
-    spec:
-      containers:
-        - name: api
-          image: procurement/api:1.0.0
-          ports:
-            - containerPort: 8080
-          env:
-            - name: DATABASE_URL
-              valueFrom:
-                secretKeyRef:
-                  name: db-secret
-                  key: url
-          resources:
-            requests:
-              memory: "256Mi"
-              cpu: "250m"
-            limits:
-              memory: "512Mi"
-              cpu: "500m"`,
-
-  markdown: `# Project Documentation
-
-## Overview
-
-This is a **comprehensive guide** to our component library featuring:
-
-- 🚀 **Fast Performance** - Optimized for speed
-- 🎨 **Beautiful Design** - Modern and clean UI
-- 📱 **Responsive** - Works on all devices
-- ♿ **Accessible** - WCAG 2.1 compliant
-
-## Installation
-
-\`\`\`bash
-npm install @company/ui-components
-# or
-yarn add @company/ui-components
-\`\`\`
-
-## Quick Start
-
-Import and use components in your React application:
-
-\`\`\`jsx
-import { Button, Card, Dialog } from '@company/ui-components';
-
-function App() {
-  return (
-    <Card>
-      <h1>Welcome</h1>
-      <Button variant="primary">Get Started</Button>
-    </Card>
-  );
-}
-\`\`\`
-
-## Features
-
-### Component Library
-
-| Component | Status | Description |
-|-----------|--------|-------------|
-| Button | ✅ Stable | Interactive button with variants |
-| Card | ✅ Stable | Container for content |
-| Dialog | 🚧 Beta | Modal dialog component |
-| Table | 📋 Planned | Data table with sorting |
-
-### Advanced Features
-
-1. **Theming Support**
-   - Light/Dark modes
-   - Custom color schemes
-   - Typography system
-
-2. **Accessibility**
-   - Keyboard navigation
-   - Screen reader support
-   - ARIA attributes
-
-> **Note:** All components are tested across modern browsers.
-
-## API Reference
-
-### Button Props
-
-- \`variant\`: 'primary' | 'secondary' | 'danger'
-- \`size\`: 'small' | 'medium' | 'large'
-- \`disabled\`: boolean
-- \`onClick\`: () => void
-
-## Contributing
-
-Please read our [contributing guidelines](./CONTRIBUTING.md) before submitting PRs.
-
----
-
-*Last updated: January 2024*`,
-};
-
-export const Default: Story = {
-  args: {
-    language: 'javascript',
-    value: sampleCode.javascript,
-    height: '400px',
-    showToolbar: true,
-    lineNumbers: true,
-  },
-};
-
-const AllLanguagesComponent = () => {
-  const [activeLanguage, setActiveLanguage] = React.useState<EditorLanguage>('javascript');
-
-  return (
-    <Stack spacing={3}>
-      <Stack direction="row" spacing={1} flexWrap="wrap">
-        {Object.keys(sampleCode).map((lang) => (
-          <Button
-            key={lang}
-            variant={activeLanguage === lang ? 'contained' : 'outlined'}
-            size="small"
-            onClick={() => setActiveLanguage(lang as EditorLanguage)}
-          >
-            {lang}
-          </Button>
-        ))}
-      </Stack>
-
-      <CodeEditor
-        language={activeLanguage}
-        value={sampleCode[activeLanguage as keyof typeof sampleCode]}
-        height="500px"
-        showToolbar={true}
-        onChange={() => {
-          /** do nothing */
-        }}
-      />
-    </Stack>
-  );
-};
-
-export const AllLanguages: Story = {
-  render: () => <AllLanguagesComponent />,
-};
-
-export const DarkTheme: Story = {
-  args: {
-    language: 'typescript',
-    value: sampleCode.typescript,
-    theme: 'dark',
-    height: '400px',
-    showToolbar: true,
-  },
-  decorators: [
-    (Story) => (
-      <Box sx={{ bgcolor: '#1a1a1a', p: 3, borderRadius: 2 }}>
-        <Story />
-      </Box>
-    ),
-  ],
-};
-
-export const LightTheme: Story = {
-  args: {
-    language: 'css',
-    value: sampleCode.css,
-    theme: 'light',
-    height: '400px',
-    showToolbar: true,
-  },
-};
-
-export const ReadOnlyMode: Story = {
-  args: {
-    language: 'json',
-    value: sampleCode.json,
-    readOnly: true,
-    height: '400px',
-    showToolbar: true,
-  },
-  render: (args) => (
-    <Stack spacing={2}>
-      <Alert severity="info">
-        This editor is in read-only mode. Users can view and copy but cannot edit.
-      </Alert>
-      <CodeEditor {...args} />
-    </Stack>
-  ),
-};
-
-const LiveEditorComponent = () => {
-  const [code, setCode] = React.useState(sampleCode.javascript);
-  const [saved, setSaved] = React.useState(false);
-
-  const handleSave = (value: string) => {
-    setCode(value);
-    setSaved(true);
-    window.setTimeout(() => setSaved(false), 2000);
-  };
-
-  return (
-    <Stack spacing={3}>
-      <Typography variant="h6">Live Code Editor with Save</Typography>
-      <Typography variant="body2" color="text.secondary">
-        Edit the code below and press Ctrl+S (or Cmd+S) to save
-      </Typography>
-
-      {saved && <Alert severity="success">Code saved successfully!</Alert>}
-
-      <CodeEditor
-        language="javascript"
-        value={code}
-        onChange={setCode}
-        onSave={handleSave}
-        height="400px"
-        showToolbar={true}
-        autoFormat={false}
-      />
-
-      <Paper sx={{ p: 2, bgcolor: 'grey.50' }}>
-        <Typography variant="subtitle2" gutterBottom>
-          Code Length: {code.length} characters
-        </Typography>
-        <Typography variant="caption" color="text.secondary">
-          Last modified: {new Date().toLocaleTimeString()}
-        </Typography>
-      </Paper>
-    </Stack>
-  );
-};
-
-export const LiveEditor: Story = {
-  render: () => <LiveEditorComponent />,
-};
-
-export const WithMinimap: Story = {
-  args: {
-    language: 'typescript',
-    value: sampleCode.typescript,
-    height: '500px',
-    minimap: true,
-    showToolbar: true,
-  },
-};
-
-const CustomFontSizeComponent = () => {
-  const [fontSize, setFontSize] = React.useState(14);
-
-  return (
-    <Stack spacing={3}>
-      <Stack direction="row" spacing={2} alignItems="center">
-        <Typography>Font Size:</Typography>
-        {[12, 14, 16, 18, 20].map((size) => (
-          <Button
-            key={size}
-            variant={fontSize === size ? 'contained' : 'outlined'}
-            size="small"
-            onClick={() => setFontSize(size)}
-          >
-            {size}px
-          </Button>
-        ))}
-      </Stack>
-
-      <CodeEditor
-        language="python"
-        value={sampleCode.python}
-        fontSize={fontSize}
-        height="400px"
-        showToolbar={true}
-      />
-    </Stack>
-  );
-};
-
-export const CustomFontSize: Story = {
-  render: () => <CustomFontSizeComponent />,
-};
-
-export const WithWordWrap: Story = {
-  args: {
-    language: 'html',
-    value: sampleCode.html,
-    wordWrap: true,
-    height: '400px',
-    showToolbar: true,
-  },
-};
-
-export const NoToolbar: Story = {
-  args: {
-    language: 'sql',
-    value: sampleCode.sql,
-    showToolbar: false,
-    height: '400px',
-  },
-};
-
-export const WithPlaceholder: Story = {
-  args: {
-    language: 'javascript',
-    value: '',
-    placeholder: '// Start typing your JavaScript code here...',
-    height: '300px',
-    showToolbar: true,
-  },
-};
-
-export const AutoFormat: Story = {
-  render: () => {
-    const unformattedCode = `function messy(a,b,c){if(a>b){return c}else{return a+b}}const x={name:"test",value:123,items:[1,2,3,4,5]};`;
-
-    return (
-      <Stack spacing={3}>
-        <Alert severity="info">This editor will automatically format the code when it loads</Alert>
-
-        <CodeEditor
-          language="javascript"
-          value={unformattedCode}
-          autoFormat={true}
-          height="300px"
-          showToolbar={true}
-        />
-      </Stack>
-    );
-  },
-};
-
-export const ComparisonView: Story = {
-  render: () => {
-    const originalCode = sampleCode.javascript;
-    const modifiedCode = sampleCode.typescript;
-
-    return (
-      <Stack spacing={3}>
-        <Typography variant="h6">Code Comparison</Typography>
-
-        <Box display="grid" gridTemplateColumns="1fr 1fr" gap={2}>
-          <Stack spacing={1}>
-            <Typography variant="subtitle2">Original (JavaScript)</Typography>
-            <CodeEditor
-              language="javascript"
-              value={originalCode}
-              height="400px"
-              readOnly={true}
-              showToolbar={false}
-            />
-          </Stack>
-
-          <Stack spacing={1}>
-            <Typography variant="subtitle2">Modified (TypeScript)</Typography>
-            <CodeEditor
-              language="typescript"
-              value={modifiedCode}
-              height="400px"
-              readOnly={false}
-              showToolbar={false}
-            />
-          </Stack>
-        </Box>
-      </Stack>
-    );
-  },
-};
-
-// Required story exports for validation
-export const AllVariants: Story = {
-  render: () => (
-    <Stack spacing={4}>
-      <CodeEditor language="javascript" value="console.log('Default variant');" />
-      <CodeEditor
-        language="typescript"
-        value="const message: string = 'TypeScript variant';"
-        theme="dark"
-      />
-      <CodeEditor language="json" value='{"variant": "JSON with minimap"}' minimap />
-    </Stack>
-  ),
-};
-
-export const AllSizes: Story = {
-  render: () => (
-    <Stack spacing={4}>
-      <CodeEditor language="javascript" value="// Small size" height="200px" fontSize={12} />
-      <CodeEditor
-        language="javascript"
-        value="// Medium size (default)"
-        height="400px"
-        fontSize={14}
-      />
-      <CodeEditor language="javascript" value="// Large size" height="600px" fontSize={16} />
-    </Stack>
-  ),
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <Stack spacing={4}>
-      <CodeEditor language="javascript" value="// Normal state" />
-      <CodeEditor language="javascript" value="// Read-only state" readOnly />
-      <CodeEditor language="javascript" value="" placeholder="Empty state with placeholder" />
-    </Stack>
-  ),
-};
-
-const InteractiveComponent = () => {
-  const [code1, setCode1] = React.useState('// Interactive editor 1');
-  const [code2, setCode2] = React.useState('// Interactive editor 2');
-
-  const handleSave = (value: string) => {
-    // Handle save action
-    setCode1(value);
-  };
-
-  return (
-    <Stack spacing={4}>
-      <CodeEditor language="javascript" value={code1} onChange={setCode1} onSave={handleSave} />
-      <CodeEditor language="typescript" value={code2} onChange={setCode2} wordWrap autoFormat />
-    </Stack>
-  );
-};
-
-export const InteractiveStates: Story = {
-  render: () => <InteractiveComponent />,
-};
-
-export const Responsive: Story = {
-  parameters: {
-    viewport: {
-      viewports: {
-        mobile: { name: 'Mobile', styles: { width: '375px', height: '667px' } },
-        tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px' } },
-        desktop: { name: 'Desktop', styles: { width: '1200px', height: '800px' } },
-      },
-    },
-  },
-  render: () => (
-    <CodeEditor
-      language="javascript"
-      value={`// Responsive code editor
-// This editor adapts to different screen sizes
-function responsiveFunction() {
-  return 'Works on mobile, tablet, and desktop';
-}`}
-      height="300px"
-    />
-  ),
-};