diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index a74292e..b920475 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -1,6 +1,5 @@ // Auto-generated exports - DO NOT EDIT MANUALLY // JSON-based atom imports -export { InfoBox, KeyValue, Label, List, ListItem, LiveIndicator, LoadingSpinner, LoadingState, MetricDisplay, Modal, Notification, NumberInput } from '@/lib/json-ui/json-components' export { ActionButton } from './ActionButton' export { ActionCard } from './ActionCard' @@ -83,7 +82,6 @@ export { StatusIcon } from './StatusIcon' export { StepIndicator } from './StepIndicator' export { Stepper } from './Stepper' export { Switch } from './Switch' -export { TabIcon } from './TabIcon' export { Table } from './Table' export { Tabs } from './Tabs' export { Tag } from './Tag' @@ -93,7 +91,6 @@ export { TextGradient } from './TextGradient' export { TextHighlight } from './TextHighlight' export { Timeline } from './Timeline' export { Timestamp } from './Timestamp' -export { TipsCard } from './TipsCard' export { Toggle } from './Toggle' export { Tooltip } from './Tooltip' export { TreeIcon } from './TreeIcon' diff --git a/src/components/json-definitions/data-table.json b/src/components/json-definitions/data-table.json new file mode 100644 index 0000000..c604500 --- /dev/null +++ b/src/components/json-definitions/data-table.json @@ -0,0 +1,143 @@ +{ + "id": "data-table-root", + "type": "div", + "bindings": { + "className": { + "source": "className", + "transform": "(() => { return 'rounded-md border ' + (data || ''); })()" + } + }, + "children": [ + { + "id": "data-table-wrapper", + "type": "Table", + "children": [ + { + "id": "data-table-header", + "type": "TableHeader", + "children": [ + { + "id": "data-table-header-row", + "type": "TableRow", + "children": [ + { + "id": "data-table-header-columns", + "type": "forEach", + "bindings": { + "items": "columns", + "children": { + "id": "data-table-header-cell", + "type": "TableHead", + "bindings": { + "style": { + "transform": "(() => { return { width: data.width || 'auto' }; })()" + }, + "className": { + "transform": "(() => { return data.sortable ? 'cursor-pointer select-none' : ''; })()" + } + }, + "children": [ + { + "id": "data-table-header-cell-content", + "bindings": { + "children": "header" + } + } + ] + } + } + } + ] + } + ] + }, + { + "id": "data-table-body", + "type": "TableBody", + "children": [ + { + "id": "data-table-rows", + "type": "conditional", + "conditional": { + "if": { + "source": "data", + "transform": "data.length === 0" + } + }, + "children": [ + { + "id": "data-table-empty-row", + "type": "TableRow", + "children": [ + { + "id": "data-table-empty-cell", + "type": "TableCell", + "bindings": { + "colSpan": { + "transform": "$props.columns.length" + } + }, + "props": { + "className": "text-center py-8 text-muted-foreground" + }, + "children": [ + { + "id": "data-table-empty-message", + "bindings": { + "children": "emptyMessage" + } + } + ] + } + ] + } + ] + }, + { + "id": "data-table-data-rows", + "type": "forEach", + "bindings": { + "items": "data" + }, + "children": { + "id": "data-table-data-row", + "type": "TableRow", + "bindings": { + "onClick": { + "transform": "(() => { return () => $props.onRowClick?.(data); })()" + }, + "className": { + "transform": "$props.onRowClick ? 'cursor-pointer' : ''" + } + }, + "children": [ + { + "id": "data-table-data-cells", + "type": "forEach", + "bindings": { + "items": "columns" + }, + "children": { + "id": "data-table-data-cell", + "type": "TableCell", + "children": [ + { + "id": "data-table-data-cell-content", + "bindings": { + "children": { + "transform": "(() => { const column = data; const rowData = $root.data; const cellValue = rowData[column.key]; return column.cell ? column.cell(rowData) : cellValue; })()" + } + } + } + ] + } + } + ] + } + } + ] + } + ] + } + ] +} diff --git a/src/lib/json-ui/interfaces/index.ts b/src/lib/json-ui/interfaces/index.ts index dd2b2ec..6e792de 100644 --- a/src/lib/json-ui/interfaces/index.ts +++ b/src/lib/json-ui/interfaces/index.ts @@ -1,3 +1,14 @@ +export * from './binding-indicator' +export * from './button-group' +export * from './chip' +export * from './circular-progress' +export * from './code' +export * from './command-palette' +export * from './completion-card' +export * from './component-palette-item' +export * from './confirm-button' +export * from './data-source-badge' +export * from './data-table' export * from './loading-fallback' export * from './navigation-item' export * from './page-header-content' diff --git a/src/lib/json-ui/json-components.ts b/src/lib/json-ui/json-components.ts index 869d88e..56d69b7 100644 --- a/src/lib/json-ui/json-components.ts +++ b/src/lib/json-ui/json-components.ts @@ -6,6 +6,17 @@ import { createJsonComponent } from './create-json-component' import { createJsonComponentWithHooks } from './create-json-component-with-hooks' import type { + BindingIndicatorProps, + ButtonGroupProps, + ChipProps, + CircularProgressProps, + CodeProps, + CommandPaletteProps, + CompletionCardProps, + ComponentPaletteItemProps, + ConfirmButtonProps, + DataSourceBadgeProps, + DataTableProps, LoadingFallbackProps, NavigationItemProps, PageHeaderContentProps, @@ -52,12 +63,20 @@ import type { CardProps, CheckboxProps, ContextMenuProps, + DatePickerProps, + DetailRowProps, DialogProps, + DividerProps, DrawerProps, DropdownMenuProps, + EmptyMessageProps, + ErrorBadgeProps, + FileIconProps, FormProps, FormFieldProps, + GlowCardProps, HeadingProps, + HelperTextProps, HoverCardProps, IconProps, InputOTPProps, @@ -110,6 +129,17 @@ import type { } from './interfaces' // Import JSON definitions +import bindingIndicatorDef from '@/components/json-definitions/binding-indicator.json' +import buttonGroupDef from '@/components/json-definitions/button-group.json' +import chipDef from '@/components/json-definitions/chip.json' +import circularProgressDef from '@/components/json-definitions/circular-progress.json' +import codeDef from '@/components/json-definitions/code.json' +import commandPaletteDef from '@/components/json-definitions/command-palette.json' +import completionCardDef from '@/components/json-definitions/completion-card.json' +import componentPaletteItemDef from '@/components/json-definitions/component-palette-item.json' +import confirmButtonDef from '@/components/json-definitions/confirm-button.json' +import dataSourceBadgeDef from '@/components/json-definitions/data-source-badge.json' +import dataTableDef from '@/components/json-definitions/data-table.json' import loadingFallbackDef from '@/components/json-definitions/loading-fallback.json' import navigationItemDef from '@/components/json-definitions/navigation-item.json' import pageHeaderContentDef from '@/components/json-definitions/page-header-content.json' @@ -156,6 +186,15 @@ 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 datePickerDef from '@/components/json-definitions/date-picker.json' +import detailRowDef from '@/components/json-definitions/detail-row.json' +import dividerDef from '@/components/json-definitions/divider.json' +import emptyMessageDef from '@/components/json-definitions/empty-message.json' +import errorBadgeDef from '@/components/json-definitions/error-badge.json' +import fileIconDef from '@/components/json-definitions/file-icon.json' +import formDef from '@/components/json-definitions/form.json' +import glowCardDef from '@/components/json-definitions/glow-card.json' +import helperTextDef from '@/components/json-definitions/helper-text.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' @@ -211,9 +250,21 @@ import notificationDef from '@/components/json-definitions/notification.json' import numberInputDef from '@/components/json-definitions/number-input.json' // Create pure JSON components (no hooks) +export const BindingIndicator = createJsonComponent(bindingIndicatorDef) +export const ButtonGroup = createJsonComponent(buttonGroupDef) +export const Chip = createJsonComponent(chipDef) +export const CircularProgress = createJsonComponent(circularProgressDef) +export const Code = createJsonComponent(codeDef) +export const CommandPalette = createJsonComponent(commandPaletteDef) +export const CompletionCard = createJsonComponent(completionCardDef) +export const ComponentPaletteItem = createJsonComponent(componentPaletteItemDef) +export const ConfirmButton = createJsonComponent(confirmButtonDef) +export const DataSourceBadge = createJsonComponent(dataSourceBadgeDef) +export const DataTable = createJsonComponent>(dataTableDef) export const LoadingFallback = createJsonComponent(loadingFallbackDef) export const NavigationItem = createJsonComponent(navigationItemDef) export const PageHeaderContent = createJsonComponent(pageHeaderContentDef) +export const PageHeader = createJsonComponent(pageHeaderDef) export const ComponentBindingDialog = createJsonComponent(componentBindingDialogDef) export const DataSourceEditorDialog = createJsonComponent(dataSourceEditorDialogDef) export const GitHubBuildStatus = createJsonComponent(githubBuildStatusDef) @@ -234,23 +285,34 @@ export const Calendar = createJsonComponent(calendarDef) export const Card = createJsonComponent(cardDef) export const Checkbox = createJsonComponent(checkboxDef) export const ContextMenu = createJsonComponent(contextMenuDef) +export const DatePicker = createJsonComponent(datePickerDef) +export const DetailRow = createJsonComponent(detailRowDef) export const Dialog = createJsonComponent(dialogDef) export const Drawer = createJsonComponent(drawerDef) +export const Divider = createJsonComponent(dividerDef) export const DropdownMenu = createJsonComponent(dropdownMenuDef) export const Form = createJsonComponent(formDef) export const FormField = createJsonComponent(formFieldDef) +export const GlowCard = createJsonComponent(glowCardDef) export const Heading = createJsonComponent(headingDef) +export const HelperText = createJsonComponent(helperTextDef) export const HoverCard = createJsonComponent(hoverCardDef) export const Icon = createJsonComponent(iconDef) export const InputOTP = createJsonComponent(inputOtpDef) export const Label = createJsonComponent(labelDef) export const Pagination = createJsonComponent(paginationDef) export const Progress = createJsonComponent(progressDef) +export const ProgressBar = createJsonComponent(progressBarDef) +export const Pulse = createJsonComponent(pulseDef) +export const QuickActionButton = createJsonComponent(quickActionButtonDef) export const RadioGroup = createJsonComponent(radioGroupDef) +export const Sparkle = createJsonComponent(sparkleDef) export const RangeSlider = createJsonComponent(rangeSliderDef) export const Rating = createJsonComponent(ratingDef) export const ScrollArea = createJsonComponent(scrollAreaDef) export const ScrollAreaThumb = createJsonComponent(scrollAreaThumbDef) +export const SearchInput = createJsonComponent(searchInputDef) +export const SeedDataStatus = createJsonComponent(seedDataStatusDef) export const Select = createJsonComponent(selectDef) export const Separator = createJsonComponent(separatorDef) export const Skeleton = createJsonComponent(skeletonDef)