@rangka/client 0.1.0 → 0.1.2

package/src/widgets/components/ModalWidget.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import type { WidgetProps } from '../types.js';
-import { usePageState } from '../hooks/usePageState.js';
-
-const sizeMap = {
-  sm: 'sm:max-w-sm',
-  md: 'sm:max-w-lg',
-  lg: 'sm:max-w-3xl',
-};
-
-export function ModalWidget({ props, children }: WidgetProps) {
-  const title = (props.title as string) ?? '';
-  const size = (props.size 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 (
-    <Dialog open={true} onOpenChange={handleOpenChange}>
-      <DialogContent className={sizeMap[size]} showCloseButton={closable}>
-        {title && (
-          <DialogHeader>
-            <DialogTitle>{title}</DialogTitle>
-          </DialogHeader>
-        )}
-        {children}
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-ModalWidget.widgetMeta = {
-  name: 'modal',
-  label: 'Modal',
-  category: 'layout' as const,
-  schema: {
-    size: { 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/MoneyWidget.tsx

@@ -1,80 +0,0 @@
-import React, { useState } from 'react';
-import { Input } from '@/components/ui/input';
-import { Field, FieldLabel } from '@/components/ui/field';
-import type { WidgetProps } from '../types.js';
-
-export function MoneyWidget({ props, bind, on }: WidgetProps) {
-  const label = (props.label as string) ?? bind.meta?.label ?? '';
-  const currency = (props.currency as string) ?? '$';
-  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
-  const readOnly = (props.readOnly as boolean) ?? bind.meta?.readOnly ?? false;
-  const error = bind.error;
-
-  const rawValue = bind.value as number | null | undefined;
-  const [displayValue, setDisplayValue] = useState<string>(
-    rawValue != null ? rawValue.toFixed(2) : '',
-  );
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const text = e.target.value;
-    setDisplayValue(text);
-    const num = parseFloat(text);
-    if (!isNaN(num)) {
-      bind.setValue?.(num);
-      on.change?.(num);
-    } else if (text === '') {
-      bind.setValue?.(null);
-      on.change?.(null);
-    }
-  };
-
-  const handleFocus = () => {
-    on.focus?.();
-  };
-
-  const handleBlur = () => {
-    const num = parseFloat(displayValue);
-    if (!isNaN(num)) {
-      setDisplayValue(num.toFixed(2));
-    }
-    on.blur?.();
-  };
-
-  return (
-    <Field>
-      {label && <FieldLabel>{label}</FieldLabel>}
-      <div className="flex items-center">
-        <span className="inline-flex h-8 items-center border border-r-0 border-input bg-muted px-2 text-xs text-muted-foreground">
-          {currency}
-        </span>
-        <Input
-          type="text"
-          inputMode="decimal"
-          value={displayValue}
-          onChange={handleChange}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          disabled={disabled}
-          readOnly={readOnly}
-          placeholder="0.00"
-        />
-      </div>
-      {error && <p className="text-xs text-destructive mt-1">{error}</p>}
-    </Field>
-  );
-}
-
-MoneyWidget.widgetMeta = {
-  name: 'money',
-  label: 'Money',
-  category: 'input' as const,
-  schema: {
-    label: { type: 'string' as const },
-    currency: { type: 'string' as const, default: '$' },
-    disabled: { type: 'boolean' as const, default: false },
-    readOnly: { type: 'boolean' as const, default: false },
-  },
-  binding: 'field' as const,
-  triggers: ['change', 'focus', 'blur'],
-  container: false,
-};

package/src/widgets/components/RepeatWidget.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import type { WidgetProps } from '../types.js';
-import { useWidgetContext } from '../hooks/useWidgetContext.js';
-import { WidgetContextProvider } from '../hooks/useWidgetContext.js';
-import { buildRowContext } from '../context/builder.js';
-
-export function RepeatWidget({ props, bind: bindProp, children }: WidgetProps) {
-  const ctx = useWidgetContext();
-
-  const layout = (props.layout as string) ?? 'list';
-  const columns = (props.columns as number) ?? 3;
-  const gap = (props.gap as string) ?? 'md';
-
-  // Determine source records:
-  // 1. If bind.value is an array (from bind.field on parent record), use that
-  // 2. Otherwise, read records from parent context (data widget in collection mode)
-  let records: Record<string, unknown>[] = [];
-
-  if (Array.isArray(bindProp.value)) {
-    records = bindProp.value as Record<string, unknown>[];
-  } else if (ctx.records) {
-    records = ctx.records;
-  }
-
-  const gapMap: Record<string, string> = { sm: '8px', md: '16px', lg: '24px' };
-
-  const containerStyle: React.CSSProperties =
-    layout === 'grid'
-      ? {
-          display: 'grid',
-          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-          gap: gapMap[gap] ?? gapMap.md,
-        }
-      : {
-          display: 'flex',
-          flexDirection: 'column',
-          gap: gapMap[gap] ?? gapMap.md,
-        };
-
-  return (
-    <div style={containerStyle} data-widget="repeat" data-layout={layout}>
-      {records.map((record, index) => {
-        const rowCtx = buildRowContext(record, index, ctx);
-        return (
-          <WidgetContextProvider key={(record.id as string) ?? index} value={rowCtx}>
-            <div data-repeat-index={index}>{children}</div>
-          </WidgetContextProvider>
-        );
-      })}
-    </div>
-  );
-}
-
-RepeatWidget.widgetMeta = {
-  name: 'repeat',
-  label: 'Repeat',
-  category: 'data' as const,
-  schema: {
-    layout: { type: 'enum' as const, options: ['list', 'grid'], default: 'list' },
-    columns: { type: 'number' as const, default: 3 },
-    gap: { type: 'enum' as const, options: ['sm', 'md', 'lg'], default: 'md' },
-  },
-  binding: 'field' as const,
-  triggers: [],
-  container: true,
-};

package/src/widgets/components/ScrollAreaWidget.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { cn } from '@/lib/utils';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import type { WidgetProps } from '../types.js';
-
-export function ScrollAreaWidget({ props, children }: WidgetProps) {
-  const direction = (props.direction as 'vertical' | 'horizontal' | 'both') ?? 'vertical';
-  const height = props.height as string | undefined;
-  const maxHeight = props.maxHeight as string | undefined;
-
-  return (
-    <ScrollArea
-      className={cn(
-        direction === 'horizontal' && 'overflow-x-auto',
-        height && (height === '100%' ? 'h-full' : `h-[${height}]`),
-        maxHeight && `max-h-[${maxHeight}]`,
-      )}
-    >
-      {children}
-    </ScrollArea>
-  );
-}
-
-ScrollAreaWidget.widgetMeta = {
-  name: 'scroll-area',
-  label: 'Scroll Area',
-  category: 'layout' as const,
-  schema: {
-    direction: {
-      type: 'enum' as const,
-      options: ['vertical', 'horizontal', 'both'],
-      default: 'vertical',
-    },
-    height: { type: 'string' as const },
-    maxHeight: { type: 'string' as const },
-  },
-  binding: 'none' as const,
-  triggers: [],
-  container: true,
-};

package/src/widgets/components/SectionWidget.tsx

@@ -1,78 +0,0 @@
-import React, { useState } from 'react';
-import { cn } from '@/lib/utils';
-import { ChevronRight } from 'lucide-react';
-import type { SpacingToken } from '@rangka/shared';
-import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
-import type { WidgetProps } from '../types.js';
-
-const paddingMap: Record<SpacingToken, string> = {
-  none: 'p-0',
-  xs: 'p-1',
-  sm: 'p-2',
-  md: 'p-4',
-  lg: 'p-6',
-  xl: 'p-8',
-  '2xl': 'p-12',
-};
-
-export function SectionWidget({ props, children }: WidgetProps) {
-  const label = (props.label as string) ?? '';
-  const collapsible = (props.collapsible as boolean) ?? false;
-  const defaultCollapsed = (props.defaultCollapsed as boolean) ?? false;
-  const padding = (props.padding as SpacingToken) ?? 'md';
-  const icon = props.icon as string | undefined;
-
-  const [open, setOpen] = useState(!defaultCollapsed);
-
-  if (!collapsible) {
-    return (
-      <div className="flex flex-col">
-        <div className="flex items-center gap-2 border-b border-border pb-2 mb-3">
-          {icon && <span className="text-muted-foreground">{icon}</span>}
-          <h3 className="text-sm font-medium">{label}</h3>
-        </div>
-        <div className={cn(paddingMap[padding])}>{children}</div>
-      </div>
-    );
-  }
-
-  return (
-    <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="flex flex-col">
-        <CollapsibleTrigger className="flex items-center gap-2 border-b border-border pb-2 mb-3 cursor-pointer hover:text-foreground/80">
-          <ChevronRight
-            className={cn(
-              'h-4 w-4 text-muted-foreground transition-transform duration-150',
-              open && 'rotate-90',
-            )}
-          />
-          {icon && <span className="text-muted-foreground">{icon}</span>}
-          <h3 className="text-sm font-medium">{label}</h3>
-        </CollapsibleTrigger>
-        <CollapsibleContent>
-          <div className={cn(paddingMap[padding])}>{children}</div>
-        </CollapsibleContent>
-      </div>
-    </Collapsible>
-  );
-}
-
-SectionWidget.widgetMeta = {
-  name: 'section',
-  label: 'Section',
-  category: 'layout' as const,
-  schema: {
-    label: { type: 'string' as const, required: true },
-    collapsible: { type: 'boolean' as const, default: false },
-    defaultCollapsed: { type: 'boolean' as const, default: false },
-    padding: {
-      type: 'enum' as const,
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
-      default: 'md',
-    },
-    icon: { type: 'string' as const },
-  },
-  binding: 'none' as const,
-  triggers: [],
-  container: true,
-};

package/src/widgets/components/SelectWidget.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-} from '@/components/ui/select';
-import { Field, FieldLabel } from '@/components/ui/field';
-import type { WidgetProps } from '../types.js';
-
-export function SelectWidget({ props, bind, on }: WidgetProps) {
-  const label = (props.label as string) ?? bind.meta?.label ?? '';
-  const placeholder = (props.placeholder as string) ?? '';
-  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
-  const error = bind.error;
-
-  const rawOptions = (bind.meta?.options ?? []) as (string | { label: string; value: string })[];
-  const options = rawOptions.map((opt) =>
-    typeof opt === 'string' ? { label: opt, value: opt } : opt,
-  );
-
-  return (
-    <Field>
-      {label && <FieldLabel>{label}</FieldLabel>}
-      <Select
-        value={(bind.value as string) ?? ''}
-        onValueChange={(val) => {
-          bind.setValue?.(val);
-          on.change?.(val);
-        }}
-        disabled={disabled}
-      >
-        <SelectTrigger>
-          <SelectValue placeholder={placeholder} />
-        </SelectTrigger>
-        <SelectContent>
-          {options.map((opt) => (
-            <SelectItem key={opt.value} value={opt.value}>
-              {opt.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      {error && <p className="text-xs text-destructive mt-1">{error}</p>}
-    </Field>
-  );
-}
-
-SelectWidget.widgetMeta = {
-  name: 'select',
-  label: 'Select',
-  category: 'input' as const,
-  schema: {
-    label: { type: 'string' as const },
-    placeholder: { type: 'string' as const },
-    searchable: { type: 'boolean' as const, default: false },
-    disabled: { type: 'boolean' as const, default: false },
-  },
-  binding: 'field' as const,
-  triggers: ['change'],
-  container: false,
-};

package/src/widgets/components/SequenceWidget.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Field, FieldLabel } from '@/components/ui/field';
-import type { WidgetProps } from '../types.js';
-
-export function SequenceWidget({ props, bind }: WidgetProps) {
-  const label = (props.label as string) ?? bind.meta?.label ?? '';
-  const value = bind.value as string | null | undefined;
-
-  return (
-    <Field>
-      {label && <FieldLabel>{label}</FieldLabel>}
-      <div className="flex items-center h-7">
-        <Badge variant="secondary" className="font-mono text-xs">
-          {value || 'Auto'}
-        </Badge>
-      </div>
-    </Field>
-  );
-}
-
-SequenceWidget.widgetMeta = {
-  name: 'sequence',
-  label: 'Sequence',
-  category: 'display' as const,
-  schema: {
-    label: { type: 'string' as const },
-  },
-  binding: 'field' as const,
-  triggers: [],
-  container: false,
-};

package/src/widgets/components/SpacerWidget.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { cn } from '@/lib/utils';
-import type { WidgetProps } from '../types.js';
-
-const sizeMap: Record<string, string> = {
-  xs: 'h-1',
-  sm: 'h-2',
-  md: 'h-4',
-  lg: 'h-6',
-  xl: 'h-8',
-};
-
-export function SpacerWidget({ props }: WidgetProps) {
-  const size = (props.size as string) ?? 'md';
-
-  return <div className={cn(sizeMap[size] ?? 'h-4')} aria-hidden="true" />;
-}
-
-SpacerWidget.widgetMeta = {
-  name: 'spacer',
-  label: 'Spacer',
-  category: 'layout' as const,
-  schema: {
-    size: { type: 'enum' as const, options: ['xs', 'sm', 'md', 'lg', 'xl'], default: 'md' },
-  },
-  binding: 'none' as const,
-  triggers: [],
-  container: false,
-};

package/src/widgets/components/SplitWidget.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { cn } from '@/lib/utils';
-import type { SpacingToken } from '@rangka/shared';
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
-import { WidgetRenderer } from '../renderer/WidgetRenderer.js';
-import type { WidgetProps } from '../types.js';
-
-const paddingMap: Record<SpacingToken, string> = {
-  none: 'p-0',
-  xs: 'p-1',
-  sm: 'p-2',
-  md: 'p-4',
-  lg: 'p-6',
-  xl: 'p-8',
-  '2xl': 'p-12',
-};
-
-export function SplitWidget({ props, childNodes }: WidgetProps) {
-  const sizes = props.sizes as number[] | undefined;
-  const direction = (props.direction as 'horizontal' | 'vertical') ?? 'horizontal';
-  const minSize = (props.minSize as number) ?? 10;
-  const padding = props.padding as SpacingToken | undefined;
-
-  const nodes = childNodes ?? [];
-
-  return (
-    <ResizablePanelGroup
-      orientation={direction}
-      className={cn('h-full w-full', padding && paddingMap[padding])}
-    >
-      {nodes.map((node, i) => (
-        <React.Fragment key={node.id ?? i}>
-          {i > 0 && <ResizableHandle withHandle />}
-          <ResizablePanel defaultSize={sizes?.[i] ?? 100 / nodes.length} minSize={minSize}>
-            <WidgetRenderer node={node} />
-          </ResizablePanel>
-        </React.Fragment>
-      ))}
-    </ResizablePanelGroup>
-  );
-}
-
-SplitWidget.widgetMeta = {
-  name: 'split',
-  label: 'Split',
-  category: 'layout' as const,
-  schema: {
-    sizes: { type: 'array' as const },
-    direction: {
-      type: 'enum' as const,
-      options: ['horizontal', 'vertical'],
-      default: 'horizontal',
-    },
-    minSize: { type: 'number' as const, default: 10 },
-    padding: { type: 'enum' as const, options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] },
-  },
-  binding: 'none' as const,
-  triggers: [],
-  container: true,
-};

package/src/widgets/components/StackWidget.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { cn } from '@/lib/utils';
-import type { SpacingToken } from '@rangka/shared';
-import type { WidgetProps } from '../types.js';
-
-const paddingMap: Record<SpacingToken, string> = {
-  none: 'p-0',
-  xs: 'p-1',
-  sm: 'p-2',
-  md: 'p-4',
-  lg: 'p-6',
-  xl: 'p-8',
-  '2xl': 'p-12',
-};
-
-export function StackWidget({ props, children }: WidgetProps) {
-  const height = (props.height as string) ?? 'auto';
-  const padding = props.padding as SpacingToken | undefined;
-
-  return (
-    <div
-      className={cn(
-        'relative',
-        height === 'auto' ? 'h-auto' : height === '100%' ? 'h-full' : `h-[${height}]`,
-        padding && paddingMap[padding],
-      )}
-    >
-      {children}
-    </div>
-  );
-}
-
-StackWidget.widgetMeta = {
-  name: 'stack',
-  label: 'Stack',
-  category: 'layout' as const,
-  schema: {
-    height: { type: 'string' as const, default: 'auto' },
-    padding: { type: 'enum' as const, options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] },
-  },
-  binding: 'none' as const,
-  triggers: [],
-  container: true,
-};