@dxos/react-ui-form 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/components/Settings/SettingsFieldSet.tsx

@@ -1,257 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as SchemaAST from 'effect/SchemaAST';
-import * as String from 'effect/String';
-import React, { useCallback, useMemo } from 'react';
-
-import { SchemaEx } from '@dxos/effect';
-import { Input, Select } from '@dxos/react-ui';
-
-import { getFormProperties, type SelectOption, detectFieldType, getSelectOptionsFromAst } from '../../util';
-import { SettingsItem } from './SettingsItem';
-
-//
-// Types
-//
-
-/**
- * Props for a custom field renderer.
- * The renderer provides the control only; SettingsItem wrapper is handled by FieldSet.
- */
-export type SettingsFieldProps<T = any> = {
-  value: T;
-  onChange: (value: T) => void;
-  readonly?: boolean;
-};
-
-/**
- * Map of property names to either a custom field renderer or a nested field map for struct fields.
- * When a value type `T` is provided, the map shape is checked against the schema's value type.
- */
-export type SettingsFieldMap<T extends Record<string, any> = Record<string, any>> = {
-  [K in keyof T]?: NonNullable<T[K]> extends Record<string, any>
-    ? SettingsFieldMap<NonNullable<T[K]>>
-    : React.FC<SettingsFieldProps<T[K]>>;
-};
-
-export type SettingsFieldSetProps<T extends Record<string, any> = Record<string, any>> = {
-  /** Effect Schema for the settings object. */
-  schema: { ast: SchemaAST.AST };
-
-  /** Current settings values. */
-  values: T;
-
-  /** Callback when any value changes. Receives a new complete object. */
-  onValuesChanged?: (values: T) => void;
-
-  /** When true, all controls are disabled. */
-  readonly?: boolean;
-
-  /** Map of property names to custom field renderers. Nested objects map to struct sub-fields. */
-  fieldMap?: SettingsFieldMap<T>;
-
-  /** Control field visibility. Receives the dotted path (e.g. `'modelDefaults.edge'`) at every level. */
-  visible?: (path: string, values: T) => boolean;
-
-  /** Override the order of fields. Fields not listed are appended in schema order. Applied per scope. */
-  sort?: string[];
-
-  /** Internal: dot-path prefix used by recursive struct rendering. */
-  pathPrefix?: string;
-};
-
-//
-// Component
-//
-
-export const SettingsFieldSet = <T extends Record<string, any>>({
-  schema,
-  values,
-  onValuesChanged,
-  readonly,
-  fieldMap,
-  visible,
-  sort,
-  pathPrefix = '',
-}: SettingsFieldSetProps<T>) => {
-  const properties = useMemo(() => {
-    const props = getFormProperties(schema.ast);
-    if (!sort) {
-      return props;
-    }
-    const rank = (name: string) => {
-      const idx = sort.indexOf(name);
-      return idx === -1 ? Number.POSITIVE_INFINITY : idx;
-    };
-    return [...props].sort(({ name: a }, { name: b }) => rank(a.toString()) - rank(b.toString()));
-  }, [schema, sort]);
-
-  const handleChange = useCallback(
-    (name: string, value: unknown) => {
-      onValuesChanged?.({ ...values, [name]: value } as T);
-    },
-    [values, onValuesChanged],
-  );
-
-  return (
-    <>
-      {properties.map((property) => {
-        const name = property.name.toString();
-        const path = pathPrefix ? `${pathPrefix}.${name}` : name;
-        if (visible && !visible(path, values)) {
-          return null;
-        }
-
-        const entry = fieldMap?.[name as keyof typeof fieldMap] as
-          | React.FC<SettingsFieldProps>
-          | SettingsFieldMap
-          | undefined;
-        return (
-          <SettingsFieldItem
-            key={name}
-            path={path}
-            property={property}
-            value={values[name]}
-            onChange={(value) => handleChange(name, value)}
-            readonly={readonly}
-            customField={typeof entry === 'function' ? entry : undefined}
-            nestedFieldMap={typeof entry === 'object' ? entry : undefined}
-            visible={visible as (path: string, values: any) => boolean}
-            sort={sort}
-          />
-        );
-      })}
-    </>
-  );
-};
-
-SettingsFieldSet.displayName = 'Settings.FieldSet';
-
-//
-// Internal: render a single settings field.
-//
-
-type SettingsFieldItemProps = {
-  property: SchemaEx.SchemaProperty;
-  path: string;
-  value: any;
-  onChange: (value: any) => void;
-  readonly?: boolean;
-  customField?: React.FC<SettingsFieldProps>;
-  nestedFieldMap?: SettingsFieldMap;
-  visible?: (path: string, values: any) => boolean;
-  sort?: string[];
-};
-
-const SettingsFieldItem = ({
-  property,
-  path,
-  value,
-  onChange,
-  readonly,
-  customField,
-  nestedFieldMap,
-  visible,
-  sort,
-}: SettingsFieldItemProps) => {
-  const { type } = property;
-  const name = property.name.toString();
-  const title = SchemaEx.getAnnotation<string>(SchemaAST.TitleAnnotationId)(type) ?? String.capitalize(name);
-  const description = SchemaEx.getAnnotation<string>(SchemaAST.DescriptionAnnotationId)(type);
-
-  // Custom field renderer.
-  if (customField) {
-    const CustomField = customField;
-    return (
-      <SettingsItem title={title} description={description}>
-        <CustomField value={value} onChange={onChange} readonly={readonly} />
-      </SettingsItem>
-    );
-  }
-
-  const fieldType = detectFieldType(type);
-
-  switch (fieldType) {
-    case 'struct':
-      return (
-        <SettingsFieldSet
-          schema={{ ast: type }}
-          values={value ?? {}}
-          onValuesChanged={onChange}
-          readonly={readonly}
-          fieldMap={nestedFieldMap}
-          visible={visible}
-          sort={sort}
-          pathPrefix={path}
-        />
-      );
-
-    case 'boolean':
-      return (
-        <SettingsItem title={title} description={description}>
-          <Input.Switch disabled={readonly} checked={!!value} onCheckedChange={(checked) => onChange(!!checked)} />
-        </SettingsItem>
-      );
-
-    case 'select': {
-      const options = getSelectOptionsFromAst(type) ?? [];
-      return (
-        <SettingsItem title={title} description={description}>
-          <Select.Root
-            disabled={readonly}
-            value={value == null ? '' : globalThis.String(value)}
-            onValueChange={(selected) => {
-              const matched = options.find((option) => globalThis.String(option.value) === selected);
-              onChange(matched?.value ?? selected);
-            }}
-          >
-            <Select.TriggerButton disabled={readonly} />
-            <Select.Portal>
-              <Select.Content>
-                <Select.Viewport>
-                  {options.map((option: SelectOption) => (
-                    <Select.Option key={globalThis.String(option.value)} value={globalThis.String(option.value)}>
-                      {option.label ?? globalThis.String(option.value)}
-                    </Select.Option>
-                  ))}
-                </Select.Viewport>
-                <Select.Arrow />
-              </Select.Content>
-            </Select.Portal>
-          </Select.Root>
-        </SettingsItem>
-      );
-    }
-
-    case 'string':
-      return (
-        <SettingsItem title={title} description={description}>
-          <Input.TextInput disabled={readonly} value={value ?? ''} onChange={(event) => onChange(event.target.value)} />
-        </SettingsItem>
-      );
-
-    case 'number':
-      return (
-        <SettingsItem title={title} description={description}>
-          <Input.TextInput
-            disabled={readonly}
-            type='number'
-            value={value ?? ''}
-            onChange={(event) => {
-              if (event.target.value === '') {
-                onChange(undefined);
-                return;
-              }
-              const parsed = Number(event.target.value);
-              onChange(Number.isNaN(parsed) ? undefined : parsed);
-            }}
-          />
-        </SettingsItem>
-      );
-
-    default:
-      return null;
-  }
-};

