@rangka/client 0.1.0 → 0.1.2

package/src/widgets/components/AttachmentWidget.tsx

@@ -1,111 +0,0 @@
-import React, { useRef } from 'react';
-import { Button } from '@/components/ui/button';
-import { Field, FieldLabel } from '@/components/ui/field';
-import { cn } from '@/lib/utils';
-import type { WidgetProps } from '../types.js';
-
-interface FileValue {
-  name: string;
-  url?: string;
-  size?: number;
-}
-
-export function AttachmentWidget({ props, bind, on }: WidgetProps) {
-  const label = (props.label as string) ?? bind.meta?.label ?? '';
-  const accept = (props.accept as string) ?? '';
-  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const fileValue = bind.value as FileValue | null | undefined;
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      const value = { name: file.name, size: file.size };
-      bind.setValue?.(value);
-      on.change?.(value);
-    }
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    if (disabled) return;
-    const file = e.dataTransfer.files?.[0];
-    if (file) {
-      const value = { name: file.name, size: file.size };
-      bind.setValue?.(value);
-      on.change?.(value);
-    }
-  };
-
-  const handleRemove = () => {
-    bind.setValue?.(null);
-    on.remove?.();
-    if (inputRef.current) inputRef.current.value = '';
-  };
-
-  return (
-    <Field>
-      {label && <FieldLabel>{label}</FieldLabel>}
-      {fileValue ? (
-        <div className="flex items-center gap-2 rounded-md border border-input px-3 py-2">
-          <span className="flex-1 truncate text-sm">{fileValue.name}</span>
-          {fileValue.size && (
-            <span className="text-xs text-muted-foreground">
-              {(fileValue.size / 1024).toFixed(1)} KB
-            </span>
-          )}
-          {!disabled && (
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleRemove}
-              className="h-5 px-1"
-              aria-label="Remove file"
-            >
-              ×
-            </Button>
-          )}
-        </div>
-      ) : (
-        <div
-          className={cn(
-            'flex flex-col items-center justify-center rounded-md border-2 border-dashed border-input p-4 text-center transition-colors',
-            !disabled && 'cursor-pointer hover:border-primary/50 hover:bg-accent/50',
-            disabled && 'opacity-50 cursor-not-allowed',
-          )}
-          onClick={() => !disabled && inputRef.current?.click()}
-          onDrop={handleDrop}
-          onDragOver={(e) => e.preventDefault()}
-          role="button"
-          aria-label="Upload file"
-        >
-          <p className="text-xs text-muted-foreground">Drop a file here or click to browse</p>
-        </div>
-      )}
-      <input
-        ref={inputRef}
-        type="file"
-        accept={accept}
-        onChange={handleFileChange}
-        className="hidden"
-        disabled={disabled}
-      />
-    </Field>
-  );
-}
-
-AttachmentWidget.widgetMeta = {
-  name: 'attachment',
-  label: 'Attachment',
-  category: 'input' as const,
-  schema: {
-    label: { type: 'string' as const },
-    accept: { type: 'string' as const },
-    maxSize: { type: 'string' as const },
-    disabled: { type: 'boolean' as const, default: false },
-  },
-  binding: 'field' as const,
-  triggers: ['change', 'remove'],
-  container: false,
-};

package/src/widgets/components/AttachmentsWidget.tsx

