@dxos/react-ui-form 0.8.4-main.f5c0578 → 0.8.4-main.fcc0d83b33

package/src/components/Settings/Settings.stories.tsx

@@ -0,0 +1,104 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React from 'react';
+
+import { random } from '@dxos/random';
+import { Button, Input } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { Settings } from './Settings';
+
+random.seed(132);
+
+const DefaultStory = () => {
+  return (
+    <Settings.Viewport>
+      <Settings.Section title='Settings' description={random.lorem.paragraphs(1)}>
+        <Settings.Item title={random.lorem.sentence(2)} description={random.lorem.paragraphs(1)}>
+          <Input.TextInput placeholder='Input' />
+        </Settings.Item>
+        <Settings.Item title={random.lorem.sentence(2)} description={random.lorem.paragraphs(2)}>
+          <Input.Switch />
+        </Settings.Item>
+        <Settings.Item title={random.lorem.sentence(3)} description={random.lorem.paragraphs(2)}>
+          <Button>Test</Button>
+        </Settings.Item>
+      </Settings.Section>
+      <Settings.Section title='Panel Example'>
+        <Settings.Panel>
+          <h3 className='text-lg mb-2'>Members</h3>
+          <p className='text-description'>Content inside a panel.</p>
+        </Settings.Panel>
+      </Settings.Section>
+    </Settings.Viewport>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/Settings',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+const TestViewModes = ['preview', 'readonly', 'source'] as const;
+const TestViewMode = Schema.Union(...TestViewModes.map((mode) => Schema.Literal(mode)));
+
+const TestSettings = Schema.mutable(
+  Schema.Struct({
+    viewMode: TestViewMode.annotations({ title: 'View mode', description: 'Default document view mode.' }),
+    toolbar: Schema.optional(
+      Schema.Boolean.annotations({ title: 'Show toolbar', description: 'Display formatting toolbar.' }),
+    ),
+    fontSize: Schema.optional(
+      Schema.Number.annotations({ title: 'Font size', description: 'Editor font size in pixels.' }),
+    ),
+    placeholder: Schema.optional(
+      Schema.String.annotations({ title: 'Placeholder', description: 'Default placeholder text.' }),
+    ),
+    debug: Schema.optional(Schema.Boolean.annotations({ title: 'Debug mode', description: 'Enable debug features.' })),
+  }),
+);
+
+type TestSettings = Schema.Schema.Type<typeof TestSettings>;
+
+const FieldSetStory = () => {
+  const [values, setValues] = React.useState<TestSettings>({
+    viewMode: 'preview',
+    toolbar: true,
+    fontSize: 14,
+    debug: false,
+  });
+
+  return (
+    <Settings.Viewport>
+      <Settings.Section title='Plugin Settings (Auto-generated)'>
+        <Settings.FieldSet
+          schema={TestSettings}
+          values={values}
+          onValuesChanged={setValues}
+          visible={(path, values) => path !== 'placeholder' || !!values.debug}
+        />
+      </Settings.Section>
+    </Settings.Viewport>
+  );
+};
+
+export const FieldSet: Story = {
+  render: FieldSetStory,
+};

package/src/components/Settings/Settings.tsx

@@ -0,0 +1,82 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { type Label, ScrollArea, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+
+import { translationKey } from '#translations';
+
+import { SettingsFieldSet } from './SettingsFieldSet';
+import { SettingsItem, SettingsPanel } from './SettingsItem';
+
+const SETTINGS_ROOT_NAME = 'Settings.Root';
+const SETTINGS_VIEWPORT_NAME = 'Settings.Viewport';
+const SETTINGS_SECTION_NAME = 'Settings.Section';
+
+//
+// Root (headless — no styling, no scroll).
+//
+
+type SettingsRootProps = ThemedClassName<PropsWithChildren>;
+
+const SettingsRoot = ({ children, classNames }: SettingsRootProps) => {
+  return <div className={mx('flex flex-col gap-2', classNames)}>{children}</div>;
+};
+
+SettingsRoot.displayName = SETTINGS_ROOT_NAME;
+
+//
+// Viewport (scroll area + padding + document layout).
+//
+
+const SettingsViewport = composable<HTMLDivElement>(({ children, ...props }, forwardedRef) => {
+  return (
+    <ScrollArea.Root {...composableProps(props)} orientation='vertical' centered thin ref={forwardedRef}>
+      <ScrollArea.Viewport classNames='px-4 pointer-coarse:px-2'>
+        <div role='none' className='dx-document flex flex-col gap-2 py-4'>
+          {children}
+        </div>
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+});
+
+SettingsViewport.displayName = SETTINGS_VIEWPORT_NAME;
+
+//
+// Section (title + optional description + children with spacing).
+//
+
+type SettingsSectionProps = PropsWithChildren<{
+  title: Label;
+  description?: Label;
+}>;
+
+const SettingsSection = ({ title, description, children }: SettingsSectionProps) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <>
+      <h2 className='px-trim-md mt-trim-md text-xl'>{toLocalizedString(title, t)}</h2>
+      {description && <p className='px-trim-md text-description'>{toLocalizedString(description, t)}</p>}
+      <div className='w-full pt-trim-md space-y-trim-md'>{children}</div>
+    </>
+  );
+};
+
+SettingsSection.displayName = SETTINGS_SECTION_NAME;
+
+//
+// Settings
+//
+
+export const Settings = {
+  Root: SettingsRoot,
+  Viewport: SettingsViewport,
+  Section: SettingsSection,
+  Panel: SettingsPanel,
+  Item: SettingsItem,
+  FieldSet: SettingsFieldSet,
+};

package/src/components/Settings/SettingsFieldSet.tsx

@@ -0,0 +1,257 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as SchemaAST from 'effect/SchemaAST';
+import * as String from 'effect/String';
+import React, { useCallback, useMemo } from 'react';
+
+import { getAnnotation, type SchemaProperty } 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: 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 = getAnnotation<string>(SchemaAST.TitleAnnotationId)(type) ?? String.capitalize(name);
+  const description = 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

@@ -0,0 +1,62 @@
+//
+// 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 role='none' 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-surface-text 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 role='none' className='text-end py-1'>
+          {children}
+        </div>
+      </SettingsPanel>
+    </Input.Root>
+  );
+};
+
+SettingsItem.displayName = SETTINGS_ITEM_NAME;

package/src/components/Settings/SettingsSelectField.tsx

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

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