@rangka/client 0.1.0 → 0.1.2

package/src/widgets/components/DataWidget.tsx

@@ -1,189 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,160 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,130 +0,0 @@
-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,
-};