@specverse/engines 4.1.28 → 4.2.0

package/libs/instance-factories/views/templates/shared/atomic-components-registry.js

@@ -1,822 +0,0 @@
-/**
- * Atomic Components Registry
- *
- * Defines all 49 atomic component types from SpecVerse v3.4.0 schema.
- * Each type has metadata about its purpose, properties, and usage patterns.
- *
- * This registry is framework-agnostic. UI library adapters (shadcn, MUI, etc.)
- * implement these types using their specific components.
- */
-/**
- * Complete registry of all 49 atomic component types
- */
-export const ATOMIC_COMPONENTS_REGISTRY = {
-    // =========================================================================
-    // DATA DISPLAY (9 types)
-    // =========================================================================
-    table: {
-        type: 'table',
-        name: 'Table',
-        category: 'data-display',
-        description: 'Tabular data display with rows, columns, sorting, and pagination',
-        properties: ['columns', 'sortable', 'filterable', 'pagination', 'compact', 'selectable', 'exportable'],
-        canHaveChildren: false,
-        example: `
-      taskTable:
-        type: table
-        model: Task
-        columns: [title, status, priority, assignee, dueDate]
-        features: [sorting, filtering, pagination]
-    `
-    },
-    list: {
-        type: 'list',
-        name: 'List',
-        category: 'data-display',
-        description: 'Vertical list of items, often with avatars or icons',
-        properties: ['items', 'itemTemplate', 'dividers', 'dense', 'interactive'],
-        canHaveChildren: true,
-        example: `
-      userList:
-        type: list
-        model: User
-        properties:
-          dense: true
-          dividers: true
-    `
-    },
-    grid: {
-        type: 'grid',
-        name: 'Grid',
-        category: 'data-display',
-        description: 'Grid layout for cards or items',
-        properties: ['columns', 'gap', 'responsive', 'itemsPerRow'],
-        canHaveChildren: true,
-        example: `
-      projectGrid:
-        type: grid
-        properties:
-          columns: 3
-          gap: medium
-          responsive: true
-    `
-    },
-    card: {
-        type: 'card',
-        name: 'Card',
-        category: 'data-display',
-        description: 'Container with optional header, content, and actions',
-        properties: ['title', 'subtitle', 'variant', 'elevation', 'clickable', 'hoverable', 'compact', 'showTrend', 'metric'],
-        canHaveChildren: true,
-        example: `
-      budgetCard:
-        type: card
-        properties:
-          variant: metric
-          showTrend: true
-          metric: budget
-    `
-    },
-    chart: {
-        type: 'chart',
-        name: 'Chart',
-        category: 'data-display',
-        description: 'Data visualization (line, bar, pie, etc.)',
-        properties: ['chartType', 'data', 'responsive', 'showLegend', 'interactive', 'exportable'],
-        canHaveChildren: false,
-        example: `
-      trendChart:
-        type: chart
-        properties:
-          chartType: trend
-          responsive: true
-          showLegend: true
-    `
-    },
-    tree: {
-        type: 'tree',
-        name: 'Tree',
-        category: 'data-display',
-        description: 'Hierarchical tree structure',
-        properties: ['data', 'expandable', 'selectable', 'checkboxes', 'defaultExpanded'],
-        canHaveChildren: false,
-        example: `
-      categoryTree:
-        type: tree
-        properties:
-          expandable: true
-          defaultExpanded: false
-    `
-    },
-    timeline: {
-        type: 'timeline',
-        name: 'Timeline',
-        category: 'data-display',
-        description: 'Chronological event timeline',
-        properties: ['orientation', 'showDateMarkers', 'showDuration', 'showUser'],
-        canHaveChildren: true,
-        example: `
-      activityTimeline:
-        type: timeline
-        properties:
-          orientation: vertical
-          showDateMarkers: true
-    `
-    },
-    avatar: {
-        type: 'avatar',
-        name: 'Avatar',
-        category: 'data-display',
-        description: 'User avatar or profile image',
-        properties: ['src', 'alt', 'size', 'shape', 'initials', 'badge'],
-        canHaveChildren: false,
-        example: `
-      userAvatar:
-        type: avatar
-        properties:
-          size: medium
-          shape: circle
-    `
-    },
-    image: {
-        type: 'image',
-        name: 'Image',
-        category: 'data-display',
-        description: 'Image display with optional caption',
-        properties: ['src', 'alt', 'width', 'height', 'objectFit', 'caption', 'lazy'],
-        canHaveChildren: false,
-        example: `
-      projectImage:
-        type: image
-        properties:
-          objectFit: cover
-          lazy: true
-    `
-    },
-    // =========================================================================
-    // FORMS & INPUTS (11 types)
-    // =========================================================================
-    form: {
-        type: 'form',
-        name: 'Form',
-        category: 'forms-inputs',
-        description: 'Form container with validation and submission',
-        properties: ['onSubmit', 'validation', 'autoSave', 'showValidation', 'layout'],
-        canHaveChildren: true,
-        example: `
-      taskForm:
-        type: form
-        properties:
-          autoSave: false
-          showValidation: true
-    `
-    },
-    input: {
-        type: 'input',
-        name: 'Input',
-        category: 'forms-inputs',
-        description: 'Text input field',
-        properties: ['label', 'placeholder', 'required', 'type', 'disabled', 'error', 'helperText', 'icon', 'multiline'],
-        canHaveChildren: false,
-        example: `
-      titleInput:
-        type: input
-        properties:
-          label: "Title"
-          placeholder: "Enter task title"
-          required: true
-    `
-    },
-    textarea: {
-        type: 'textarea',
-        name: 'Textarea',
-        category: 'forms-inputs',
-        description: 'Multi-line text input',
-        properties: ['label', 'placeholder', 'rows', 'required', 'maxLength', 'resize'],
-        canHaveChildren: false,
-        example: `
-      descriptionInput:
-        type: textarea
-        properties:
-          label: "Description"
-          rows: 4
-    `
-    },
-    select: {
-        type: 'select',
-        name: 'Select',
-        category: 'forms-inputs',
-        description: 'Dropdown selection',
-        properties: ['label', 'options', 'required', 'multiple', 'placeholder', 'searchable'],
-        canHaveChildren: false,
-        example: `
-      statusSelect:
-        type: select
-        properties:
-          label: "Status"
-          options: [todo, in_progress, done]
-          required: true
-    `
-    },
-    checkbox: {
-        type: 'checkbox',
-        name: 'Checkbox',
-        category: 'forms-inputs',
-        description: 'Checkbox for boolean values',
-        properties: ['label', 'checked', 'disabled', 'indeterminate'],
-        canHaveChildren: false,
-        example: `
-      completedCheckbox:
-        type: checkbox
-        properties:
-          label: "Completed"
-    `
-    },
-    radio: {
-        type: 'radio',
-        name: 'Radio',
-        category: 'forms-inputs',
-        description: 'Radio button group',
-        properties: ['label', 'options', 'orientation', 'required'],
-        canHaveChildren: false,
-        example: `
-      priorityRadio:
-        type: radio
-        properties:
-          label: "Priority"
-          options: [low, medium, high]
-          orientation: horizontal
-    `
-    },
-    slider: {
-        type: 'slider',
-        name: 'Slider',
-        category: 'forms-inputs',
-        description: 'Slider for numeric ranges',
-        properties: ['label', 'min', 'max', 'step', 'value', 'marks', 'showValue'],
-        canHaveChildren: false,
-        example: `
-      progressSlider:
-        type: slider
-        properties:
-          label: "Progress"
-          min: 0
-          max: 100
-          showValue: true
-    `
-    },
-    switch: {
-        type: 'switch',
-        name: 'Switch',
-        category: 'forms-inputs',
-        description: 'Toggle switch for boolean values',
-        properties: ['label', 'checked', 'disabled', 'size'],
-        canHaveChildren: false,
-        example: `
-      notificationsSwitch:
-        type: switch
-        properties:
-          label: "Enable Notifications"
-    `
-    },
-    autocomplete: {
-        type: 'autocomplete',
-        name: 'Autocomplete',
-        category: 'forms-inputs',
-        description: 'Searchable dropdown with autocomplete',
-        properties: ['label', 'options', 'multiple', 'searchable', 'placeholder', 'limit', 'freeSolo'],
-        canHaveChildren: false,
-        example: `
-      assigneeSelect:
-        type: autocomplete
-        model: User
-        properties:
-          label: "Assignee"
-          searchable: true
-    `
-    },
-    datepicker: {
-        type: 'datepicker',
-        name: 'DatePicker',
-        category: 'forms-inputs',
-        description: 'Date selection input',
-        properties: ['label', 'format', 'minDate', 'maxDate', 'required', 'showTime', 'range'],
-        canHaveChildren: false,
-        example: `
-      dueDatePicker:
-        type: datepicker
-        properties:
-          label: "Due Date"
-          format: "MM/DD/YYYY"
-    `
-    },
-    timepicker: {
-        type: 'timepicker',
-        name: 'TimePicker',
-        category: 'forms-inputs',
-        description: 'Time selection input',
-        properties: ['label', 'format', 'required', 'step', 'use24Hour'],
-        canHaveChildren: false,
-        example: `
-      meetingTime:
-        type: timepicker
-        properties:
-          label: "Meeting Time"
-          use24Hour: false
-    `
-    },
-    // =========================================================================
-    // ACTIONS (5 types)
-    // =========================================================================
-    button: {
-        type: 'button',
-        name: 'Button',
-        category: 'actions',
-        description: 'Clickable button',
-        properties: ['label', 'variant', 'size', 'disabled', 'loading', 'icon', 'onClick', 'type'],
-        canHaveChildren: false,
-        example: `
-      submitButton:
-        type: button
-        properties:
-          label: "Submit"
-          variant: primary
-          type: submit
-    `
-    },
-    'button-group': {
-        type: 'button-group',
-        name: 'ButtonGroup',
-        category: 'actions',
-        description: 'Group of related buttons',
-        properties: ['orientation', 'variant', 'size', 'buttons'],
-        canHaveChildren: true,
-        example: `
-      actions:
-        type: button-group
-        properties:
-          orientation: horizontal
-        uiComponents:
-          editButton: { type: button }
-          deleteButton: { type: button }
-    `
-    },
-    link: {
-        type: 'link',
-        name: 'Link',
-        category: 'actions',
-        description: 'Hyperlink or navigation link',
-        properties: ['href', 'label', 'external', 'underline', 'color'],
-        canHaveChildren: false,
-        example: `
-      viewDetails:
-        type: link
-        properties:
-          label: "View Details"
-          href: "/tasks/:id"
-    `
-    },
-    icon: {
-        type: 'icon',
-        name: 'Icon',
-        category: 'actions',
-        description: 'Icon display',
-        properties: ['name', 'size', 'color', 'clickable', 'tooltip'],
-        canHaveChildren: false,
-        example: `
-      deleteIcon:
-        type: icon
-        properties:
-          name: "trash"
-          color: danger
-    `
-    },
-    menu: {
-        type: 'menu',
-        name: 'Menu',
-        category: 'actions',
-        description: 'Dropdown menu with actions',
-        properties: ['items', 'trigger', 'placement'],
-        canHaveChildren: true,
-        example: `
-      contextMenu:
-        type: menu
-        properties:
-          trigger: click
-          placement: bottom-start
-    `
-    },
-    // =========================================================================
-    // OVERLAYS & FEEDBACK (9 types)
-    // =========================================================================
-    modal: {
-        type: 'modal',
-        name: 'Modal',
-        category: 'overlays-feedback',
-        description: 'Modal dialog overlay',
-        properties: ['title', 'size', 'closeOnBackdrop', 'closeButton', 'footer'],
-        canHaveChildren: true,
-        example: `
-      confirmDialog:
-        type: modal
-        properties:
-          title: "Confirm Deletion"
-          size: small
-          closeOnBackdrop: false
-    `
-    },
-    dialog: {
-        type: 'dialog',
-        name: 'Dialog',
-        category: 'overlays-feedback',
-        description: 'Dialog box (similar to modal, often simpler)',
-        properties: ['title', 'message', 'actions', 'variant'],
-        canHaveChildren: true,
-        example: `
-      alertDialog:
-        type: dialog
-        properties:
-          title: "Alert"
-          variant: warning
-    `
-    },
-    drawer: {
-        type: 'drawer',
-        name: 'Drawer',
-        category: 'overlays-feedback',
-        description: 'Slide-out panel from edge',
-        properties: ['position', 'width', 'closeOnBackdrop', 'persistent'],
-        canHaveChildren: true,
-        example: `
-      filterDrawer:
-        type: drawer
-        properties:
-          position: right
-          width: 400
-    `
-    },
-    popover: {
-        type: 'popover',
-        name: 'Popover',
-        category: 'overlays-feedback',
-        description: 'Floating content container',
-        properties: ['trigger', 'placement', 'arrow', 'offset'],
-        canHaveChildren: true,
-        example: `
-      helpPopover:
-        type: popover
-        properties:
-          trigger: hover
-          placement: top
-    `
-    },
-    tooltip: {
-        type: 'tooltip',
-        name: 'Tooltip',
-        category: 'overlays-feedback',
-        description: 'Brief informational tooltip',
-        properties: ['content', 'placement', 'arrow', 'delay'],
-        canHaveChildren: false,
-        example: `
-      infoTooltip:
-        type: tooltip
-        properties:
-          content: "Additional information"
-          placement: top
-    `
-    },
-    alert: {
-        type: 'alert',
-        name: 'Alert',
-        category: 'overlays-feedback',
-        description: 'Alert or notification message',
-        properties: ['variant', 'title', 'message', 'closable', 'icon'],
-        canHaveChildren: false,
-        example: `
-      successAlert:
-        type: alert
-        properties:
-          variant: success
-          message: "Task created successfully"
-    `
-    },
-    snackbar: {
-        type: 'snackbar',
-        name: 'Snackbar',
-        category: 'overlays-feedback',
-        description: 'Temporary notification (toast)',
-        properties: ['message', 'duration', 'position', 'action', 'variant'],
-        canHaveChildren: false,
-        example: `
-      notification:
-        type: snackbar
-        properties:
-          message: "Changes saved"
-          duration: 3000
-          position: bottom-right
-    `
-    },
-    badge: {
-        type: 'badge',
-        name: 'Badge',
-        category: 'overlays-feedback',
-        description: 'Small status indicator or count',
-        properties: ['content', 'variant', 'position', 'max', 'dot'],
-        canHaveChildren: false,
-        example: `
-      notificationBadge:
-        type: badge
-        properties:
-          content: 5
-          variant: error
-    `
-    },
-    spinner: {
-        type: 'spinner',
-        name: 'Spinner',
-        category: 'overlays-feedback',
-        description: 'Loading spinner',
-        properties: ['size', 'color', 'thickness'],
-        canHaveChildren: false,
-        example: `
-      loadingSpinner:
-        type: spinner
-        properties:
-          size: medium
-    `
-    },
-    // =========================================================================
-    // NAVIGATION (5 types)
-    // =========================================================================
-    tabs: {
-        type: 'tabs',
-        name: 'Tabs',
-        category: 'navigation',
-        description: 'Tabbed navigation',
-        properties: ['orientation', 'variant', 'sections', 'showProgress'],
-        canHaveChildren: true,
-        example: `
-      profileTabs:
-        type: tabs
-        properties:
-          sections: [about, activity, settings]
-    `
-    },
-    breadcrumb: {
-        type: 'breadcrumb',
-        name: 'Breadcrumb',
-        category: 'navigation',
-        description: 'Breadcrumb navigation trail',
-        properties: ['items', 'separator', 'maxItems'],
-        canHaveChildren: false,
-        example: `
-      pageBreadcrumb:
-        type: breadcrumb
-        properties:
-          separator: "/"
-    `
-    },
-    navbar: {
-        type: 'navbar',
-        name: 'Navbar',
-        category: 'navigation',
-        description: 'Top navigation bar',
-        properties: ['brand', 'items', 'sticky', 'transparent'],
-        canHaveChildren: true,
-        example: `
-      mainNav:
-        type: navbar
-        properties:
-          sticky: true
-    `
-    },
-    sidebar: {
-        type: 'sidebar',
-        name: 'Sidebar',
-        category: 'navigation',
-        description: 'Side navigation menu',
-        properties: ['items', 'collapsible', 'width', 'position'],
-        canHaveChildren: true,
-        example: `
-      appSidebar:
-        type: sidebar
-        properties:
-          collapsible: true
-          position: left
-    `
-    },
-    pagination: {
-        type: 'pagination',
-        name: 'Pagination',
-        category: 'navigation',
-        description: 'Page navigation controls',
-        properties: ['pageSize', 'total', 'showSizeChanger', 'showTotal'],
-        canHaveChildren: false,
-        example: `
-      tablePagination:
-        type: pagination
-        properties:
-          pageSize: 25
-          showSizeChanger: true
-    `
-    },
-    // =========================================================================
-    // LAYOUT (6 types)
-    // =========================================================================
-    accordion: {
-        type: 'accordion',
-        name: 'Accordion',
-        category: 'layout',
-        description: 'Expandable/collapsible sections',
-        properties: ['allowMultiple', 'defaultExpanded', 'variant'],
-        canHaveChildren: true,
-        example: `
-      faqAccordion:
-        type: accordion
-        properties:
-          allowMultiple: false
-    `
-    },
-    carousel: {
-        type: 'carousel',
-        name: 'Carousel',
-        category: 'layout',
-        description: 'Slideshow of items',
-        properties: ['autoplay', 'interval', 'showArrows', 'showDots', 'infinite'],
-        canHaveChildren: true,
-        example: `
-      imageCarousel:
-        type: carousel
-        properties:
-          autoplay: true
-          interval: 5000
-    `
-    },
-    container: {
-        type: 'container',
-        name: 'Container',
-        category: 'layout',
-        description: 'Generic layout container',
-        properties: ['layout', 'gap', 'padding', 'alignment', 'scrollable', 'renderType', 'allowDrop'],
-        canHaveChildren: true,
-        example: `
-      boardContainer:
-        type: container
-        properties:
-          layout: horizontal
-          scrollable: true
-    `
-    },
-    divider: {
-        type: 'divider',
-        name: 'Divider',
-        category: 'layout',
-        description: 'Visual separator',
-        properties: ['orientation', 'variant', 'spacing'],
-        canHaveChildren: false,
-        example: `
-      sectionDivider:
-        type: divider
-        properties:
-          orientation: horizontal
-    `
-    },
-    header: {
-        type: 'header',
-        name: 'Header',
-        category: 'layout',
-        description: 'Header section',
-        properties: ['title', 'subtitle', 'showAvatar', 'showCover', 'actions'],
-        canHaveChildren: true,
-        example: `
-      pageHeader:
-        type: header
-        properties:
-          title: "Dashboard"
-    `
-    },
-    footer: {
-        type: 'footer',
-        name: 'Footer',
-        category: 'layout',
-        description: 'Footer section',
-        properties: ['content', 'links', 'copyright', 'sticky'],
-        canHaveChildren: true,
-        example: `
-      pageFooter:
-        type: footer
-        properties:
-          copyright: "2025 Company"
-    `
-    },
-    // =========================================================================
-    // PROGRESS (2 types)
-    // =========================================================================
-    'progress-bar': {
-        type: 'progress-bar',
-        name: 'ProgressBar',
-        category: 'progress',
-        description: 'Linear progress indicator',
-        properties: ['value', 'max', 'label', 'variant', 'animated'],
-        canHaveChildren: false,
-        example: `
-      taskProgress:
-        type: progress-bar
-        properties:
-          value: 75
-          max: 100
-          label: true
-    `
-    },
-    'progress-circle': {
-        type: 'progress-circle',
-        name: 'ProgressCircle',
-        category: 'progress',
-        description: 'Circular progress indicator',
-        properties: ['value', 'max', 'size', 'thickness', 'label'],
-        canHaveChildren: false,
-        example: `
-      completionProgress:
-        type: progress-circle
-        properties:
-          value: 75
-          size: large
-    `
-    },
-    // =========================================================================
-    // SPECIALIZED (2 types)
-    // =========================================================================
-    searchBar: {
-        type: 'searchBar',
-        name: 'SearchBar',
-        category: 'specialized',
-        description: 'Search input with icon and actions',
-        properties: ['placeholder', 'onSearch', 'showClear', 'autofocus'],
-        canHaveChildren: false,
-        example: `
-      taskSearch:
-        type: searchBar
-        properties:
-          placeholder: "Search tasks..."
-          showClear: true
-    `
-    },
-    filterPanel: {
-        type: 'filterPanel',
-        name: 'FilterPanel',
-        category: 'specialized',
-        description: 'Panel with multiple filter controls',
-        properties: ['position', 'collapsible', 'advanced', 'showDateRange', 'showCategories', 'showActivityTypes'],
-        canHaveChildren: true,
-        example: `
-      dataFilters:
-        type: filterPanel
-        properties:
-          position: top
-          collapsible: true
-          advanced: true
-    `
-    },
-};
-/**
- * Get component definition by type
- */
-export function getComponentDefinition(type) {
-    return ATOMIC_COMPONENTS_REGISTRY[type];
-}
-/**
- * Get all components in a category
- */
-export function getComponentsByCategory(category) {
-    return Object.values(ATOMIC_COMPONENTS_REGISTRY).filter(comp => comp.category === category);
-}
-/**
- * Validate if a component type exists
- */
-export function isValidComponentType(type) {
-    return type in ATOMIC_COMPONENTS_REGISTRY;
-}
-/**
- * Get all component types as array
- */
-export function getAllComponentTypes() {
-    return Object.keys(ATOMIC_COMPONENTS_REGISTRY);
-}
-/**
- * Component categories summary
- */
-export const COMPONENT_CATEGORIES = {
-    'data-display': 9,
-    'forms-inputs': 11,
-    'actions': 5,
-    'overlays-feedback': 9,
-    'navigation': 5,
-    'layout': 6,
-    'progress': 2,
-    'specialized': 2,
-};
-/**
- * Total count: 49 atomic components
- */
-export const TOTAL_COMPONENT_COUNT = 49;
-//# sourceMappingURL=atomic-components-registry.js.map