@dxos/react-ui-form 0.8.4-main.e8ec1fe → 0.8.4-main.effb148878

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,58 @@
+//
+// 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-foreground 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

@@ -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';

package/src/components/ViewEditor/ViewEditor.stories.tsx

@@ -6,44 +6,44 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { DXN, Filter, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
-import { type EchoSchema, Format } from '@dxos/echo/internal';
+import { DXN, EchoURI, Filter, JsonSchema, Obj, Query, type QueryAST, Tag, Type, type View } from '@dxos/echo';
+import { Format, type Mutable } from '@dxos/echo/internal';
 import { useQuery } from '@dxos/react-client/echo';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { type ProjectionModel, View, getTypenameFromQuery } from '@dxos/schema';
-import { Employer, Organization, Person, Project } from '@dxos/types';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { type ProjectionModel, ViewModel, getTypenameFromQuery } from '@dxos/schema';
+import { Employer, Organization, Person, Pipeline } from '@dxos/types';
 
-import { translations } from '../../translations';
-import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
+import { translations } from '#translations';
 
+import { TestLayout, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 
 const types = [
   // TODO(burdon): Get label from annotation.
-  { value: Organization.Organization.typename, label: 'Organization' },
-  { value: Person.Person.typename, label: 'Person' },
-  { value: Type.getTypename(Project.Project), label: 'Project' },
-  { value: Employer.Employer.typename, label: 'Employer' },
+  { value: Type.getTypename(Organization.Organization), label: 'Organization' },
+  { value: Type.getTypename(Person.Person), label: 'Person' },
+  { value: Type.getTypename(Pipeline.Pipeline), label: 'Project' },
+  { value: Type.getTypename(Employer.Employer), label: 'Employer' },
 ];
 
 // Type definition for debug objects exposed to tests.
 export type ViewEditorDebugObjects = {
-  schema: EchoSchema;
+  type: Type.AnyEntity;
   view: View.View;
   projection: ProjectionModel;
 };
 
-type StoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
+type DefaultStoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
 
-const DefaultStory = (props: StoryProps) => {
-  const { space } = useClientProvider();
-  const [schema, setSchema] = useState<EchoSchema>();
+const DefaultStory = (props: DefaultStoryProps) => {
+  const { space } = useClientStory();
+  const [type, setType] = useState<Type.AnyEntity>();
   const [view, setView] = useState<View.View>();
   const projectionRef = useRef<ProjectionModel>(null);
 
-  const tags = useQuery(space, Filter.type(Tag.Tag));
+  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
 
   useAsyncEffect(async () => {
     if (space) {
@@ -51,47 +51,38 @@ const DefaultStory = (props: StoryProps) => {
         name: Schema.String,
         email: Format.Email,
         salary: Format.Currency(),
-      }).pipe(
-        Type.Obj({
-          typename: 'example.com/type/Test',
-          version: '0.1.0',
-        }),
-      );
+      }).pipe(Type.makeObject(DXN.make('com.example.type.test', '0.1.0')));
 
       const AlternateSchema = Schema.Struct({
         title: Schema.String,
         description: Schema.String,
         completed: Schema.Boolean,
-      }).pipe(
-        Type.Obj({
-          typename: 'example.com/type/Alternate',
-          version: '0.1.0',
-        }),
-      );
+      }).pipe(Type.makeObject(DXN.make('com.example.type.alternate', '0.1.0')));
 
       const [testSchema] = await space.db.schemaRegistry.register([TestSchema, AlternateSchema]);
-      const view = View.make({
+      const view = ViewModel.make({
         name: 'Test',
         query: Query.select(Filter.type(TestSchema)),
-        jsonSchema: Type.toJsonSchema(TestSchema),
-        presentation: Obj.make(Type.Expando, {}),
+        jsonSchema: JsonSchema.toJsonSchema(TestSchema),
       });
 
-      setSchema(testSchema);
+      setType(testSchema);
       setView(view);
     }
   }, [space]);
 
   const updateViewQuery = useCallback(
-    async (newQuery: QueryAST.Query, target?: string) => {
-      if (!schema || !view || !space) {
+    async (newQuery: QueryAST.Query, target?: EchoURI.EchoURI) => {
+      if (!type || !view || !space) {
         return;
       }
 
-      if (props.mode === 'query') {
-        const queue = target && DXN.tryParse(target) ? target : undefined;
-        const query = queue ? Query.fromAst(newQuery).options({ queues: [queue] }) : Query.fromAst(newQuery);
-        view.query.ast = query.ast;
+      if (props.mode === 'tag') {
+        const queue = target;
+        const query = queue ? Query.fromAst(newQuery).from({ feeds: [queue] }) : Query.fromAst(newQuery);
+        Obj.update(view, (view) => {
+          view.query.ast = query.ast as Mutable<typeof query.ast>;
+        });
 
         const typename = getTypenameFromQuery(query.ast);
         const [newSchema] = await space.db.schemaRegistry.query({ typename }).run();
@@ -99,20 +90,21 @@ const DefaultStory = (props: StoryProps) => {
           return;
         }
 
-        const newView = View.make({
+        const newView = ViewModel.make({
           query,
           jsonSchema: newSchema.jsonSchema,
-          presentation: Obj.make(Type.Expando, {}),
         });
-        view.projection = Obj.getSnapshot(newView).projection;
-        setSchema(() => newSchema);
+        Obj.update(view, (view) => {
+          view.projection = Obj.getSnapshot(newView).projection as Mutable<typeof view.projection>;
+        });
+        setType(() => newSchema);
       } else {
-        console.log('updateViewQuery', { newQuery });
-        view.query.ast = newQuery;
-        schema.updateTypename(getTypenameFromQuery(newQuery));
+        Obj.update(view, (view) => {
+          view.query.ast = newQuery as Mutable<typeof newQuery>;
+        });
       }
     },
-    [view, schema],
+    [view, type],
   );
 
   const handleDelete = useCallback(
@@ -122,41 +114,39 @@ const DefaultStory = (props: StoryProps) => {
 
   // Expose objects on window for test access.
   useEffect(() => {
-    if (typeof window !== 'undefined' && schema && view && projectionRef.current) {
+    if (typeof window !== 'undefined' && type && view && projectionRef.current) {
       (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] = {
-        schema,
+        type,
         view,
         projection: projectionRef.current,
       } satisfies ViewEditorDebugObjects;
     }
-  }, [schema, view]);
+  }, [type, view]);
 
   // NOTE(ZaymonFC): This looks awkward but it resolves an infinite parsing issue with sb.
   const json = useMemo(
-    () => JSON.parse(JSON.stringify({ schema, view, projection: projectionRef.current })),
-    [JSON.stringify(schema), JSON.stringify(view)],
+    () => JSON.parse(JSON.stringify({ schema: type, view, projection: projectionRef.current })),
+    [JSON.stringify(type), JSON.stringify(view)],
   );
 
-  if (!schema || !view) {
+  if (!type || !view) {
     return <div />;
   }
 
   return (
     <TestLayout json={json}>
-      <TestPanel>
-        <ViewEditor
-          ref={projectionRef}
-          schema={schema}
-          view={view}
-          registry={space?.db.schemaRegistry}
-          mode={props.mode}
-          readonly={props.readonly}
-          types={types}
-          tags={tags}
-          onQueryChanged={updateViewQuery}
-          onDelete={handleDelete}
-        />
-      </TestPanel>
+      <ViewEditor
+        ref={projectionRef}
+        type={type}
+        view={view}
+        registry={space?.db.schemaRegistry}
+        mode={props.mode}
+        readonly={props.readonly}
+        types={types}
+        tags={tags}
+        onQueryChanged={updateViewQuery}
+        onDelete={handleDelete}
+      />
     </TestLayout>
   );
 };
@@ -174,7 +164,8 @@ const meta = {
         space.db.add(Tag.make({ label: 'New' }));
       },
     }),
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
   ],
   parameters: {
     layout: 'fullscreen',
@@ -194,8 +185,8 @@ export const Readonly: Story = {
   },
 };
 
-export const QueryMode: Story = {
+export const TagQueryMode: Story = {
   args: {
-    mode: 'query',
+    mode: 'tag',
   },
 };