@dxos/react-ui-form 0.8.4-main.b97322e → 0.8.4-main.bcb3aa67d6

package/src/components/ObjectPicker/ObjectPicker.tsx

@@ -0,0 +1,186 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import type * as Schema from 'effect/Schema';
+import React, { type KeyboardEvent, forwardRef, useCallback, useState } from 'react';
+
+import { type Palette, Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Combobox, useSearchListInput, useSearchListResults } from '@dxos/react-ui-search';
+
+import { translationKey } from '../../translations';
+import { Form } from '../Form';
+import { type FormFieldMap } from '../Form/FormFieldComponent';
+
+export type RefOption = {
+  id: string;
+  label: string;
+  hue?: Palette;
+};
+
+export type ObjectPickerContentProps = ThemedClassName<{
+  options: RefOption[];
+  selectedIds?: string[];
+  createOptionLabel?: [string, { ns: string }];
+  createOptionIcon?: string;
+  createSchema?: Schema.Schema.AnyNoContext;
+  createInitialValuePath?: string;
+  createFieldMap?: FormFieldMap;
+  onCreate?: (values: any) => void;
+  onSelect: (id: string) => void;
+}>;
+
+const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>(
+  (
+    {
+      options,
+      selectedIds,
+      createSchema,
+      createOptionLabel,
+      createOptionIcon,
+      createInitialValuePath,
+      createFieldMap,
+      onSelect,
+      onCreate,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const { t } = useTranslation(translationKey);
+    const [showForm, setShowForm] = useState(false);
+    const [formInitialValue, setFormInitialValue] = useState<string>('');
+
+    const { results, handleSearch } = useSearchListResults({
+      items: options,
+    });
+
+    const handleFormSave = useCallback(
+      (values: any) => {
+        onCreate?.(values);
+        setShowForm(false);
+        setFormInitialValue('');
+      },
+      [onCreate],
+    );
+
+    const handleFormCancel = useCallback(() => {
+      setShowForm(false);
+      setFormInitialValue('');
+    }, []);
+
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent) => {
+        if (
+          event.key === 'Enter' &&
+          createSchema &&
+          (event.currentTarget as HTMLElement).querySelector(
+            '[role="option"][aria-selected="true"][data-value="__create__"]',
+          )
+        ) {
+          event.stopPropagation();
+          event.preventDefault();
+          // Get the current query from the input element
+          const input = (event.currentTarget as HTMLElement).querySelector('input[type="text"]') as HTMLInputElement;
+          const currentQuery = input?.value || '';
+          setFormInitialValue(currentQuery);
+          setShowForm(true);
+        }
+      },
+      [createSchema],
+    );
+
+    if (showForm && createSchema) {
+      return (
+        <Combobox.Content {...props} onSearch={handleSearch} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
+          <Popover.Viewport>
+            <Form.Root
+              testId='create-referenced-object-form'
+              schema={createSchema}
+              defaultValues={createInitialValuePath ? { [createInitialValuePath]: formInitialValue } : {}}
+              fieldMap={createFieldMap}
+              onSave={handleFormSave}
+              onCancel={handleFormCancel}
+            >
+              <Form.Viewport>
+                <Form.Content>
+                  <Form.FieldSet />
+                  <Form.Actions />
+                </Form.Content>
+              </Form.Viewport>
+            </Form.Root>
+          </Popover.Viewport>
+          <Combobox.Arrow />
+        </Combobox.Content>
+      );
+    }
+
+    return (
+      <Combobox.Content {...props} onSearch={handleSearch} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
+        <Combobox.Input placeholder={t('ref-field-combobox-input.placeholder')} autoFocus />
+        <Combobox.List>
+          {results.map((option) => (
+            <Combobox.Item
+              key={option.id}
+              value={option.id}
+              label={option.label}
+              checked={selectedIds?.includes(option.id)}
+              onSelect={() => onSelect(option.id)}
+              classNames='flex items-center gap-2'
+            />
+          ))}
+          {createSchema && onCreate && (
+            <CreateItem
+              createOptionLabel={createOptionLabel}
+              createOptionIcon={createOptionIcon ?? 'ph--plus--regular'}
+              onCreateItemSelect={(query: string) => {
+                setFormInitialValue(query);
+                setShowForm(true);
+              }}
+            />
+          )}
+        </Combobox.List>
+        <Combobox.Arrow />
+      </Combobox.Content>
+    );
+  },
+);
+
+const CreateItem = ({
+  createOptionLabel,
+  createOptionIcon,
+  onCreateItemSelect,
+}: {
+  createOptionLabel?: [string, { ns: string }];
+  createOptionIcon: string;
+  onCreateItemSelect: (query: string) => void;
+}) => {
+  const { t } = useTranslation(translationKey);
+  const { query } = useSearchListInput();
+
+  const label = createOptionLabel
+    ? t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: query })
+    : t('create-option.label');
+
+  return (
+    <Combobox.Item
+      value='__create__'
+      label={label}
+      icon={createOptionIcon}
+      classNames='flex items-center gap-2'
+      closeOnSelect={false}
+      onSelect={() => {
+        onCreateItemSelect(query);
+      }}
+    />
+  );
+};
+
+ObjectPickerContent.displayName = 'ObjectPicker.Content';
+
+export const ObjectPicker = {
+  Root: Combobox.Root,
+  Portal: Combobox.Portal,
+  Trigger: Combobox.Trigger,
+  VirtualTrigger: Combobox.VirtualTrigger,
+  Content: ObjectPickerContent,
+};

