@object-ui/fields 17.3.0 → 17.6.0

package/src/widgets/AvatarField.tsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import { Avatar, AvatarFallback, AvatarImage, Button } from '@object-ui/components';
-import { Upload, X } from 'lucide-react';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-
-/**
- * Avatar field widget - provides an avatar/profile picture uploader
- * Supports image URLs or file uploads
- */
-export function AvatarField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
-  const [isHovered, setIsHovered] = React.useState(false);
-  const fileInputRef = React.useRef<HTMLInputElement>(null);
-  
-  const avatarField = field as any;
-
-  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    // Check file type
-    if (!file.type.startsWith('image/')) {
-      console.error('Please select an image file');
-      return;
-    }
-
-    // Check file size (max 5MB)
-    if (file.size > 5 * 1024 * 1024) {
-      console.error('File size must be less than 5MB');
-      return;
-    }
-
-    // Convert to base64 or upload to server
-    const reader = new FileReader();
-    reader.onloadend = () => {
-      onChange(reader.result as string);
-    };
-    reader.readAsDataURL(file);
-  };
-
-  const handleRemove = () => {
-    onChange('');
-  };
-
-  // Extract initials for fallback
-  const getInitials = (): string => {
-    const name = avatarField?.defaultName || avatarField?.label || 'User';
-    return name
-      .split(' ')
-      .map((word: string) => word[0])
-      .join('')
-      .toUpperCase()
-      .slice(0, 2);
-  };
-
-  if (readonly) {
-    return (
-      <Avatar className="w-16 h-16">
-        {value && <AvatarImage src={value} alt={avatarField?.label} />}
-        <AvatarFallback>{getInitials()}</AvatarFallback>
-      </Avatar>
-    );
-  }
-
-  return (
-    <div className="flex items-center gap-4">
-      <div
-        className="relative"
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        <Avatar className="w-16 h-16">
-          {value && <AvatarImage src={value} alt={avatarField?.label} />}
-          <AvatarFallback>{getInitials()}</AvatarFallback>
-        </Avatar>
-        {!readonly && isHovered && value && (
-          <button
-            type="button"
-            onClick={handleRemove}
-            className="absolute -top-1 -right-1 bg-destructive text-destructive-foreground rounded-full p-1 hover:bg-destructive/90"
-          >
-            <X className="w-3 h-3" />
-          </button>
-        )}
-      </div>
-      
-      <div className="flex flex-col gap-2">
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept="image/*"
-          onChange={handleFileSelect}
-          className="hidden"
-        />
-        <Button
-          // DOM pass-through onto the widget's real focusable control — the
-          // upload button is the keyboard path to the hidden file input
-          // (objectui#3318).
-          {...toDomProps(props)}
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={() => fileInputRef.current?.click()}
-          disabled={readonly || props.disabled}
-          // AFTER the spread so this widget's own computation wins (#3222).
-          aria-invalid={!!error}
-        >
-          <Upload className="w-4 h-4 mr-2" />
-          {value ? 'Change' : 'Upload'} Avatar
-        </Button>
-        <p className="text-xs text-muted-foreground">
-          PNG, JPG up to 5MB
-        </p>
-      </div>
-    </div>
-  );
-}

package/src/widgets/BooleanField.tsx

