@rangka/client 0.0.1

package/src/widgets/components/GridWidget.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import type { SpacingToken } from '@rangka/shared';
+import type { WidgetProps } from '../types.js';
+
+const gapMap: Record<SpacingToken, string> = {
+  none: 'gap-0',
+  xs: 'gap-1',
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8',
+  '2xl': 'gap-12',
+};
+
+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',
+};
+
+const paddingXMap: Record<SpacingToken, string> = {
+  none: 'px-0',
+  xs: 'px-1',
+  sm: 'px-2',
+  md: 'px-4',
+  lg: 'px-6',
+  xl: 'px-8',
+  '2xl': 'px-12',
+};
+
+const paddingYMap: Record<SpacingToken, string> = {
+  none: 'py-0',
+  xs: 'py-1',
+  sm: 'py-2',
+  md: 'py-4',
+  lg: 'py-6',
+  xl: 'py-8',
+  '2xl': 'py-12',
+};
+
+const colsMap: Record<number, string> = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
+  3: 'grid-cols-3',
+  4: 'grid-cols-4',
+  5: 'grid-cols-5',
+  6: 'grid-cols-6',
+  7: 'grid-cols-7',
+  8: 'grid-cols-8',
+  9: 'grid-cols-9',
+  10: 'grid-cols-10',
+  11: 'grid-cols-11',
+  12: 'grid-cols-12',
+};
+
+const autoFlowMap: Record<string, string> = {
+  row: 'grid-flow-row',
+  column: 'grid-flow-col',
+  dense: 'grid-flow-dense',
+};
+
+export function GridWidget({ props, children }: WidgetProps) {
+  const columns = (props.columns as number) ?? 3;
+  const gap = (props.gap as SpacingToken) ?? 'md';
+  const rowGap = props.rowGap as SpacingToken | undefined;
+  const colGap = props.colGap as SpacingToken | undefined;
+  const autoFlow = props.autoFlow as string | undefined;
+  const padding = props.padding as SpacingToken | undefined;
+  const paddingX = props.paddingX as SpacingToken | undefined;
+  const paddingY = props.paddingY as SpacingToken | undefined;
+  const responsive = props.responsive as Record<string, number> | undefined;
+
+  const responsiveClasses: string[] = [];
+  if (responsive) {
+    if (responsive.sm) responsiveClasses.push(`max-sm:grid-cols-${responsive.sm}`);
+    if (responsive.md) responsiveClasses.push(`max-md:grid-cols-${responsive.md}`);
+    if (responsive.lg) responsiveClasses.push(`max-lg:grid-cols-${responsive.lg}`);
+  } else {
+    // Default responsive: collapse columns on smaller viewports
+    if (columns >= 3) {
+      responsiveClasses.push('max-md:grid-cols-2', 'max-sm:grid-cols-1');
+    } else if (columns === 2) {
+      responsiveClasses.push('max-sm:grid-cols-1');
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'grid',
+        colsMap[columns] ?? `grid-cols-[repeat(${columns},minmax(0,1fr))]`,
+        !rowGap && !colGap && gapMap[gap],
+        rowGap && `row-gap-${gapMap[rowGap]?.replace('gap-', '')}`,
+        colGap && `column-gap-${gapMap[colGap]?.replace('gap-', '')}`,
+        autoFlow && autoFlowMap[autoFlow],
+        padding && paddingMap[padding],
+        paddingX && paddingXMap[paddingX],
+        paddingY && paddingYMap[paddingY],
+        ...responsiveClasses,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+GridWidget.widgetMeta = {
+  name: 'grid',
+  label: 'Grid',
+  category: 'layout' as const,
+  schema: {
+    columns: { type: 'number' as const, default: 3 },
+    gap: {
+      type: 'enum' as const,
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+      default: 'md',
+    },
+    rowGap: { type: 'enum' as const, options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] },
+    colGap: { type: 'enum' as const, options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] },
+    autoFlow: { type: 'enum' as const, options: ['row', 'column', 'dense'], default: 'row' },
+    responsive: { type: 'object' as const },
+    padding: { type: 'enum' as const, options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] },
+    paddingX: { type: 'enum' as const, options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] },
+    paddingY: { type: 'enum' as const, options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] },
+  },
+  binding: 'none' as const,
+  triggers: [],
+  container: true,
+};