package/src/components/Settings/SettingsItem.tsx

@@ -1,58 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type PropsWithChildren } from 'react';
-
-import { Input, type Label, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
-
-import { translationKey } from '#translations';
-
-const SETTINGS_PANEL_NAME = 'Settings.Panel';
-const SETTINGS_ITEM_NAME = 'Settings.Item';
-
-//
-// Panel (bordered card container).
-//
-
-type SettingsPanelProps = ThemedClassName<PropsWithChildren>;
-
-export const SettingsPanel = ({ classNames, children }: SettingsPanelProps) => {
-  return (
-    <div className={mx('flex flex-col gap-3 p-trim-md border border-separator rounded-sm', classNames)}>{children}</div>
-  );
-};
-
-SettingsPanel.displayName = SETTINGS_PANEL_NAME;
-
-//
-// Item (label + optional description + control, proper label semantics).
-//
-
-type SettingsItemProps = PropsWithChildren<{
-  title: Label;
-  description?: Label;
-}>;
-
-export const SettingsItem = ({ title, description = '', children }: SettingsItemProps) => {
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <Input.Root>
-      <SettingsPanel classNames='grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-x-trim-lg gap-y-0'>
-        <Input.Label classNames='pb-trim-md text-base-fg text-lg md:col-span-2'>
-          {toLocalizedString(title, t)}
-        </Input.Label>
-        <Input.DescriptionAndValidation>
-          <Input.Description classNames='text-base text-description'>
-            {toLocalizedString(description, t)}
-          </Input.Description>
-        </Input.DescriptionAndValidation>
-        <div className='text-end py-1'>{children}</div>
-      </SettingsPanel>
-    </Input.Root>
-  );
-};
-
-SettingsItem.displayName = SETTINGS_ITEM_NAME;

