@dxos/react-ui-form 0.8.4-main.406dc2a → 0.8.4-main.52d7546f51

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.Root>
+      <Settings.Section title='Settings' description={faker.lorem.paragraphs(1)}>
+        <Settings.Group>
+          <Settings.ItemInput title={faker.lorem.sentence(2)} description={faker.lorem.paragraphs(1)}>
+            <Input.Root>
+              <Input.TextInput placeholder='Input' />
+            </Input.Root>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={faker.lorem.sentence(2)} description={faker.lorem.paragraphs(2)}>
+            <Input.Root>
+              <Input.Switch />
+            </Input.Root>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={faker.lorem.sentence(3)} description={faker.lorem.paragraphs(2)}>
+            <Button>Test</Button>
+          </Settings.ItemInput>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
+  );
+};
+
+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,234 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import {
+  Button,
+  type ButtonProps,
+  Input,
+  type Label,
+  ScrollArea,
+  type ThemedClassName,
+  toLocalizedString,
+  useTranslation,
+} from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+import { translationKey } from '../../translations';
+
+const SETTINGS_ROOT_NAME = 'Settings.Root';
+const SETTINGS_SECTION_NAME = 'Settings.Section';
+const SETTINGS_SECTION_HEADING_NAME = 'Settings.SectionHeading';
+const SETTINGS_GROUP_NAME = 'Settings.Group';
+const SETTINGS_GROUP_BUTTON_NAME = 'Settings.GroupButton';
+const SETTINGS_CONTAINER_NAME = 'Settings.Container';
+const SETTINGS_FRAME_NAME = 'Settings.Frame';
+const SETTINGS_FRAME_ITEM_NAME = 'Settings.FrameItem';
+const SETTINGS_ITEM_NAME = 'Settings.Item';
+const SETTINGS_ITEM_INPUT_NAME = 'Settings.ItemInput';
+
+const styles = {
+  title: 'pbe-trimMd text-baseText text-lg',
+  description: 'text-base text-description',
+  grid: 'grid grid-cols-1 md:grid-cols-[3fr_2fr] gap-x-trimLg',
+};
+
+//
+// Root
+//
+
+type SettingsRootProps = PropsWithChildren;
+
+const SettingsRoot = ({ children }: SettingsRootProps) => {
+  return (
+    <ScrollArea.Root orientation='vertical'>
+      <ScrollArea.Viewport classNames='p-trimMd'>{children}</ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+};
+
+SettingsRoot.displayName = SETTINGS_ROOT_NAME;
+
+//
+// Section
+//
+
+type SettingsSectionProps = PropsWithChildren<{
+  title: Label;
+  description?: Label;
+}>;
+
+const SettingsSection = ({ title, description, children }: SettingsSectionProps) => {
+  return (
+    <>
+      <SettingsSectionHeading title={title} description={description} />
+      <div className='is-full pbs-trimMd space-y-trimMd'>{children}</div>
+    </>
+  );
+};
+
+SettingsSection.displayName = SETTINGS_SECTION_NAME;
+
+//
+// Section Heading
+//
+
+const SettingsSectionHeading = ({ title, description }: Omit<SettingsSectionProps, 'children'>) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <>
+      <h2 className='pli-trimMd container-max-width text-xl mbs-trimMd mbe-trimMd'>{toLocalizedString(title, t)}</h2>
+      {description && (
+        <p className='pli-trimMd mlb-trimMd container-max-width text-description'>
+          {toLocalizedString(description, t)}
+        </p>
+      )}
+    </>
+  );
+};
+
+SettingsSectionHeading.displayName = SETTINGS_SECTION_HEADING_NAME;
+
+//
+// Group Button
+//
+
+const SettingsGroupButton = ({ classNames, ...props }: ButtonProps) => {
+  return <Button {...props} classNames={['md:col-span-2', classNames]} />;
+};
+
+SettingsGroupButton.displayName = SETTINGS_GROUP_BUTTON_NAME;
+
+//
+// Group
+//
+
+type SettingsGroupProps = ThemedClassName<PropsWithChildren>;
+
+const SettingsGroup = ({ children, classNames }: SettingsGroupProps) => (
+  <div role='none' className={mx('group container-max-width space-y-trimMd', classNames)}>
+    {children}
+  </div>
+);
+
+SettingsGroup.displayName = SETTINGS_GROUP_NAME;
+
+//
+// Frame
+//
+
+const SettingsFrame = ({ children }: SettingsGroupProps) => (
+  <div role='none' className={mx('container-max-width p-trimMd', 'border border-separator rounded-md')}>
+    {children}
+  </div>
+);
+
+SettingsFrame.displayName = SETTINGS_FRAME_NAME;
+
+//
+// Frame Item
+//
+
+const SettingsFrameItem = ({ title, description, children }: SettingsItemProps) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <div role='group' className='min-is-0'>
+      <h3 className='text-lg mbe-2'>{toLocalizedString(title, t)}</h3>
+      {description && <p className='mlb-trimSm md:mbe-0 text-description'>{toLocalizedString(description, t)}</p>}
+      {children}
+    </div>
+  );
+};
+
+SettingsFrameItem.displayName = SETTINGS_FRAME_ITEM_NAME;
+
+//
+// Container
+//
+
+const SettingsContainer = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => {
+  return (
+    <div
+      role='none'
+      className={mx([
+        'container-max-width',
+        '*:first:!mbs-0 *:last:!mbe-0 pli-trimMd plb-trimMd',
+        'border border-separator rounded-md',
+        classNames,
+      ])}
+    >
+      {children}
+    </div>
+  );
+};
+
+SettingsContainer.displayName = SETTINGS_CONTAINER_NAME;
+
+//
+// Item
+//
+
+type SettingsItemProps = PropsWithChildren<{
+  title: Label;
+  description?: Label;
+}>;
+
+const SettingsItem = ({ title, description = '', children }: SettingsItemProps) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <SettingsContainer classNames={styles.grid}>
+      <h3 className={mx(styles.title, 'md:col-span-2')}>{toLocalizedString(title, t)}</h3>
+      <p className={styles.description}>{toLocalizedString(description, t)}</p>
+      <div role='none' className='text-end plb-1'>
+        {children}
+      </div>
+    </SettingsContainer>
+  );
+};
+
+SettingsItem.displayName = SETTINGS_ITEM_NAME;
+
+//
+// Item Input
+//
+
+const SettingsItemInput = ({ title, description = '', children }: SettingsItemProps) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <Input.Root>
+      <SettingsContainer classNames={styles.grid}>
+        <Input.Label classNames={mx(styles.title, 'md:col-span-2')}>{toLocalizedString(title, t)}</Input.Label>
+        <Input.DescriptionAndValidation>
+          <Input.Description classNames={styles.description}>{toLocalizedString(description, t)}</Input.Description>
+        </Input.DescriptionAndValidation>
+        <div role='none' className='text-end plb-1'>
+          {children}
+        </div>
+      </SettingsContainer>
+    </Input.Root>
+  );
+};
+
+SettingsItemInput.displayName = SETTINGS_ITEM_INPUT_NAME;
+
+//
+// Settings
+//
+
+export const Settings = {
+  Root: SettingsRoot,
+  Section: SettingsSection,
+  SectionHeading: SettingsSectionHeading,
+  Group: SettingsGroup,
+  GroupButton: SettingsGroupButton,
+  Container: SettingsContainer,
+  Frame: SettingsFrame,
+  FrameItem: SettingsFrameItem,
+  Item: SettingsItem,
+  ItemInput: SettingsItemInput,
+};

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

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

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

