Add comprehensive UI component design system (input, display, layout)

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

content/docs/references/data/field.mdx

@@ -12,8 +12,8 @@ description: Field protocol schemas
 ## TypeScript Usage
 
 ```typescript
-import { AddressSchema, ComputedFieldCacheSchema, CurrencyConfigSchema, CurrencyValueSchema, DataQualityRulesSchema, FieldSchema, FieldTypeSchema, FileAttachmentConfigSchema, LocationCoordinatesSchema, SelectOptionSchema, VectorConfigSchema } from '@objectstack/spec/data';
-import type { Address, ComputedFieldCache, CurrencyConfig, CurrencyValue, DataQualityRules, Field, FieldType, FileAttachmentConfig, LocationCoordinates, SelectOption, VectorConfig } from '@objectstack/spec/data';
+import { AddressSchema, ComputedFieldCacheSchema, CurrencyConfigSchema, CurrencyValueSchema, DataQualityRulesSchema, FieldSchema, FieldTypeSchema, FileAttachmentConfigSchema, LocationCoordinatesSchema, VectorConfigSchema } from '@objectstack/spec/data';
+import type { Address, ComputedFieldCache, CurrencyConfig, CurrencyValue, DataQualityRules, Field, FieldType, FileAttachmentConfig, LocationCoordinates, VectorConfig } from '@objectstack/spec/data';
 
 // Validate data
 const result = AddressSchema.parse(data);
@@ -57,9 +57,5 @@ const result = AddressSchema.parse(data);
 
 ---
 
-## SelectOption
-
----
-
 ## VectorConfig
 

content/docs/references/ui/component.mdx

@@ -12,15 +12,39 @@ description: Component protocol schemas
 ## TypeScript Usage
 
 ```typescript
-import { PageCardPropsSchema, PageHeaderPropsSchema, PageTabsPropsSchema, RecordDetailsPropsSchema, RecordHighlightsPropsSchema, RecordRelatedListPropsSchema } from '@objectstack/spec/ui';
-import type { PageCardProps, PageHeaderProps, PageTabsProps, RecordDetailsProps, RecordHighlightsProps, RecordRelatedListProps } from '@objectstack/spec/ui';
+import { AlertPropsSchema, BottomNavigationPropsSchema, DataTablePropsSchema, EmptyStatePropsSchema, FloatingActionButtonPropsSchema, KanbanBoardPropsSchema, PageCardPropsSchema, PageHeaderPropsSchema, PageTabsPropsSchema, PullToRefreshPropsSchema, RecordDetailsPropsSchema, RecordHighlightsPropsSchema, RecordRelatedListPropsSchema, TreeViewPropsSchema } from '@objectstack/spec/ui';
+import type { AlertProps, BottomNavigationProps, DataTableProps, EmptyStateProps, FloatingActionButtonProps, KanbanBoardProps, PageCardProps, PageHeaderProps, PageTabsProps, PullToRefreshProps, RecordDetailsProps, RecordHighlightsProps, RecordRelatedListProps, TreeViewProps } from '@objectstack/spec/ui';
 
 // Validate data
-const result = PageCardPropsSchema.parse(data);
+const result = AlertPropsSchema.parse(data);
 ```
 
 ---
 
+## AlertProps
+
+---
+
+## BottomNavigationProps
+
+---
+
+## DataTableProps
+
+---
+
+## EmptyStateProps
+
+---
+
+## FloatingActionButtonProps
+
+---
+
+## KanbanBoardProps
+
+---
+
 ## PageCardProps
 
 ---
@@ -33,6 +57,10 @@ const result = PageCardPropsSchema.parse(data);
 
 ---
 
+## PullToRefreshProps
+
+---
+
 ## RecordDetailsProps
 
 ---
@@ -43,3 +71,7 @@ const result = PageCardPropsSchema.parse(data);
 
 ## RecordRelatedListProps
 
+---
+
+## TreeViewProps
+

content/docs/references/ui/index.mdx

@@ -13,6 +13,9 @@ This section contains all protocol schemas for the ui layer of ObjectStack.
   <Card href="./chart" title="Chart" description="Source: packages/spec/src/ui/chart.zod.ts" />
   <Card href="./component" title="Component" description="Source: packages/spec/src/ui/component.zod.ts" />
   <Card href="./dashboard" title="Dashboard" description="Source: packages/spec/src/ui/dashboard.zod.ts" />
+  <Card href="./display" title="Display" description="Source: packages/spec/src/ui/display.zod.ts" />
+  <Card href="./input" title="Input" description="Source: packages/spec/src/ui/input.zod.ts" />
+  <Card href="./layout" title="Layout" description="Source: packages/spec/src/ui/layout.zod.ts" />
   <Card href="./page" title="Page" description="Source: packages/spec/src/ui/page.zod.ts" />
   <Card href="./report" title="Report" description="Source: packages/spec/src/ui/report.zod.ts" />
   <Card href="./theme" title="Theme" description="Source: packages/spec/src/ui/theme.zod.ts" />

content/docs/references/ui/meta.json

@@ -6,6 +6,9 @@
     "chart",
     "component",
     "dashboard",
+    "display",
+    "input",
+    "layout",
     "page",
     "report",
     "theme",

packages/spec/json-schema/ui/AccordionProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/AccordionProps",
+  "definitions": {
+    "AccordionProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/AlertProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/AlertProps",
+  "definitions": {
+    "AlertProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/AutocompleteProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/AutocompleteProps",
+  "definitions": {
+    "AutocompleteProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/AvatarGroupProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/AvatarGroupProps",
+  "definitions": {
+    "AvatarGroupProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/AvatarProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/AvatarProps",
+  "definitions": {
+    "AvatarProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/BadgeProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/BadgeProps",
+  "definitions": {
+    "BadgeProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}