@specverse/engines 4.1.5 → 4.1.7

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

@@ -0,0 +1,800 @@
+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
+    `
+  }
+};
+function getComponentDefinition(type) {
+  return ATOMIC_COMPONENTS_REGISTRY[type];
+}
+function getComponentsByCategory(category) {
+  return Object.values(ATOMIC_COMPONENTS_REGISTRY).filter((comp) => comp.category === category);
+}
+function isValidComponentType(type) {
+  return type in ATOMIC_COMPONENTS_REGISTRY;
+}
+function getAllComponentTypes() {
+  return Object.keys(ATOMIC_COMPONENTS_REGISTRY);
+}
+const COMPONENT_CATEGORIES = {
+  "data-display": 9,
+  "forms-inputs": 11,
+  "actions": 5,
+  "overlays-feedback": 9,
+  "navigation": 5,
+  "layout": 6,
+  "progress": 2,
+  "specialized": 2
+};
+const TOTAL_COMPONENT_COUNT = 49;
+export {
+  ATOMIC_COMPONENTS_REGISTRY,
+  COMPONENT_CATEGORIES,
+  TOTAL_COMPONENT_COUNT,
+  getAllComponentTypes,
+  getComponentDefinition,
+  getComponentsByCategory,
+  isValidComponentType
+};