codymaster 4.1.4 → 4.4.1

package/skills/cm-ux-master/scripts/component_generator.py

@@ -0,0 +1,631 @@
+#!/usr/bin/env python3
+"""
+Component Blueprint Generator v4
+
+Tái tạo component React/Tailwind/shadcn từ harvest data.
+Hỗ trợ tự động tạo mã nguồn component dựa trên design system đã thu thập.
+
+Supported frameworks:
+- React + Tailwind CSS
+- shadcn/ui
+- Semi Design (React)
+- Vue 3 + Tailwind
+
+Usage:
+    python component_generator.py --input design-system.json --component button
+    python component_generator.py --input design-system.json --all --output ./components
+    python component_generator.py --input design-system.json --component card --framework semi
+
+Author: UX Master AI
+Version: 4.0.0
+"""
+
+import json
+import re
+from pathlib import Path
+from typing import Dict, List, Optional, Any
+from datetime import datetime
+import argparse
+import sys
+
+
+def generate_react_component(name: str, interface_name: str, element_type: str, 
+                             props: str, prop_destructure: str, base_classes: str,
+                             source: str, timestamp: str) -> str:
+    """Generate React + Tailwind component."""
+    
+    # Use string concatenation instead of format to avoid brace issues
+    lines = [
+        '"use client";',
+        '',
+        'import React from "react";',
+        'import { cn } from "@/lib/utils";',
+        '',
+        f'// Generated by UX Master Component Generator v4',
+        f'// Timestamp: {timestamp}',
+        f'// Source: {source}',
+        '',
+        f'export interface {interface_name}Props {{',
+        f'  {props}',
+        '}',
+        '',
+        f'export const {name} = React.forwardRef<',
+        f'  HTML{element_type}Element,',
+        f'  {interface_name}Props',
+        f'>(({prop_destructure}, className, ...props}}, ref) => {{',
+        '  return (',
+        f'    <{element_type}',
+        '      ref={ref}',
+        '      className={cn(',
+        f'        {base_classes},',
+        '        className',
+        '      )}}',
+        '      {...props}',
+        '    >',
+        '      {children}',
+        f'    </{element_type}>',
+        '  );',
+        '}});',
+        '',
+        f'{name}.displayName = "{name}";',
+    ]
+    
+    return '\n'.join(lines)
+
+
+def generate_semi_component(name: str, interface_name: str, semi_component: str,
+                            props: str, prop_destructure: str, style: str,
+                            source: str, timestamp: str) -> str:
+    """Generate Semi Design wrapper component."""
+    
+    lines = [
+        '"use client";',
+        '',
+        'import React from "react";',
+        f'import {{ {semi_component} }} from "@douyinfe/semi-ui";',
+        '',
+        f'// Generated by UX Master Component Generator v4',
+        f'// Timestamp: {timestamp}',
+        f'// Source: {source}',
+        '// Based on: Semi Design System',
+        '',
+        f'export interface {interface_name}Props {{',
+        f'  {props}',
+        '}',
+        '',
+        f'export const {name} = React.forwardRef<',
+        '  any,',
+        f'  {interface_name}Props',
+        f'>(({prop_destructure}, className, ...props}}, ref) => {{',
+        '  return (',
+        f'    <{semi_component}',
+        '      ref={ref}',
+        '      className={className}',
+        f'      style={{{style}}}',
+        '      {...props}',
+        '    >',
+        '      {children}',
+        f'    </{semi_component}>',
+        '  );',
+        '}});',
+        '',
+        f'{name}.displayName = "{name}";',
+    ]
+    
+    return '\n'.join(lines)
+
+
+def generate_vue_component(name: str, element_type: str, props: str, 
+                           default_props: str, base_classes: str,
+                           source: str, timestamp: str) -> str:
+    """Generate Vue 3 + Tailwind component."""
+    
+    lines = [
+        '<script setup lang="ts">',
+        f'// Generated by UX Master Component Generator v4',
+        f'// Timestamp: {timestamp}',
+        f'// Source: {source}',
+        '',
+        'interface Props {',
+        f'  {props}',
+        '}',
+        '',
+        'withDefaults(defineProps<Props>(), {',
+        f'  {default_props}',
+        '});',
+        '</script>',
+        '',
+        '<template>',
+        f'  <{element_type}',
+        '    :class="[',
+        f'      {base_classes}',
+        '    ]"',
+        '  >',
+        '    <slot />',
+        f'  </{element_type}>',
+        '</template>',
+    ]
+    
+    return '\n'.join(lines)
+
+
+# ============ COMPONENT DEFINITIONS ============
+
+COMPONENT_SPECS = {
+    "button": {
+        "element_type": "button",
+        "semi_component": "Button",
+        "variants": ["primary", "secondary", "outline", "ghost", "danger"],
+        "sizes": ["sm", "md", "lg"],
+        "props": [
+            ("variant", "string", "'primary'"),
+            ("size", "string", "'md'"),
+            ("disabled", "boolean", "false"),
+            ("loading", "boolean", "false"),
+            ("children", "React.ReactNode", "undefined"),
+        ],
+        "required_props": ["children"]
+    },
+    "card": {
+        "element_type": "div",
+        "semi_component": "Card",
+        "variants": ["default", "bordered", "elevated"],
+        "props": [
+            ("variant", "string", "'default'"),
+            ("padding", "string", "undefined"),
+            ("children", "React.ReactNode", "undefined"),
+        ],
+        "required_props": ["children"]
+    },
+    "input": {
+        "element_type": "input",
+        "semi_component": "Input",
+        "variants": ["default", "error", "success"],
+        "sizes": ["sm", "md", "lg"],
+        "props": [
+            ("variant", "string", "'default'"),
+            ("size", "string", "'md'"),
+            ("disabled", "boolean", "false"),
+            ("placeholder", "string", "''"),
+            ("value", "string", "undefined"),
+            ("onChange", "(value: string) => void", "undefined"),
+        ],
+        "required_props": []
+    },
+    "badge": {
+        "element_type": "span",
+        "semi_component": "Tag",
+        "variants": ["default", "success", "warning", "danger", "info"],
+        "props": [
+            ("variant", "string", "'default'"),
+            ("children", "React.ReactNode", "undefined"),
+        ],
+        "required_props": ["children"]
+    },
+    "tag": {
+        "element_type": "span",
+        "semi_component": "Tag",
+        "variants": ["default", "success", "warning", "danger", "info"],
+        "props": [
+            ("variant", "string", "'default'"),
+            ("closable", "boolean", "false"),
+            ("children", "React.ReactNode", "undefined"),
+        ],
+        "required_props": ["children"]
+    },
+    "avatar": {
+        "element_type": "div",
+        "semi_component": "Avatar",
+        "variants": ["circle", "square"],
+        "sizes": ["xs", "sm", "md", "lg", "xl"],
+        "props": [
+            ("size", "string", "'md'"),
+            ("shape", "string", "'circle'"),
+            ("src", "string", "undefined"),
+            ("alt", "string", "''"),
+            ("children", "React.ReactNode", "undefined"),
+        ],
+        "required_props": []
+    },
+    "alert": {
+        "element_type": "div",
+        "semi_component": "Alert",
+        "variants": ["info", "success", "warning", "error"],
+        "props": [
+            ("variant", "string", "'info'"),
+            ("title", "string", "undefined"),
+            ("closable", "boolean", "false"),
+            ("children", "React.ReactNode", "undefined"),
+        ],
+        "required_props": ["children"]
+    },
+    "modal": {
+        "element_type": "div",
+        "semi_component": "Modal",
+        "variants": ["default", "centered", "fullscreen"],
+        "props": [
+            ("open", "boolean", "false"),
+            ("onClose", "() => void", "undefined"),
+            ("title", "string", "undefined"),
+            ("footer", "React.ReactNode", "undefined"),
+            ("children", "React.ReactNode", "undefined"),
+        ],
+        "required_props": ["open", "onClose"]
+    },
+    "table": {
+        "element_type": "table",
+        "semi_component": "Table",
+        "variants": ["default", "bordered", "striped"],
+        "props": [
+            ("data", "any[]", "[]"),
+            ("columns", "any[]", "[]"),
+            ("loading", "boolean", "false"),
+        ],
+        "required_props": ["data", "columns"]
+    },
+    "tabs": {
+        "element_type": "div",
+        "semi_component": "Tabs",
+        "variants": ["line", "card", "button"],
+        "props": [
+            ("variant", "string", "'line'"),
+            ("activeKey", "string", "undefined"),
+            ("onChange", "(key: string) => void", "undefined"),
+            ("items", "any[]", "[]"),
+        ],
+        "required_props": ["items"]
+    },
+    "dropdown": {
+        "element_type": "div",
+        "semi_component": "Dropdown",
+        "variants": ["default", "hover", "click"],
+        "props": [
+            ("trigger", "'hover' | 'click'", "'hover'"),
+            ("menu", "any[]", "[]"),
+            ("children", "React.ReactNode", "undefined"),
+        ],
+        "required_props": ["menu", "children"]
+    },
+    "tooltip": {
+        "element_type": "span",
+        "semi_component": "Tooltip",
+        "variants": ["default"],
+        "props": [
+            ("content", "string", "''"),
+            ("position", "string", "'top'"),
+            ("children", "React.ReactNode", "undefined"),
+        ],
+        "required_props": ["content", "children"]
+    },
+    "divider": {
+        "element_type": "hr",
+        "semi_component": "Divider",
+        "variants": ["horizontal", "vertical"],
+        "props": [
+            ("orientation", "string", "'horizontal'"),
+            ("dashed", "boolean", "false"),
+        ],
+        "required_props": []
+    },
+    "skeleton": {
+        "element_type": "div",
+        "semi_component": "Skeleton",
+        "variants": ["text", "circle", "rect", "paragraph"],
+        "props": [
+            ("variant", "string", "'text'"),
+            ("loading", "boolean", "true"),
+            ("children", "React.ReactNode", "undefined"),
+        ],
+        "required_props": []
+    },
+    "empty": {
+        "element_type": "div",
+        "semi_component": "Empty",
+        "variants": ["default"],
+        "props": [
+            ("description", "string", "'No data'"),
+            ("image", "React.ReactNode", "undefined"),
+        ],
+        "required_props": []
+    },
+}
+
+
+class ComponentGenerator:
+    """Generate component code from design system data."""
+    
+    def __init__(self, design_system: Dict, framework: str = "react-tailwind"):
+        self.design_system = design_system
+        self.framework = framework
+        self.tokens = design_system.get("colors", {})
+        self.typography = design_system.get("typography", {})
+        self.spacing = design_system.get("spacing", {})
+        self.borders = design_system.get("borders", {})
+        
+    def generate(self, component_type: str) -> Dict[str, str]:
+        """Generate component code."""
+        if component_type not in COMPONENT_SPECS:
+            raise ValueError(f"Unknown component type: {component_type}")
+        
+        spec = COMPONENT_SPECS[component_type]
+        blueprint = self.design_system.get("components", {}).get(component_type, {})
+        
+        if self.framework == "react-tailwind":
+            return self._generate_react(spec, blueprint, component_type)
+        elif self.framework == "semi":
+            return self._generate_semi(spec, blueprint, component_type)
+        elif self.framework == "vue":
+            return self._generate_vue(spec, blueprint, component_type)
+        else:
+            raise ValueError(f"Unknown framework: {self.framework}")
+    
+    def _generate_react(self, spec: Dict, blueprint: Dict, component_type: str) -> Dict[str, str]:
+        """Generate React + Tailwind component."""
+        component_name = component_type.capitalize()
+        interface_name = component_name
+        
+        # Generate props
+        props_lines = []
+        prop_destructure_parts = []
+        
+        for prop_name, prop_type, default_value in spec["props"]:
+            is_optional = prop_name not in spec.get("required_props", [])
+            optional_marker = "?" if is_optional else ""
+            props_lines.append(f"{prop_name}{optional_marker}: {prop_type};")
+            prop_destructure_parts.append(prop_name)
+        
+        props_str = "\n  ".join(props_lines)
+        prop_destructure_str = ", ".join(prop_destructure_parts)
+        
+        # Generate Tailwind classes based on design tokens
+        base_classes = self._generate_tailwind_classes(spec, blueprint, component_type)
+        
+        # Determine element type
+        element_type = spec["element_type"].upper() if spec["element_type"] != "div" else "Div"
+        
+        code = generate_react_component(
+            name=component_name,
+            interface_name=interface_name,
+            element_type=element_type,
+            props=props_str,
+            prop_destructure=prop_destructure_str,
+            base_classes=base_classes,
+            source=self.design_system.get("meta", {}).get("url", "unknown"),
+            timestamp=datetime.now().isoformat()
+        )
+        
+        return {
+            "component.tsx": code,
+            "index.ts": f'export {{ {component_name}, type {interface_name}Props }} from "./{component_type}";'
+        }
+    
+    def _generate_semi(self, spec: Dict, blueprint: Dict, component_type: str) -> Dict[str, str]:
+        """Generate Semi Design wrapper component."""
+        component_name = component_type.capitalize()
+        interface_name = component_name
+        
+        props_lines = []
+        prop_destructure_parts = []
+        
+        for prop_name, prop_type, default_value in spec["props"]:
+            is_optional = prop_name not in spec.get("required_props", [])
+            optional_marker = "?" if is_optional else ""
+            props_lines.append(f"{prop_name}{optional_marker}: {prop_type};")
+            prop_destructure_parts.append(prop_name)
+        
+        props_str = "\n  ".join(props_lines)
+        prop_destructure_str = ", ".join(prop_destructure_parts)
+        
+        code = generate_semi_component(
+            name=component_name,
+            interface_name=interface_name,
+            semi_component=spec["semi_component"],
+            props=props_str,
+            prop_destructure=prop_destructure_str,
+            style="{}",
+            source=self.design_system.get("meta", {}).get("url", "unknown"),
+            timestamp=datetime.now().isoformat()
+        )
+        
+        return {
+            "component.tsx": code,
+            "index.ts": f'export {{ {component_name}, type {interface_name}Props }} from "./{component_type}";'
+        }
+    
+    def _generate_vue(self, spec: Dict, blueprint: Dict, component_type: str) -> Dict[str, str]:
+        """Generate Vue 3 + Tailwind component."""
+        component_name = component_type.capitalize()
+        
+        props_lines = []
+        default_props = []
+        
+        for prop_name, prop_type, default_value in spec["props"]:
+            props_lines.append(f"{prop_name}?: {prop_type};")
+            if default_value != "undefined":
+                default_props.append(f"{prop_name}: {default_value}")
+        
+        props_str = "\n  ".join(props_lines)
+        default_props_str = "\n  ".join(default_props) if default_props else ""
+        
+        base_classes = self._generate_tailwind_classes(spec, blueprint, component_type)
+        
+        code = generate_vue_component(
+            name=component_name,
+            element_type=spec["element_type"],
+            props=props_str,
+            default_props=default_props_str,
+            base_classes=base_classes,
+            source=self.design_system.get("meta", {}).get("url", "unknown"),
+            timestamp=datetime.now().isoformat()
+        )
+        
+        return {
+            "component.vue": code,
+            "index.ts": f'export {{ default as {component_name} }} from "./{component_type}.vue";'
+        }
+    
+    def _generate_tailwind_classes(self, spec: Dict, blueprint: Dict, component_type: str) -> str:
+        """Generate Tailwind CSS classes from design tokens."""
+        classes = []
+        
+        # Get representative variant
+        rep = blueprint.get("representative", {})
+        styles = rep.get("styles", {}) if isinstance(rep, dict) else {}
+        
+        if component_type == "button":
+            # Base button styles
+            classes.extend([
+                '"inline-flex items-center justify-center',
+                'font-medium transition-colors',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+                'disabled:pointer-events-none disabled:opacity-50"'
+            ])
+            
+            # Size variants
+            classes.append('"  // Size: sm')
+            classes.append('  "h-8 px-3 text-sm": size === "sm",')
+            classes.append('  // Size: md (default)')
+            classes.append('  "h-10 px-4 text-base": size === "md",')
+            classes.append('  // Size: lg')
+            classes.append('  "h-12 px-6 text-lg": size === "lg",')
+            
+            # Variant styles
+            classes.append('  // Variant: primary')
+            classes.append('  "text-white hover:opacity-90": variant === "primary",')
+            classes.append('  // Variant: secondary')
+            classes.append('  "bg-secondary text-secondary-foreground hover:bg-secondary/90": variant === "secondary",')
+            classes.append('  // Variant: outline')
+            classes.append('  "border border-input bg-background hover:bg-accent hover:text-accent-foreground": variant === "outline",')
+            classes.append('  // Variant: ghost')
+            classes.append('  "hover:bg-accent hover:text-accent-foreground": variant === "ghost",')
+            
+        elif component_type == "card":
+            classes.extend([
+                '"rounded-lg border bg-card text-card-foreground shadow-sm',
+                'transition-shadow hover:shadow-md"'
+            ])
+            
+        elif component_type == "input":
+            classes.extend([
+                '"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2',
+                'text-sm ring-offset-background',
+                'placeholder:text-muted-foreground',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                'disabled:cursor-not-allowed disabled:opacity-50"'
+            ])
+            
+        elif component_type == "badge":
+            classes.extend([
+                '"inline-flex items-center rounded-full border px-2.5 py-0.5',
+                'text-xs font-semibold transition-colors',
+                'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"'
+            ])
+        
+        return "\n        ".join(classes) if classes else '""'
+    
+    def generate_all(self) -> Dict[str, Dict[str, str]]:
+        """Generate all components."""
+        results = {}
+        
+        available_components = list(self.design_system.get("components", {}).keys())
+        
+        # Always generate core components
+        core_components = ["button", "card", "input", "badge"]
+        for comp in core_components:
+            if comp in COMPONENT_SPECS:
+                try:
+                    results[comp] = self.generate(comp)
+                except Exception as e:
+                    print(f"[WARN] Failed to generate {comp}: {e}")
+        
+        # Generate detected components
+        for comp in available_components:
+            if comp not in results and comp in COMPONENT_SPECS:
+                try:
+                    results[comp] = self.generate(comp)
+                except Exception as e:
+                    print(f"[WARN] Failed to generate {comp}: {e}")
+        
+        return results
+
+
+def main():
+    """CLI entry point."""
+    parser = argparse.ArgumentParser(
+        description="Component Blueprint Generator v4",
+        formatter_class=argparse.RawDescriptionHelpFormatter,
+        epilog="""
+Examples:
+  # Generate specific component
+  python component_generator.py --input design-system.json --component button
+  
+  # Generate all components
+  python component_generator.py --input design-system.json --all --output ./components
+  
+  # Use Semi Design framework
+  python component_generator.py --input design-system.json --component button --framework semi
+  
+  # Generate Vue components
+  python component_generator.py --input design-system.json --all --framework vue
+        """
+    )
+    
+    parser.add_argument("--input", "-i", required=True, help="Design system JSON file")
+    parser.add_argument("--component", "-c", help="Component type to generate")
+    parser.add_argument("--all", "-a", action="store_true", help="Generate all components")
+    parser.add_argument("--output", "-o", default="./components", help="Output directory")
+    parser.add_argument("--framework", "-f", default="react-tailwind", 
+                       choices=["react-tailwind", "semi", "vue"],
+                       help="Target framework")
+    
+    args = parser.parse_args()
+    
+    # Load design system
+    with open(args.input, 'r') as f:
+        design_system = json.load(f)
+    
+    # Create generator
+    generator = ComponentGenerator(design_system, framework=args.framework)
+    
+    output_dir = Path(args.output)
+    output_dir.mkdir(parents=True, exist_ok=True)
+    
+    if args.all:
+        print(f"[INFO] Generating all components with {args.framework}...")
+        results = generator.generate_all()
+        
+        for comp_name, files in results.items():
+            comp_dir = output_dir / comp_name
+            comp_dir.mkdir(exist_ok=True)
+            
+            for filename, content in files.items():
+                filepath = comp_dir / filename
+                with open(filepath, "w") as f:
+                    f.write(content)
+            
+            print(f"[OK] {comp_name}/")
+        
+        print(f"\n[SUMMARY] Generated {len(results)} components in {output_dir}")
+        
+    elif args.component:
+        print(f"[INFO] Generating {args.component} component...")
+        files = generator.generate(args.component)
+        
+        comp_dir = output_dir / args.component
+        comp_dir.mkdir(parents=True, exist_ok=True)
+        
+        for filename, content in files.items():
+            filepath = comp_dir / filename
+            with open(filepath, "w") as f:
+                f.write(content)
+            print(f"[OK] {filepath}")
+        
+        print(f"\n[SUMMARY] Generated {args.component} component in {comp_dir}")
+    
+    else:
+        parser.print_help()
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()