@rangka/client 0.1.0 → 0.1.2

package/src/widgets/components/GridWidget.tsx

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

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

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

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

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

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

@@ -1,99 +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 { 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

@@ -1,125 +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 { 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,
-};