@dxos/react-ui-form 0.8.3 → 0.8.4-main.28f8d3d

package/src/components/Form/custom/SelectOptionsInput.tsx

@@ -2,19 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useState, useRef } from 'react';
+import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 
 import { type SelectOption } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
-import { type ChromaticPalette, Icon, IconButton, Input, Tag, Toolbar, useTranslation } from '@dxos/react-ui';
+import { type ChromaticPalette, IconButton, Input, Tag, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { HuePicker } from '@dxos/react-ui-pickers';
-import { hues, mx } from '@dxos/react-ui-theme';
+import { hues, subtleHover } from '@dxos/react-ui-theme';
 
 import { translationKey } from '../../../translations';
 import { InputHeader, type InputProps } from '../Input';
 
-// TODO(ZaymonFC): Handle disabled.
 export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue, onValueChange }: InputProps) => {
   const [selected, setSelectedId] = useState<string | null>(null);
   const [isNewOption, setIsNewOption] = useState(false);
@@ -115,7 +114,12 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
       <InputHeader error={error} label={label} />
       <div role='none'>
         {options && (
-          <List.Root items={options} isItem={(item) => true} onMove={handleMove}>
+          <List.Root
+            items={options}
+            isItem={(item) => true}
+            onMove={disabled ? undefined : handleMove}
+            readonly={disabled}
+          >
             {({ items }) => (
               <div role='list' className='w-full overflow-auto'>
                 {items?.map((item) => (
@@ -123,26 +127,30 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                     <List.Item
                       role='button'
                       item={item}
-                      classNames={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
+                      classNames={[subtleHover, 'flex flex-col cursor-pointer rounded-sm']}
                       aria-expanded={selected === item.id}
                     >
                       <div className='flex items-center'>
-                        <List.ItemDragHandle />
+                        <List.ItemDragHandle disabled={disabled} />
                         <List.ItemTitle onClick={() => handleClick(item.id)} classNames='flex-1'>
                           {/* TODO(ZaymonFC): Move spacer into Tag component. */}
                           <Tag palette={item.color as ChromaticPalette}>{item.title || '\u200b'}</Tag>
                         </List.ItemTitle>
-                        <Icon
+                        <IconButton
+                          iconOnly
+                          variant='ghost'
+                          label={t(selected === item.id ? 'collapse label' : 'expand label', { ns: 'os' })}
                           icon={selected === item.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
                           onClick={() => handleClick(item.id)}
                         />
                       </div>
                       {selected === item.id && (
-                        <div className='mis-4 mbs-2 flex flex-col gap-1'>
+                        <div className='pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine'>
                           {/* 16px to match drag handle width. */}
                           <Input.Label classNames='text-xs'>{t('select option label')}</Input.Label>
-                          <div className='flex flex-row items-center gap-1'>
+                          <div className='grid grid-cols-[1fr_min-content_min-content] gap-1'>
                             <Input.TextInput
+                              disabled={disabled}
                               placeholder={t('select option label placeholder')}
                               ref={selected === item.id ? inputRef : undefined}
                               value={item.title}
@@ -151,14 +159,9 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                               classNames='flex-1'
                               data-no-submit
                             />
-                            <Toolbar.Root classNames='p-0 m-0 !is-auto'>
-                              <HuePicker
-                                value={item.color}
-                                onChange={handleColorChange(item.id)}
-                                rootVariant='toolbar-button'
-                              />
-                            </Toolbar.Root>
+                            <HuePicker disabled={disabled} value={item.color} onChange={handleColorChange(item.id)} />
                             <IconButton
+                              disabled={disabled}
                               icon='ph--trash--fill'
                               iconOnly
                               label={t('select option delete')}
@@ -170,18 +173,14 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                     </List.Item>
                   </div>
                 ))}
-                <div role='listitem'>
-                  <div
-                    role='button'
-                    className={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
-                    onClick={handleAdd}
-                  >
-                    <div className='flex items-center gap-1'>
-                      <Icon icon='ph--plus--regular' />
-                      <span className='text-sm'>{t('select option add')}</span>
-                    </div>
-                  </div>
-                </div>
+                <IconButton
+                  variant='ghost'
+                  icon='ph--plus--regular'
+                  label={t('select option add')}
+                  onClick={handleAdd}
+                  disabled={disabled}
+                  classNames='is-full'
+                />
               </div>
             )}
           </List.Root>

package/src/components/Form/factory.tsx

@@ -5,9 +5,9 @@
 import { FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 
+import { GeoPointInput } from './custom';
 import { BooleanInput, MarkdownInput, NumberInput, TextInput } from './Defaults';
 import { type InputComponent } from './Input';
-import { GeoPointInput } from './custom';
 
 /**
  * Get property input component.

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

@@ -4,26 +4,28 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
-import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Format, type EchoSchema, toJsonSchema, TypedObject } from '@dxos/echo-schema';
+import { Obj, Type } from '@dxos/echo';
+import { type EchoSchema, Format, TypedObject, toJsonSchema } from '@dxos/echo-schema';
 import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { ViewProjection, ViewType, createView } from '@dxos/schema';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { DataType, ProjectionModel, createView } from '@dxos/schema';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { ViewEditor, type ViewEditorProps } from './ViewEditor';
-import translations from '../../translations';
+import { translations } from '../../translations';
 import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
+import { ViewEditor, type ViewEditorProps } from './ViewEditor';
+
 // Type definition for debug objects exposed to tests.
 export type ViewEditorDebugObjects = {
   schema: EchoSchema;
-  view: ViewType;
-  projection: ViewProjection;
+  view: DataType.View;
+  projection: ProjectionModel;
 };
 
 type StoryProps = Pick<ViewEditorProps, 'readonly'>;
@@ -31,8 +33,8 @@ type StoryProps = Pick<ViewEditorProps, 'readonly'>;
 const DefaultStory = (props: StoryProps) => {
   const space = useSpace();
   const [schema, setSchema] = useState<EchoSchema>();
-  const [view, setView] = useState<ViewType>();
-  const [projection, setProjection] = useState<ViewProjection>();
+  const [view, setView] = useState<DataType.View>();
+  const [projection, setProjection] = useState<ProjectionModel>();
   useAsyncEffect(async () => {
     if (space) {
       class TestSchema extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
@@ -42,8 +44,13 @@ const DefaultStory = (props: StoryProps) => {
       }) {}
 
       const [schema] = await space.db.schemaRegistry.register([TestSchema]);
-      const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: toJsonSchema(TestSchema) });
-      const projection = new ViewProjection(schema.jsonSchema, view);
+      const view = createView({
+        name: 'Test',
+        typename: schema.typename,
+        jsonSchema: toJsonSchema(TestSchema),
+        presentation: Obj.make(Type.Expando, {}),
+      });
+      const projection = new ProjectionModel(schema.jsonSchema, view.projection);
 
       setSchema(schema);
       setView(view);
@@ -51,7 +58,7 @@ const DefaultStory = (props: StoryProps) => {
     }
   }, [space]);
 
-  const views = useQuery(space, Filter.type(ViewType));
+  const views = useQuery(space, Filter.type(DataType.View));
   const currentTypename = useMemo(() => view?.query?.typename, [view]);
   const updateViewTypename = useCallback(
     (newTypename: string) => {

package/src/components/ViewEditor/ViewEditor.test.tsx

@@ -3,15 +3,16 @@
 //
 
 import { composeStories } from '@storybook/react';
-import { screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
-import { EchoSchema } from '@dxos/echo-schema';
-import { ViewProjection, ViewType } from '@dxos/schema';
+import { EchoSchema, isInstanceOf } from '@dxos/echo-schema';
+import { DataType, ProjectionModel } from '@dxos/schema';
+
+import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 import * as stories from './ViewEditor.stories';
 import { type ViewEditorDebugObjects } from './ViewEditor.stories';
-import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 const { Default } = composeStories(stories);
 
@@ -19,8 +20,8 @@ const getViewEditorDebugObjects = (): ViewEditorDebugObjects => {
   const debugObjects = (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] as ViewEditorDebugObjects;
   expect(debugObjects).toBeDefined();
   expect(debugObjects.schema).toBeInstanceOf(EchoSchema);
-  expect(debugObjects.view).toBeInstanceOf(ViewType);
-  expect(debugObjects.projection).toBeInstanceOf(ViewProjection);
+  expect(isInstanceOf(DataType.View, debugObjects.view)).toBeTruthy();
+  expect(debugObjects.projection).toBeInstanceOf(ProjectionModel);
   return debugObjects;
 };
 
@@ -41,7 +42,7 @@ describe('ViewEditor', () => {
   test('renders view editor', async () => {
     await Default.run();
     await waitForViewEditor();
-    expect(screen.getByText('View')).toBeInTheDocument();
+    expect(screen.getByText('Record type')).toBeInTheDocument();
   });
 
   test('change property name', async () => {
@@ -58,7 +59,7 @@ describe('ViewEditor', () => {
 
     fireEvent.click(screen.getByTestId('save-button'));
 
-    // Wait for the changes to propagate to both UI and schema
+    // Wait for the changes to propagate to both UI and schema.
     await waitFor(() => {
       expect(screen.getByText('new_property')).toBeInTheDocument();
     });
@@ -66,18 +67,18 @@ describe('ViewEditor', () => {
     // Access the live objects directly from window using symbol.
     const debugObjects = getViewEditorDebugObjects();
 
-    // Check schema contains new_property
+    // Check schema contains new_property.
     const schemaProperties = debugObjects.schema.jsonSchema.properties;
     expect(schemaProperties).toBeDefined();
     expect(schemaProperties!.new_property).toBeDefined();
     expect(schemaProperties!.name).toBeUndefined();
 
-    // Check view contains new_property field
-    const newPropertyField = debugObjects.view.fields.find((field: any) => field.path === 'new_property');
+    // Check view contains new_property field.
+    const newPropertyField = debugObjects.view.projection.fields.find((field: any) => field.path === 'new_property');
     expect(newPropertyField).toBeDefined();
     expect(newPropertyField!.path).toBe('new_property');
 
-    // Check projection contains new_property
+    // Check projection contains new_property.
     const fieldProjections = debugObjects.projection.getFieldProjections();
     const newPropertyProjection = fieldProjections.find((proj: any) => proj.field.path === 'new_property');
     expect(newPropertyProjection).toBeDefined();
@@ -88,25 +89,25 @@ describe('ViewEditor', () => {
     await Default.run();
     await waitForViewEditor();
 
-    // Click the add property button
+    // Click the add property button.
     const addButton = screen.getByText('Add property');
     fireEvent.click(addButton);
 
-    // Fill out the property field
+    // Fill out the property field.
     const fieldInput = screen.getByPlaceholderText('Field name.');
     fireEvent.change(fieldInput, { target: { value: 'added_property' } });
 
-    // Click the format combo box and select the first option
+    // Click the format combo box and select the first option.
     const formatCombo = screen.getByRole('combobox');
     fireEvent.click(formatCombo);
 
     const firstOption = screen.getAllByRole('option')[0];
     fireEvent.click(firstOption);
 
-    // Save the changes
+    // Save the changes.
     fireEvent.click(screen.getByTestId('save-button'));
 
-    // Wait for the changes to propagate
+    // Wait for the changes to propagate.
     await waitFor(() => {
       expect(screen.getByText('added_property')).toBeInTheDocument();
     });
@@ -114,17 +115,19 @@ describe('ViewEditor', () => {
     // Access the live objects directly from window using symbol.
     const debugObjects = getViewEditorDebugObjects();
 
-    // Check schema contains added_property
+    // Check schema contains added_property.
     const schemaProperties = debugObjects.schema.jsonSchema.properties;
     expect(schemaProperties).toBeDefined();
     expect(schemaProperties!.added_property).toBeDefined();
 
-    // Check view contains added_property field
-    const addedPropertyField = debugObjects.view.fields.find((field: any) => field.path === 'added_property');
+    // Check view contains added_property field.
+    const addedPropertyField = debugObjects.view.projection.fields.find(
+      (field: any) => field.path === 'added_property',
+    );
     expect(addedPropertyField).toBeDefined();
     expect(addedPropertyField!.path).toBe('added_property');
 
-    // Check projection contains added_property
+    // Check projection contains added_property.
     const fieldProjections = debugObjects.projection.getFieldProjections();
     const addedPropertyProjection = fieldProjections.find((proj: any) => proj.field.path === 'added_property');
     expect(addedPropertyProjection).toBeDefined();
@@ -135,19 +138,19 @@ describe('ViewEditor', () => {
     await Default.run();
     await waitForViewEditor();
 
-    // Find the delete button for the 'name' property
+    // Find the delete button for the 'name' property.
     const nameProperty = screen.getByText('name');
     const propertyRow = nameProperty.closest('[role="listitem"]');
-    const deleteButton = propertyRow?.querySelector('button:last-child');
+    const deleteButton = propertyRow?.querySelector('[data-testid="field.delete"]');
 
     if (!deleteButton) {
       throw new Error('Delete button not found');
     }
 
-    // Click the delete button
+    // Click the delete button.
     fireEvent.click(deleteButton);
 
-    // Wait for the changes to propagate
+    // Wait for the changes to propagate.
     await waitFor(() => {
       expect(screen.queryByText('name')).not.toBeInTheDocument();
     });
@@ -155,16 +158,16 @@ describe('ViewEditor', () => {
     // Access the live objects directly from window using symbol.
     const debugObjects = getViewEditorDebugObjects();
 
-    // Check schema no longer contains the name property
+    // Check schema no longer contains the name property.
     const schemaProperties = debugObjects.schema.jsonSchema.properties;
     expect(schemaProperties).toBeDefined();
     expect(schemaProperties!.name).toBeUndefined();
 
-    // Check view no longer contains the name field
-    const nameField = debugObjects.view.fields.find((field: any) => field.path === 'name');
+    // Check view no longer contains the name field.
+    const nameField = debugObjects.view.projection.fields.find((field: any) => field.path === 'name');
     expect(nameField).toBeUndefined();
 
-    // Check projection no longer contains the name property
+    // Check projection no longer contains the name property.
     const fieldProjections = debugObjects.projection.getFieldProjections();
     const nameProjection = fieldProjections.find((proj: any) => proj.field.path === 'name');
     expect(nameProjection).toBeUndefined();
@@ -174,11 +177,11 @@ describe('ViewEditor', () => {
     await Default.run();
     await waitForViewEditor();
 
-    // Click the first hide button
+    // Click the first hide button.
     const hideButtons = screen.getAllByTestId('hide-field-button');
     fireEvent.click(hideButtons[0]);
 
-    // Check that hiddenFields is non-empty
+    // Check that hiddenFields is non-empty.
     await waitFor(() => {
       expect(screen.getByTestId('show-field-button')).toBeInTheDocument();
     });
@@ -186,19 +189,19 @@ describe('ViewEditor', () => {
     // Access the live objects directly from window using symbol.
     const debugObjects = getViewEditorDebugObjects();
 
-    // Check that hiddenFields is non-empty
-    expect(debugObjects.view.hiddenFields).toBeDefined();
-    expect(debugObjects.view.hiddenFields!.length).toBeGreaterThan(0);
+    // Check that hiddenFields is non-empty.
+    expect(debugObjects.view.projection.hiddenFields).toBeDefined();
+    expect(debugObjects.view.projection.hiddenFields!.length).toBeGreaterThan(0);
 
     // Click the show button
     fireEvent.click(screen.getByTestId('show-field-button'));
 
-    // Wait for the data to update and check that hiddenFields is empty
+    // Wait for the data to update and check that hiddenFields is empty.
     await waitFor(() => {
-      expect(debugObjects.view.hiddenFields!.length).toBe(0);
+      expect(debugObjects.view.projection.hiddenFields!.length).toBe(0);
     });
 
-    // Also verify that the field is back in the visible fields list
-    expect(debugObjects.view.fields.length).toBeGreaterThan(0);
+    // Also verify that the field is back in the visible fields list.
+    expect(debugObjects.view.projection.fields.length).toBeGreaterThan(0);
   });
 });