package/src/widgets/components/GroupWidget.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import type { SpacingToken } from '@rangka/shared';
+import type { WidgetProps } from '../types.js';
+
+const gapMap: Record<SpacingToken, string> = {
+  none: 'gap-0',
+  xs: 'gap-1',
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8',
+  '2xl': 'gap-12',
+};
+
+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',
+};
+
+const paddingXMap: Record<SpacingToken, string> = {
+  none: 'px-0',
+  xs: 'px-1',
+  sm: 'px-2',
+  md: 'px-4',
+  lg: 'px-6',
+  xl: 'px-8',
+  '2xl': 'px-12',
+};
+
+const paddingYMap: Record<SpacingToken, string> = {
+  none: 'py-0',
+  xs: 'py-1',
+  sm: 'py-2',
+  md: 'py-4',
+  lg: 'py-6',
+  xl: 'py-8',
+  '2xl': 'py-12',
+};
+
+const alignMap: Record<string, string> = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch',
+};
+
+const justifyMap: Record<string, string> = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  between: 'justify-between',
+  around: 'justify-around',
+};
+
+export function GroupWidget({ props, children }: WidgetProps) {
+  const direction = (props.direction as 'row' | 'column') ?? 'column';
+  const gap = (props.gap as SpacingToken) ?? 'md';
+  const align = props.align as string | undefined;
+  const justify = props.justify as string | undefined;
+  const wrap = props.wrap as boolean | undefined;
+  const padding = props.padding as SpacingToken | undefined;
+  const paddingX = props.paddingX as SpacingToken | undefined;
+  const paddingY = props.paddingY as SpacingToken | undefined;
+
+  return (
+    <div
+      className={cn(
+        'flex',
+        direction === 'row' ? 'flex-row' : 'flex-col',
+        gapMap[gap],
+        align && alignMap[align],
+        justify && justifyMap[justify],
+        wrap && 'flex-wrap',
+        padding && paddingMap[padding],
+        paddingX && paddingXMap[paddingX],
+        paddingY && paddingYMap[paddingY],
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+GroupWidget.widgetMeta = {
+  name: 'group',
+  label: 'Group',
+  category: 'layout' as const,
+  schema: {
+    direction: { type: 'enum' as const, options: ['row', 'column'], default: 'column' },
+    align: { type: 'enum' as const, options: ['start', 'center', 'end', 'stretch'] },
+    justify: { type: 'enum' as const, options: ['start', 'center', 'end', 'between', 'around'] },
+    gap: {
+      type: 'enum' as const,
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+      default: 'md',
+    },
+    wrap: { type: 'boolean' as const, default: false },
+    padding: { type: 'enum' as const, options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] },
+    paddingX: { type: 'enum' as const, options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] },
+    paddingY: { type: 'enum' as const, options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] },
+  },
+  binding: 'none' as const,
+  triggers: [],
+  container: true,
+};

package/src/widgets/components/IconWidget.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Icon } from '@/components/Icon';
+import type { WidgetProps } from '../types.js';
+
+export function IconWidget({ props, on }: WidgetProps) {
+  const name = (props.name as string) ?? 'circle';
+  const size = props.size as number | undefined;
+  const color = props.color as string | undefined;
+
+  return (
+    <span onClick={on.click} className={on.click ? 'cursor-pointer' : undefined}>
+      <Icon name={name} size={size} color={color} />
+    </span>
+  );
+}
+
+IconWidget.widgetMeta = {
+  name: 'icon',
+  label: 'Icon',
+  category: 'display' as const,
+  schema: {
+    name: { type: 'string' as const, required: true },
+    size: { type: 'number' as const, default: 14 },
+    color: { type: 'string' as const },
+  },
+  binding: 'none' as const,
+  triggers: ['click'],
+  container: false,
+};

package/src/widgets/components/ImageWidget.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { WidgetProps } from '../types.js';
+
+export function ImageWidget({ props, bind }: WidgetProps) {
+  const src = (bind.value as string) ?? (props.src as string) ?? '';
+  const alt = (props.alt as string) ?? '';
+  const width = props.width as string | undefined;
+  const height = props.height as string | undefined;
+
+  if (!src) return null;
+
+  return <img src={src} alt={alt} style={{ width, height }} className="max-w-full rounded-sm" />;
+}
+
+ImageWidget.widgetMeta = {
+  name: 'image',
+  label: 'Image',
+  category: 'display' as const,
+  schema: {
+    src: { type: 'string' as const },
+    alt: { type: 'string' as const },
+    width: { type: 'string' as const },
+    height: { type: 'string' as const },
+  },
+  binding: 'field' as const,
+  triggers: [],
+  container: false,
+};