@@ -1,52 +0,0 @@
-import React, { useId } from 'react';
-import { Switch, Checkbox, Label } from '@object-ui/components';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-
-/**
- * BooleanField - Toggle input supporting switch and checkbox variants
- * Renders as Switch or Checkbox based on field widget configuration
- */
-export function BooleanField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<boolean>) {
-  const config = field as any;
-  // Use simple type assertion for arbitrary custom properties not in BaseFieldMetadata
-  const widget = config?.widget;
-  // Generate unique ID using React's useId hook - must be before early returns (rules of hooks)
-  const generatedId = useId();
-  const id = config?.name || generatedId;
-  const label = config?.label || 'Checkbox';
-
-  if (readonly) {
-    return <span className="text-sm">{value ? 'Yes' : 'No'}</span>;
-  }
-
-  const domProps = toDomProps(props);
-
-  if (widget === 'checkbox') {
-     return (
-        <div className="flex items-center space-x-2">
-            <Checkbox 
-                {...domProps}
-                id={id}
-                checked={!!value}
-                onCheckedChange={(checked) => onChange(!!checked)}
-                disabled={readonly || domProps.disabled}
-            />
-            <Label htmlFor={id} className="sr-only">{label}</Label>
-        </div>
-     )
-  }
-
-  return (
-    <div className="flex items-center space-x-2">
-        <Switch 
-            {...domProps}
-            id={id} 
-            checked={!!value} 
-            onCheckedChange={onChange}
-            disabled={readonly || domProps.disabled}
-        />
-        <Label htmlFor={id} className="sr-only">{label}</Label>
-    </div>
-  );
-}

package/src/widgets/CapabilityMultiSelectField.test.tsx