@@ -1,121 +0,0 @@
-import React, { useRef } from 'react';
-import { Button } from '@/components/ui/button';
-import { Field, FieldLabel } from '@/components/ui/field';
-import { cn } from '@/lib/utils';
-import type { WidgetProps } from '../types.js';
-
-interface FileValue {
-  name: string;
-  url?: string;
-  size?: number;
-}
-
-export function AttachmentsWidget({ props, bind, on }: WidgetProps) {
-  const label = (props.label as string) ?? bind.meta?.label ?? '';
-  const accept = (props.accept as string) ?? '';
-  const maxCount = (props.maxCount as number) ?? 10;
-  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const files = (bind.value as FileValue[] | null) ?? [];
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newFiles = Array.from(e.target.files ?? []).map((f) => ({ name: f.name, size: f.size }));
-    const next = [...files, ...newFiles].slice(0, maxCount);
-    bind.setValue?.(next);
-    on.change?.(next);
-    if (inputRef.current) inputRef.current.value = '';
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    if (disabled) return;
-    const newFiles = Array.from(e.dataTransfer.files).map((f) => ({ name: f.name, size: f.size }));
-    const next = [...files, ...newFiles].slice(0, maxCount);
-    bind.setValue?.(next);
-    on.change?.(next);
-  };
-
-  const handleRemove = (index: number) => {
-    const next = files.filter((_, i) => i !== index);
-    bind.setValue?.(next);
-    on.remove?.(index);
-  };
-
-  return (
-    <Field>
-      {label && <FieldLabel>{label}</FieldLabel>}
-      {files.length > 0 && (
-        <ul className="mb-2 space-y-1" role="list">
-          {files.map((file, i) => (
-            <li
-              key={`${file.name}-${i}`}
-              className="flex items-center gap-2 rounded-md border border-input px-3 py-1.5"
-            >
-              <span className="flex-1 truncate text-sm">{file.name}</span>
-              {file.size && (
-                <span className="text-xs text-muted-foreground">
-                  {(file.size / 1024).toFixed(1)} KB
-                </span>
-              )}
-              {!disabled && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => handleRemove(i)}
-                  className="h-5 px-1"
-                  aria-label={`Remove ${file.name}`}
-                >
-                  ×
-                </Button>
-              )}
-            </li>
-          ))}
-        </ul>
-      )}
-      {files.length < maxCount && (
-        <div
-          className={cn(
-            'flex flex-col items-center justify-center rounded-md border-2 border-dashed border-input p-4 text-center transition-colors',
-            !disabled && 'cursor-pointer hover:border-primary/50 hover:bg-accent/50',
-            disabled && 'opacity-50 cursor-not-allowed',
-          )}
-          onClick={() => !disabled && inputRef.current?.click()}
-          onDrop={handleDrop}
-          onDragOver={(e) => e.preventDefault()}
-          role="button"
-          aria-label="Upload files"
-        >
-          <p className="text-xs text-muted-foreground">
-            Drop files here or click to browse ({files.length}/{maxCount})
-          </p>
-        </div>
-      )}
-      <input
-        ref={inputRef}
-        type="file"
-        accept={accept}
-        multiple
-        onChange={handleFileChange}
-        className="hidden"
-        disabled={disabled}
-      />
-    </Field>
-  );
-}
-
-AttachmentsWidget.widgetMeta = {
-  name: 'attachments',
-  label: 'Attachments',
-  category: 'input' as const,
-  schema: {
-    label: { type: 'string' as const },
-    accept: { type: 'string' as const },
-    maxSize: { type: 'string' as const },
-    maxCount: { type: 'number' as const, default: 10 },
-    disabled: { type: 'boolean' as const, default: false },
-  },
-  binding: 'field' as const,
-  triggers: ['change', 'remove'],
-  container: false,
-};

package/src/widgets/components/BadgeWidget.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Badge } from '@/components/ui/badge';
-import type { WidgetProps } from '../types.js';
-
-const variantMap: Record<string, 'default' | 'secondary' | 'outline' | 'destructive'> = {
-  solid: 'default',
-  outline: 'outline',
-  subtle: 'secondary',
-};
-
-export function BadgeWidget({ props, bind }: WidgetProps) {
-  const label = props.label as string | undefined;
-  const value = (bind.value as string) ?? '';
-  const variant = variantMap[(props.variant as string) ?? 'subtle'] ?? 'secondary';
-
-  return <Badge variant={variant}>{label || value}</Badge>;
-}
-
-BadgeWidget.widgetMeta = {
-  name: 'badge',
-  label: 'Badge',
-  category: 'display' as const,
-  schema: {
-    variant: { type: 'enum' as const, options: ['solid', 'outline', 'subtle'], default: 'subtle' },
-    color: {
-      type: 'enum' as const,
-      options: ['default', 'success', 'warning', 'error', 'info'],
-      default: 'default',
-    },
-    colorMap: { type: 'object' as const },
-  },
-  binding: 'field' as const,
-  triggers: [],
-  container: false,
-};