@@ -7,42 +7,43 @@ 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 { type EchoSchema, 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 { DataType, type ProjectionModel, createView, getTypenameFromQuery } from '@dxos/schema';
+import { type ProjectionModel, View, 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 { TestLayout, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 
 const types = [
   // TODO(burdon): Get label from annotation.
-  { value: Type.getTypename(DataType.Organization), label: 'Organization' },
-  { value: Type.getTypename(DataType.Person), label: 'Person' },
-  { value: Type.getTypename(DataType.Project), label: 'Project' },
-  { value: Type.getTypename(DataType.Employer), label: 'Employer' },
+  { 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' | 'mode'>;
 
 const DefaultStory = (props: StoryProps) => {
-  const { space } = useClientProvider();
+  const { space } = useClientStory();
   const [schema, setSchema] = useState<EchoSchema>();
-  const [view, setView] = useState<DataType.View>();
+  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,7 +52,7 @@ const DefaultStory = (props: StoryProps) => {
         email: Format.Email,
         salary: Format.Currency(),
       }).pipe(
-        Type.Obj({
+        Type.object({
           typename: 'example.com/type/Test',
           version: '0.1.0',
         }),
@@ -62,18 +63,17 @@ const DefaultStory = (props: StoryProps) => {
         description: Schema.String,
         completed: Schema.Boolean,
       }).pipe(
-        Type.Obj({
+        Type.object({
           typename: 'example.com/type/Alternate',
           version: '0.1.0',
         }),
       );
 
       const [testSchema] = await space.db.schemaRegistry.register([TestSchema, AlternateSchema]);
-      const view = createView({
+      const view = View.make({
         name: 'Test',
-        query: Query.select(Filter.typename(TestSchema.typename)),
+        query: Query.select(Filter.type(TestSchema)),
         jsonSchema: Type.toJsonSchema(TestSchema),
-        presentation: Obj.make(Type.Expando, {}),
       });
 
       setSchema(testSchema);
@@ -87,10 +87,12 @@ const DefaultStory = (props: StoryProps) => {
         return;
       }
 
-      if (props.mode === 'query') {
+      if (props.mode === 'tag') {
         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;
+        Obj.change(view, (v) => {
+          v.query.ast = query.ast as Mutable<typeof query.ast>;
+        });
 
         const typename = getTypenameFromQuery(query.ast);
         const [newSchema] = await space.db.schemaRegistry.query({ typename }).run();
@@ -98,16 +100,18 @@ const DefaultStory = (props: StoryProps) => {
           return;
         }
 
-        const newView = createView({
+        const newView = View.make({
           query,
           jsonSchema: newSchema.jsonSchema,
-          presentation: Obj.make(Type.Expando, {}),
         });
-        view.projection = Obj.getSnapshot(newView).projection;
+        Obj.change(view, (v) => {
+          v.projection = Obj.getSnapshot(newView).projection as Mutable<typeof v.projection>;
+        });
         setSchema(() => newSchema);
       } else {
-        console.log('updateViewQuery', { newQuery });
-        view.query.ast = newQuery;
+        Obj.change(view, (v) => {
+          v.query.ast = newQuery as Mutable<typeof newQuery>;
+        });
         schema.updateTypename(getTypenameFromQuery(newQuery));
       }
     },
@@ -142,20 +146,18 @@ const DefaultStory = (props: StoryProps) => {
 
   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}
+        schema={schema}
+        view={view}
+        registry={space?.db.schemaRegistry}
+        mode={props.mode}
+        readonly={props.readonly}
+        types={types}
+        tags={tags}
+        onQueryChanged={updateViewQuery}
+        onDelete={handleDelete}
+      />
     </TestLayout>
   );
 };
@@ -173,7 +175,7 @@ const meta = {
         space.db.add(Tag.make({ label: 'New' }));
       },
     }),
-    withTheme,
+    withTheme(),
   ],
   parameters: {
     layout: 'fullscreen',
@@ -193,8 +195,8 @@ export const Readonly: Story = {
   },
 };
 
-export const QueryMode: Story = {
+export const TagQueryMode: Story = {
   args: {
-    mode: 'query',
+    mode: 'tag',
   },
 };

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

@@ -7,7 +7,7 @@ import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
 import { EchoSchema, isInstanceOf } from '@dxos/echo/internal';
-import { DataType, ProjectionModel } from '@dxos/schema';
+import { ProjectionModel, View } from '@dxos/schema';
 
 import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
@@ -20,7 +20,7 @@ const getViewEditorDebugObjects = (): ViewEditorDebugObjects => {
   const debugObjects = (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] as ViewEditorDebugObjects;
   expect(debugObjects).toBeDefined();
   expect(debugObjects.schema).toBeInstanceOf(EchoSchema);
-  expect(isInstanceOf(DataType.View, debugObjects.view)).toBeTruthy();
+  expect(isInstanceOf(View.View, debugObjects.view)).toBeTruthy();
   expect(debugObjects.projection).toBeInstanceOf(ProjectionModel);
   return debugObjects;
 };
@@ -54,7 +54,7 @@ describe('ViewEditor', () => {
     const nameField = screen.getByText('name');
     fireEvent.click(nameField);
 
-    const fieldInput = screen.getByPlaceholderText('Field name.');
+    const fieldInput = screen.getByPlaceholderText('Property name');
     fireEvent.change(fieldInput, { target: { value: 'new_property' } });
 
     fireEvent.click(screen.getByTestId('save-button'));
@@ -89,12 +89,12 @@ describe('ViewEditor', () => {
     await Default.run();
     await waitForViewEditor();
 
-    // Click the add property button.
+    // Click the add property button. The new field is auto-expanded by handleAdd.
     const addButton = screen.getByText('Add property');
     fireEvent.click(addButton);
 
     // Fill out the property field.
-    const fieldInput = screen.getByPlaceholderText('Field name.');
+    const fieldInput = screen.getByPlaceholderText('Property name');
     fireEvent.change(fieldInput, { target: { value: 'added_property' } });
 
     // Click the format combo box and select the first option.