package/src/components/{ControlSection → ObjectPicker}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './ControlSection';
+export * from './ObjectPicker';

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

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { faker } 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';
+
+faker.seed(132);
+
+const DefaultStory = () => {
+  return (
+    <Settings.Viewport>
+      <Settings.Section title='Settings' description={faker.lorem.paragraphs(1)}>
+        <Settings.Item title={faker.lorem.sentence(2)} description={faker.lorem.paragraphs(1)}>
+          <Input.TextInput placeholder='Input' />
+        </Settings.Item>
+        <Settings.Item title={faker.lorem.sentence(2)} description={faker.lorem.paragraphs(2)}>
+          <Input.Switch />
+        </Settings.Item>
+        <Settings.Item title={faker.lorem.sentence(3)} description={faker.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 = {};

package/src/components/Settings/Settings.tsx

@@ -0,0 +1,129 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { Input, type Label, ScrollArea, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+
+import { translationKey } from '../../translations';
+
+const SETTINGS_ROOT_NAME = 'Settings.Root';
+const SETTINGS_VIEWPORT_NAME = 'Settings.Viewport';
+const SETTINGS_SECTION_NAME = 'Settings.Section';
+const SETTINGS_PANEL_NAME = 'Settings.Panel';
+const SETTINGS_ITEM_NAME = 'Settings.Item';
+
+//
+// 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;
+
+//
+// Panel (bordered card container).
+//
+
+type SettingsPanelProps = ThemedClassName<PropsWithChildren>;
+
+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;
+}>;
+
+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;
+
+//
+// Settings
+//
+
+export const Settings = {
+  Root: SettingsRoot,
+  Viewport: SettingsViewport,
+  Section: SettingsSection,
+  Panel: SettingsPanel,
+  Item: SettingsItem,
+};

package/src/components/Settings/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Settings';

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

@@ -2,125 +2,203 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
-import React, { useCallback, useMemo, useState, useEffect } from 'react';
-
-import { Obj, Type } from '@dxos/echo';
-import { Format, type EchoSchema, toJsonSchema, TypedObject } from '@dxos/echo-schema';
-import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
+import * as Schema from 'effect/Schema';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { DXN, Filter, JsonSchema, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
+import { type View } from '@dxos/echo';
+import { type EchoSchema, Format, type Mutable } from '@dxos/echo/internal';
+import { useQuery } from '@dxos/react-client/echo';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { DataType, ProjectionModel, createView } from '@dxos/schema';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+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 { ViewEditor, type ViewEditorProps } from './ViewEditor';
 import { translations } from '../../translations';
-import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
+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: Pipeline.Pipeline.typename, label: 'Project' },
+  { value: Employer.Employer.typename, label: 'Employer' },
+];
 
 // Type definition for debug objects exposed to tests.
 export type ViewEditorDebugObjects = {
   schema: EchoSchema;
-  view: DataType.View;
+  view: View.View;
   projection: ProjectionModel;
 };
 
-type StoryProps = Pick<ViewEditorProps, 'readonly'>;
+type DefaultStoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
 
-const DefaultStory = (props: StoryProps) => {
-  const space = useSpace();
+const DefaultStory = (props: DefaultStoryProps) => {
+  const { space } = useClientStory();
   const [schema, setSchema] = useState<EchoSchema>();
-  const [view, setView] = useState<DataType.View>();
-  const [projection, setProjection] = useState<ProjectionModel>();
+  const [view, setView] = useState<View.View>();
+  const projectionRef = useRef<ProjectionModel>(null);
+
+  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
+
   useAsyncEffect(async () => {
     if (space) {
-      class TestSchema extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
+      const TestSchema = Schema.Struct({
         name: Schema.String,
         email: Format.Email,
         salary: Format.Currency(),
-      }) {}
-
-      const [schema] = await space.db.schemaRegistry.register([TestSchema]);
-      const view = createView({
+      }).pipe(
+        Type.object({
+          typename: 'com.example.type.test',
+          version: '0.1.0',
+        }),
+      );
+
+      const AlternateSchema = Schema.Struct({
+        title: Schema.String,
+        description: Schema.String,
+        completed: Schema.Boolean,
+      }).pipe(
+        Type.object({
+          typename: 'com.example.type.alternate',
+          version: '0.1.0',
+        }),
+      );
+
+      const [testSchema] = await space.db.schemaRegistry.register([TestSchema, AlternateSchema]);
+      const view = ViewModel.make({
         name: 'Test',
-        typename: schema.typename,
-        jsonSchema: toJsonSchema(TestSchema),
-        presentation: Obj.make(Type.Expando, {}),
+        query: Query.select(Filter.type(TestSchema)),
+        jsonSchema: JsonSchema.toJsonSchema(TestSchema),
       });
-      const projection = new ProjectionModel(schema.jsonSchema, view.projection);
 
-      setSchema(schema);
+      setSchema(testSchema);
       setView(view);
-      setProjection(projection);
     }
   }, [space]);
 
-  const views = useQuery(space, Filter.type(DataType.View));
-  const currentTypename = useMemo(() => view?.query?.typename, [view]);
-  const updateViewTypename = useCallback(
-    (newTypename: string) => {
-      if (!schema) {
+  const updateViewQuery = useCallback(
+    async (newQuery: QueryAST.Query, target?: string) => {
+      if (!schema || !view || !space) {
         return;
       }
-      const matchingViews = views.filter((view) => view.query.typename === currentTypename);
-      for (const view of matchingViews) {
-        view.query.typename = newTypename;
+
+      if (props.mode === 'tag') {
+        const queue = target && DXN.tryParse(target) ? target : undefined;
+        const query = queue ? Query.fromAst(newQuery).from({ queues: [queue] }) : Query.fromAst(newQuery);
+        Obj.change(view, (obj) => {
+          obj.query.ast = query.ast as Mutable<typeof query.ast>;
+        });
+
+        const typename = getTypenameFromQuery(query.ast);
+        const [newSchema] = await space.db.schemaRegistry.query({ typename }).run();
+        if (!newSchema) {
+          return;
+        }
+
+        const newView = ViewModel.make({
+          query,
+          jsonSchema: newSchema.jsonSchema,
+        });
+        Obj.change(view, (obj) => {
+          obj.projection = Obj.getSnapshot(newView).projection as Mutable<typeof obj.projection>;
+        });
+        setSchema(() => newSchema);
+      } else {
+        Obj.change(view, (obj) => {
+          obj.query.ast = newQuery as Mutable<typeof newQuery>;
+        });
+        schema.updateTypename(getTypenameFromQuery(newQuery));
       }
-      schema.updateTypename(newTypename);
     },
-    [views, schema],
+    [view, schema],
   );
 
-  const handleDelete = useCallback((property: string) => projection?.deleteFieldProjection(property), [projection]);
+  const handleDelete = useCallback(
+    (property: string) => projectionRef.current?.deleteFieldProjection(property),
+    [projectionRef],
+  );
 
   // Expose objects on window for test access.
   useEffect(() => {
-    if (typeof window !== 'undefined' && schema && view && projection) {
-      (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] = { schema, view, projection } satisfies ViewEditorDebugObjects;
+    if (typeof window !== 'undefined' && schema && view && projectionRef.current) {
+      (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] = {
+        schema,
+        view,
+        projection: projectionRef.current,
+      } satisfies ViewEditorDebugObjects;
     }
-  }, [schema, view, projection]);
+  }, [schema, 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 })),
-    [JSON.stringify(schema), JSON.stringify(view), JSON.stringify(projection)],
+    () => JSON.parse(JSON.stringify({ schema, view, projection: projectionRef.current })),
+    [JSON.stringify(schema), JSON.stringify(view)],
   );
 
-  if (!schema || !view || !projection) {
+  if (!schema || !view) {
     return <div />;
   }
 
   return (
     <TestLayout json={json}>
-      <TestPanel>
-        <ViewEditor
-          schema={schema}
-          view={view}
-          registry={space?.db.schemaRegistry}
-          readonly={props.readonly}
-          onTypenameChanged={updateViewTypename}
-          onDelete={handleDelete}
-        />
-      </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}
+      />
     </TestLayout>
   );
 };
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'ui/react-ui-form/ViewEditor',
   render: DefaultStory,
-  decorators: [withClientProvider({ createSpace: true }), withLayout({ fullscreen: true }), withTheme],
-  parameters: { translations },
-};
+  decorators: [
+    withClientProvider({
+      createSpace: true,
+      types: [Tag.Tag],
+      onCreateSpace: ({ space }) => {
+        space.db.add(Tag.make({ label: 'Important' }));
+        space.db.add(Tag.make({ label: 'Investor' }));
+        space.db.add(Tag.make({ label: 'New' }));
+      },
+    }),
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
 export const Readonly: Story = {
-  args: { readonly: true },
+  args: {
+    readonly: true,
+  },
+};
+
+export const TagQueryMode: Story = {
+  args: {
+    mode: 'tag',
+  },
 };