@@ -1,168 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * CapabilityMultiSelectField (ADR-0056 P2, epic #2398).
- *
- * Proves the two properties P2 depends on:
- *  1. the stored value parses tolerantly into a capability-name list, and
- *  2. every edit emits a JSON-**string** array of names — byte-equivalent to
- *     the `sys_permission_set.system_permissions` textarea storage, so the
- *     round-trip through the picker never changes the on-disk shape.
- */
-import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { CapabilityMultiSelectField, parseCapabilityNames } from './CapabilityMultiSelectField';
-
-describe('parseCapabilityNames', () => {
-  it('parses the canonical JSON-string array', () => {
-    expect(parseCapabilityNames('["setup.access","studio.access"]')).toEqual([
-      'setup.access',
-      'studio.access',
-    ]);
-  });
-
-  it('treats empty / null / undefined as no selection', () => {
-    expect(parseCapabilityNames('')).toEqual([]);
-    expect(parseCapabilityNames('   ')).toEqual([]);
-    expect(parseCapabilityNames(null)).toEqual([]);
-    expect(parseCapabilityNames(undefined)).toEqual([]);
-    expect(parseCapabilityNames('[]')).toEqual([]);
-  });
-
-  it('tolerates an already-parsed array', () => {
-    expect(parseCapabilityNames(['a', 'b'])).toEqual(['a', 'b']);
-  });
-
-  it('falls back to comma-splitting a non-JSON legacy string', () => {
-    expect(parseCapabilityNames('setup.access, studio.access')).toEqual([
-      'setup.access',
-      'studio.access',
-    ]);
-  });
-});
-
-const CAPS = [
-  { name: 'manage_users', label: 'Manage Users', description: 'Manage users', scope: 'platform', active: true },
-  { name: 'studio.access', label: 'Studio Access', description: 'Enter Studio', scope: 'platform', active: true },
-  { name: 'manage_org_users', label: 'Manage Org Users', description: 'Org members', scope: 'org', active: true },
-];
-
-function mockDataSource(rows = CAPS) {
-  return { find: vi.fn().mockResolvedValue({ data: rows }) } as any;
-}
-
-describe('CapabilityMultiSelectField', () => {
-  it('renders capabilities grouped by scope with human labels', async () => {
-    render(
-      <CapabilityMultiSelectField
-        value={'["studio.access"]'}
-        onChange={vi.fn()}
-        field={{ name: 'system_permissions' } as any}
-        dataSource={mockDataSource()}
-      />,
-    );
-    // group headers
-    expect(await screen.findByText('Platform')).toBeInTheDocument();
-    expect(screen.getByText('Organization')).toBeInTheDocument();
-    // labels, not raw names
-    expect(screen.getByRole('button', { name: 'Studio Access' })).toHaveAttribute('aria-pressed', 'true');
-    expect(screen.getByRole('button', { name: 'Manage Users' })).toHaveAttribute('aria-pressed', 'false');
-  });
-
-  it('emits a JSON-string array when a capability is toggled on', async () => {
-    const onChange = vi.fn();
-    render(
-      <CapabilityMultiSelectField
-        value={'["studio.access"]'}
-        onChange={onChange}
-        field={{ name: 'system_permissions' } as any}
-        dataSource={mockDataSource()}
-      />,
-    );
-    fireEvent.click(await screen.findByRole('button', { name: 'Manage Users' }));
-    expect(onChange).toHaveBeenCalledTimes(1);
-    const emitted = onChange.mock.calls[0][0];
-    // The emitted value must be a JSON *string* (not a raw array), byte-equal
-    // to the textarea storage contract.
-    expect(typeof emitted).toBe('string');
-    expect(JSON.parse(emitted)).toEqual(['studio.access', 'manage_users']);
-  });
-
-  it('removes a capability (and keeps emitting a JSON string) when toggled off', async () => {
-    const onChange = vi.fn();
-    render(
-      <CapabilityMultiSelectField
-        value={'["studio.access","manage_users"]'}
-        onChange={onChange}
-        field={{ name: 'system_permissions' } as any}
-        dataSource={mockDataSource()}
-      />,
-    );
-    // Chip labels now resolve through the i18n bundle (objectui#2600 B5), so an
-    // async translation-settle can re-render the chips between findBy and the
-    // click — re-query at click time so we act on the live node, not a detached one.
-    await screen.findByRole('button', { name: 'Studio Access' });
-    fireEvent.click(screen.getByRole('button', { name: 'Studio Access' }));
-    const emitted = onChange.mock.calls[0][0];
-    expect(typeof emitted).toBe('string');
-    expect(JSON.parse(emitted)).toEqual(['manage_users']);
-  });
-
-  it('preserves an unknown/legacy selected name not in the registry', async () => {
-    render(
-      <CapabilityMultiSelectField
-        value={'["studio.access","legacy.custom"]'}
-        onChange={vi.fn()}
-        field={{ name: 'system_permissions' } as any}
-        dataSource={mockDataSource()}
-      />,
-    );
-    // The unknown name still renders as a (selected) chip so it is not dropped.
-    const legacy = await screen.findByRole('button', { name: 'legacy.custom' });
-    expect(legacy).toHaveAttribute('aria-pressed', 'true');
-  });
-
-  it('renders selected labels as read-only badges when readonly', async () => {
-    render(
-      <CapabilityMultiSelectField
-        value={'["studio.access"]'}
-        onChange={vi.fn()}
-        field={{ name: 'system_permissions' } as any}
-        dataSource={mockDataSource()}
-        readonly
-      />,
-    );
-    // No toggle buttons in readonly mode.
-    expect(await screen.findByText('Studio Access')).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Manage Users' })).not.toBeInTheDocument();
-  });
-
-  // objectui#2600 B5 — curated platform caps get a localized label; package/
-  // admin-authored caps keep whatever label the registry served.
-  it('localizes curated capability labels but preserves registry labels for others', async () => {
-    render(
-      <CapabilityMultiSelectField
-        value={'[]'}
-        onChange={vi.fn()}
-        field={{ name: 'system_permissions' } as any}
-        dataSource={mockDataSource([
-          // Registry sends a shorter label; the curated client map wins.
-          { name: 'manage_org_users', label: 'Manage Org Users', description: 'Org members', scope: 'org', active: true },
-          // Not a curated platform capability — its registry label is kept.
-          { name: 'export_data', label: 'Export Data', description: 'Export', scope: 'org', active: true },
-        ])}
-      />,
-    );
-    expect(await screen.findByRole('button', { name: 'Manage Organization Users' })).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Manage Org Users' })).not.toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Export Data' })).toBeInTheDocument();
-  });
-});

package/src/widgets/CapabilityMultiSelectField.tsx

