@dxos/react-ui-form 0.8.4-main.67995b8 → 0.8.4-main.a4bbb77

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

@@ -2,16 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useState, useEffect, useMemo, type ChangeEvent } from 'react';
+import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { type GeoPoint, GeoLocation } from '@dxos/echo-schema';
+import { GeoLocation, type GeoPoint } from '@dxos/echo-schema';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { safeParseFloat } from '@dxos/util';
 
 import { translationKey } from '../../../translations';
 import { InputHeader, type InputProps } from '../Input';
 
-export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onValueChange, onBlur }: InputProps) => {
+export const GeoPointInput = ({ type, label, readonly, getStatus, getValue, onValueChange, onBlur }: InputProps) => {
   const { t } = useTranslation(translationKey);
   const { status, error } = getStatus();
   const geoPoint = useMemo<GeoPoint>(() => getValue<GeoPoint>() ?? [0, 0], [getValue]);
@@ -48,24 +48,32 @@ export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onVa
     <Input.Root validationValence={status}>
       <InputHeader error={error} label={label} />
       <div role='none' className='grid grid-cols-2 gap-2'>
-        <Input.TextInput
-          type='text'
-          pattern='^-?[0-9]*\.?[0-9]*$'
-          disabled={disabled}
-          placeholder={t('placeholder latitude')}
-          value={latitudeText}
-          onChange={handleCoordinateChange('latitude', setLatitudeText)}
-          onBlur={onBlur}
-        />
-        <Input.TextInput
-          type='text'
-          pattern='^-?[0-9]*\.?[0-9]*$'
-          disabled={disabled}
-          placeholder={t('placeholder longitude')}
-          value={longitudeText}
-          onChange={handleCoordinateChange('longitude', setLongitudeText)}
-          onBlur={onBlur}
-        />
+        <div role='none'>
+          <Input.Label>{t('latitude label')}</Input.Label>
+          <Input.TextInput
+            type='number'
+            step='0.00001'
+            min='-90'
+            max='90'
+            disabled={!!readonly}
+            value={latitudeText}
+            onChange={handleCoordinateChange('latitude', setLatitudeText)}
+            onBlur={onBlur}
+          />
+        </div>
+        <div role='none'>
+          <Input.Label>{t('longitude label')}</Input.Label>
+          <Input.TextInput
+            type='number'
+            step='0.00001'
+            min='-180'
+            max='180'
+            disabled={!!readonly}
+            value={longitudeText}
+            onChange={handleCoordinateChange('longitude', setLongitudeText)}
+            onBlur={onBlur}
+          />
+        </div>
       </div>
     </Input.Root>
   );

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

@@ -2,20 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
 import React, { useState } from 'react';
 
-import { SelectOptionSchema, type SelectOption } from '@dxos/echo-schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { type SelectOption, SelectOptionSchema } from '@dxos/echo-schema';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { SelectOptionInput } from './SelectOptionsInput';
 import { translations } from '../../../translations';
 import { TestLayout, TestPanel } from '../../testing';
 import { Form } from '../Form';
 
+import { SelectOptionInput } from './SelectOptionsInput';
+
 const schema = Schema.Struct({
   options: Schema.Array(SelectOptionSchema).pipe(Schema.mutable),
 }).pipe(Schema.mutable);
@@ -44,18 +43,19 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'ui/react-ui-form/SelectOptionsInput',
-  component: SelectOptionInput,
+  component: SelectOptionInput as any,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
+  decorators: [withTheme],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

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

@@ -2,20 +2,19 @@
 // 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) => {
+export const SelectOptionInput = ({ type, label, readonly, getStatus, getValue, onValueChange }: InputProps) => {
   const [selected, setSelectedId] = useState<string | null>(null);
   const [isNewOption, setIsNewOption] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -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={readonly ? undefined : handleMove}
+            readonly={!!readonly}
+          >
             {({ 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={['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={!!readonly} />
                         <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={!!readonly}
                               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={!!readonly} value={item.color} onChange={handleColorChange(item.id)} />
                             <IconButton
+                              disabled={!!readonly}
                               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={!!readonly}
+                  classNames='is-full'
+                />
               </div>
             )}
           </List.Root>

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

@@ -16,7 +16,7 @@ export const TupleInput = ({
   binding,
   type,
   label,
-  disabled,
+  readonly,
   getStatus,
   getValue,
   onValueChange,
@@ -35,7 +35,7 @@ export const TupleInput = ({
           <Input.TextInput
             key={prop}
             type='number'
-            disabled={disabled}
+            disabled={!!readonly}
             value={values[prop]}
             onChange={(event) => onValueChange(type, { ...values, [prop]: safeParseFloat(event.target.value, 0) })}
             onBlur={onBlur}

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

@@ -2,24 +2,24 @@
 // 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 React, { useCallback, useEffect, useMemo, useRef, useState } 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 { DXN, Filter, Obj, Query, Type } from '@dxos/echo';
+import { QueryBuilder } from '@dxos/echo-query';
+import { type EchoSchema, Format, toJsonSchema } from '@dxos/echo-schema';
+import { useSpace } from '@dxos/react-client/echo';
 import { 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 { withTheme } from '@dxos/react-ui/testing';
+import { type DataType, type ProjectionModel, createView, typenameFromQuery } from '@dxos/schema';
 
-import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 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;
@@ -27,68 +27,113 @@ export type ViewEditorDebugObjects = {
   projection: ProjectionModel;
 };
 
-type StoryProps = Pick<ViewEditorProps, 'readonly'>;
+type StoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
 
 const DefaultStory = (props: StoryProps) => {
   const space = useSpace();
   const [schema, setSchema] = useState<EchoSchema>();
   const [view, setView] = useState<DataType.View>();
-  const [projection, setProjection] = useState<ProjectionModel>();
+  const projectionRef = useRef<ProjectionModel>(null);
+
   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]);
+      }).pipe(
+        Type.Obj({
+          typename: 'example.com/type/Test',
+          version: '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',
+        }),
+      );
+
+      const [testSchema] = await space.db.schemaRegistry.register([TestSchema, AlternateSchema]);
       const view = createView({
         name: 'Test',
-        typename: schema.typename,
+        query: Query.select(Filter.type(TestSchema)),
+        queryString: 'Query.select(Filter.type(TestSchema))',
         jsonSchema: toJsonSchema(TestSchema),
         presentation: Obj.make(Type.Expando, {}),
       });
-      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 (queryString: string, 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 === 'query') {
+        view.query.string = queryString;
+
+        const builder = new QueryBuilder();
+        const filter = builder.build(queryString) ?? Filter.nothing();
+        const queue = target && DXN.tryParse(target) ? target : undefined;
+        const newQuery = queue ? Query.select(filter).options({ queues: [queue] }) : Query.select(filter);
+        view.query.ast = newQuery.ast;
+
+        const typename = typenameFromQuery(newQuery.ast);
+        const [newSchema] = await space.db.schemaRegistry.query({ typename }).run();
+        if (!newSchema) {
+          return;
+        }
+
+        const newView = createView({
+          query: newQuery,
+          jsonSchema: newSchema.jsonSchema,
+          presentation: Obj.make(Type.Expando, {}),
+        });
+        view.projection = Obj.getSnapshot(newView).projection;
+        setSchema(() => newSchema);
+      } else {
+        const typename = queryString;
+        const newQuery = Query.select(Filter.typename(typename));
+        view.query.ast = newQuery.ast;
+        schema.updateTypename(typename);
       }
-      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 />;
   }
 
@@ -96,11 +141,13 @@ const DefaultStory = (props: StoryProps) => {
     <TestLayout json={json}>
       <TestPanel>
         <ViewEditor
+          ref={projectionRef}
           schema={schema}
           view={view}
           registry={space?.db.schemaRegistry}
+          mode={props.mode}
           readonly={props.readonly}
-          onTypenameChanged={updateViewTypename}
+          onQueryChanged={updateViewQuery}
           onDelete={handleDelete}
         />
       </TestPanel>
@@ -108,19 +155,30 @@ const DefaultStory = (props: StoryProps) => {
   );
 };
 
-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 }), withTheme],
+  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 QueryMode: Story = {
+  args: {
+    mode: 'query',
+  },
 };

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, 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);
 
@@ -41,7 +42,7 @@ describe('ViewEditor', () => {
   test('renders view editor', async () => {
     await Default.run();
     await waitForViewEditor();
-    expect(screen.getByText('Typename')).toBeInTheDocument();
+    expect(screen.getByText('Record type')).toBeInTheDocument();
   });
 
   test('change property name', async () => {
@@ -140,7 +141,7 @@ describe('ViewEditor', () => {
     // 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');
@@ -188,19 +189,15 @@ describe('ViewEditor', () => {
     // Access the live objects directly from window using symbol.
     const debugObjects = getViewEditorDebugObjects();
 
-    // 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.
     await waitFor(() => {
-      expect(debugObjects.view.projection.hiddenFields!.length).toBe(0);
+      expect(debugObjects.view.projection.fields.filter(({ visible }) => visible === false)!.length).toBe(0);
     });
 
     // Also verify that the field is back in the visible fields list.
-    expect(debugObjects.view.projection.fields.length).toBeGreaterThan(0);
+    expect(debugObjects.view.projection.fields.filter(({ visible }) => visible !== false).length).toBeGreaterThan(0);
   });
-});
+}, 30_000);