@rangka/client 0.0.1

package/src/widgets/components/DataWidget.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import type { WidgetNode } from '@rangka/shared';
+import type { WidgetProps } from '../types.js';
+import { useModelRecord } from '../data/useModelRecord.js';
+import { useModelQuery } from '../data/useModelQuery.js';
+import { useWidgetContext, WidgetContextProvider } from '../hooks/useWidgetContext.js';
+import { WidgetRenderer } from '../renderer/WidgetRenderer.js';
+import type { WidgetContext } from '../context/types.js';
+
+export function DataWidget({ bind, props, on, childNodes }: WidgetProps) {
+  const ctx = useWidgetContext();
+  const modelName = ctx.model;
+  const id = bind.id ?? undefined;
+  const pageSize = props.pageSize as number | undefined;
+  const placeholder = props.placeholder as string | undefined;
+
+  if (!modelName) return null;
+
+  if (id) {
+    return (
+      <DataRecordMode
+        model={modelName}
+        id={id}
+        placeholder={placeholder}
+        on={on}
+        childNodes={childNodes}
+      />
+    );
+  }
+
+  return (
+    <DataListMode
+      model={modelName}
+      pageSize={pageSize}
+      placeholder={placeholder}
+      on={on}
+      childNodes={childNodes}
+    />
+  );
+}
+
+function DataRecordMode({
+  model,
+  id,
+  placeholder,
+  on,
+  childNodes,
+}: {
+  model: string;
+  id: string;
+  placeholder?: string;
+  on: Record<string, (...args: unknown[]) => void>;
+  childNodes?: WidgetNode[];
+}) {
+  const parentCtx = useWidgetContext();
+  const { data, isLoading, error } = useModelRecord({ model, id });
+
+  React.useEffect(() => {
+    if (error) on.error?.({ message: error.message });
+  }, [error, on]);
+
+  React.useEffect(() => {
+    if (data) on.load?.({ record: data });
+  }, [data, on]);
+
+  if (isLoading) {
+    if (placeholder)
+      return (
+        <div data-rangka-widget="data" data-state="loading">
+          {placeholder}
+        </div>
+      );
+    return null;
+  }
+
+  if (!data) {
+    if (placeholder)
+      return (
+        <div data-rangka-widget="data" data-state="empty">
+          {placeholder}
+        </div>
+      );
+    return null;
+  }
+
+  const ctx: WidgetContext = {
+    record: data,
+    model,
+    mode: 'view',
+    parent: parentCtx,
+  };
+
+  return (
+    <WidgetContextProvider value={ctx}>
+      <div data-rangka-widget="data">
+        <DataChildren childNodes={childNodes} />
+      </div>
+    </WidgetContextProvider>
+  );
+}
+
+function DataListMode({
+  model,
+  pageSize,
+  placeholder,
+  on,
+  childNodes,
+}: {
+  model: string;
+  pageSize?: number;
+  placeholder?: string;
+  on: Record<string, (...args: unknown[]) => void>;
+  childNodes?: WidgetNode[];
+}) {
+  const parentCtx = useWidgetContext();
+  const { data, isLoading, error } = useModelQuery({
+    model,
+    pageSize: pageSize ?? 20,
+  });
+
+  React.useEffect(() => {
+    if (error) on.error?.({ message: error.message });
+  }, [error, on]);
+
+  React.useEffect(() => {
+    if (data && data.length > 0) on.load?.({ records: data });
+  }, [data, on]);
+
+  if (isLoading) {
+    if (placeholder)
+      return (
+        <div data-rangka-widget="data" data-state="loading">
+          {placeholder}
+        </div>
+      );
+    return null;
+  }
+
+  if (!data || data.length === 0) {
+    if (placeholder)
+      return (
+        <div data-rangka-widget="data" data-state="empty">
+          {placeholder}
+        </div>
+      );
+    return null;
+  }
+
+  const ctx: WidgetContext = {
+    record: data[0],
+    records: data,
+    model,
+    mode: 'view',
+    parent: parentCtx,
+  };
+
+  return (
+    <WidgetContextProvider value={ctx}>
+      <div data-rangka-widget="data">
+        <DataChildren childNodes={childNodes} />
+      </div>
+    </WidgetContextProvider>
+  );
+}
+
+function DataChildren({ childNodes }: { childNodes?: WidgetNode[] }) {
+  if (!childNodes || childNodes.length === 0) return null;
+
+  return (
+    <>
+      {childNodes.map((child, i) => (
+        <WidgetRenderer key={child.id ?? i} node={child} />
+      ))}
+    </>
+  );
+}
+
+DataWidget.widgetMeta = {
+  name: 'data',
+  label: 'Data',
+  category: 'data' as const,
+  schema: {
+    placeholder: { type: 'string' as const },
+    pageSize: { type: 'number' as const },
+  },
+  binding: 'model' as const,
+  triggers: ['load', 'error'],
+  container: true,
+};

