@object-ui/types 0.3.0 → 0.5.0

package/src/zod/index.zod.ts

@@ -0,0 +1,425 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @object-ui/types/zod - Zod Validation Schemas
+ * 
+ * Complete Zod validation schemas for all ObjectUI components.
+ * Following @objectstack/spec UI specification format.
+ * 
+ * ## Usage
+ * 
+ * ```typescript
+ * import { ButtonSchema, InputSchema, FormSchema } from '@object-ui/types/zod';
+ * 
+ * // Validate a schema
+ * const result = ButtonSchema.safeParse({
+ *   type: 'button',
+ *   label: 'Click Me',
+ *   variant: 'primary',
+ * });
+ * 
+ * if (result.success) {
+ *   console.log('Valid schema:', result.data);
+ * } else {
+ *   console.error('Validation errors:', result.error);
+ * }
+ * ```
+ * 
+ * @packageDocumentation
+ */
+
+// ============================================================================
+// Application - Global Configuration
+// ============================================================================
+export {
+  AppSchema,
+  AppActionSchema,
+  MenuItemSchema as AppMenuItemSchema,
+} from './app.zod.js';
+
+// ============================================================================
+// Base Schema - Foundation
+// ============================================================================
+export {
+  BaseSchema,
+  SchemaNodeSchema,
+  ComponentInputSchema,
+  ComponentMetaSchema,
+  ComponentConfigSchema,
+  HTMLAttributesSchema,
+  EventHandlersSchema,
+  StylePropsSchema,
+} from './base.zod.js';
+
+// ============================================================================
+// Layout Components - Structure & Organization
+// ============================================================================
+export {
+  DivSchema,
+  SpanSchema,
+  TextSchema,
+  ImageSchema,
+  IconSchema,
+  SeparatorSchema,
+  ContainerSchema,
+  FlexSchema,
+  StackSchema,
+  GridSchema,
+  CardSchema,
+  TabItemSchema,
+  TabsSchema,
+  ScrollAreaSchema,
+  ResizablePanelSchema,
+  ResizableSchema,
+  AspectRatioSchema,
+  PageSchema,
+  LayoutSchema,
+} from './layout.zod.js';
+
+// ============================================================================
+// Form Components - User Input & Interaction
+// ============================================================================
+export {
+  SelectOptionSchema,
+  RadioOptionSchema,
+  ComboboxOptionSchema,
+  CommandItemSchema,
+  CommandGroupSchema,
+  ValidationRuleSchema,
+  FieldConditionSchema,
+  ButtonSchema,
+  InputSchema,
+  TextareaSchema,
+  SelectSchema,
+  CheckboxSchema,
+  RadioGroupSchema,
+  SwitchSchema,
+  ToggleSchema,
+  SliderSchema,
+  FileUploadSchema,
+  DatePickerSchema,
+  CalendarSchema,
+  InputOTPSchema,
+  ComboboxSchema,
+  LabelSchema,
+  CommandSchema,
+  FormFieldSchema,
+  FormSchema,
+  FormComponentSchema,
+} from './form.zod.js';
+
+// ============================================================================
+// Data Display Components - Information Presentation
+// ============================================================================
+export {
+  AlertSchema,
+  StatisticSchema,
+  BadgeSchema,
+  AvatarSchema,
+  ListItemSchema,
+  ListSchema,
+  TableColumnSchema,
+  TableSchema,
+  DataTableSchema,
+  MarkdownSchema,
+  TreeNodeSchema,
+  TreeViewSchema,
+  ChartTypeSchema,
+  ChartSeriesSchema,
+  ChartSchema,
+  TimelineEventSchema,
+  TimelineSchema,
+  KbdSchema,
+  HtmlSchema,
+  DataDisplaySchema,
+} from './data-display.zod.js';
+
+// ============================================================================
+// Feedback Components - Status & Progress Indication
+// ============================================================================
+export {
+  LoadingSchema,
+  ProgressSchema,
+  SkeletonSchema,
+  ToastSchema,
+  ToasterSchema,
+  SpinnerSchema,
+  EmptySchema,
+  SonnerSchema,
+  FeedbackSchema,
+} from './feedback.zod.js';
+
+// ============================================================================
+// Disclosure Components - Collapsible Content
+// ============================================================================
+export {
+  AccordionItemSchema,
+  AccordionSchema,
+  CollapsibleSchema,
+  ToggleGroupItemSchema,
+  ToggleGroupSchema,
+  DisclosureSchema,
+} from './disclosure.zod.js';
+
+// ============================================================================
+// Overlay Components - Modals & Popovers
+// ============================================================================
+export {
+  DialogSchema,
+  AlertDialogSchema,
+  SheetSchema,
+  DrawerSchema,
+  PopoverSchema,
+  TooltipSchema,
+  HoverCardSchema,
+  MenuItemSchema,
+  DropdownMenuSchema,
+  ContextMenuSchema,
+  MenubarMenuSchema,
+  MenubarSchema,
+  OverlaySchema,
+} from './overlay.zod.js';
+
+// ============================================================================
+// Navigation Components - Menus & Navigation
+// ============================================================================
+export {
+  NavLinkSchema,
+  HeaderBarSchema,
+  SidebarSchema,
+  PaginationSchema,
+  NavigationMenuItemSchema,
+  NavigationMenuSchema,
+  ButtonGroupButtonSchema,
+  ButtonGroupSchema,
+  NavigationSchema,
+} from './navigation.zod.js';
+
+// ============================================================================
+// Complex Components - Advanced/Composite Components
+// ============================================================================
+export {
+  KanbanCardSchema,
+  KanbanColumnSchema,
+  KanbanSchema,
+  CalendarViewModeSchema,
+  CalendarEventSchema,
+  CalendarViewSchema,
+  FilterOperatorSchema,
+  FilterConditionSchema,
+  FilterGroupSchema,
+  FilterFieldSchema,
+  FilterBuilderSchema,
+  CarouselItemSchema,
+  CarouselSchema,
+  ChatMessageSchema,
+  ChatbotSchema,
+  DashboardWidgetLayoutSchema,
+  DashboardWidgetSchema,
+  DashboardSchema,
+  ComplexSchema,
+} from './complex.zod.js';
+
+// ============================================================================
+// ObjectQL Components - Smart Data Components
+// ============================================================================
+export {
+  HttpMethodSchema,
+  HttpRequestSchema,
+  ViewDataSchema,
+  ListColumnSchema,
+  SelectionConfigSchema,
+  PaginationConfigSchema,
+  SortConfigSchema,
+  ObjectGridSchema,
+  ObjectFormSchema,
+  ObjectViewSchema,
+  ObjectMapSchema,
+  ObjectGanttSchema,
+  ObjectCalendarSchema,
+  ObjectKanbanSchema,
+  ObjectChartSchema,
+  ListViewSchema,
+  ObjectQLComponentSchema,
+} from './objectql.zod.js';
+
+// ============================================================================
+// CRUD Components - Create, Read, Update, Delete Operations
+// ============================================================================
+export {
+  ActionExecutionModeSchema,
+  ActionCallbackSchema,
+  ActionConditionSchema,
+  ActionSchema,
+  CRUDOperationSchema,
+  CRUDFilterSchema,
+  CRUDToolbarSchema,
+  CRUDPaginationSchema,
+  CRUDSchema,
+  DetailSchema,
+  CRUDDialogSchema,
+  CRUDComponentSchema,
+} from './crud.zod.js';
+
+// ============================================================================
+// Phase 2 Schemas - Theme, Reports, Blocks, and Views
+// ============================================================================
+export {
+  ColorPaletteSchema,
+  TypographySchema,
+  SpacingScaleSchema,
+  BorderRadiusSchema,
+  ThemeModeSchema,
+  ThemeDefinitionSchema,
+  ThemeSchema,
+  ThemeSwitcherSchema,
+  ThemePreviewSchema,
+  ThemeComponentSchema,
+} from './theme.zod.js';
+
+export {
+  ReportExportFormatSchema,
+  ReportScheduleFrequencySchema,
+  ReportAggregationTypeSchema,
+  ReportFieldSchema,
+  ReportFilterSchema,
+  ReportGroupBySchema,
+  ReportSectionSchema,
+  ReportScheduleSchema,
+  ReportExportConfigSchema,
+  ReportSchema,
+  ReportBuilderSchema,
+  ReportViewerSchema,
+  ReportComponentSchema,
+} from './reports.zod.js';
+
+export {
+  BlockVariableSchema,
+  BlockSlotSchema,
+  BlockMetadataSchema,
+  BlockSchema,
+  BlockLibraryItemSchema,
+  BlockLibrarySchema,
+  BlockEditorSchema,
+  BlockInstanceSchema,
+  ComponentSchema,
+  BlockComponentSchema,
+} from './blocks.zod.js';
+
+export {
+  ViewTypeSchema,
+  DetailViewFieldSchema,
+  DetailViewSectionSchema,
+  DetailViewTabSchema,
+  DetailViewSchema,
+  ViewSwitcherSchema,
+  FilterUISchema,
+  SortUISchema,
+  ViewComponentSchema,
+} from './views.zod.js';
+
+// ============================================================================
+// Union Types - All Component Schemas
+// ============================================================================
+
+import { z } from 'zod';
+import { AppSchema } from './app.zod.js';
+import { LayoutSchema } from './layout.zod.js';
+import { FormComponentSchema } from './form.zod.js';
+import { DataDisplaySchema } from './data-display.zod.js';
+import { FeedbackSchema } from './feedback.zod.js';
+import { DisclosureSchema } from './disclosure.zod.js';
+import { OverlaySchema } from './overlay.zod.js';
+import { NavigationSchema } from './navigation.zod.js';
+import { ComplexSchema } from './complex.zod.js';
+import { ObjectQLComponentSchema } from './objectql.zod.js';
+import { CRUDComponentSchema } from './crud.zod.js';
+import { ThemeComponentSchema } from './theme.zod.js';
+import { ReportComponentSchema } from './reports.zod.js';
+import { BlockComponentSchema } from './blocks.zod.js';
+import { ViewComponentSchema } from './views.zod.js';
+
+/**
+ * Union of all component schemas.
+ * Use this for generic component rendering where the type is determined at runtime.
+ */
+export const AnyComponentSchema = z.union([
+  AppSchema,
+  LayoutSchema,
+  FormComponentSchema,
+  DataDisplaySchema,
+  FeedbackSchema,
+  DisclosureSchema,
+  OverlaySchema,
+  NavigationSchema,
+  ComplexSchema,
+  ObjectQLComponentSchema,
+  CRUDComponentSchema,
+  ThemeComponentSchema,
+  ReportComponentSchema,
+  BlockComponentSchema,
+  ViewComponentSchema,
+]);
+
+/**
+ * Validate a schema against the AnyComponentSchema
+ * 
+ * @param schema - The schema to validate
+ * @returns The validated and typed schema
+ * @throws ZodError if validation fails
+ * 
+ * @example
+ * ```typescript
+ * import { validateSchema } from '@object-ui/types/zod';
+ * 
+ * try {
+ *   const validSchema = validateSchema({
+ *     type: 'button',
+ *     label: 'Click Me',
+ *   });
+ *   console.log('Valid schema:', validSchema);
+ * } catch (error) {
+ *   console.error('Validation failed:', error);
+ * }
+ * ```
+ */
+export function validateSchema(schema: unknown) {
+  return AnyComponentSchema.parse(schema);
+}
+
+/**
+ * Safely validate a schema without throwing errors
+ * 
+ * @param schema - The schema to validate
+ * @returns Object with success boolean and either data or error
+ * 
+ * @example
+ * ```typescript
+ * import { safeValidateSchema } from '@object-ui/types/zod';
+ * 
+ * const result = safeValidateSchema({
+ *   type: 'button',
+ *   label: 'Click Me',
+ * });
+ * 
+ * if (result.success) {
+ *   console.log('Valid schema:', result.data);
+ * } else {
+ *   console.error('Validation errors:', result.error);
+ * }
+ * ```
+ */
+export function safeValidateSchema(schema: unknown) {
+  return AnyComponentSchema.safeParse(schema);
+}
+
+/**
+ * Version information
+ */
+export const SCHEMA_VERSION = '1.0.0';

