diff --git a/json-components-registry.json b/json-components-registry.json index c22e5e1..cd8746a 100644 --- a/json-components-registry.json +++ b/json-components-registry.json @@ -377,7 +377,11 @@ "description": "Navigation breadcrumb trail using the atoms/BreadcrumbNav JSON-safe items prop", "status": "supported", "source": "atoms", - "jsonCompatible": true + "jsonCompatible": true, + "metadata": { + "conversionDate": "2026-01-21", + "converted": true + } }, { "type": "button", @@ -400,7 +404,12 @@ "canHaveChildren": true, "description": "Interactive button element", "status": "supported", - "source": "atoms" + "source": "atoms", + "jsonCompatible": true, + "metadata": { + "conversionDate": "2026-01-21", + "converted": true + } }, { "type": "Button as ShadcnButton, ButtonProps as ShadcnButtonProps", @@ -486,7 +495,12 @@ "canHaveChildren": true, "description": "Calendar date selector", "status": "supported", - "source": "atoms" + "source": "atoms", + "jsonCompatible": true, + "metadata": { + "conversionDate": "2026-01-21", + "converted": true + } }, { "type": "Calendar as ShadcnCalendar", @@ -533,7 +547,12 @@ "canHaveChildren": true, "description": "Container card with optional header, content, and footer", "status": "supported", - "source": "atoms" + "source": "atoms", + "jsonCompatible": true, + "metadata": { + "conversionDate": "2026-01-21", + "converted": true + } }, { "type": "Card, CardContent", @@ -822,7 +841,12 @@ "canHaveChildren": false, "description": "Checkbox toggle control", "status": "supported", - "source": "atoms" + "source": "atoms", + "jsonCompatible": true, + "metadata": { + "conversionDate": "2026-01-21", + "converted": true + } }, { "type": "ChevronDown", @@ -1181,7 +1205,12 @@ "canHaveChildren": true, "description": "Right-click context menu", "status": "supported", - "source": "atoms" + "source": "atoms", + "jsonCompatible": true, + "metadata": { + "conversionDate": "2026-01-21", + "converted": true + } }, { "type": "ContextMenu as ShadcnContextMenu,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuTrigger,\n ContextMenuSeparator,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,", @@ -1356,7 +1385,8 @@ "canHaveChildren": true, "description": "Modal dialog overlay", "status": "supported", - "source": "ui" + "source": "ui", + "jsonCompatible": true }, { "type": "Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,", @@ -1501,7 +1531,8 @@ "canHaveChildren": true, "description": "Sliding panel overlay", "status": "supported", - "source": "atoms" + "source": "atoms", + "jsonCompatible": true }, { "type": "DropdownMenu", @@ -1510,7 +1541,8 @@ "canHaveChildren": true, "description": "DropdownMenu component", "status": "supported", - "source": "ui" + "source": "ui", + "jsonCompatible": true }, { "type": "Edit", @@ -1770,7 +1802,8 @@ "canHaveChildren": true, "description": "Form container component", "status": "supported", - "source": "atoms" + "source": "atoms", + "jsonCompatible": true }, { "type": "Form as ShadcnForm,\n FormControl,\n FormDescription,\n FormField,\n FormItem,\n FormLabel,\n FormMessage,", @@ -1844,7 +1877,8 @@ "canHaveChildren": true, "description": "Heading text with level (h1-h6)", "status": "supported", - "source": "atoms" + "source": "atoms", + "jsonCompatible": true }, { "type": "Heart", @@ -1912,7 +1946,8 @@ "canHaveChildren": true, "description": "Card shown on hover", "status": "supported", - "source": "atoms" + "source": "atoms", + "jsonCompatible": true }, { "type": "HoverCard as ShadcnHoverCard,\n HoverCardContent,\n HoverCardTrigger,", @@ -4029,4 +4064,4 @@ "wrappers": 10 } } -} +} \ No newline at end of file diff --git a/src/components/json-definitions/dialog.json b/src/components/json-definitions/dialog.json new file mode 100644 index 0000000..fd635fd --- /dev/null +++ b/src/components/json-definitions/dialog.json @@ -0,0 +1,85 @@ +{ + "id": "dialog-root", + "type": "Dialog", + "bindings": { + "open": "data.open", + "onOpenChange": "handlers.handleOpenChange" + }, + "children": [ + { + "id": "dialog-trigger", + "type": "DialogTrigger", + "bindings": { + "asChild": true + }, + "children": [ + { + "id": "dialog-trigger-content", + "type": "slot", + "slot": "trigger", + "defaultContent": { + "id": "trigger-button", + "type": "Button", + "bindings": { + "children": "data.triggerLabel || 'Open'" + } + } + } + ] + }, + { + "id": "dialog-content", + "type": "DialogContent", + "children": [ + { + "id": "dialog-header", + "type": "DialogHeader", + "children": [ + { + "id": "dialog-title", + "type": "DialogTitle", + "bindings": { + "children": "data.title" + } + }, + { + "id": "dialog-description", + "type": "DialogDescription", + "bindings": { + "children": "data.description" + } + } + ] + }, + { + "id": "dialog-body", + "type": "slot", + "slot": "children" + }, + { + "id": "dialog-footer", + "type": "DialogFooter", + "children": [ + { + "id": "dialog-close-button", + "type": "Button", + "bindings": { + "variant": "outline", + "children": "data.cancelLabel || 'Cancel'", + "onClick": "handlers.handleCancel" + } + }, + { + "id": "dialog-submit-button", + "type": "Button", + "bindings": { + "children": "data.submitLabel || 'Submit'", + "onClick": "handlers.handleSubmit" + } + } + ] + } + ] + } + ] +} diff --git a/src/components/json-definitions/drawer.json b/src/components/json-definitions/drawer.json new file mode 100644 index 0000000..cd61f8b --- /dev/null +++ b/src/components/json-definitions/drawer.json @@ -0,0 +1,86 @@ +{ + "id": "drawer-root", + "type": "Drawer", + "bindings": { + "open": "data.open", + "onOpenChange": "handlers.handleOpenChange", + "direction": "data.direction || 'right'" + }, + "children": [ + { + "id": "drawer-trigger", + "type": "DrawerTrigger", + "bindings": { + "asChild": true + }, + "children": [ + { + "id": "drawer-trigger-content", + "type": "slot", + "slot": "trigger", + "defaultContent": { + "id": "trigger-button", + "type": "Button", + "bindings": { + "children": "data.triggerLabel || 'Open'" + } + } + } + ] + }, + { + "id": "drawer-content", + "type": "DrawerContent", + "children": [ + { + "id": "drawer-header", + "type": "DrawerHeader", + "children": [ + { + "id": "drawer-title", + "type": "DrawerTitle", + "bindings": { + "children": "data.title" + } + }, + { + "id": "drawer-description", + "type": "DrawerDescription", + "bindings": { + "children": "data.description" + } + } + ] + }, + { + "id": "drawer-body", + "type": "slot", + "slot": "children" + }, + { + "id": "drawer-footer", + "type": "DrawerFooter", + "children": [ + { + "id": "drawer-close-button", + "type": "Button", + "bindings": { + "variant": "outline", + "children": "data.cancelLabel || 'Cancel'", + "onClick": "handlers.handleCancel" + } + }, + { + "id": "drawer-submit-button", + "type": "Button", + "bindings": { + "children": "data.submitLabel || 'Submit'", + "onClick": "handlers.handleSubmit" + } + } + ] + } + ] + } + ] +} diff --git a/src/components/json-definitions/dropdown-menu.json b/src/components/json-definitions/dropdown-menu.json new file mode 100644 index 0000000..028bedd --- /dev/null +++ b/src/components/json-definitions/dropdown-menu.json @@ -0,0 +1,44 @@ +{ + "id": "dropdown-menu-root", + "type": "DropdownMenu", + "children": [ + { + "id": "dropdown-menu-trigger", + "type": "DropdownMenuTrigger", + "bindings": { + "asChild": true + }, + "children": [ + { + "id": "dropdown-trigger-content", + "type": "slot", + "slot": "trigger", + "defaultContent": { + "id": "trigger-button", + "type": "Button", + "bindings": { + "variant": "ghost", + "size": "sm", + "children": "data.triggerLabel || 'Menu'" + } + } + } + ] + }, + { + "id": "dropdown-menu-content", + "type": "DropdownMenuContent", + "bindings": { + "align": "data.align || 'end'", + "side": "data.side || 'bottom'" + }, + "children": [ + { + "id": "dropdown-menu-items", + "type": "slot", + "slot": "children" + } + ] + } + ] +} diff --git a/src/components/json-definitions/form-field.json b/src/components/json-definitions/form-field.json new file mode 100644 index 0000000..67347a9 --- /dev/null +++ b/src/components/json-definitions/form-field.json @@ -0,0 +1,16 @@ +{ + "id": "form-field-root", + "type": "FormField", + "bindings": { + "className": "data.className", + "control": "data.control", + "name": "data.name" + }, + "children": [ + { + "id": "form-field-content", + "type": "slot", + "slot": "children" + } + ] +} diff --git a/src/components/json-definitions/form.json b/src/components/json-definitions/form.json new file mode 100644 index 0000000..9f4393d --- /dev/null +++ b/src/components/json-definitions/form.json @@ -0,0 +1,15 @@ +{ + "id": "form-root", + "type": "Form", + "bindings": { + "className": "data.className", + "onSubmit": "handlers.handleSubmit" + }, + "children": [ + { + "id": "form-content", + "type": "slot", + "slot": "children" + } + ] +} diff --git a/src/components/json-definitions/heading.json b/src/components/json-definitions/heading.json new file mode 100644 index 0000000..13d6b52 --- /dev/null +++ b/src/components/json-definitions/heading.json @@ -0,0 +1,15 @@ +{ + "id": "heading-root", + "type": "Heading", + "bindings": { + "level": "data.level || 1", + "className": "data.className" + }, + "children": [ + { + "id": "heading-content", + "type": "slot", + "slot": "children" + } + ] +} diff --git a/src/components/json-definitions/hover-card.json b/src/components/json-definitions/hover-card.json new file mode 100644 index 0000000..96460e2 --- /dev/null +++ b/src/components/json-definitions/hover-card.json @@ -0,0 +1,43 @@ +{ + "id": "hover-card-root", + "type": "HoverCard", + "children": [ + { + "id": "hover-card-trigger", + "type": "HoverCardTrigger", + "bindings": { + "asChild": true + }, + "children": [ + { + "id": "hover-trigger-content", + "type": "slot", + "slot": "trigger", + "defaultContent": { + "id": "trigger-element", + "type": "span", + "bindings": { + "children": "data.triggerLabel || 'Hover'" + } + } + } + ] + }, + { + "id": "hover-card-content", + "type": "HoverCardContent", + "bindings": { + "side": "data.side || 'bottom'", + "align": "data.align || 'center'", + "className": "data.className" + }, + "children": [ + { + "id": "hover-content", + "type": "slot", + "slot": "children" + } + ] + } + ] +} diff --git a/src/components/json-definitions/icon.json b/src/components/json-definitions/icon.json new file mode 100644 index 0000000..6cb8530 --- /dev/null +++ b/src/components/json-definitions/icon.json @@ -0,0 +1,11 @@ +{ + "id": "icon-root", + "type": "Icon", + "bindings": { + "name": "data.name", + "size": "data.size || 'md'", + "className": "data.className", + "color": "data.color", + "strokeWidth": "data.strokeWidth" + } +} diff --git a/src/lib/json-ui/interfaces/dialog.ts b/src/lib/json-ui/interfaces/dialog.ts new file mode 100644 index 0000000..b93b460 --- /dev/null +++ b/src/lib/json-ui/interfaces/dialog.ts @@ -0,0 +1,9 @@ +export interface DialogProps { + trigger?: React.ReactNode; + children?: React.ReactNode; + open?: boolean; + onOpenChange?: (open: boolean) => void; + className?: string; + title?: string; + description?: string; +} diff --git a/src/lib/json-ui/interfaces/drawer.ts b/src/lib/json-ui/interfaces/drawer.ts new file mode 100644 index 0000000..febbba5 --- /dev/null +++ b/src/lib/json-ui/interfaces/drawer.ts @@ -0,0 +1,10 @@ +export interface DrawerProps { + trigger?: React.ReactNode; + children?: React.ReactNode; + open?: boolean; + onOpenChange?: (open: boolean) => void; + direction?: 'left' | 'right' | 'top' | 'bottom'; + title?: string; + description?: string; + className?: string; +} diff --git a/src/lib/json-ui/interfaces/dropdown-menu.ts b/src/lib/json-ui/interfaces/dropdown-menu.ts new file mode 100644 index 0000000..18ae20e --- /dev/null +++ b/src/lib/json-ui/interfaces/dropdown-menu.ts @@ -0,0 +1,7 @@ +export interface DropdownMenuProps { + trigger?: React.ReactNode; + children?: React.ReactNode; + className?: string; + align?: 'start' | 'center' | 'end'; + side?: 'top' | 'right' | 'bottom' | 'left'; +} diff --git a/src/lib/json-ui/interfaces/form-field.ts b/src/lib/json-ui/interfaces/form-field.ts new file mode 100644 index 0000000..4b8b5d9 --- /dev/null +++ b/src/lib/json-ui/interfaces/form-field.ts @@ -0,0 +1,7 @@ +export interface FormFieldProps { + name?: string; + children?: React.ReactNode; + control?: any; + render?: (field: any) => React.ReactNode; + className?: string; +} diff --git a/src/lib/json-ui/interfaces/form.ts b/src/lib/json-ui/interfaces/form.ts new file mode 100644 index 0000000..5e495cd --- /dev/null +++ b/src/lib/json-ui/interfaces/form.ts @@ -0,0 +1,6 @@ +export interface FormProps { + children?: React.ReactNode; + className?: string; + form?: any; + onSubmit?: (values: any) => void | Promise; +} diff --git a/src/lib/json-ui/interfaces/heading.ts b/src/lib/json-ui/interfaces/heading.ts new file mode 100644 index 0000000..dc193f6 --- /dev/null +++ b/src/lib/json-ui/interfaces/heading.ts @@ -0,0 +1,5 @@ +export interface HeadingProps { + children?: React.ReactNode; + level?: 1 | 2 | 3 | 4 | 5 | 6; + className?: string; +} diff --git a/src/lib/json-ui/interfaces/hover-card.ts b/src/lib/json-ui/interfaces/hover-card.ts new file mode 100644 index 0000000..eefbe4b --- /dev/null +++ b/src/lib/json-ui/interfaces/hover-card.ts @@ -0,0 +1,7 @@ +export interface HoverCardProps { + trigger?: React.ReactNode; + children?: React.ReactNode; + side?: 'top' | 'right' | 'bottom' | 'left'; + align?: 'start' | 'center' | 'end'; + className?: string; +} diff --git a/src/lib/json-ui/interfaces/icon.ts b/src/lib/json-ui/interfaces/icon.ts new file mode 100644 index 0000000..ab2cf91 --- /dev/null +++ b/src/lib/json-ui/interfaces/icon.ts @@ -0,0 +1,7 @@ +export interface IconProps { + name?: string; + size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; + className?: string; + color?: string; + strokeWidth?: number; +} diff --git a/src/lib/json-ui/interfaces/index.ts b/src/lib/json-ui/interfaces/index.ts index 6de4c16..2bfba5b 100644 --- a/src/lib/json-ui/interfaces/index.ts +++ b/src/lib/json-ui/interfaces/index.ts @@ -43,3 +43,11 @@ export * from './calendar' export * from './card' export * from './checkbox' export * from './context-menu' +export * from './dialog' +export * from './drawer' +export * from './dropdown-menu' +export * from './form' +export * from './form-field' +export * from './heading' +export * from './hover-card' +export * from './icon' diff --git a/src/lib/json-ui/json-components.ts b/src/lib/json-ui/json-components.ts index 35c6407..dbf6489 100644 --- a/src/lib/json-ui/json-components.ts +++ b/src/lib/json-ui/json-components.ts @@ -45,6 +45,20 @@ import type { AvatarProps, AvatarGroupProps, BadgeProps, + BreadcrumbProps, + ButtonProps, + CalendarProps, + CardProps, + CheckboxProps, + ContextMenuProps, + DialogProps, + DrawerProps, + DropdownMenuProps, + FormProps, + FormFieldProps, + HeadingProps, + HoverCardProps, + IconProps, } from './interfaces' // Import JSON definitions @@ -85,6 +99,20 @@ import appLogoDef from '@/components/json-definitions/app-logo.json' import avatarDef from '@/components/json-definitions/avatar.json' import avatarGroupDef from '@/components/json-definitions/avatar-group.json' import badgeDef from '@/components/json-definitions/badge.json' +import breadcrumbDef from '@/components/json-definitions/breadcrumb.json' +import buttonDef from '@/components/json-definitions/button.json' +import calendarDef from '@/components/json-definitions/calendar.json' +import cardDef from '@/components/json-definitions/card.json' +import checkboxDef from '@/components/json-definitions/checkbox.json' +import contextMenuDef from '@/components/json-definitions/context-menu.json' +import dialogDef from '@/components/json-definitions/dialog.json' +import drawerDef from '@/components/json-definitions/drawer.json' +import dropdownMenuDef from '@/components/json-definitions/dropdown-menu.json' +import formDef from '@/components/json-definitions/form.json' +import formFieldDef from '@/components/json-definitions/form-field.json' +import headingDef from '@/components/json-definitions/heading.json' +import hoverCardDef from '@/components/json-definitions/hover-card.json' +import iconDef from '@/components/json-definitions/icon.json' // Create pure JSON components (no hooks) export const LoadingFallback = createJsonComponent(loadingFallbackDef) @@ -104,6 +132,20 @@ export const AppLogo = createJsonComponent(appLogoDef) export const Avatar = createJsonComponent(avatarDef) export const AvatarGroup = createJsonComponent(avatarGroupDef) export const Badge = createJsonComponent(badgeDef) +export const Breadcrumb = createJsonComponent(breadcrumbDef) +export const Button = createJsonComponent(buttonDef) +export const Calendar = createJsonComponent(calendarDef) +export const Card = createJsonComponent(cardDef) +export const Checkbox = createJsonComponent(checkboxDef) +export const ContextMenu = createJsonComponent(contextMenuDef) +export const Dialog = createJsonComponent(dialogDef) +export const Drawer = createJsonComponent(drawerDef) +export const DropdownMenu = createJsonComponent(dropdownMenuDef) +export const Form = createJsonComponent(formDef) +export const FormField = createJsonComponent(formFieldDef) +export const Heading = createJsonComponent(headingDef) +export const HoverCard = createJsonComponent(hoverCardDef) +export const Icon = createJsonComponent(iconDef) // Create JSON components with hooks export const SaveIndicator = createJsonComponentWithHooks(saveIndicatorDef, {