package/src/components/Settings/SettingsSelectField.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { Select } from '@dxos/react-ui';
-
-import { type SettingsFieldProps } from './SettingsFieldSet';
-
-export type SelectFieldOption = {
-  value: string;
-  label?: string;
-};
-
-export type CreateSelectFieldOptions = {
-  /** Options to display. Strings are used as both value and label. */
-  options: ReadonlyArray<string | SelectFieldOption>;
-  /** Label for the sentinel option that maps to `undefined`. Defaults to `'Default'`. Pass `null` to omit. */
-  defaultLabel?: string | null;
-};
-
-/**
- * Factory for a `SettingsFieldSet` `fieldMap` entry that renders a Select control
- * over a fixed list of options, with an optional sentinel for `undefined`.
- */
-export const createSelectField = ({
-  options,
-  defaultLabel = 'Default',
-}: CreateSelectFieldOptions): React.FC<SettingsFieldProps<string | undefined>> => {
-  const normalized = options.map((option) => (typeof option === 'string' ? { value: option, label: option } : option));
-  const hasDefault = defaultLabel !== null;
-  // Per-instance sentinel avoids collisions with real option values; empty string when the
-  // sentinel is omitted so `undefined` maps to a value Select.Root treats as "no selection".
-  const sentinel = hasDefault ? `__default__${Math.random().toString(36).slice(2)}` : '';
-
-  return ({ value, onChange, readonly }) => (
-    <Select.Root
-      disabled={readonly}
-      value={value ?? sentinel}
-      onValueChange={(next) => onChange(hasDefault && next === sentinel ? undefined : next)}
-    >
-      <Select.TriggerButton disabled={readonly} />
-      <Select.Portal>
-        <Select.Content>
-          <Select.Viewport>
-            {hasDefault && <Select.Option value={sentinel}>{defaultLabel}</Select.Option>}
-            {normalized.map((option) => (
-              <Select.Option key={option.value} value={option.value}>
-                {option.label ?? option.value}
-              </Select.Option>
-            ))}
-          </Select.Viewport>
-          <Select.Arrow />
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
-  );
-};

package/src/components/Settings/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './Settings';
-export { type SettingsFieldMap, type SettingsFieldProps, type SettingsFieldSetProps } from './SettingsFieldSet';
-export { createSelectField, type CreateSelectFieldOptions, type SelectFieldOption } from './SettingsSelectField';

package/src/util/field-type.ts

@@ -1,60 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as SchemaAST from 'effect/SchemaAST';
-
-import { SchemaEx } from '@dxos/effect';
-
-/**
- * Detected field type for a schema property.
- */
-export type SettingsFieldType = 'boolean' | 'string' | 'number' | 'select' | 'struct';
-
-export type SelectOption = {
-  value: string | number;
-  label?: string;
-};
-
-/**
- * Detect the field type from an Effect Schema AST node.
- */
-export const detectFieldType = (ast: SchemaAST.AST): SettingsFieldType | undefined => {
-  if (SchemaEx.isLiteralUnion(ast)) {
-    return 'select';
-  }
-  if (SchemaAST.isTypeLiteral(ast)) {
-    return 'struct';
-  }
-
-  switch (ast._tag) {
-    case 'BooleanKeyword':
-      return 'boolean';
-    case 'StringKeyword':
-      return 'string';
-    case 'NumberKeyword':
-      return 'number';
-  }
-
-  return undefined;
-};
-
-/**
- * Extract select options from a literal union AST node.
- * Reads title annotations from individual literals for labels.
- */
-export const getSelectOptionsFromAst = (ast: SchemaAST.AST): SelectOption[] | undefined => {
-  if (!SchemaEx.isLiteralUnion(ast)) {
-    return undefined;
-  }
-
-  return (ast as SchemaAST.Union<SchemaAST.Literal>).types.flatMap((literalNode) => {
-    const value = literalNode.literal;
-    if (typeof value !== 'string' && typeof value !== 'number') {
-      return [];
-    }
-    const title = SchemaEx.getAnnotation<string>(SchemaAST.TitleAnnotationId, false)(literalNode);
-    const label = title ?? (typeof value === 'string' ? value.charAt(0).toUpperCase() + value.slice(1) : String(value));
-    return [{ value, label }];
-  });
-};