package/src/zod/layout.zod.ts

@@ -0,0 +1,262 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @object-ui/types/zod - Layout Component Zod Validators
+ * 
+ * Zod validation schemas for layout and container components.
+ * Following @objectstack/spec UI specification format.
+ * 
+ * @module zod/layout
+ * @packageDocumentation
+ */
+
+import { z } from 'zod';
+import { BaseSchema, SchemaNodeSchema } from './base.zod.js';
+
+/**
+ * Div Schema - Basic HTML container
+ */
+export const DivSchema = BaseSchema.extend({
+  type: z.literal('div'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional(),
+});
+
+/**
+ * Span Schema - Inline text container
+ */
+export const SpanSchema = BaseSchema.extend({
+  type: z.literal('span'),
+  value: z.string().optional().describe('Text content'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional(),
+});
+
+/**
+ * Text Schema - Text display component
+ */
+export const TextSchema = BaseSchema.extend({
+  type: z.literal('text'),
+  value: z.string().optional().describe('Text content'),
+  variant: z.enum(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'caption', 'overline'])
+    .optional()
+    .default('body')
+    .describe('Text variant/style'),
+  align: z.enum(['left', 'center', 'right', 'justify']).optional().describe('Text alignment'),
+});
+
+/**
+ * Image Schema - Image component
+ */
+export const ImageSchema = BaseSchema.extend({
+  type: z.literal('image'),
+  src: z.string().describe('Image source URL'),
+  alt: z.string().optional().describe('Alt text for accessibility'),
+  width: z.union([z.string(), z.number()]).optional().describe('Image width'),
+  height: z.union([z.string(), z.number()]).optional().describe('Image height'),
+  objectFit: z.enum(['contain', 'cover', 'fill', 'none', 'scale-down']).optional().describe('Object fit property'),
+});
+
+/**
+ * Icon Schema - Icon component (Lucide icons)
+ */
+export const IconSchema = BaseSchema.extend({
+  type: z.literal('icon'),
+  name: z.string().describe('Icon name (lucide-react)'),
+  size: z.number().optional().default(24).describe('Icon size in pixels'),
+  color: z.string().optional().describe('Icon color'),
+});
+
+/**
+ * Separator Schema - Divider component
+ */
+export const SeparatorSchema = BaseSchema.extend({
+  type: z.literal('separator'),
+  orientation: z.enum(['horizontal', 'vertical']).optional().default('horizontal').describe('Separator orientation'),
+  decorative: z.boolean().optional().describe('Whether decorative'),
+});
+
+/**
+ * Container Schema - Generic container component
+ */
+export const ContainerSchema = BaseSchema.extend({
+  type: z.literal('container'),
+  maxWidth: z.union([
+    z.enum(['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'full', 'screen']),
+    z.boolean(),
+  ]).optional().default('lg').describe('Max width constraint'),
+  centered: z.boolean().optional().default(true).describe('Center the container'),
+  padding: z.number().optional().describe('Padding value'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional(),
+});
+
+/**
+ * Flex Schema - Flexbox layout component
+ */
+export const FlexSchema = BaseSchema.extend({
+  type: z.literal('flex'),
+  direction: z.enum(['row', 'col', 'row-reverse', 'col-reverse'])
+    .optional()
+    .default('row')
+    .describe('Flex direction'),
+  justify: z.enum(['start', 'end', 'center', 'between', 'around', 'evenly'])
+    .optional()
+    .default('start')
+    .describe('Justify content alignment'),
+  align: z.enum(['start', 'end', 'center', 'baseline', 'stretch'])
+    .optional()
+    .default('center')
+    .describe('Align items'),
+  gap: z.number().optional().default(2).describe('Gap between items (Tailwind scale 0-8)'),
+  wrap: z.boolean().optional().default(false).describe('Allow items to wrap'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional(),
+});
+
+/**
+ * Stack Schema - Vertical flex layout (shortcut)
+ */
+export const StackSchema = BaseSchema.extend({
+  type: z.literal('stack'),
+  direction: z.enum(['row', 'col', 'row-reverse', 'col-reverse']).optional(),
+  justify: z.enum(['start', 'end', 'center', 'between', 'around', 'evenly']).optional(),
+  align: z.enum(['start', 'end', 'center', 'baseline', 'stretch']).optional(),
+  gap: z.number().optional(),
+  wrap: z.boolean().optional(),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional(),
+});
+
+/**
+ * Grid Schema - CSS Grid layout component
+ */
+export const GridSchema = BaseSchema.extend({
+  type: z.literal('grid'),
+  columns: z.union([
+    z.number(),
+    z.record(z.string(), z.number()),
+  ]).optional().default(3).describe('Number of columns (responsive)'),
+  gap: z.number().optional().default(4).describe('Gap between items (Tailwind scale 0-8)'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional(),
+});
+
+/**
+ * Card Schema - Card component
+ */
+export const CardSchema = BaseSchema.extend({
+  type: z.literal('card'),
+  title: z.string().optional().describe('Card title'),
+  description: z.string().optional().describe('Card description'),
+  header: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Card header content'),
+  body: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Card body content'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Child components'),
+  footer: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Card footer content'),
+  variant: z.enum(['default', 'outline', 'ghost']).optional().default('default').describe('Card variant style'),
+  hoverable: z.boolean().optional().default(false).describe('Whether the card is hoverable'),
+  clickable: z.boolean().optional().default(false).describe('Whether the card is clickable'),
+  onClick: z.function().optional().describe('Click handler'),
+});
+
+/**
+ * Tab Item Schema
+ */
+export const TabItemSchema = z.object({
+  value: z.string().describe('Unique tab identifier'),
+  label: z.string().describe('Tab label'),
+  icon: z.string().optional().describe('Tab icon'),
+  disabled: z.boolean().optional().describe('Whether tab is disabled'),
+  content: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).describe('Tab content'),
+});
+
+/**
+ * Tabs Schema - Tabs component
+ */
+export const TabsSchema = BaseSchema.extend({
+  type: z.literal('tabs'),
+  defaultValue: z.string().optional().describe('Default active tab value'),
+  value: z.string().optional().describe('Controlled active tab value'),
+  orientation: z.enum(['horizontal', 'vertical']).optional().default('horizontal').describe('Tabs orientation'),
+  items: z.array(TabItemSchema).describe('Tab items configuration'),
+  onValueChange: z.function().optional().describe('Change handler'),
+});
+
+/**
+ * Scroll Area Schema
+ */
+export const ScrollAreaSchema = BaseSchema.extend({
+  type: z.literal('scroll-area'),
+  height: z.union([z.string(), z.number()]).optional().describe('Height of scroll container'),
+  width: z.union([z.string(), z.number()]).optional().describe('Width of scroll container'),
+  orientation: z.enum(['vertical', 'horizontal', 'both']).optional().default('vertical').describe('Scrollbar orientation'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional(),
+});
+
+/**
+ * Resizable Panel Schema
+ */
+export const ResizablePanelSchema = z.object({
+  id: z.string().describe('Unique panel identifier'),
+  defaultSize: z.number().optional().describe('Default size (percentage 0-100)'),
+  minSize: z.number().optional().describe('Minimum size (percentage 0-100)'),
+  maxSize: z.number().optional().describe('Maximum size (percentage 0-100)'),
+  content: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).describe('Panel content'),
+});
+
+/**
+ * Resizable Schema - Resizable panels component
+ */
+export const ResizableSchema = BaseSchema.extend({
+  type: z.literal('resizable'),
+  direction: z.enum(['horizontal', 'vertical']).optional().default('horizontal').describe('Direction of resizable panels'),
+  minHeight: z.union([z.string(), z.number()]).optional().describe('Minimum height'),
+  withHandle: z.boolean().optional().default(true).describe('Show resize handle'),
+  panels: z.array(ResizablePanelSchema).describe('Resizable panels'),
+});
+
+/**
+ * Aspect Ratio Schema
+ */
+export const AspectRatioSchema = BaseSchema.extend({
+  type: z.literal('aspect-ratio'),
+  ratio: z.number().optional().default(16 / 9).describe('Aspect ratio (width / height)'),
+  image: z.string().optional().describe('Image URL to display'),
+  alt: z.string().optional().describe('Image alt text'),
+  body: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Child components (alternative to image)'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Child components'),
+});
+
+/**
+ * Page Schema - Top-level page layout
+ */
+export const PageSchema = BaseSchema.extend({
+  type: z.literal('page'),
+  title: z.string().optional().describe('Page title'),
+  icon: z.string().optional().describe('Page icon (Lucide icon name)'),
+  description: z.string().optional().describe('Page description'),
+  body: z.array(SchemaNodeSchema).optional().describe('Main content array'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Alternative content prop'),
+});
+
+/**
+ * Layout Schema Union - All layout component schemas
+ */
+export const LayoutSchema = z.union([
+  DivSchema,
+  SpanSchema,
+  TextSchema,
+  ImageSchema,
+  IconSchema,
+  SeparatorSchema,
+  ContainerSchema,
+  FlexSchema,
+  StackSchema,
+  GridSchema,
+  CardSchema,
+  TabsSchema,
+  ScrollAreaSchema,
+  ResizableSchema,
+  AspectRatioSchema,
+  PageSchema,
+]);