diff --git a/content/docs/references/misc/AccordionComponent.mdx b/content/docs/references/misc/AccordionComponent.mdx new file mode 100644 index 0000000..788ceb5 --- /dev/null +++ b/content/docs/references/misc/AccordionComponent.mdx @@ -0,0 +1,14 @@ +--- +title: AccordionComponent +description: AccordionComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/AlertComponent.mdx b/content/docs/references/misc/AlertComponent.mdx new file mode 100644 index 0000000..833ad8e --- /dev/null +++ b/content/docs/references/misc/AlertComponent.mdx @@ -0,0 +1,14 @@ +--- +title: AlertComponent +description: AlertComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/BadgeComponent.mdx b/content/docs/references/misc/BadgeComponent.mdx new file mode 100644 index 0000000..5fcfb69 --- /dev/null +++ b/content/docs/references/misc/BadgeComponent.mdx @@ -0,0 +1,14 @@ +--- +title: BadgeComponent +description: BadgeComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/BreadcrumbComponent.mdx b/content/docs/references/misc/BreadcrumbComponent.mdx new file mode 100644 index 0000000..1f34455 --- /dev/null +++ b/content/docs/references/misc/BreadcrumbComponent.mdx @@ -0,0 +1,14 @@ +--- +title: BreadcrumbComponent +description: BreadcrumbComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/ButtonComponent.mdx b/content/docs/references/misc/ButtonComponent.mdx new file mode 100644 index 0000000..8e1d265 --- /dev/null +++ b/content/docs/references/misc/ButtonComponent.mdx @@ -0,0 +1,14 @@ +--- +title: ButtonComponent +description: ButtonComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/CardComponent.mdx b/content/docs/references/misc/CardComponent.mdx new file mode 100644 index 0000000..99ac7bf --- /dev/null +++ b/content/docs/references/misc/CardComponent.mdx @@ -0,0 +1,14 @@ +--- +title: CardComponent +description: CardComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/ComponentType.mdx b/content/docs/references/misc/ComponentType.mdx new file mode 100644 index 0000000..5a9d83a --- /dev/null +++ b/content/docs/references/misc/ComponentType.mdx @@ -0,0 +1,72 @@ +--- +title: ComponentType +description: ComponentType Schema Reference +--- + +## Allowed Values + +* `card` +* `tabs` +* `accordion` +* `modal` +* `drawer` +* `container` +* `divider` +* `space` +* `grid` +* `flex` +* `breadcrumb` +* `stepper` +* `menu` +* `sidebar` +* `pagination` +* `dropdown` +* `table` +* `list` +* `tree` +* `description` +* `statistic` +* `tag` +* `collapse` +* `carousel` +* `image` +* `avatar` +* `calendar_view` +* `form` +* `input` +* `select` +* `checkbox` +* `radio` +* `switch` +* `slider` +* `date_picker` +* `time_picker` +* `upload` +* `autocomplete` +* `cascader` +* `transfer` +* `color_picker` +* `rate` +* `alert` +* `message` +* `notification` +* `progress` +* `skeleton` +* `spin` +* `result` +* `empty` +* `button` +* `button_group` +* `icon_button` +* `split_button` +* `tooltip` +* `popover` +* `dialog` +* `confirm` +* `badge` +* `timeline` +* `steps` +* `anchor` +* `back_top` +* `watermark` +* `qrcode` \ No newline at end of file diff --git a/content/docs/references/misc/DrawerComponent.mdx b/content/docs/references/misc/DrawerComponent.mdx new file mode 100644 index 0000000..7698940 --- /dev/null +++ b/content/docs/references/misc/DrawerComponent.mdx @@ -0,0 +1,14 @@ +--- +title: DrawerComponent +description: DrawerComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/FormComponent.mdx b/content/docs/references/misc/FormComponent.mdx new file mode 100644 index 0000000..d5f10a1 --- /dev/null +++ b/content/docs/references/misc/FormComponent.mdx @@ -0,0 +1,14 @@ +--- +title: FormComponent +description: FormComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/InputComponent.mdx b/content/docs/references/misc/InputComponent.mdx new file mode 100644 index 0000000..8b7e742 --- /dev/null +++ b/content/docs/references/misc/InputComponent.mdx @@ -0,0 +1,14 @@ +--- +title: InputComponent +description: InputComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/ListComponent.mdx b/content/docs/references/misc/ListComponent.mdx new file mode 100644 index 0000000..0243c00 --- /dev/null +++ b/content/docs/references/misc/ListComponent.mdx @@ -0,0 +1,14 @@ +--- +title: ListComponent +description: ListComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/MenuComponent.mdx b/content/docs/references/misc/MenuComponent.mdx new file mode 100644 index 0000000..751b884 --- /dev/null +++ b/content/docs/references/misc/MenuComponent.mdx @@ -0,0 +1,14 @@ +--- +title: MenuComponent +description: MenuComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/ModalComponent.mdx b/content/docs/references/misc/ModalComponent.mdx new file mode 100644 index 0000000..40fd0db --- /dev/null +++ b/content/docs/references/misc/ModalComponent.mdx @@ -0,0 +1,14 @@ +--- +title: ModalComponent +description: ModalComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/PaginationComponent.mdx b/content/docs/references/misc/PaginationComponent.mdx new file mode 100644 index 0000000..255091e --- /dev/null +++ b/content/docs/references/misc/PaginationComponent.mdx @@ -0,0 +1,14 @@ +--- +title: PaginationComponent +description: PaginationComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/PopoverComponent.mdx b/content/docs/references/misc/PopoverComponent.mdx new file mode 100644 index 0000000..a8f98b2 --- /dev/null +++ b/content/docs/references/misc/PopoverComponent.mdx @@ -0,0 +1,14 @@ +--- +title: PopoverComponent +description: PopoverComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/ProgressComponent.mdx b/content/docs/references/misc/ProgressComponent.mdx new file mode 100644 index 0000000..af490b9 --- /dev/null +++ b/content/docs/references/misc/ProgressComponent.mdx @@ -0,0 +1,14 @@ +--- +title: ProgressComponent +description: ProgressComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/SelectComponent.mdx b/content/docs/references/misc/SelectComponent.mdx new file mode 100644 index 0000000..73b14a3 --- /dev/null +++ b/content/docs/references/misc/SelectComponent.mdx @@ -0,0 +1,14 @@ +--- +title: SelectComponent +description: SelectComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/StepperComponent.mdx b/content/docs/references/misc/StepperComponent.mdx new file mode 100644 index 0000000..7215263 --- /dev/null +++ b/content/docs/references/misc/StepperComponent.mdx @@ -0,0 +1,14 @@ +--- +title: StepperComponent +description: StepperComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/TableComponent.mdx b/content/docs/references/misc/TableComponent.mdx new file mode 100644 index 0000000..c94288d --- /dev/null +++ b/content/docs/references/misc/TableComponent.mdx @@ -0,0 +1,14 @@ +--- +title: TableComponent +description: TableComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/TabsComponent.mdx b/content/docs/references/misc/TabsComponent.mdx new file mode 100644 index 0000000..2497a42 --- /dev/null +++ b/content/docs/references/misc/TabsComponent.mdx @@ -0,0 +1,14 @@ +--- +title: TabsComponent +description: TabsComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/TimelineComponent.mdx b/content/docs/references/misc/TimelineComponent.mdx new file mode 100644 index 0000000..6487f2e --- /dev/null +++ b/content/docs/references/misc/TimelineComponent.mdx @@ -0,0 +1,14 @@ +--- +title: TimelineComponent +description: TimelineComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/TooltipComponent.mdx b/content/docs/references/misc/TooltipComponent.mdx new file mode 100644 index 0000000..8d5ca3c --- /dev/null +++ b/content/docs/references/misc/TooltipComponent.mdx @@ -0,0 +1,14 @@ +--- +title: TooltipComponent +description: TooltipComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/TreeComponent.mdx b/content/docs/references/misc/TreeComponent.mdx new file mode 100644 index 0000000..386e582 --- /dev/null +++ b/content/docs/references/misc/TreeComponent.mdx @@ -0,0 +1,14 @@ +--- +title: TreeComponent +description: TreeComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/misc/UploadComponent.mdx b/content/docs/references/misc/UploadComponent.mdx new file mode 100644 index 0000000..07025f8 --- /dev/null +++ b/content/docs/references/misc/UploadComponent.mdx @@ -0,0 +1,14 @@ +--- +title: UploadComponent +description: UploadComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/AccordionComponent.mdx b/content/docs/references/ui/AccordionComponent.mdx new file mode 100644 index 0000000..788ceb5 --- /dev/null +++ b/content/docs/references/ui/AccordionComponent.mdx @@ -0,0 +1,14 @@ +--- +title: AccordionComponent +description: AccordionComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/AlertComponent.mdx b/content/docs/references/ui/AlertComponent.mdx new file mode 100644 index 0000000..833ad8e --- /dev/null +++ b/content/docs/references/ui/AlertComponent.mdx @@ -0,0 +1,14 @@ +--- +title: AlertComponent +description: AlertComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/BadgeComponent.mdx b/content/docs/references/ui/BadgeComponent.mdx new file mode 100644 index 0000000..5fcfb69 --- /dev/null +++ b/content/docs/references/ui/BadgeComponent.mdx @@ -0,0 +1,14 @@ +--- +title: BadgeComponent +description: BadgeComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/BreadcrumbComponent.mdx b/content/docs/references/ui/BreadcrumbComponent.mdx new file mode 100644 index 0000000..1f34455 --- /dev/null +++ b/content/docs/references/ui/BreadcrumbComponent.mdx @@ -0,0 +1,14 @@ +--- +title: BreadcrumbComponent +description: BreadcrumbComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/ButtonComponent.mdx b/content/docs/references/ui/ButtonComponent.mdx new file mode 100644 index 0000000..8e1d265 --- /dev/null +++ b/content/docs/references/ui/ButtonComponent.mdx @@ -0,0 +1,14 @@ +--- +title: ButtonComponent +description: ButtonComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/CardComponent.mdx b/content/docs/references/ui/CardComponent.mdx new file mode 100644 index 0000000..99ac7bf --- /dev/null +++ b/content/docs/references/ui/CardComponent.mdx @@ -0,0 +1,14 @@ +--- +title: CardComponent +description: CardComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/Component.mdx b/content/docs/references/ui/Component.mdx new file mode 100644 index 0000000..ccef527 --- /dev/null +++ b/content/docs/references/ui/Component.mdx @@ -0,0 +1,16 @@ +--- +title: Component +description: Component Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **id** | `string` | optional | Component instance identifier | +| **type** | `string` | ✅ | Component type identifier | +| **props** | `Record` | optional | Component properties | +| **children** | `any[]` | optional | Child components | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **meta** | `Record` | optional | Editor/designer metadata | diff --git a/content/docs/references/ui/ComponentType.mdx b/content/docs/references/ui/ComponentType.mdx new file mode 100644 index 0000000..5a9d83a --- /dev/null +++ b/content/docs/references/ui/ComponentType.mdx @@ -0,0 +1,72 @@ +--- +title: ComponentType +description: ComponentType Schema Reference +--- + +## Allowed Values + +* `card` +* `tabs` +* `accordion` +* `modal` +* `drawer` +* `container` +* `divider` +* `space` +* `grid` +* `flex` +* `breadcrumb` +* `stepper` +* `menu` +* `sidebar` +* `pagination` +* `dropdown` +* `table` +* `list` +* `tree` +* `description` +* `statistic` +* `tag` +* `collapse` +* `carousel` +* `image` +* `avatar` +* `calendar_view` +* `form` +* `input` +* `select` +* `checkbox` +* `radio` +* `switch` +* `slider` +* `date_picker` +* `time_picker` +* `upload` +* `autocomplete` +* `cascader` +* `transfer` +* `color_picker` +* `rate` +* `alert` +* `message` +* `notification` +* `progress` +* `skeleton` +* `spin` +* `result` +* `empty` +* `button` +* `button_group` +* `icon_button` +* `split_button` +* `tooltip` +* `popover` +* `dialog` +* `confirm` +* `badge` +* `timeline` +* `steps` +* `anchor` +* `back_top` +* `watermark` +* `qrcode` \ No newline at end of file diff --git a/content/docs/references/ui/DrawerComponent.mdx b/content/docs/references/ui/DrawerComponent.mdx new file mode 100644 index 0000000..7698940 --- /dev/null +++ b/content/docs/references/ui/DrawerComponent.mdx @@ -0,0 +1,14 @@ +--- +title: DrawerComponent +description: DrawerComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/FormComponent.mdx b/content/docs/references/ui/FormComponent.mdx new file mode 100644 index 0000000..d5f10a1 --- /dev/null +++ b/content/docs/references/ui/FormComponent.mdx @@ -0,0 +1,14 @@ +--- +title: FormComponent +description: FormComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/InputComponent.mdx b/content/docs/references/ui/InputComponent.mdx new file mode 100644 index 0000000..8b7e742 --- /dev/null +++ b/content/docs/references/ui/InputComponent.mdx @@ -0,0 +1,14 @@ +--- +title: InputComponent +description: InputComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/ListComponent.mdx b/content/docs/references/ui/ListComponent.mdx new file mode 100644 index 0000000..0243c00 --- /dev/null +++ b/content/docs/references/ui/ListComponent.mdx @@ -0,0 +1,14 @@ +--- +title: ListComponent +description: ListComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/MenuComponent.mdx b/content/docs/references/ui/MenuComponent.mdx new file mode 100644 index 0000000..751b884 --- /dev/null +++ b/content/docs/references/ui/MenuComponent.mdx @@ -0,0 +1,14 @@ +--- +title: MenuComponent +description: MenuComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/ModalComponent.mdx b/content/docs/references/ui/ModalComponent.mdx new file mode 100644 index 0000000..40fd0db --- /dev/null +++ b/content/docs/references/ui/ModalComponent.mdx @@ -0,0 +1,14 @@ +--- +title: ModalComponent +description: ModalComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/PaginationComponent.mdx b/content/docs/references/ui/PaginationComponent.mdx new file mode 100644 index 0000000..255091e --- /dev/null +++ b/content/docs/references/ui/PaginationComponent.mdx @@ -0,0 +1,14 @@ +--- +title: PaginationComponent +description: PaginationComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/PopoverComponent.mdx b/content/docs/references/ui/PopoverComponent.mdx new file mode 100644 index 0000000..a8f98b2 --- /dev/null +++ b/content/docs/references/ui/PopoverComponent.mdx @@ -0,0 +1,14 @@ +--- +title: PopoverComponent +description: PopoverComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/ProgressComponent.mdx b/content/docs/references/ui/ProgressComponent.mdx new file mode 100644 index 0000000..af490b9 --- /dev/null +++ b/content/docs/references/ui/ProgressComponent.mdx @@ -0,0 +1,14 @@ +--- +title: ProgressComponent +description: ProgressComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/SelectComponent.mdx b/content/docs/references/ui/SelectComponent.mdx new file mode 100644 index 0000000..73b14a3 --- /dev/null +++ b/content/docs/references/ui/SelectComponent.mdx @@ -0,0 +1,14 @@ +--- +title: SelectComponent +description: SelectComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/StepperComponent.mdx b/content/docs/references/ui/StepperComponent.mdx new file mode 100644 index 0000000..7215263 --- /dev/null +++ b/content/docs/references/ui/StepperComponent.mdx @@ -0,0 +1,14 @@ +--- +title: StepperComponent +description: StepperComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/TableComponent.mdx b/content/docs/references/ui/TableComponent.mdx new file mode 100644 index 0000000..c94288d --- /dev/null +++ b/content/docs/references/ui/TableComponent.mdx @@ -0,0 +1,14 @@ +--- +title: TableComponent +description: TableComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/TabsComponent.mdx b/content/docs/references/ui/TabsComponent.mdx new file mode 100644 index 0000000..2497a42 --- /dev/null +++ b/content/docs/references/ui/TabsComponent.mdx @@ -0,0 +1,14 @@ +--- +title: TabsComponent +description: TabsComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/TimelineComponent.mdx b/content/docs/references/ui/TimelineComponent.mdx new file mode 100644 index 0000000..6487f2e --- /dev/null +++ b/content/docs/references/ui/TimelineComponent.mdx @@ -0,0 +1,14 @@ +--- +title: TimelineComponent +description: TimelineComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/TooltipComponent.mdx b/content/docs/references/ui/TooltipComponent.mdx new file mode 100644 index 0000000..8d5ca3c --- /dev/null +++ b/content/docs/references/ui/TooltipComponent.mdx @@ -0,0 +1,14 @@ +--- +title: TooltipComponent +description: TooltipComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | ✅ | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/TreeComponent.mdx b/content/docs/references/ui/TreeComponent.mdx new file mode 100644 index 0000000..386e582 --- /dev/null +++ b/content/docs/references/ui/TreeComponent.mdx @@ -0,0 +1,14 @@ +--- +title: TreeComponent +description: TreeComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/content/docs/references/ui/UploadComponent.mdx b/content/docs/references/ui/UploadComponent.mdx new file mode 100644 index 0000000..07025f8 --- /dev/null +++ b/content/docs/references/ui/UploadComponent.mdx @@ -0,0 +1,14 @@ +--- +title: UploadComponent +description: UploadComponent Schema Reference +--- + +## Properties + +| Property | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| **type** | `string` | ✅ | | +| **props** | `object` | optional | | +| **events** | `Record` | optional | Event handlers | +| **style** | `Record` | optional | Custom styles | +| **children** | `object[]` | optional | Child components | diff --git a/packages/spec/json-schema/AccordionComponent.json b/packages/spec/json-schema/AccordionComponent.json new file mode 100644 index 0000000..ef9aba6 --- /dev/null +++ b/packages/spec/json-schema/AccordionComponent.json @@ -0,0 +1,279 @@ +{ + "$ref": "#/definitions/AccordionComponent", + "definitions": { + "AccordionComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "accordion" + }, + "props": { + "type": "object", + "properties": { + "items": { + "type": "array", + "items": { + "type": "object", + "properties": { + "title": { + "type": "string", + "description": "Section title" + }, + "icon": { + "type": "string", + "description": "Section icon" + }, + "content": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false, + "description": "Section content" + }, + "defaultExpanded": { + "type": "boolean", + "description": "Initially expanded" + } + }, + "required": [ + "title" + ], + "additionalProperties": false + }, + "description": "Accordion items" + }, + "allowMultiple": { + "type": "boolean", + "description": "Allow multiple open sections" + } + }, + "required": [ + "items" + ], + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type", + "props" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/AlertComponent.json b/packages/spec/json-schema/AlertComponent.json new file mode 100644 index 0000000..ab8f093 --- /dev/null +++ b/packages/spec/json-schema/AlertComponent.json @@ -0,0 +1,173 @@ +{ + "$ref": "#/definitions/AlertComponent", + "definitions": { + "AlertComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "alert" + }, + "props": { + "type": "object", + "properties": { + "title": { + "type": "string", + "description": "Alert title" + }, + "message": { + "type": "string", + "description": "Alert message" + }, + "variant": { + "type": "string", + "enum": [ + "info", + "success", + "warning", + "error" + ], + "description": "Alert variant" + }, + "dismissible": { + "type": "boolean", + "description": "Dismissible alert" + }, + "icon": { + "type": "string", + "description": "Alert icon" + } + }, + "required": [ + "message" + ], + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type", + "props" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/BadgeComponent.json b/packages/spec/json-schema/BadgeComponent.json new file mode 100644 index 0000000..9635c88 --- /dev/null +++ b/packages/spec/json-schema/BadgeComponent.json @@ -0,0 +1,176 @@ +{ + "$ref": "#/definitions/BadgeComponent", + "definitions": { + "BadgeComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "badge" + }, + "props": { + "type": "object", + "properties": { + "label": { + "type": "string", + "description": "Badge label" + }, + "variant": { + "type": "string", + "enum": [ + "primary", + "secondary", + "success", + "warning", + "error", + "info" + ], + "description": "Badge variant" + }, + "icon": { + "type": "string", + "description": "Badge icon" + }, + "size": { + "type": "string", + "enum": [ + "small", + "medium", + "large" + ], + "description": "Badge size" + } + }, + "required": [ + "label" + ], + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type", + "props" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/BreadcrumbComponent.json b/packages/spec/json-schema/BreadcrumbComponent.json new file mode 100644 index 0000000..3c53954 --- /dev/null +++ b/packages/spec/json-schema/BreadcrumbComponent.json @@ -0,0 +1,176 @@ +{ + "$ref": "#/definitions/BreadcrumbComponent", + "definitions": { + "BreadcrumbComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "breadcrumb" + }, + "props": { + "type": "object", + "properties": { + "items": { + "type": "array", + "items": { + "type": "object", + "properties": { + "label": { + "type": "string", + "description": "Breadcrumb label" + }, + "href": { + "type": "string", + "description": "Breadcrumb link" + }, + "icon": { + "type": "string", + "description": "Breadcrumb icon" + } + }, + "required": [ + "label" + ], + "additionalProperties": false + }, + "description": "Breadcrumb items" + }, + "separator": { + "type": "string", + "description": "Breadcrumb separator" + } + }, + "required": [ + "items" + ], + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type", + "props" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/ButtonComponent.json b/packages/spec/json-schema/ButtonComponent.json new file mode 100644 index 0000000..b6d06e4 --- /dev/null +++ b/packages/spec/json-schema/ButtonComponent.json @@ -0,0 +1,210 @@ +{ + "$ref": "#/definitions/ButtonComponent", + "definitions": { + "ButtonComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "button" + }, + "props": { + "type": "object", + "properties": { + "label": { + "type": "string", + "description": "Button label" + }, + "variant": { + "type": "string", + "enum": [ + "primary", + "secondary", + "success", + "warning", + "danger", + "text", + "link" + ], + "description": "Button variant" + }, + "icon": { + "type": "string", + "description": "Button icon" + }, + "iconPosition": { + "type": "string", + "enum": [ + "left", + "right" + ], + "description": "Icon position" + }, + "size": { + "type": "string", + "enum": [ + "small", + "medium", + "large" + ], + "description": "Button size" + }, + "loading": { + "type": "boolean", + "description": "Loading state" + }, + "disabled": { + "type": "boolean", + "description": "Disabled state" + }, + "block": { + "type": "boolean", + "description": "Block button (full width)" + }, + "danger": { + "type": "boolean", + "description": "Danger button" + }, + "shape": { + "type": "string", + "enum": [ + "default", + "circle", + "round" + ], + "description": "Button shape" + } + }, + "required": [ + "label" + ], + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type", + "props" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/CardComponent.json b/packages/spec/json-schema/CardComponent.json new file mode 100644 index 0000000..ddd30ab --- /dev/null +++ b/packages/spec/json-schema/CardComponent.json @@ -0,0 +1,160 @@ +{ + "$ref": "#/definitions/CardComponent", + "definitions": { + "CardComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "card" + }, + "props": { + "type": "object", + "properties": { + "title": { + "type": "string", + "description": "Card title" + }, + "subtitle": { + "type": "string", + "description": "Card subtitle" + }, + "image": { + "type": "string", + "format": "uri", + "description": "Card image URL" + }, + "actions": { + "type": "array", + "description": "Card action buttons" + } + }, + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/Component.json b/packages/spec/json-schema/Component.json new file mode 100644 index 0000000..aa0b001 --- /dev/null +++ b/packages/spec/json-schema/Component.json @@ -0,0 +1,50 @@ +{ + "$ref": "#/definitions/Component", + "definitions": { + "Component": { + "type": "object", + "properties": { + "id": { + "type": "string", + "description": "Component instance identifier" + }, + "type": { + "type": "string", + "description": "Component type identifier" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "meta": { + "type": "object", + "additionalProperties": {}, + "description": "Editor/designer metadata" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/ComponentType.json b/packages/spec/json-schema/ComponentType.json new file mode 100644 index 0000000..c33dc68 --- /dev/null +++ b/packages/spec/json-schema/ComponentType.json @@ -0,0 +1,76 @@ +{ + "$ref": "#/definitions/ComponentType", + "definitions": { + "ComponentType": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ] + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/DrawerComponent.json b/packages/spec/json-schema/DrawerComponent.json new file mode 100644 index 0000000..431a29a --- /dev/null +++ b/packages/spec/json-schema/DrawerComponent.json @@ -0,0 +1,171 @@ +{ + "$ref": "#/definitions/DrawerComponent", + "definitions": { + "DrawerComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "drawer" + }, + "props": { + "type": "object", + "properties": { + "title": { + "type": "string", + "description": "Drawer title" + }, + "position": { + "type": "string", + "enum": [ + "left", + "right", + "top", + "bottom" + ], + "description": "Drawer position" + }, + "size": { + "type": "string", + "enum": [ + "small", + "medium", + "large", + "full" + ], + "description": "Drawer size" + }, + "closeOnOverlay": { + "type": "boolean", + "description": "Close on overlay click" + } + }, + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/FormComponent.json b/packages/spec/json-schema/FormComponent.json new file mode 100644 index 0000000..135074d --- /dev/null +++ b/packages/spec/json-schema/FormComponent.json @@ -0,0 +1,255 @@ +{ + "$ref": "#/definitions/FormComponent", + "definitions": { + "FormComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "form" + }, + "props": { + "type": "object", + "properties": { + "layout": { + "type": "string", + "enum": [ + "horizontal", + "vertical", + "inline" + ], + "description": "Form layout" + }, + "fields": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string", + "description": "Field name" + }, + "label": { + "type": "string", + "description": "Field label" + }, + "type": { + "type": "string", + "description": "Field type" + }, + "required": { + "type": "boolean", + "description": "Required field" + }, + "placeholder": { + "type": "string", + "description": "Placeholder text" + }, + "defaultValue": { + "description": "Default value" + }, + "validation": { + "type": "object", + "additionalProperties": {}, + "description": "Validation rules" + } + }, + "required": [ + "name", + "label", + "type" + ], + "additionalProperties": false + }, + "description": "Form fields" + }, + "submitButton": { + "type": "object", + "properties": { + "label": { + "type": "string", + "description": "Button label" + }, + "variant": { + "type": "string", + "enum": [ + "primary", + "secondary", + "success", + "danger" + ], + "description": "Button variant" + } + }, + "required": [ + "label" + ], + "additionalProperties": false, + "description": "Submit button configuration" + }, + "cancelButton": { + "type": "object", + "properties": { + "label": { + "type": "string", + "description": "Button label" + }, + "variant": { + "type": "string", + "enum": [ + "primary", + "secondary", + "success", + "danger" + ], + "description": "Button variant" + } + }, + "required": [ + "label" + ], + "additionalProperties": false, + "description": "Cancel button configuration" + }, + "labelWidth": { + "type": "number", + "description": "Label width" + }, + "labelAlign": { + "type": "string", + "enum": [ + "left", + "right" + ], + "description": "Label alignment" + } + }, + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/InputComponent.json b/packages/spec/json-schema/InputComponent.json new file mode 100644 index 0000000..2ce684d --- /dev/null +++ b/packages/spec/json-schema/InputComponent.json @@ -0,0 +1,206 @@ +{ + "$ref": "#/definitions/InputComponent", + "definitions": { + "InputComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "input" + }, + "props": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "text", + "password", + "email", + "number", + "tel", + "url", + "search", + "textarea" + ], + "description": "Input type" + }, + "placeholder": { + "type": "string", + "description": "Placeholder text" + }, + "defaultValue": { + "type": "string", + "description": "Default value" + }, + "size": { + "type": "string", + "enum": [ + "small", + "medium", + "large" + ], + "description": "Input size" + }, + "disabled": { + "type": "boolean", + "description": "Disabled state" + }, + "readonly": { + "type": "boolean", + "description": "Read-only state" + }, + "maxLength": { + "type": "number", + "description": "Maximum length" + }, + "showCount": { + "type": "boolean", + "description": "Show character count" + }, + "prefix": { + "type": "string", + "description": "Prefix icon" + }, + "suffix": { + "type": "string", + "description": "Suffix icon" + }, + "allowClear": { + "type": "boolean", + "description": "Allow clear button" + }, + "rows": { + "type": "number", + "description": "Rows for textarea type" + } + }, + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/ListComponent.json b/packages/spec/json-schema/ListComponent.json new file mode 100644 index 0000000..5ed8f05 --- /dev/null +++ b/packages/spec/json-schema/ListComponent.json @@ -0,0 +1,194 @@ +{ + "$ref": "#/definitions/ListComponent", + "definitions": { + "ListComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "list" + }, + "props": { + "type": "object", + "properties": { + "dataSource": { + "type": "string", + "description": "Data source reference" + }, + "itemLayout": { + "type": "string", + "enum": [ + "horizontal", + "vertical" + ], + "description": "Item layout" + }, + "bordered": { + "type": "boolean", + "description": "Show borders" + }, + "size": { + "type": "string", + "enum": [ + "small", + "medium", + "large" + ], + "description": "List size" + }, + "split": { + "type": "boolean", + "description": "Split items with divider" + }, + "loading": { + "type": "boolean", + "description": "Loading state" + }, + "pagination": { + "type": "object", + "properties": { + "pageSize": { + "type": "number", + "description": "Page size" + }, + "total": { + "type": "number", + "description": "Total items" + } + }, + "required": [ + "pageSize" + ], + "additionalProperties": false, + "description": "Pagination configuration" + } + }, + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/MenuComponent.json b/packages/spec/json-schema/MenuComponent.json new file mode 100644 index 0000000..9b08d65 --- /dev/null +++ b/packages/spec/json-schema/MenuComponent.json @@ -0,0 +1,224 @@ +{ + "$ref": "#/definitions/MenuComponent", + "definitions": { + "MenuComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "menu" + }, + "props": { + "type": "object", + "properties": { + "items": { + "type": "array", + "items": { + "type": "object", + "properties": { + "key": { + "type": "string", + "description": "Menu item key" + }, + "label": { + "type": "string", + "description": "Menu item label" + }, + "icon": { + "type": "string", + "description": "Menu item icon" + }, + "href": { + "type": "string", + "description": "Link URL" + }, + "disabled": { + "type": "boolean", + "description": "Disabled state" + }, + "children": { + "type": "array", + "description": "Submenu items" + } + }, + "required": [ + "key", + "label" + ], + "additionalProperties": false + }, + "description": "Menu items" + }, + "mode": { + "type": "string", + "enum": [ + "horizontal", + "vertical", + "inline" + ], + "description": "Menu mode" + }, + "theme": { + "type": "string", + "enum": [ + "light", + "dark" + ], + "description": "Menu theme" + }, + "defaultSelectedKeys": { + "type": "array", + "items": { + "type": "string" + }, + "description": "Default selected keys" + }, + "defaultOpenKeys": { + "type": "array", + "items": { + "type": "string" + }, + "description": "Default opened keys" + }, + "collapsible": { + "type": "boolean", + "description": "Collapsible menu" + }, + "collapsed": { + "type": "boolean", + "description": "Collapsed state" + } + }, + "required": [ + "items" + ], + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type", + "props" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/ModalComponent.json b/packages/spec/json-schema/ModalComponent.json new file mode 100644 index 0000000..695473f --- /dev/null +++ b/packages/spec/json-schema/ModalComponent.json @@ -0,0 +1,165 @@ +{ + "$ref": "#/definitions/ModalComponent", + "definitions": { + "ModalComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "modal" + }, + "props": { + "type": "object", + "properties": { + "title": { + "type": "string", + "description": "Modal title" + }, + "size": { + "type": "string", + "enum": [ + "small", + "medium", + "large", + "full" + ], + "description": "Modal size" + }, + "closeOnOverlay": { + "type": "boolean", + "description": "Close on overlay click" + }, + "showClose": { + "type": "boolean", + "description": "Show close button" + } + }, + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/PaginationComponent.json b/packages/spec/json-schema/PaginationComponent.json new file mode 100644 index 0000000..1f136f5 --- /dev/null +++ b/packages/spec/json-schema/PaginationComponent.json @@ -0,0 +1,193 @@ +{ + "$ref": "#/definitions/PaginationComponent", + "definitions": { + "PaginationComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "pagination" + }, + "props": { + "type": "object", + "properties": { + "total": { + "type": "number", + "description": "Total items" + }, + "pageSize": { + "type": "number", + "default": 10, + "description": "Items per page" + }, + "current": { + "type": "number", + "default": 1, + "description": "Current page" + }, + "showSizeChanger": { + "type": "boolean", + "description": "Show size changer" + }, + "pageSizeOptions": { + "type": "array", + "items": { + "type": "number" + }, + "description": "Page size options" + }, + "showQuickJumper": { + "type": "boolean", + "description": "Show quick jumper" + }, + "showTotal": { + "type": "boolean", + "description": "Show total items" + }, + "simple": { + "type": "boolean", + "description": "Simple mode" + }, + "size": { + "type": "string", + "enum": [ + "small", + "medium", + "large" + ], + "description": "Pagination size" + } + }, + "required": [ + "total" + ], + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type", + "props" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/PopoverComponent.json b/packages/spec/json-schema/PopoverComponent.json new file mode 100644 index 0000000..573ea3e --- /dev/null +++ b/packages/spec/json-schema/PopoverComponent.json @@ -0,0 +1,169 @@ +{ + "$ref": "#/definitions/PopoverComponent", + "definitions": { + "PopoverComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "popover" + }, + "props": { + "type": "object", + "properties": { + "title": { + "type": "string", + "description": "Popover title" + }, + "trigger": { + "type": "string", + "enum": [ + "click", + "hover" + ], + "description": "Trigger type" + }, + "position": { + "type": "string", + "enum": [ + "top", + "bottom", + "left", + "right" + ], + "description": "Popover position" + }, + "closeOnOutsideClick": { + "type": "boolean", + "description": "Close on outside click" + } + }, + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/ProgressComponent.json b/packages/spec/json-schema/ProgressComponent.json new file mode 100644 index 0000000..12ac5ba --- /dev/null +++ b/packages/spec/json-schema/ProgressComponent.json @@ -0,0 +1,184 @@ +{ + "$ref": "#/definitions/ProgressComponent", + "definitions": { + "ProgressComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "progress" + }, + "props": { + "type": "object", + "properties": { + "percent": { + "type": "number", + "minimum": 0, + "maximum": 100, + "description": "Progress percentage" + }, + "type": { + "type": "string", + "enum": [ + "line", + "circle", + "dashboard" + ], + "description": "Progress type" + }, + "status": { + "type": "string", + "enum": [ + "normal", + "active", + "success", + "exception" + ], + "description": "Progress status" + }, + "showInfo": { + "type": "boolean", + "description": "Show progress info" + }, + "strokeWidth": { + "type": "number", + "description": "Stroke width" + }, + "strokeColor": { + "type": "string", + "description": "Stroke color" + } + }, + "required": [ + "percent" + ], + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type", + "props" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/SelectComponent.json b/packages/spec/json-schema/SelectComponent.json new file mode 100644 index 0000000..af79fd0 --- /dev/null +++ b/packages/spec/json-schema/SelectComponent.json @@ -0,0 +1,211 @@ +{ + "$ref": "#/definitions/SelectComponent", + "definitions": { + "SelectComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "select" + }, + "props": { + "type": "object", + "properties": { + "options": { + "type": "array", + "items": { + "type": "object", + "properties": { + "label": { + "type": "string", + "description": "Option label" + }, + "value": { + "description": "Option value" + }, + "disabled": { + "type": "boolean", + "description": "Disabled option" + }, + "icon": { + "type": "string", + "description": "Option icon" + } + }, + "required": [ + "label" + ], + "additionalProperties": false + }, + "description": "Select options" + }, + "placeholder": { + "type": "string", + "description": "Placeholder text" + }, + "defaultValue": { + "description": "Default value" + }, + "multiple": { + "type": "boolean", + "description": "Multiple selection" + }, + "searchable": { + "type": "boolean", + "description": "Allow search" + }, + "allowClear": { + "type": "boolean", + "description": "Allow clear" + }, + "size": { + "type": "string", + "enum": [ + "small", + "medium", + "large" + ], + "description": "Select size" + }, + "disabled": { + "type": "boolean", + "description": "Disabled state" + }, + "loading": { + "type": "boolean", + "description": "Loading state" + } + }, + "required": [ + "options" + ], + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type", + "props" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/StepperComponent.json b/packages/spec/json-schema/StepperComponent.json new file mode 100644 index 0000000..3af9afc --- /dev/null +++ b/packages/spec/json-schema/StepperComponent.json @@ -0,0 +1,288 @@ +{ + "$ref": "#/definitions/StepperComponent", + "definitions": { + "StepperComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "stepper" + }, + "props": { + "type": "object", + "properties": { + "steps": { + "type": "array", + "items": { + "type": "object", + "properties": { + "label": { + "type": "string", + "description": "Step label" + }, + "description": { + "type": "string", + "description": "Step description" + }, + "icon": { + "type": "string", + "description": "Step icon" + }, + "content": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false, + "description": "Step content" + } + }, + "required": [ + "label" + ], + "additionalProperties": false + }, + "description": "Stepper steps" + }, + "currentStep": { + "type": "integer", + "minimum": 0, + "description": "Current step index" + }, + "orientation": { + "type": "string", + "enum": [ + "horizontal", + "vertical" + ], + "description": "Stepper orientation" + } + }, + "required": [ + "steps" + ], + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type", + "props" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/TableComponent.json b/packages/spec/json-schema/TableComponent.json new file mode 100644 index 0000000..7db3641 --- /dev/null +++ b/packages/spec/json-schema/TableComponent.json @@ -0,0 +1,274 @@ +{ + "$ref": "#/definitions/TableComponent", + "definitions": { + "TableComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "table" + }, + "props": { + "type": "object", + "properties": { + "columns": { + "type": "array", + "items": { + "type": "object", + "properties": { + "key": { + "type": "string", + "description": "Column key" + }, + "label": { + "type": "string", + "description": "Column label" + }, + "width": { + "type": "number", + "description": "Column width" + }, + "sortable": { + "type": "boolean", + "description": "Enable sorting" + }, + "filterable": { + "type": "boolean", + "description": "Enable filtering" + }, + "fixed": { + "type": "string", + "enum": [ + "left", + "right" + ], + "description": "Fixed column position" + }, + "dataType": { + "type": "string", + "enum": [ + "text", + "number", + "date", + "boolean", + "currency", + "percent" + ], + "description": "Data type" + } + }, + "required": [ + "key", + "label" + ], + "additionalProperties": false + }, + "description": "Table columns" + }, + "dataSource": { + "type": "string", + "description": "Data source reference or object name" + }, + "pagination": { + "type": "object", + "properties": { + "pageSize": { + "type": "number", + "default": 10, + "description": "Page size" + }, + "showSizeChanger": { + "type": "boolean", + "description": "Show page size changer" + }, + "pageSizeOptions": { + "type": "array", + "items": { + "type": "number" + }, + "description": "Page size options" + } + }, + "additionalProperties": false, + "description": "Pagination configuration" + }, + "selection": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "checkbox", + "radio" + ], + "description": "Selection type" + }, + "selectedKeys": { + "type": "array", + "items": { + "type": "string" + }, + "description": "Selected row keys" + } + }, + "required": [ + "type" + ], + "additionalProperties": false, + "description": "Row selection configuration" + }, + "rowActions": { + "type": "array", + "description": "Actions for each row" + }, + "size": { + "type": "string", + "enum": [ + "small", + "medium", + "large" + ], + "description": "Table size" + }, + "bordered": { + "type": "boolean", + "description": "Show borders" + }, + "striped": { + "type": "boolean", + "description": "Striped rows" + } + }, + "required": [ + "columns" + ], + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type", + "props" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/TabsComponent.json b/packages/spec/json-schema/TabsComponent.json new file mode 100644 index 0000000..aa76299 --- /dev/null +++ b/packages/spec/json-schema/TabsComponent.json @@ -0,0 +1,276 @@ +{ + "$ref": "#/definitions/TabsComponent", + "definitions": { + "TabsComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "tabs" + }, + "props": { + "type": "object", + "properties": { + "tabs": { + "type": "array", + "items": { + "type": "object", + "properties": { + "label": { + "type": "string", + "description": "Tab label" + }, + "icon": { + "type": "string", + "description": "Tab icon" + }, + "content": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false, + "description": "Tab content" + } + }, + "required": [ + "label" + ], + "additionalProperties": false + }, + "description": "Tab items" + }, + "defaultTab": { + "type": "integer", + "minimum": 0, + "description": "Default active tab index" + } + }, + "required": [ + "tabs" + ], + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type", + "props" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/TimelineComponent.json b/packages/spec/json-schema/TimelineComponent.json new file mode 100644 index 0000000..36802df --- /dev/null +++ b/packages/spec/json-schema/TimelineComponent.json @@ -0,0 +1,287 @@ +{ + "$ref": "#/definitions/TimelineComponent", + "definitions": { + "TimelineComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "timeline" + }, + "props": { + "type": "object", + "properties": { + "items": { + "type": "array", + "items": { + "type": "object", + "properties": { + "title": { + "type": "string", + "description": "Event title" + }, + "timestamp": { + "type": "string", + "description": "Event timestamp" + }, + "description": { + "type": "string", + "description": "Event description" + }, + "icon": { + "type": "string", + "description": "Event icon" + }, + "content": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false, + "description": "Event content" + } + }, + "required": [ + "title" + ], + "additionalProperties": false + }, + "description": "Timeline items" + }, + "orientation": { + "type": "string", + "enum": [ + "vertical", + "horizontal" + ], + "description": "Timeline orientation" + } + }, + "required": [ + "items" + ], + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type", + "props" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/TooltipComponent.json b/packages/spec/json-schema/TooltipComponent.json new file mode 100644 index 0000000..718de3b --- /dev/null +++ b/packages/spec/json-schema/TooltipComponent.json @@ -0,0 +1,165 @@ +{ + "$ref": "#/definitions/TooltipComponent", + "definitions": { + "TooltipComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "tooltip" + }, + "props": { + "type": "object", + "properties": { + "content": { + "type": "string", + "description": "Tooltip content" + }, + "position": { + "type": "string", + "enum": [ + "top", + "bottom", + "left", + "right" + ], + "description": "Tooltip position" + }, + "delay": { + "type": "number", + "description": "Show delay in milliseconds" + } + }, + "required": [ + "content" + ], + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type", + "props" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/TreeComponent.json b/packages/spec/json-schema/TreeComponent.json new file mode 100644 index 0000000..145bfb7 --- /dev/null +++ b/packages/spec/json-schema/TreeComponent.json @@ -0,0 +1,218 @@ +{ + "$ref": "#/definitions/TreeComponent", + "definitions": { + "TreeComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "tree" + }, + "props": { + "type": "object", + "properties": { + "treeData": { + "type": "array", + "items": { + "type": "object", + "properties": { + "title": { + "type": "string", + "description": "Node title" + }, + "key": { + "type": "string", + "description": "Node key" + }, + "icon": { + "type": "string", + "description": "Node icon" + }, + "disabled": { + "type": "boolean", + "description": "Disabled node" + }, + "children": { + "type": "array", + "description": "Child nodes" + } + }, + "required": [ + "title", + "key" + ], + "additionalProperties": false + }, + "description": "Tree data" + }, + "checkable": { + "type": "boolean", + "description": "Show checkbox on nodes" + }, + "selectable": { + "type": "boolean", + "description": "Selectable nodes" + }, + "multiple": { + "type": "boolean", + "description": "Multiple selection" + }, + "defaultExpandedKeys": { + "type": "array", + "items": { + "type": "string" + }, + "description": "Default expanded keys" + }, + "defaultSelectedKeys": { + "type": "array", + "items": { + "type": "string" + }, + "description": "Default selected keys" + }, + "defaultCheckedKeys": { + "type": "array", + "items": { + "type": "string" + }, + "description": "Default checked keys" + }, + "showLine": { + "type": "boolean", + "description": "Show tree line" + }, + "showIcon": { + "type": "boolean", + "description": "Show node icon" + } + }, + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/json-schema/UploadComponent.json b/packages/spec/json-schema/UploadComponent.json new file mode 100644 index 0000000..adb5f38 --- /dev/null +++ b/packages/spec/json-schema/UploadComponent.json @@ -0,0 +1,180 @@ +{ + "$ref": "#/definitions/UploadComponent", + "definitions": { + "UploadComponent": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "upload" + }, + "props": { + "type": "object", + "properties": { + "action": { + "type": "string", + "description": "Upload URL" + }, + "accept": { + "type": "string", + "description": "Accepted file types" + }, + "multiple": { + "type": "boolean", + "description": "Multiple file upload" + }, + "maxSize": { + "type": "number", + "description": "Max file size" + }, + "maxCount": { + "type": "number", + "description": "Max file count" + }, + "listType": { + "type": "string", + "enum": [ + "text", + "picture", + "picture-card" + ], + "description": "Upload list type" + }, + "showUploadList": { + "type": "boolean", + "description": "Show upload list" + }, + "disabled": { + "type": "boolean", + "description": "Disabled state" + } + }, + "additionalProperties": false + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "card", + "tabs", + "accordion", + "modal", + "drawer", + "container", + "divider", + "space", + "grid", + "flex", + "breadcrumb", + "stepper", + "menu", + "sidebar", + "pagination", + "dropdown", + "table", + "list", + "tree", + "description", + "statistic", + "tag", + "collapse", + "carousel", + "image", + "avatar", + "calendar_view", + "form", + "input", + "select", + "checkbox", + "radio", + "switch", + "slider", + "date_picker", + "time_picker", + "upload", + "autocomplete", + "cascader", + "transfer", + "color_picker", + "rate", + "alert", + "message", + "notification", + "progress", + "skeleton", + "spin", + "result", + "empty", + "button", + "button_group", + "icon_button", + "split_button", + "tooltip", + "popover", + "dialog", + "confirm", + "badge", + "timeline", + "steps", + "anchor", + "back_top", + "watermark", + "qrcode" + ], + "description": "Component type" + }, + "props": { + "type": "object", + "additionalProperties": {}, + "description": "Component properties" + }, + "events": { + "type": "object", + "additionalProperties": true, + "description": "Event handlers" + }, + "style": { + "type": "object", + "additionalProperties": { + "type": "string" + }, + "description": "Custom styles" + }, + "children": { + "type": "array", + "items": {}, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + }, + "description": "Child components" + } + }, + "required": [ + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/packages/spec/src/ui/COMPONENT_GUIDE.md b/packages/spec/src/ui/COMPONENT_GUIDE.md new file mode 100644 index 0000000..9fe7b91 --- /dev/null +++ b/packages/spec/src/ui/COMPONENT_GUIDE.md @@ -0,0 +1,742 @@ +# Component Library Protocol + +The Component Library Protocol defines reusable UI components for the ObjectStack UI system. These components can be composed together to build complex user interfaces with support for nesting, event binding, and custom styling. + +## Overview + +All components follow a consistent schema pattern: + +```typescript +{ + type: ComponentType, // Component type identifier + props?: Record, // Component-specific properties + children?: Component[], // Nested child components (supports recursion) + events?: Record, // Event handlers + style?: Record // Custom CSS styles +} +``` + +## Component Types + +The following component types are available: + +- **Layout Components**: `card`, `tabs`, `accordion`, `modal`, `drawer` +- **Navigation Components**: `breadcrumb`, `stepper` +- **Display Components**: `timeline`, `alert`, `badge` +- **Overlay Components**: `tooltip`, `popover` + +## Usage Examples + +### Card Component + +A container component that displays content in a card layout: + +```typescript +const projectCard: CardComponent = { + type: 'card', + props: { + title: 'Project Overview', + subtitle: 'Q4 2025 Planning', + image: 'https://example.com/project-thumbnail.jpg', + actions: [ + { label: 'Edit', onClick: () => handleEdit() }, + { label: 'Share', onClick: () => handleShare() } + ] + }, + children: [ + { + type: 'alert', + props: { + message: 'Project is on track', + variant: 'success' + } + }, + { + type: 'badge', + props: { + label: 'High Priority', + variant: 'error', + icon: 'alert-triangle' + } + } + ], + style: { + padding: '24px', + borderRadius: '12px', + boxShadow: '0 2px 8px rgba(0,0,0,0.1)' + } +} +``` + +### Tabs Component + +A tabbed navigation component for switching between content panels: + +```typescript +const dashboardTabs: TabsComponent = { + type: 'tabs', + props: { + tabs: [ + { + label: 'Overview', + icon: 'home', + content: { + type: 'card', + props: { title: 'Dashboard Overview' }, + children: [ + { + type: 'timeline', + props: { + items: [ + { + title: 'Project Kickoff', + timestamp: '2025-01-15T09:00:00Z', + description: 'Project started with team meeting', + icon: 'play' + }, + { + title: 'Milestone 1 Complete', + timestamp: '2025-02-01T15:30:00Z', + description: 'Successfully completed first phase', + icon: 'check-circle' + } + ], + orientation: 'vertical' + } + } + ] + } + }, + { + label: 'Analytics', + icon: 'bar-chart', + content: { + type: 'card', + props: { title: 'Performance Metrics' } + } + }, + { + label: 'Settings', + icon: 'settings', + content: { + type: 'card', + props: { title: 'Configuration' } + } + } + ], + defaultTab: 0 + } +} +``` + +### Accordion Component + +An expandable/collapsible panel component: + +```typescript +const faqAccordion: AccordionComponent = { + type: 'accordion', + props: { + items: [ + { + title: 'Getting Started', + icon: 'help-circle', + defaultExpanded: true, + content: { + type: 'card', + props: { + title: 'How to begin', + subtitle: 'Follow these steps to get started' + } + } + }, + { + title: 'Advanced Features', + icon: 'star', + content: { + type: 'card', + props: { title: 'Power user guide' } + } + } + ], + allowMultiple: false + } +} +``` + +### Modal Component + +A dialog overlay for focused user interactions: + +```typescript +const confirmationModal: ModalComponent = { + type: 'modal', + props: { + title: 'Confirm Deletion', + size: 'medium', + closeOnOverlay: false, + showClose: true + }, + children: [ + { + type: 'alert', + props: { + title: 'Warning', + message: 'This action cannot be undone. Are you sure you want to delete this item?', + variant: 'warning', + icon: 'alert-triangle' + } + } + ], + events: { + onConfirm: () => handleDelete(), + onCancel: () => closeModal() + } +} +``` + +### Drawer Component + +A slide-in panel from the screen edge: + +```typescript +const filtersDrawer: DrawerComponent = { + type: 'drawer', + props: { + title: 'Advanced Filters', + position: 'right', + size: 'medium', + closeOnOverlay: true + }, + children: [ + { + type: 'accordion', + props: { + items: [ + { + title: 'Date Range', + defaultExpanded: true, + content: { + type: 'card', + props: { title: 'Select date range' } + } + }, + { + title: 'Categories', + content: { + type: 'card', + props: { title: 'Filter by category' } + } + } + ], + allowMultiple: true + } + } + ] +} +``` + +### Stepper Component + +Multi-step process navigation: + +```typescript +const wizardStepper: StepperComponent = { + type: 'stepper', + props: { + steps: [ + { + label: 'Account Information', + description: 'Enter your account details', + icon: 'user', + content: { + type: 'card', + props: { title: 'Account Setup' } + } + }, + { + label: 'Payment Method', + description: 'Configure payment details', + icon: 'credit-card', + content: { + type: 'card', + props: { title: 'Payment Information' } + } + }, + { + label: 'Confirmation', + description: 'Review and confirm', + icon: 'check-circle', + content: { + type: 'card', + props: { title: 'Review Your Information' } + } + } + ], + currentStep: 0, + orientation: 'horizontal' + }, + events: { + onStepChange: (step: number) => handleStepChange(step) + } +} +``` + +### Alert Component + +Notification messages with different severity levels: + +```typescript +const successAlert: AlertComponent = { + type: 'alert', + props: { + title: 'Success!', + message: 'Your changes have been saved successfully.', + variant: 'success', + dismissible: true, + icon: 'check-circle' + }, + events: { + onDismiss: () => handleDismiss() + } +} + +const errorAlert: AlertComponent = { + type: 'alert', + props: { + title: 'Error', + message: 'Failed to save changes. Please try again.', + variant: 'error', + dismissible: true, + icon: 'x-circle' + } +} +``` + +### Badge Component + +Small labels for status or counts: + +```typescript +const premiumBadge: BadgeComponent = { + type: 'badge', + props: { + label: 'Premium', + variant: 'primary', + icon: 'star', + size: 'medium' + } +} + +const countBadge: BadgeComponent = { + type: 'badge', + props: { + label: '99+', + variant: 'error', + size: 'small' + } +} +``` + +### Timeline Component + +Chronological event display: + +```typescript +const activityTimeline: TimelineComponent = { + type: 'timeline', + props: { + items: [ + { + title: 'Task Completed', + timestamp: '2025-01-22T10:30:00Z', + description: 'John Doe completed the design review', + icon: 'check-circle', + content: { + type: 'card', + props: { + title: 'Design Review Results', + subtitle: 'All checks passed' + } + } + }, + { + title: 'Comment Added', + timestamp: '2025-01-22T09:15:00Z', + description: 'Jane Smith left a comment', + icon: 'message-circle' + }, + { + title: 'Project Created', + timestamp: '2025-01-20T14:00:00Z', + description: 'Project was initialized', + icon: 'play' + } + ], + orientation: 'vertical' + } +} +``` + +### Breadcrumb Component + +Hierarchical navigation: + +```typescript +const navBreadcrumb: BreadcrumbComponent = { + type: 'breadcrumb', + props: { + items: [ + { label: 'Home', href: '/', icon: 'home' }, + { label: 'Projects', href: '/projects', icon: 'folder' }, + { label: 'Design System', href: '/projects/design-system', icon: 'palette' }, + { label: 'Components', href: '/projects/design-system/components' } + ], + separator: '/' + } +} +``` + +### Tooltip Component + +Contextual information on hover: + +```typescript +const infoTooltip: TooltipComponent = { + type: 'tooltip', + props: { + content: 'This feature is only available for premium users', + position: 'top', + delay: 300 + }, + children: [ + { + type: 'badge', + props: { + label: 'Premium Feature', + variant: 'primary', + icon: 'lock' + } + } + ] +} +``` + +### Popover Component + +Rich content popup on click or hover: + +```typescript +const actionsPopover: PopoverComponent = { + type: 'popover', + props: { + title: 'Quick Actions', + trigger: 'click', + position: 'bottom', + closeOnOutsideClick: true + }, + children: [ + { + type: 'card', + children: [ + { + type: 'alert', + props: { + message: 'Select an action', + variant: 'info' + } + } + ] + } + ] +} +``` + +## Complex Composition Example + +Here's a complex example showing how components can be deeply nested: + +```typescript +const complexDashboard: Component = { + type: 'card', + props: { + title: 'Project Management Dashboard', + subtitle: 'Q4 2025' + }, + children: [ + { + type: 'tabs', + props: { + tabs: [ + { + label: 'Overview', + icon: 'home', + content: { + type: 'card', + children: [ + { + type: 'alert', + props: { + message: 'All systems operational', + variant: 'success' + } + }, + { + type: 'timeline', + props: { + items: [ + { + title: 'Milestone Reached', + timestamp: '2025-01-22T12:00:00Z', + icon: 'flag', + content: { + type: 'card', + props: { title: 'Phase 1 Complete' }, + children: [ + { + type: 'badge', + props: { + label: 'Completed', + variant: 'success' + } + } + ] + } + } + ] + } + } + ] + } + }, + { + label: 'Team', + icon: 'users', + content: { + type: 'accordion', + props: { + items: [ + { + title: 'Active Members', + icon: 'users', + defaultExpanded: true + } + ] + } + } + } + ] + } + } + ] +} +``` + +## Event Binding + +Components support event binding through the `events` property: + +```typescript +const interactiveCard: Component = { + type: 'card', + props: { + title: 'Interactive Component' + }, + events: { + onClick: () => console.log('Card clicked'), + onHover: () => console.log('Card hovered'), + onFocus: () => console.log('Card focused'), + onBlur: () => console.log('Card blurred') + } +} +``` + +## Custom Styling + +All components accept custom CSS styles: + +```typescript +const styledComponent: Component = { + type: 'card', + props: { + title: 'Styled Component' + }, + style: { + backgroundColor: '#f5f5f5', + borderRadius: '12px', + padding: '24px', + boxShadow: '0 4px 12px rgba(0,0,0,0.1)', + border: '1px solid #e0e0e0' + } +} +``` + +## Best Practices + +### 1. Use Semantic Component Types +Choose the most appropriate component type for your use case: +- Use `card` for grouped content containers +- Use `modal` for focused interactions that require user attention +- Use `drawer` for contextual panels and filters +- Use `alert` for important notifications + +### 2. Leverage Component Nesting +Build complex UIs by composing simple components: + +```typescript +// Good: Clear hierarchy +{ + type: 'card', + children: [ + { type: 'alert', props: { message: 'Info' } }, + { type: 'badge', props: { label: 'Status' } } + ] +} +``` + +### 3. Keep Props Focused +Each component should have props specific to its purpose: + +```typescript +// Good: Focused props +const alert = { + type: 'alert', + props: { + title: 'Error', + message: 'Something went wrong', + variant: 'error' + } +} +``` + +### 4. Use Event Handlers Consistently +Bind events using standard naming conventions: + +```typescript +events: { + onClick: () => {}, + onSubmit: () => {}, + onCancel: () => {}, + onDismiss: () => {} +} +``` + +## TypeScript Support + +All components are fully typed using Zod schemas with TypeScript type inference: + +```typescript +import { + Component, + CardComponent, + TabsComponent, + AlertComponent, + // ... other types +} from '@objectstack/spec/ui'; + +// Type-safe component definition +const myCard: CardComponent = { + type: 'card', + props: { + title: 'Hello World' + } +}; + +// Generic component type +const myComponent: Component = { + type: 'badge', + props: { + label: 'New' + } +}; +``` + +## Factory Helper + +Use the Component factory for validated component creation: + +```typescript +import { Component } from '@objectstack/spec/ui'; + +// Creates and validates component +const card = Component.create({ + type: 'card', + props: { title: 'Test' } +}); + +// Throws error for invalid component +const invalid = Component.create({ + type: 'invalid' // Error: Invalid component type +}); +``` + +## Validation + +All component schemas include runtime validation through Zod: + +```typescript +import { ComponentSchema, CardComponentSchema } from '@objectstack/spec/ui'; + +// Validates any component +ComponentSchema.parse(myComponent); + +// Validates specific component type +CardComponentSchema.parse(myCard); +``` + +## Migration Guide + +If migrating from other UI frameworks: + +### From React Components +```typescript +// Before (React) + + + + +// After (ObjectStack) +{ + type: 'card', + props: { title: 'Hello' }, + children: [ + { + type: 'alert', + props: { message: 'Info', variant: 'info' } + } + ] +} +``` + +### From Vue Components +```typescript +// Before (Vue) + + Info + + +// After (ObjectStack) +{ + type: 'card', + props: { title: 'Hello' }, + children: [ + { + type: 'alert', + props: { message: 'Info', variant: 'info' } + } + ] +} +``` + +## Next Steps + +- Explore the [UI Protocol Documentation](../README.md) +- Check out [Page Composition](./page.zod.ts) for building full pages +- Learn about [Theme Customization](./theme.zod.ts) for styling + +## Related Schemas + +- `ActionSchema` - User interaction definitions +- `PageSchema` - Full page composition +- `ThemeSchema` - Visual styling and theming +- `ViewSchema` - Data-driven views (list, form) diff --git a/packages/spec/src/ui/component.test.ts b/packages/spec/src/ui/component.test.ts new file mode 100644 index 0000000..2fd6a71 --- /dev/null +++ b/packages/spec/src/ui/component.test.ts @@ -0,0 +1,487 @@ +import { describe, it, expect } from 'vitest'; +import { + ComponentSchema, + Component, + type Component as ComponentType, +} from './component.zod'; + +describe('ComponentSchema', () => { + describe('Basic Structure', () => { + it('should accept minimal component with just type', () => { + const component: ComponentType = { + type: 'card', + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + + it('should accept any string as type (extensible)', () => { + const customComponent: ComponentType = { + type: 'custom-widget', + }; + + expect(() => ComponentSchema.parse(customComponent)).not.toThrow(); + }); + + it('should accept component with arbitrary props', () => { + const component: ComponentType = { + type: 'button', + props: { + label: 'Click me', + variant: 'primary', + size: 'large', + customProp: 'any value', + nestedProp: { + foo: 'bar', + baz: 123, + }, + }, + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + + it('should accept component with style', () => { + const component: ComponentType = { + type: 'div', + style: { + padding: '16px', + borderRadius: '8px', + backgroundColor: '#f5f5f5', + }, + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + + it('should accept component with events', () => { + const component = { + type: 'button', + events: { + onClick: () => {}, + onHover: () => {}, + onCustomEvent: () => {}, + }, + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + }); + + describe('Component Nesting (Recursive Structure)', () => { + it('should accept component with single child', () => { + const component: ComponentType = { + type: 'card', + children: [ + { + type: 'badge', + props: { label: 'New' }, + }, + ], + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + + it('should accept component with multiple children', () => { + const component: ComponentType = { + type: 'container', + children: [ + { + type: 'header', + props: { title: 'Title' }, + }, + { + type: 'content', + props: { text: 'Body' }, + }, + { + type: 'footer', + props: { copyright: '2025' }, + }, + ], + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + + it('should accept deeply nested components (3+ levels)', () => { + const component: ComponentType = { + type: 'page', + children: [ + { + type: 'section', + children: [ + { + type: 'card', + children: [ + { + type: 'button', + props: { label: 'Deep Button' }, + }, + ], + }, + ], + }, + ], + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + + it('should accept complex nested structure with props at each level', () => { + const component: ComponentType = { + type: 'dashboard', + props: { title: 'My Dashboard' }, + children: [ + { + type: 'grid', + props: { columns: 3 }, + children: [ + { + type: 'widget', + props: { type: 'chart', data: [] }, + }, + { + type: 'widget', + props: { type: 'stats', value: 100 }, + }, + ], + }, + ], + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + }); + + describe('Real-World Component Trees', () => { + it('should accept form with input fields', () => { + const form = { + type: 'form', + props: { + action: '/submit', + method: 'POST', + }, + children: [ + { + type: 'input', + props: { + name: 'username', + type: 'text', + placeholder: 'Enter username', + required: true, + }, + }, + { + type: 'input', + props: { + name: 'password', + type: 'password', + placeholder: 'Enter password', + }, + }, + { + type: 'button', + props: { + type: 'submit', + label: 'Login', + }, + }, + ], + }; + + expect(() => ComponentSchema.parse(form)).not.toThrow(); + }); + + it('should accept table component tree', () => { + const table = { + type: 'table', + props: { + columns: [ + { key: 'name', label: 'Name', sortable: true }, + { key: 'email', label: 'Email' }, + ], + dataSource: 'users', + pagination: { pageSize: 20 }, + }, + children: [ + { + type: 'table-toolbar', + props: { showSearch: true }, + }, + ], + }; + + expect(() => ComponentSchema.parse(table)).not.toThrow(); + }); + + it('should accept navigation menu tree', () => { + const menu = { + type: 'menu', + props: { + mode: 'vertical', + theme: 'dark', + }, + children: [ + { + type: 'menu-item', + props: { + key: 'dashboard', + label: 'Dashboard', + icon: 'home', + }, + }, + { + type: 'menu-submenu', + props: { + key: 'settings', + label: 'Settings', + }, + children: [ + { + type: 'menu-item', + props: { + key: 'profile', + label: 'Profile', + }, + }, + { + type: 'menu-item', + props: { + key: 'preferences', + label: 'Preferences', + }, + }, + ], + }, + ], + }; + + expect(() => ComponentSchema.parse(menu)).not.toThrow(); + }); + + it('should accept modal with complex content', () => { + const modal = { + type: 'modal', + props: { + title: 'Confirm Action', + size: 'medium', + visible: true, + }, + children: [ + { + type: 'alert', + props: { + type: 'warning', + message: 'This action cannot be undone', + }, + }, + { + type: 'div', + children: [ + { + type: 'button', + props: { label: 'Cancel', variant: 'secondary' }, + events: { onClick: () => {} }, + }, + { + type: 'button', + props: { label: 'Confirm', variant: 'primary' }, + events: { onClick: () => {} }, + }, + ], + }, + ], + }; + + expect(() => ComponentSchema.parse(modal)).not.toThrow(); + }); + }); + + describe('Prop Flexibility', () => { + it('should accept unknown/custom props without validation', () => { + const component = { + type: 'custom-component', + props: { + customField1: 'value', + customField2: 123, + customField3: true, + customField4: ['array', 'values'], + customField5: { + nested: { + deeply: 'works', + }, + }, + }, + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + + it('should accept components without props', () => { + const component = { + type: 'divider', + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + }); + + describe('ID and Meta Fields', () => { + it('should accept component with id', () => { + const component = { + id: 'user-profile-card', + type: 'card', + props: { title: 'Profile' }, + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + + it('should accept component with meta data', () => { + const component = { + type: 'widget', + props: { data: [] }, + meta: { + x: 100, + y: 200, + locked: false, + label: 'Sales Chart', + bindingPath: 'dashboard.sales', + }, + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + + it('should accept component with both id and meta', () => { + const component = { + id: 'editable-form-001', + type: 'form', + props: { action: '/submit' }, + meta: { + position: { x: 50, y: 100 }, + locked: true, + designerLabel: 'Contact Form', + }, + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + + it('should accept nested components with ids', () => { + const component = { + id: 'dashboard', + type: 'container', + children: [ + { + id: 'header-section', + type: 'header', + props: { title: 'Dashboard' }, + }, + { + id: 'content-section', + type: 'content', + children: [ + { + id: 'widget-1', + type: 'chart', + props: { type: 'bar' }, + meta: { gridPosition: { row: 0, col: 0 } }, + }, + ], + }, + ], + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + + it('should accept meta with complex nested data', () => { + const component = { + type: 'data-grid', + meta: { + editorConfig: { + allowResize: true, + minWidth: 200, + maxWidth: 1000, + }, + dataBinding: { + source: 'api.users', + filters: ['active', 'verified'], + transforms: [{ type: 'sort', field: 'name' }], + }, + layout: { + position: { x: 0, y: 0 }, + size: { width: 400, height: 300 }, + zIndex: 10, + }, + }, + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + }); + + describe('Style and Events', () => { + it('should accept component with both style and events', () => { + const component = { + type: 'interactive-card', + props: { title: 'Click me' }, + style: { + cursor: 'pointer', + border: '1px solid #ccc', + }, + events: { + onClick: () => {}, + onMouseEnter: () => {}, + }, + children: [ + { + type: 'text', + props: { content: 'Interactive content' }, + }, + ], + }; + + expect(() => ComponentSchema.parse(component)).not.toThrow(); + }); + }); +}); + +describe('Component Factory', () => { + it('should create component via factory', () => { + const component = Component.create({ + type: 'card', + props: { title: 'Test Card' }, + }); + + expect(component.type).toBe('card'); + expect(component.props?.title).toBe('Test Card'); + }); + + it('should create nested component via factory', () => { + const component = Component.create({ + type: 'container', + children: [ + { + type: 'badge', + props: { label: 'New' }, + }, + ], + }); + + expect(component.children).toHaveLength(1); + expect(component.children![0].type).toBe('badge'); + }); + + it('should validate structure via factory', () => { + // Missing required 'type' field + expect(() => + Component.create({ + props: { title: 'No type' }, + } as any) + ).toThrow(); + }); +}); diff --git a/packages/spec/src/ui/component.zod.ts b/packages/spec/src/ui/component.zod.ts new file mode 100644 index 0000000..c0c01fd --- /dev/null +++ b/packages/spec/src/ui/component.zod.ts @@ -0,0 +1,105 @@ +import { z } from 'zod'; + +/** + * Component Schema + * + * Defines a generic, implementation-agnostic structure for describing UI component trees. + * + * **Design Philosophy:** + * The protocol layer defines "how to describe a UI tree", not "what properties a Button has". + * This allows UI implementations to evolve independently while maintaining structural compatibility. + * + * **Core Properties:** + * - `id`: Unique identifier for component instance (optional, for rendering engines and diff algorithms) + * - `type`: Component type identifier (extensible string) + * - `props`: Arbitrary component properties (implementation-defined) + * - `children`: Recursive nesting of child components + * - `events`: Event handler bindings + * - `style`: Custom CSS styling + * - `meta`: Metadata for editors/designers (non-rendering information) + * + * @example + * ```typescript + * const component: Component = { + * id: 'user-profile-card', + * type: 'card', + * props: { + * title: 'User Profile', + * subtitle: 'Account Details', + * customProp: 'value' + * }, + * children: [ + * { + * id: 'premium-badge', + * type: 'badge', + * props: { label: 'Premium', variant: 'success' } + * } + * ], + * style: { + * padding: '16px', + * borderRadius: '8px' + * }, + * events: { + * onClick: () => {} + * }, + * meta: { + * x: 100, + * y: 200, + * locked: false, + * bindingPath: 'user.profile' + * } + * } + * ``` + */ +export const ComponentSchema: z.ZodType<{ + id?: string; + type: string; + props?: Record; + children?: Array; + events?: Record; + style?: Record; + meta?: Record; +}> = z.object({ + /** Unique identifier for component instance - used by rendering engines, diff algorithms, and editors */ + id: z.string().optional().describe('Component instance identifier'), + + /** Component type identifier - extensible string to allow custom components */ + type: z.string().describe('Component type identifier'), + + /** Component-specific properties - implementation-defined */ + props: z.record(z.unknown()).optional().describe('Component properties'), + + /** Nested child components - recursive structure */ + children: z.lazy(() => z.array(ComponentSchema)).optional().describe('Child components'), + + /** Event handler bindings */ + events: z.record(z.function()).optional().describe('Event handlers'), + + /** Custom CSS styles */ + style: z.record(z.string()).optional().describe('Custom styles'), + + /** Metadata for editors, designers, and plugin systems - not used in rendering */ + meta: z.record(z.unknown()).optional().describe('Editor/designer metadata'), +}); + +/** + * TypeScript Type Exports + */ +export type Component = z.infer; + +/** + * Component Factory Helper + * + * Provides a convenient way to create validated component instances. + * + * @example + * ```typescript + * const card = Component.create({ + * type: 'card', + * props: { title: 'Hello World' } + * }); + * ``` + */ +export const Component = { + create: (config: z.input): Component => ComponentSchema.parse(config), +} as const; diff --git a/packages/spec/src/ui/index.ts b/packages/spec/src/ui/index.ts index 446da59..535d4ec 100644 --- a/packages/spec/src/ui/index.ts +++ b/packages/spec/src/ui/index.ts @@ -5,6 +5,7 @@ * - App, Page, View (Grid/Kanban) * - Dashboard (Widgets), Report * - Action (Triggers) + * - Component (Reusable UI Components) */ export * from './app.zod'; @@ -15,3 +16,4 @@ export * from './action.zod'; export * from './page.zod'; export * from './widget.zod'; export * from './theme.zod'; +export * from './component.zod';