@@ -1,229 +0,0 @@
-import React from 'react';
-import { Badge, EmptyValue, cn } from '@object-ui/components';
-import { SchemaRendererContext } from '@object-ui/react';
-import type { DataSource, QueryParams } from '@object-ui/types';
-import { FieldWidgetComponentProps } from './types';
-import { useFieldTranslation } from './useFieldTranslation';
-
-/**
- * CapabilityMultiSelectField — structured picker for a permission set's
- * `system_permissions` (ADR-0056 / epic #2398, phase P2).
- *
- * `sys_permission_set.system_permissions` is framework-declared as a
- * `Field.textarea` that stores a **JSON-serialized array of capability names**
- * (e.g. `["setup.access","studio.access"]`; `security-plugin.ts` writes
- * `JSON.stringify(...)` and reads `parseJson(...)`). Editing that as raw JSON is
- * the anti-pattern ADR-0056 removes. This widget renders the same value as a
- * multi-select over the live `sys_capability` registry — grouped by scope,
- * labelled, with the capability description on hover — while round-tripping the
- * stored value **byte-for-byte** as a JSON string of names.
- *
- * Reached via the field `widget: 'capability-multiselect'` hint (stamped onto
- * the object metadata in MetadataProvider), registered in the field registry as
- * `field:capability-multiselect`.
- */
-
-interface Capability {
-  name: string;
-  label?: string;
-  description?: string;
-  scope?: string;
-  active?: boolean;
-}
-
-/**
- * Parse the stored value into the selected capability-name list. The canonical
- * storage is a JSON-string array; we also tolerate an already-parsed array (in
- * case a caller hands us the parsed value) and a bare comma-separated string
- * (legacy/hand-authored) so no selection is silently dropped.
- */
-export function parseCapabilityNames(value: unknown): string[] {
-  if (Array.isArray(value)) return value.map((v) => String(v)).filter(Boolean);
-  if (typeof value === 'string') {
-    const s = value.trim();
-    if (!s) return [];
-    try {
-      const parsed = JSON.parse(s);
-      if (Array.isArray(parsed)) return parsed.map((v) => String(v)).filter(Boolean);
-      // A JSON scalar (unexpected) — treat as a single name.
-      return [String(parsed)].filter(Boolean);
-    } catch {
-      // Not JSON — fall back to comma-splitting so legacy values survive.
-      return s.split(',').map((x) => x.trim()).filter(Boolean);
-    }
-  }
-  return [];
-}
-
-/**
- * Scope → group header order (platform powers first). The visible header is
- * localized via `capability.group.<scope>` (objectui#2600 B5) — the capability
- * *labels themselves* still come from the sys_capability registry, whose
- * per-locale localization is tracked separately (framework).
- */
-const SCOPE_ORDER = ['platform', 'org', 'other'] as const;
-
-/**
- * objectui#2600 B5 — the curated platform capabilities are a FIXED, known set
- * whose labels the sys_capability registry serves in English. Localize just
- * these client-side via `capability.label.<name>` (dots → underscores);
- * package- and admin-authored capabilities keep their authored registry label.
- * (Mirrors @objectstack/spec/security `PLATFORM_CAPABILITIES`.)
- */
-const CURATED_CAPABILITY_LABELS = new Set([
-  'manage_users',
-  'manage_org_users',
-  'manage_metadata',
-  'manage_platform_settings',
-  'setup_access',
-  'setup_write',
-  'studio_access',
-]);
-
-export function CapabilityMultiSelectField({
-  value,
-  onChange,
-  readonly,
-  className,
-  ...props
-}: FieldWidgetComponentProps<string | string[]>) {
-  const { t } = useFieldTranslation();
-  const ctx = React.useContext(SchemaRendererContext);
-  const dataSource: DataSource | null =
-    (props.dataSource as any) ?? (ctx as any)?.dataSource ?? null;
-  const disabled = props.disabled;
-
-  const [caps, setCaps] = React.useState<Capability[] | null>(null);
-
-  const selected = React.useMemo(() => parseCapabilityNames(value), [value]);
-
-  // Load the live capability registry (active only). Mirrors LookupField's
-  // context-dataSource access — createFieldRenderer does not forward the
-  // dataSource prop, so the SchemaRenderer context is the reliable source.
-  React.useEffect(() => {
-    if (!dataSource || typeof (dataSource as any).find !== 'function') return;
-    let cancelled = false;
-    (async () => {
-      try {
-        const res = await dataSource.find('sys_capability', {
-          $filter: { active: true },
-          $top: 500,
-        } as QueryParams);
-        const rows: Capability[] =
-          (res as any)?.data ?? (res as any)?.records ?? (Array.isArray(res) ? res : []);
-        if (!cancelled) setCaps(Array.isArray(rows) ? rows : []);
-      } catch {
-        if (!cancelled) setCaps([]);
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [dataSource]);
-
-  // Emit as a JSON string so the value round-trips byte-equivalent to the
-  // `system_permissions` textarea's `JSON.stringify(string[])` storage.
-  const emit = React.useCallback(
-    (names: string[]) => onChange(JSON.stringify(names) as any),
-    [onChange],
-  );
-
-  // Union of the fetched registry and any *selected* names not present in it
-  // (unknown / legacy / package-owned-inactive), so no current grant is hidden
-  // or dropped. Unknown names land in the "other" group.
-  const byName = React.useMemo(() => {
-    const map = new Map<string, Capability>();
-    for (const c of caps ?? []) if (c?.name) map.set(c.name, c);
-    for (const n of selected) if (!map.has(n)) map.set(n, { name: n, label: n, scope: 'other' });
-    return map;
-  }, [caps, selected]);
-
-  // Curated platform caps get a localized label (objectui#2600 B5); everything
-  // else keeps the registry-served label.
-  const labelFor = (name: string) => {
-    const norm = name.replace(/\./g, '_');
-    if (CURATED_CAPABILITY_LABELS.has(norm)) return t(`capability.label.${norm}`);
-    return byName.get(name)?.label || name;
-  };
-
-  // Group options by scope for the editable grid. Computed BEFORE the readonly
-  // early-return so the hook order stays stable regardless of `readonly`.
-  const groups = React.useMemo(() => {
-    const buckets = new Map<string, Capability[]>();
-    for (const c of byName.values()) {
-      const key = (SCOPE_ORDER as readonly string[]).includes(c.scope as string)
-        ? (c.scope as string)
-        : 'other';
-      const list = buckets.get(key) ?? [];
-      list.push(c);
-      buckets.set(key, list);
-    }
-    return SCOPE_ORDER.filter((s) => buckets.has(s)).map((s) => ({
-      scope: s,
-      label: t(`capability.group.${s}`),
-      items: (buckets.get(s) ?? []).sort((a, b) =>
-        (a.label || a.name).localeCompare(b.label || b.name),
-      ),
-    }));
-  }, [byName, t]);
-
-  if (readonly) {
-    if (selected.length === 0) return <EmptyValue />;
-    return (
-      <div className="flex flex-wrap gap-1">
-        {selected.map((name) => (
-          <Badge key={name} variant="outline" title={byName.get(name)?.description}>
-            {labelFor(name)}
-          </Badge>
-        ))}
-      </div>
-    );
-  }
-
-  const toggle = (name: string) => {
-    const next = selected.includes(name)
-      ? selected.filter((x) => x !== name)
-      : [...selected, name];
-    emit(next);
-  };
-
-  return (
-    <div className={cn('flex flex-col gap-3', className)}>
-      {caps === null && groups.length === 0 && (
-        <span className="text-sm text-muted-foreground">Loading capabilities…</span>
-      )}
-      {groups.map((group) => (
-        <div key={group.scope} className="flex flex-col gap-1.5">
-          <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-            {group.label}
-          </div>
-          <div className="flex flex-wrap gap-1.5">
-            {group.items.map((cap) => {
-              const active = selected.includes(cap.name);
-              return (
-                <button
-                  type="button"
-                  key={cap.name}
-                  onClick={() => toggle(cap.name)}
-                  disabled={disabled}
-                  aria-pressed={active}
-                  title={cap.description || undefined}
-                  className={cn(
-                    'rounded-full border px-3 py-1 text-sm transition-colors disabled:opacity-50',
-                    active
-                      ? 'border-primary bg-primary text-primary-foreground'
-                      : 'border-input bg-background text-foreground hover:bg-accent',
-                  )}
-                >
-                  {labelFor(cap.name)}
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export default CapabilityMultiSelectField;