package/src/widgets/components/ButtonWidget.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { Button as UIButton } from '@/components/ui/button';
-import type { WidgetProps } from '../types.js';
-
-export function ButtonWidget({ props, on }: WidgetProps) {
-  const variant = props.variant as string | undefined;
-  const size = props.size as string | undefined;
-
-  return (
-    <UIButton
-      variant={
-        variant === 'primary'
-          ? 'default'
-          : (variant as 'default' | 'secondary' | 'ghost' | 'destructive' | undefined)
-      }
-      size={size === 'md' ? 'default' : (size as 'sm' | 'default' | 'lg' | undefined)}
-      disabled={props.disabled as boolean | undefined}
-      onClick={on.click}
-    >
-      {props.label as string}
-    </UIButton>
-  );
-}
-
-ButtonWidget.widgetMeta = {
-  name: 'button',
-  label: 'Button',
-  category: 'action' as const,
-  schema: {
-    label: { type: 'string' as const, required: true },
-    variant: {
-      type: 'enum' as const,
-      options: ['primary', 'secondary', 'ghost', 'destructive'],
-      default: 'secondary',
-    },
-    size: { type: 'enum' as const, options: ['sm', 'md', 'lg'], default: 'md' },
-    disabled: { type: 'boolean' as const, default: false },
-    loading: { type: 'boolean' as const, default: false },
-  },
-  binding: 'none' as const,
-  triggers: ['click'],
-  container: false,
-};

package/src/widgets/components/CardWidget.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardAction,
-  CardContent,
-  CardFooter,
-} from '@/components/ui/card';
-import { WidgetRenderer } from '../renderer/WidgetRenderer.js';
-import { SurfaceProvider } from '../hooks/useSurfaceContext.js';
-import type { WidgetNode } from '@rangka/shared';
-import type { WidgetProps } from '../types.js';
-
-export function CardWidget({ props, children }: WidgetProps) {
-  const title = props.title as string | undefined;
-  const description = props.description as string | undefined;
-  const size = (props.size as 'default' | 'sm') ?? 'default';
-  const actions = props.actions as WidgetNode[] | undefined;
-  const footer = props.footer as WidgetNode[] | undefined;
-
-  return (
-    <Card size={size}>
-      {(title || description || actions) && (
-        <CardHeader>
-          {title && <CardTitle>{title}</CardTitle>}
-          {description && <CardDescription>{description}</CardDescription>}
-          {actions && actions.length > 0 && (
-            <CardAction>
-              <div className="flex items-center gap-2">
-                {actions.map((node, i) => (
-                  <WidgetRenderer key={node.id ?? i} node={node} />
-                ))}
-              </div>
-            </CardAction>
-          )}
-        </CardHeader>
-      )}
-      <CardContent>
-        <SurfaceProvider value="card">{children}</SurfaceProvider>
-      </CardContent>
-      {footer && footer.length > 0 && (
-        <CardFooter>
-          {footer.map((node, i) => (
-            <WidgetRenderer key={node.id ?? i} node={node} />
-          ))}
-        </CardFooter>
-      )}
-    </Card>
-  );
-}
-
-CardWidget.widgetMeta = {
-  name: 'card',
-  label: 'Card',
-  category: 'layout' as const,
-  schema: {
-    title: { type: 'string' as const },
-    description: { type: 'string' as const },
-    size: { type: 'enum' as const, options: ['default', 'sm'], default: 'default' },
-    actions: { type: 'array' as const },
-    footer: { type: 'array' as const },
-  },
-  binding: 'none' as const,
-  triggers: [],
-  container: true,
-};