package/src/widgets/components/InputWidget.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Input } from '@/components/ui/input';
+import { Field, FieldLabel } from '@/components/ui/field';
+import type { WidgetProps } from '../types.js';
+
+export function InputWidget({ props, bind, on }: WidgetProps) {
+  const fieldType = bind.meta?.type ?? 'string';
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const placeholder = (props.placeholder as string) ?? '';
+  const readOnly = (props.readOnly as boolean) ?? bind.meta?.readOnly ?? false;
+  const disabled = (props.disabled as boolean) ?? false;
+  const min = props.min as number | undefined;
+  const max = props.max as number | undefined;
+  const step = props.step as number | undefined;
+  const pattern = props.pattern as string | undefined;
+  const error = bind.error;
+
+  const inputType =
+    fieldType === 'int' || fieldType === 'decimal' || fieldType === 'money'
+      ? 'number'
+      : fieldType === 'date'
+        ? 'date'
+        : 'text';
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Input
+        type={inputType}
+        value={(bind.value as string) ?? ''}
+        onChange={(e) => {
+          bind.setValue?.(e.target.value);
+          on.change?.(e.target.value);
+        }}
+        onFocus={() => on.focus?.()}
+        onBlur={() => on.blur?.()}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        disabled={disabled}
+        min={min}
+        max={max}
+        step={step}
+        pattern={pattern}
+      />
+      {error && <p className="text-xs text-destructive mt-1">{error}</p>}
+    </Field>
+  );
+}
+
+InputWidget.widgetMeta = {
+  name: 'input',
+  label: 'Input',
+  category: 'input' as const,
+  schema: {
+    label: { type: 'string' as const },
+    placeholder: { type: 'string' as const },
+    readOnly: { type: 'boolean' as const, default: false },
+    disabled: { type: 'boolean' as const, default: false },
+    error: { type: 'string' as const },
+    prefix: { type: 'string' as const },
+    suffix: { type: 'string' as const },
+    min: { type: 'number' as const },
+    max: { type: 'number' as const },
+    step: { type: 'number' as const },
+    pattern: { type: 'string' as const },
+  },
+  binding: 'field' as const,
+  triggers: ['change', 'focus', 'blur'],
+  container: false,
+};

package/src/widgets/components/JsonWidget.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { Textarea } from '@/components/ui/textarea';
+import { Field, FieldLabel } from '@/components/ui/field';
+import { cn } from '@/lib/utils';
+import type { WidgetProps } from '../types.js';
+
+export function JsonWidget({ props, bind, on }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const rows = (props.rows as number) ?? 6;
+  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
+  const [error, setError] = useState<string | null>(null);
+
+  const rawValue = bind.value;
+  const stringValue =
+    typeof rawValue === 'string'
+      ? rawValue
+      : rawValue != null
+        ? JSON.stringify(rawValue, null, 2)
+        : '';
+  const [localValue, setLocalValue] = useState(stringValue);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const text = e.target.value;
+    setLocalValue(text);
+    setError(null);
+    on.change?.(text);
+  };
+
+  const handleBlur = () => {
+    try {
+      const parsed = JSON.parse(localValue);
+      const formatted = JSON.stringify(parsed, null, 2);
+      setLocalValue(formatted);
+      bind.setValue?.(parsed);
+      setError(null);
+    } catch {
+      if (localValue.trim() !== '') {
+        setError('Invalid JSON');
+      }
+    }
+    on.blur?.();
+  };
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Textarea
+        value={localValue}
+        onChange={handleChange}
+        onFocus={() => on.focus?.()}
+        onBlur={handleBlur}
+        rows={rows}
+        disabled={disabled}
+        className={cn('font-mono text-xs', error && 'border-destructive')}
+        spellCheck={false}
+      />
+      {error && (
+        <p className="text-xs text-destructive mt-1" role="alert">
+          {error}
+        </p>
+      )}
+    </Field>
+  );
+}
+
+JsonWidget.widgetMeta = {
+  name: 'json',
+  label: 'JSON',
+  category: 'input' as const,
+  schema: {
+    label: { type: 'string' as const },
+    rows: { type: 'number' as const, default: 6 },
+    disabled: { type: 'boolean' as const, default: false },
+  },
+  binding: 'field' as const,
+  triggers: ['change', 'focus', 'blur'],
+  container: false,
+};

