@specverse/engines 4.1.5 → 4.1.6

package/dist/libs/instance-factories/views/templates/shared/component-metadata.js

@@ -0,0 +1,517 @@
+import { ATOMIC_COMPONENTS_REGISTRY } from "./atomic-components-registry.js";
+const COMMON_PROPERTY_METADATA = {
+  variant: {
+    name: "variant",
+    type: "enum",
+    required: false,
+    default: "primary",
+    description: "Visual style variant for the component",
+    enumValues: ["primary", "secondary", "destructive", "ghost", "outline"],
+    isCommon: true,
+    affectsLayout: false
+  },
+  size: {
+    name: "size",
+    type: "enum",
+    required: false,
+    default: "medium",
+    description: "Size of the component",
+    enumValues: ["small", "medium", "large"],
+    isCommon: true,
+    affectsLayout: true
+  },
+  color: {
+    name: "color",
+    type: "enum",
+    required: false,
+    default: "primary",
+    description: "Color scheme for the component",
+    enumValues: ["primary", "success", "warning", "error", "info"],
+    isCommon: true,
+    affectsLayout: false
+  },
+  position: {
+    name: "position",
+    type: "enum",
+    required: false,
+    default: "top",
+    description: "Position or alignment of the component",
+    enumValues: ["top", "bottom", "left", "right"],
+    isCommon: true,
+    affectsLayout: true
+  },
+  orientation: {
+    name: "orientation",
+    type: "enum",
+    required: false,
+    default: "horizontal",
+    description: "Layout orientation of the component",
+    enumValues: ["horizontal", "vertical"],
+    isCommon: true,
+    affectsLayout: true
+  }
+};
+const COMPONENT_METADATA_REGISTRY = {
+  // Data Display Components
+  table: {
+    ...ATOMIC_COMPONENTS_REGISTRY.table,
+    propertyMetadata: [
+      {
+        name: "columns",
+        type: "array",
+        required: true,
+        description: "Column definitions for the table",
+        validation: { min: 1 }
+      },
+      {
+        name: "dataSource",
+        type: "string",
+        required: true,
+        description: "Model array name for table data"
+      },
+      {
+        name: "sortable",
+        type: "boolean",
+        required: false,
+        default: false,
+        description: "Enable column sorting",
+        affectsLayout: false
+      },
+      {
+        name: "filterable",
+        type: "boolean",
+        required: false,
+        default: false,
+        description: "Enable filtering",
+        affectsLayout: true
+      },
+      {
+        name: "pagination",
+        type: "boolean",
+        required: false,
+        default: true,
+        description: "Enable pagination",
+        affectsLayout: true
+      },
+      COMMON_PROPERTY_METADATA.size
+    ],
+    eventMetadata: [
+      {
+        name: "onRowClick",
+        description: "Fired when a row is clicked",
+        parameters: [
+          { name: "row", type: "object", description: "Clicked row data" },
+          { name: "index", type: "number", description: "Row index" }
+        ]
+      },
+      {
+        name: "onSort",
+        description: "Fired when column sort changes",
+        parameters: [
+          { name: "column", type: "string", description: "Column key" },
+          { name: "direction", type: "string", description: "Sort direction (asc/desc)" }
+        ]
+      }
+    ],
+    capabilities: {
+      supportsChildren: false,
+      supportsConditional: true,
+      supportsList: true,
+      supportsSlots: false,
+      maxDepth: 1,
+      preferredPosition: "leaf"
+    },
+    accessibility: {
+      role: "table",
+      keyboardNavigable: true,
+      requiredAriaAttrs: ["aria-label"],
+      screenReaderDescription: "Data table with {columns.length} columns"
+    },
+    state: {
+      hasInternalState: true,
+      stateProperties: [
+        { name: "sortColumn", type: "string", description: "Currently sorted column" },
+        { name: "sortDirection", type: "string", description: "Sort direction (asc/desc)" },
+        { name: "currentPage", type: "number", description: "Current page number", defaultValue: 1 }
+      ]
+    },
+    related: {
+      alternatives: ["list", "grid"],
+      compositions: ["pagination", "search"],
+      containers: ["card", "container"]
+    }
+  },
+  button: {
+    ...ATOMIC_COMPONENTS_REGISTRY.button,
+    propertyMetadata: [
+      COMMON_PROPERTY_METADATA.variant,
+      COMMON_PROPERTY_METADATA.size,
+      {
+        name: "disabled",
+        type: "boolean",
+        required: false,
+        default: false,
+        description: "Disable button interaction"
+      },
+      {
+        name: "loading",
+        type: "boolean",
+        required: false,
+        default: false,
+        description: "Show loading state"
+      },
+      {
+        name: "label",
+        type: "string",
+        required: false,
+        description: "Button text label"
+      }
+    ],
+    eventMetadata: [
+      {
+        name: "onClick",
+        description: "Fired when button is clicked",
+        parameters: [
+          { name: "event", type: "MouseEvent", description: "Click event" }
+        ],
+        bubbles: true
+      }
+    ],
+    capabilities: {
+      supportsChildren: true,
+      supportsConditional: true,
+      supportsList: false,
+      supportsSlots: false,
+      maxDepth: 1,
+      preferredPosition: "leaf"
+    },
+    accessibility: {
+      role: "button",
+      keyboardNavigable: true,
+      requiredAriaAttrs: ["aria-label"],
+      screenReaderDescription: "{variant} button: {label}"
+    },
+    state: {
+      hasInternalState: false
+    },
+    related: {
+      alternatives: ["link", "icon-button"],
+      compositions: ["icon", "badge"],
+      containers: ["form", "card", "toolbar"]
+    }
+  },
+  card: {
+    ...ATOMIC_COMPONENTS_REGISTRY.card,
+    propertyMetadata: [
+      {
+        name: "title",
+        type: "string",
+        required: false,
+        description: "Card title"
+      },
+      {
+        name: "elevation",
+        type: "enum",
+        required: false,
+        default: "medium",
+        description: "Shadow depth",
+        enumValues: ["none", "low", "medium", "high"]
+      },
+      COMMON_PROPERTY_METADATA.size
+    ],
+    capabilities: {
+      supportsChildren: true,
+      supportsConditional: true,
+      supportsList: true,
+      supportsSlots: true,
+      maxDepth: 3,
+      preferredPosition: "container"
+    },
+    accessibility: {
+      role: "article",
+      keyboardNavigable: false,
+      screenReaderDescription: "Card: {title}"
+    },
+    state: {
+      hasInternalState: false
+    },
+    related: {
+      alternatives: ["panel", "container"],
+      compositions: ["button", "image", "text", "list"],
+      containers: ["grid", "container"]
+    }
+  },
+  input: {
+    ...ATOMIC_COMPONENTS_REGISTRY.input,
+    propertyMetadata: [
+      {
+        name: "type",
+        type: "enum",
+        required: false,
+        default: "text",
+        description: "Input type",
+        enumValues: ["text", "email", "password", "number", "tel", "url"]
+      },
+      {
+        name: "placeholder",
+        type: "string",
+        required: false,
+        description: "Placeholder text"
+      },
+      {
+        name: "required",
+        type: "boolean",
+        required: false,
+        default: false,
+        description: "Field is required"
+      },
+      {
+        name: "disabled",
+        type: "boolean",
+        required: false,
+        default: false,
+        description: "Disable input"
+      },
+      COMMON_PROPERTY_METADATA.size,
+      {
+        name: "variant",
+        type: "enum",
+        required: false,
+        default: "outlined",
+        description: "Visual style variant",
+        enumValues: ["filled", "outlined", "standard"],
+        isCommon: true
+      }
+    ],
+    eventMetadata: [
+      {
+        name: "onChange",
+        description: "Fired when input value changes",
+        parameters: [
+          { name: "value", type: "string", description: "New value" },
+          { name: "event", type: "Event", description: "Change event" }
+        ]
+      },
+      {
+        name: "onBlur",
+        description: "Fired when input loses focus",
+        parameters: [
+          { name: "event", type: "FocusEvent", description: "Blur event" }
+        ]
+      }
+    ],
+    capabilities: {
+      supportsChildren: false,
+      supportsConditional: true,
+      supportsList: false,
+      supportsSlots: false,
+      maxDepth: 0,
+      preferredPosition: "leaf"
+    },
+    accessibility: {
+      role: "textbox",
+      keyboardNavigable: true,
+      requiredAriaAttrs: ["aria-label", "aria-required"],
+      screenReaderDescription: "{type} input: {placeholder}"
+    },
+    state: {
+      hasInternalState: true,
+      stateProperties: [
+        { name: "value", type: "string", description: "Current input value", defaultValue: "" },
+        { name: "isFocused", type: "boolean", description: "Input has focus", defaultValue: false }
+      ]
+    },
+    related: {
+      alternatives: ["textarea", "select"],
+      compositions: ["label", "validation-message"],
+      containers: ["form", "form-field"]
+    }
+  },
+  modal: {
+    ...ATOMIC_COMPONENTS_REGISTRY.modal,
+    propertyMetadata: [
+      {
+        name: "title",
+        type: "string",
+        required: false,
+        description: "Modal title"
+      },
+      {
+        name: "open",
+        type: "boolean",
+        required: true,
+        description: "Modal visibility state"
+      },
+      {
+        name: "closable",
+        type: "boolean",
+        required: false,
+        default: true,
+        description: "Show close button"
+      },
+      COMMON_PROPERTY_METADATA.size
+    ],
+    eventMetadata: [
+      {
+        name: "onClose",
+        description: "Fired when modal is closed",
+        parameters: []
+      }
+    ],
+    capabilities: {
+      supportsChildren: true,
+      supportsConditional: true,
+      supportsList: false,
+      supportsSlots: true,
+      maxDepth: 2,
+      preferredPosition: "root"
+    },
+    accessibility: {
+      role: "dialog",
+      keyboardNavigable: true,
+      requiredAriaAttrs: ["aria-modal", "aria-labelledby"],
+      screenReaderDescription: "Modal dialog: {title}"
+    },
+    state: {
+      hasInternalState: true,
+      stateProperties: [
+        { name: "open", type: "boolean", description: "Modal open state", defaultValue: false }
+      ]
+    },
+    related: {
+      alternatives: ["drawer", "popover"],
+      compositions: ["button", "form", "card"],
+      containers: ["root"]
+    }
+  },
+  badge: {
+    ...ATOMIC_COMPONENTS_REGISTRY.badge,
+    propertyMetadata: [
+      {
+        name: "content",
+        type: "string",
+        required: false,
+        description: "Badge content/label"
+      },
+      COMMON_PROPERTY_METADATA.variant,
+      COMMON_PROPERTY_METADATA.color,
+      {
+        name: "variant",
+        type: "enum",
+        required: false,
+        default: "standard",
+        description: "Badge style",
+        enumValues: ["dot", "standard"],
+        isCommon: true
+      }
+    ],
+    capabilities: {
+      supportsChildren: false,
+      supportsConditional: true,
+      supportsList: false,
+      supportsSlots: false,
+      maxDepth: 0,
+      preferredPosition: "leaf"
+    },
+    accessibility: {
+      role: "status",
+      keyboardNavigable: false,
+      screenReaderDescription: "Badge: {content}"
+    },
+    state: {
+      hasInternalState: false
+    },
+    related: {
+      alternatives: ["chip", "tag"],
+      compositions: ["icon", "avatar"],
+      containers: ["button", "card"]
+    }
+  }
+};
+function getComponentMetadata(componentType) {
+  return COMPONENT_METADATA_REGISTRY[componentType];
+}
+function getAllComponentTypes() {
+  return Object.keys(COMPONENT_METADATA_REGISTRY);
+}
+function getComponentsByCategory(category) {
+  return Object.values(COMPONENT_METADATA_REGISTRY).filter(
+    (comp) => comp.category === category
+  );
+}
+function getContainerComponents() {
+  return Object.values(COMPONENT_METADATA_REGISTRY).filter(
+    (comp) => comp.capabilities.supportsChildren
+  );
+}
+function getLeafComponents() {
+  return Object.values(COMPONENT_METADATA_REGISTRY).filter(
+    (comp) => !comp.capabilities.supportsChildren
+  );
+}
+function supportsProperty(componentType, propertyName) {
+  const metadata = getComponentMetadata(componentType);
+  if (!metadata) return false;
+  return metadata.propertyMetadata.some((prop) => prop.name === propertyName);
+}
+function getPropertyMetadata(componentType, propertyName) {
+  const metadata = getComponentMetadata(componentType);
+  if (!metadata) return void 0;
+  return metadata.propertyMetadata.find((prop) => prop.name === propertyName);
+}
+function validatePropertyValue(componentType, propertyName, value) {
+  const propMeta = getPropertyMetadata(componentType, propertyName);
+  if (!propMeta) {
+    return { valid: false, errors: [`Unknown property: ${propertyName}`] };
+  }
+  const errors = [];
+  if (propMeta.type === "enum" && propMeta.enumValues) {
+    if (!propMeta.enumValues.includes(value)) {
+      errors.push(`Invalid enum value. Expected one of: ${propMeta.enumValues.join(", ")}`);
+    }
+  }
+  if (propMeta.validation) {
+    if (propMeta.validation.min !== void 0 && value < propMeta.validation.min) {
+      errors.push(`Value must be >= ${propMeta.validation.min}`);
+    }
+    if (propMeta.validation.max !== void 0 && value > propMeta.validation.max) {
+      errors.push(`Value must be <= ${propMeta.validation.max}`);
+    }
+    if (propMeta.validation.pattern && typeof value === "string") {
+      const regex = new RegExp(propMeta.validation.pattern);
+      if (!regex.test(value)) {
+        errors.push(`Value must match pattern: ${propMeta.validation.pattern}`);
+      }
+    }
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function getRecommendedCompositions(componentType) {
+  const metadata = getComponentMetadata(componentType);
+  return metadata?.related?.compositions || [];
+}
+function canNest(parentType, childType) {
+  const parentMeta = getComponentMetadata(parentType);
+  const childMeta = getComponentMetadata(childType);
+  if (!parentMeta || !childMeta) return false;
+  if (!parentMeta.capabilities.supportsChildren) return false;
+  if (childMeta.capabilities.preferredPosition === "root") return false;
+  return true;
+}
+export {
+  COMMON_PROPERTY_METADATA,
+  COMPONENT_METADATA_REGISTRY,
+  canNest,
+  getAllComponentTypes,
+  getComponentMetadata,
+  getComponentsByCategory,
+  getContainerComponents,
+  getLeafComponents,
+  getPropertyMetadata,
+  getRecommendedCompositions,
+  supportsProperty,
+  validatePropertyValue
+};