package/src/widgets/components/CheckboxWidget.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Checkbox } from '@/components/ui/checkbox';
-import type { WidgetProps } from '../types.js';
-
-export function CheckboxWidget({ props, bind, on }: WidgetProps) {
-  const label = (props.label as string) ?? bind.meta?.label ?? '';
-  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
-  const error = bind.error;
-
-  return (
-    <div className="flex flex-col gap-1">
-      <div className="flex items-center gap-2">
-        <Checkbox
-          checked={(bind.value as boolean) ?? false}
-          onCheckedChange={(checked) => {
-            bind.setValue?.(checked);
-            on.change?.(checked);
-          }}
-          disabled={disabled}
-        />
-        {label && <span className="text-sm text-foreground">{label}</span>}
-      </div>
-      {error && <p className="text-xs text-destructive">{error}</p>}
-    </div>
-  );
-}
-
-CheckboxWidget.widgetMeta = {
-  name: 'checkbox',
-  label: 'Checkbox',
-  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/CodeWidget.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { Textarea } from '@/components/ui/textarea';
-import { Field, FieldLabel } from '@/components/ui/field';
-import type { WidgetProps } from '../types.js';
-
-export function CodeWidget({ 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;
-
-  return (
-    <Field>
-      {label && <FieldLabel>{label}</FieldLabel>}
-      <Textarea
-        value={(bind.value as string) ?? ''}
-        onChange={(e) => {
-          bind.setValue?.(e.target.value);
-          on.change?.(e.target.value);
-        }}
-        onFocus={() => on.focus?.()}
-        onBlur={() => on.blur?.()}
-        rows={rows}
-        disabled={disabled}
-        className="font-mono text-xs"
-        spellCheck={false}
-      />
-    </Field>
-  );
-}
-
-CodeWidget.widgetMeta = {
-  name: 'code',
-  label: 'Code',
-  category: 'input' as const,
-  schema: {
-    label: { type: 'string' as const },
-    language: { 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/ColumnWidget.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import type { WidgetProps } from '../types.js';
-
-export function ColumnWidget({ children }: WidgetProps) {
-  return <>{children}</>;
-}
-
-ColumnWidget.widgetMeta = {
-  name: 'column',
-  label: 'Column',
-  category: 'layout' as const,
-  schema: {
-    label: { type: 'string' as const, required: true },
-    width: { type: 'string' as const },
-    align: { type: 'enum' as const, options: ['left', 'center', 'right'], default: 'left' },
-    sortable: { type: 'boolean' as const },
-    filterable: { type: 'boolean' as const },
-  },
-  binding: 'none' as const,
-  triggers: [],
-  container: true,
-};

package/src/widgets/components/ComputedWidget.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import { Field, FieldLabel } from '@/components/ui/field';
-import type { WidgetProps } from '../types.js';
-
-export function ComputedWidget({ props, bind }: WidgetProps) {
-  const label = (props.label as string) ?? bind.meta?.label ?? '';
-  const format = (props.format as string) ?? 'text';
-  const value = bind.value;
-
-  const formatValue = (val: unknown): string => {
-    if (val == null) return '—';
-    if (format === 'number' && typeof val === 'number') {
-      return val.toLocaleString();
-    }
-    if (format === 'currency' && typeof val === 'number') {
-      return val.toFixed(2);
-    }
-    if (format === 'date' && typeof val === 'string') {
-      return new Date(val).toLocaleDateString();
-    }
-    return String(val);
-  };
-
-  return (
-    <Field>
-      {label && <FieldLabel>{label}</FieldLabel>}
-      <div className="flex items-center h-7 text-sm" data-testid="computed-value">
-        {formatValue(value)}
-      </div>
-    </Field>
-  );
-}
-
-ComputedWidget.widgetMeta = {
-  name: 'computed',
-  label: 'Computed',
-  category: 'display' as const,
-  schema: {
-    label: { type: 'string' as const },
-    format: {
-      type: 'enum' as const,
-      options: ['text', 'number', 'currency', 'date'],
-      default: 'text',
-    },
-  },
-  binding: 'field' as const,
-  triggers: [],
-  container: false,
-};