package/src/widgets/components/LinkWidget.tsx

@@ -0,0 +1,99 @@
+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 { Field, FieldLabel } from '@/components/ui/field';
+import { cn } from '@/lib/utils';
+import type { WidgetProps } from '../types.js';
+
+export function LinkWidget({ props, bind, on }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const placeholder = (props.placeholder as string) ?? 'Select...';
+  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
+  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);
+
+  const handleSelect = (value: string) => {
+    bind.setValue?.(value);
+    on.change?.(value);
+    setOpen(false);
+    setSearch('');
+  };
+
+  const handleSearchChange = (value: string) => {
+    setSearch(value);
+    on.search?.(value);
+  };
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={disabled}
+            className="w-full justify-between font-normal h-7 text-xs"
+          >
+            {selectedOption ? (
+              selectedOption.label
+            ) : (
+              <span className="text-muted-foreground">{placeholder}</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={() => handleSelect(opt.value)}
+                    className={cn(opt.value === currentValue && 'bg-accent')}
+                  >
+                    {opt.label}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </Field>
+  );
+}
+
+LinkWidget.widgetMeta = {
+  name: 'link',
+  label: 'Link',
+  category: 'input' as const,
+  schema: {
+    label: { type: 'string' as const },
+    placeholder: { type: 'string' as const },
+    disabled: { type: 'boolean' as const, default: false },
+  },
+  binding: 'field' as const,
+  triggers: ['change', 'search'],
+  container: false,
+};

package/src/widgets/components/ManyToManyWidget.tsx

@@ -0,0 +1,125 @@
+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 { Badge } from '@/components/ui/badge';
+import { Field, FieldLabel } from '@/components/ui/field';
+import { cn } from '@/lib/utils';
+import type { WidgetProps } from '../types.js';
+
+export function ManyToManyWidget({ props, bind, on }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const placeholder = (props.placeholder as string) ?? 'Select...';
+  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+
+  const options = (bind.meta?.options ?? []) as { label: string; value: string }[];
+  const selected = (bind.value as string[] | null) ?? [];
+
+  const handleToggle = (value: string) => {
+    const next = selected.includes(value)
+      ? selected.filter((v) => v !== value)
+      : [...selected, value];
+    bind.setValue?.(next);
+    on.change?.(next);
+  };
+
+  const handleRemove = (value: string) => {
+    const next = selected.filter((v) => v !== value);
+    bind.setValue?.(next);
+    on.change?.(next);
+  };
+
+  const handleSearchChange = (value: string) => {
+    setSearch(value);
+    on.search?.(value);
+  };
+
+  const selectedLabels = selected
+    .map((v) => options.find((o) => o.value === v))
+    .filter(Boolean) as { label: string; value: string }[];
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={disabled}
+            className="w-full justify-start font-normal h-auto min-h-7 text-xs flex-wrap gap-1 py-1"
+          >
+            {selectedLabels.length > 0 ? (
+              selectedLabels.map((opt) => (
+                <Badge key={opt.value} variant="secondary" className="text-xs">
+                  {opt.label}
+                  <button
+                    type="button"
+                    className="ml-1 rounded-full hover:bg-muted"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleRemove(opt.value);
+                    }}
+                    aria-label={`Remove ${opt.label}`}
+                  >
+                    ×
+                  </button>
+                </Badge>
+              ))
+            ) : (
+              <span className="text-muted-foreground">{placeholder}</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={() => handleToggle(opt.value)}
+                    className={cn(selected.includes(opt.value) && 'bg-accent')}
+                  >
+                    {opt.label}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </Field>
+  );
+}
+
+ManyToManyWidget.widgetMeta = {
+  name: 'many-to-many',
+  label: 'Many to Many',
+  category: 'input' as const,
+  schema: {
+    label: { type: 'string' as const },
+    placeholder: { type: 'string' as const },
+    disabled: { type: 'boolean' as const, default: false },
+  },
+  binding: 'field' as const,
+  triggers: ['change', 'search'],
+  container: false,
+};