package/src/widgets/components/DatePickerWidget.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import { Field, FieldLabel } from '@/components/ui/field';
+import { CalendarIcon } from 'lucide-react';
+import { format, parseISO } from 'date-fns';
+import type { WidgetProps } from '../types.js';
+
+export function DatePickerWidget({ props, bind, on }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
+  const [open, setOpen] = useState(false);
+  const error = bind.error;
+
+  const rawValue = bind.value as string | null | undefined;
+  const dateValue = rawValue ? parseISO(rawValue) : undefined;
+
+  const handleSelect = (day: Date | undefined) => {
+    if (day) {
+      const iso = format(day, 'yyyy-MM-dd');
+      bind.setValue?.(iso);
+      on.change?.(iso);
+    }
+    setOpen(false);
+  };
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            disabled={disabled}
+            className="w-full justify-start text-left font-normal h-8 text-xs"
+          >
+            <CalendarIcon className="mr-2 size-3.5 text-muted-foreground" />
+            {dateValue ? (
+              format(dateValue, 'PPP')
+            ) : (
+              <span className="text-muted-foreground">Pick a date</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={dateValue}
+            onSelect={handleSelect}
+            captionLayout="dropdown"
+            startMonth={new Date(1900, 0)}
+            endMonth={new Date(2100, 11)}
+          />
+        </PopoverContent>
+      </Popover>
+      {error && <p className="text-xs text-destructive mt-1">{error}</p>}
+    </Field>
+  );
+}
+
+DatePickerWidget.widgetMeta = {
+  name: 'datepicker',
+  label: 'Date Picker',
+  category: 'input' as const,
+  schema: {
+    label: { type: 'string' as const },
+    disabled: { type: 'boolean' as const, default: false },
+  },
+  binding: 'field' as const,
+  triggers: ['change'],
+  container: false,
+};

package/src/widgets/components/DatetimeWidget.tsx

@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from '@/components/ui/select';
+import { Calendar } from '@/components/ui/calendar';
+import { Field, FieldLabel } from '@/components/ui/field';
+import { CalendarIcon } from 'lucide-react';
+import { format, parseISO, setHours, setMinutes } from 'date-fns';
+import type { WidgetProps } from '../types.js';
+
+const HOURS = Array.from({ length: 12 }, (_, i) => (i === 0 ? 12 : i).toString());
+const MINUTES = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'));
+const PERIODS = ['AM', 'PM'] as const;
+
+export function DatetimeWidget({ props, bind, on }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
+  const [open, setOpen] = useState(false);
+
+  const rawValue = bind.value as string | null | undefined;
+  const dateValue = rawValue ? parseISO(rawValue) : undefined;
+
+  const hours = dateValue ? dateValue.getHours() : 0;
+  const minutes = dateValue ? dateValue.getMinutes() : 0;
+  const period = hours >= 12 ? 'PM' : 'AM';
+  const displayHour = hours % 12 === 0 ? 12 : hours % 12;
+
+  const updateValue = (day: Date | undefined, h: number, m: number) => {
+    if (!day) return;
+    let d = setHours(day, h);
+    d = setMinutes(d, m);
+    const iso = d.toISOString();
+    bind.setValue?.(iso);
+    on.change?.(iso);
+  };
+
+  const handleSelect = (day: Date | undefined) => {
+    if (day) {
+      updateValue(day, hours, minutes);
+    }
+  };
+
+  const handleHourChange = (value: string) => {
+    const h12 = parseInt(value);
+    const h24 = period === 'AM' ? (h12 === 12 ? 0 : h12) : h12 === 12 ? 12 : h12 + 12;
+    const day = dateValue ?? new Date();
+    updateValue(day, h24, minutes);
+  };
+
+  const handleMinuteChange = (value: string) => {
+    const m = parseInt(value);
+    const day = dateValue ?? new Date();
+    updateValue(day, hours, m);
+  };
+
+  const handlePeriodChange = (value: string) => {
+    const h12 = displayHour;
+    const h24 = value === 'AM' ? (h12 === 12 ? 0 : h12) : h12 === 12 ? 12 : h12 + 12;
+    const day = dateValue ?? new Date();
+    updateValue(day, h24, minutes);
+  };
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            disabled={disabled}
+            className="w-full justify-start text-left font-normal h-8 text-xs"
+          >
+            <CalendarIcon className="mr-2 size-3.5 text-muted-foreground" />
+            {dateValue ? (
+              format(dateValue, 'PPP hh:mm a')
+            ) : (
+              <span className="text-muted-foreground">Pick date and time</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={dateValue}
+            onSelect={handleSelect}
+            captionLayout="dropdown"
+            startMonth={new Date(1900, 0)}
+            endMonth={new Date(2100, 11)}
+          />
+          <div className="flex items-center gap-2 border-t border-border px-3 py-2">
+            <Select
+              value={displayHour.toString()}
+              onValueChange={handleHourChange}
+              disabled={disabled}
+            >
+              <SelectTrigger className="w-16 h-7 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent position="popper" className="max-h-48">
+                {HOURS.map((h) => (
+                  <SelectItem key={h} value={h} className="text-xs">
+                    {h}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <span className="text-xs text-muted-foreground">:</span>
+            <Select
+              value={minutes.toString().padStart(2, '0')}
+              onValueChange={handleMinuteChange}
+              disabled={disabled}
+            >
+              <SelectTrigger className="w-16 h-7 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent position="popper" className="max-h-48">
+                {MINUTES.map((m) => (
+                  <SelectItem key={m} value={m} className="text-xs">
+                    {m}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select value={period} onValueChange={handlePeriodChange} disabled={disabled}>
+              <SelectTrigger className="w-16 h-7 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {PERIODS.map((p) => (
+                  <SelectItem key={p} value={p} className="text-xs">
+                    {p}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </Field>
+  );
+}
+
+DatetimeWidget.widgetMeta = {
+  name: 'datetime',
+  label: 'Date & Time',
+  category: 'input' as const,
+  schema: {
+    label: { type: 'string' as const },
+    disabled: { type: 'boolean' as const, default: false },
+  },
+  binding: 'field' as const,
+  triggers: ['change'],
+  container: false,
+};

package/src/widgets/components/DividerWidget.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Separator } from '@/components/ui/separator';
+import type { WidgetProps } from '../types.js';
+
+const spacingMap: Record<string, string> = {
+  none: 'my-0',
+  sm: 'my-2',
+  md: 'my-4',
+  lg: 'my-6',
+  xl: 'my-8',
+};
+
+export function DividerWidget({ props }: WidgetProps) {
+  const margin = (props.margin as string) ?? (props.marginY as string) ?? 'md';
+  const className = spacingMap[margin] ?? spacingMap.md;
+
+  return <Separator className={className} />;
+}
+
+DividerWidget.widgetMeta = {
+  name: 'divider',
+  label: 'Divider',
+  category: 'layout' as const,
+  schema: {
+    margin: {
+      type: 'enum' as const,
+      options: ['none', 'sm', 'md', 'lg', 'xl'],
+    },
+    marginY: {
+      type: 'enum' as const,
+      options: ['none', 'sm', 'md', 'lg', 'xl'],
+    },
+  },
+  binding: 'none' as const,
+  triggers: [],
+  container: false,
+};

package/src/widgets/components/DrawerWidget.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import type { WidgetProps } from '../types.js';
+import { usePageState } from '../hooks/usePageState.js';
+
+const sizeMap = {
+  sm: 'w-80',
+  md: 'w-[28rem]',
+  lg: 'w-[40rem]',
+};
+
+export function DrawerWidget({ props, children }: WidgetProps) {
+  const title = (props.title as string) ?? '';
+  const size = (props.width as 'sm' | 'md' | 'lg') ?? 'md';
+  const closable = (props.closable as boolean) ?? true;
+  const visibleField = props._visibleField as string | undefined;
+  const state = usePageState();
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open && closable && visibleField && visibleField.startsWith('$state.')) {
+      const key = visibleField.slice(7);
+      state.set(key, false);
+    }
+  };
+
+  return (
+    <Sheet open={true} onOpenChange={handleOpenChange}>
+      <SheetContent className={sizeMap[size]} side="right">
+        {title && (
+          <SheetHeader>
+            <SheetTitle>{title}</SheetTitle>
+          </SheetHeader>
+        )}
+        <div className="flex-1 overflow-y-auto p-4">{children}</div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+DrawerWidget.widgetMeta = {
+  name: 'drawer',
+  label: 'Drawer',
+  category: 'layout' as const,
+  schema: {
+    width: { type: 'enum' as const, options: ['sm', 'md', 'lg'], default: 'md' },
+    title: { type: 'string' as const },
+    closable: { type: 'boolean' as const, default: true },
+  },
+  binding: 'none' as const,
+  triggers: [],
+  container: true,
+};

package/src/widgets/components/DynamicLinkWidget.tsx

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from '@/components/ui/command';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from '@/components/ui/select';
+import { Field, FieldLabel } from '@/components/ui/field';
+import { cn } from '@/lib/utils';
+import type { WidgetProps } from '../types.js';
+
+export function DynamicLinkWidget({ props, bind, on, context }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
+  const models = (props.models as string[]) ?? [];
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+
+  const options = (bind.meta?.options ?? []) as { label: string; value: string }[];
+  const currentValue = bind.value as string | null | undefined;
+  const selectedOption = options.find((o) => o.value === currentValue);
+
+  // The model type field name from the dynamicLink config
+  const modelField = (props.modelField as string) ?? '';
+  const currentModel = (context.record[modelField] as string) ?? '';
+
+  const handleModelChange = (model: string) => {
+    // Update the model type field on the record
+    on.change?.({ model, value: null });
+  };
+
+  const handleRecordSelect = (value: string) => {
+    bind.setValue?.(value);
+    on.change?.({ model: currentModel, value });
+    setOpen(false);
+    setSearch('');
+  };
+
+  const handleSearchChange = (value: string) => {
+    setSearch(value);
+    on.search?.(value);
+  };
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className="flex gap-2">
+        <Select value={currentModel} onValueChange={handleModelChange} disabled={disabled}>
+          <SelectTrigger className="w-40 h-7 text-xs">
+            <SelectValue placeholder="Model..." />
+          </SelectTrigger>
+          <SelectContent>
+            {models.map((m) => (
+              <SelectItem key={m} value={m}>
+                {m}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={open}
+              disabled={disabled || !currentModel}
+              className="flex-1 justify-between font-normal h-7 text-xs"
+            >
+              {selectedOption ? (
+                selectedOption.label
+              ) : (
+                <span className="text-muted-foreground">Select record...</span>
+              )}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+            <Command shouldFilter={false}>
+              <CommandInput
+                placeholder="Search..."
+                value={search}
+                onValueChange={handleSearchChange}
+              />
+              <CommandList>
+                <CommandEmpty>No results found.</CommandEmpty>
+                <CommandGroup>
+                  {options.map((opt) => (
+                    <CommandItem
+                      key={opt.value}
+                      value={opt.value}
+                      onSelect={() => handleRecordSelect(opt.value)}
+                      className={cn(opt.value === currentValue && 'bg-accent')}
+                    >
+                      {opt.label}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </Field>
+  );
+}
+
+DynamicLinkWidget.widgetMeta = {
+  name: 'dynamic-link',
+  label: 'Dynamic Link',
+  category: 'input' as const,
+  schema: {
+    label: { type: 'string' as const },
+    modelField: { type: 'string' as const },
+    models: { type: 'array' as const },
+    disabled: { type: 'boolean' as const, default: false },
+  },
+  binding: 'field' as const,
+  triggers: ['change', 'search'],
+  container: false,
+};