@dxos/react-ui-form 0.8.3-staging.0fa589b → 0.8.4-main.2e9d522

package/src/components/ViewEditor/ViewEditor.tsx

@@ -12,7 +12,7 @@ import { Callout, IconButton, type ThemedClassName, useTranslation } from '@dxos
 import { List } from '@dxos/react-ui-list';
 import { cardSpacing } from '@dxos/react-ui-stack';
 import { ghostHover, inputTextLabel, mx } from '@dxos/react-ui-theme';
-import { FieldSchema, type FieldType, type ViewType, ViewProjection, VIEW_FIELD_LIMIT } from '@dxos/schema';
+import { FieldSchema, type FieldType, VIEW_FIELD_LIMIT, type DataType, ProjectionModel } from '@dxos/schema';
 
 import { translationKey } from '../../translations';
 import { FieldEditor } from '../FieldEditor';
@@ -21,9 +21,6 @@ import { Form, type FormProps } from '../Form';
 const grid = 'grid grid-cols-[32px_1fr_32px_32px] min-bs-[2.5rem]';
 
 const ViewMetaSchema = Schema.Struct({
-  name: Schema.String.annotations({
-    title: 'View',
-  }),
   typename: Format.URL.annotations({
     title: 'Typename',
   }),
@@ -34,7 +31,7 @@ type ViewMetaType = Schema.Schema.Type<typeof ViewMetaSchema>;
 export type ViewEditorProps = ThemedClassName<
   {
     schema: Schema.Schema.AnyNoContext;
-    view: ViewType;
+    view: DataType.View;
     registry?: SchemaRegistry;
     readonly?: boolean;
     showHeading?: boolean;
@@ -61,20 +58,19 @@ export const ViewEditor = ({
   const projection = useMemo(() => {
     // Use reactive and mutable version of json schema when schema is mutable.
     const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-    return new ViewProjection(jsonSchema, view);
-  }, [schema, view]);
+    return new ProjectionModel(jsonSchema, view.projection);
+  }, [schema, view.projection]);
   const [field, setField] = useState<FieldType>();
   const readonly = _readonly || !isMutable(schema);
 
   // TODO(burdon): Should be reactive.
   const viewValues = useMemo(() => {
     return {
-      name: view.name,
       // TODO(burdon): Need to warn user of possible consequences of editing.
       // TODO(burdon): Settings should have domain name owned by user.
       typename: view.query.typename,
     };
-  }, [view]);
+  }, [view.query.typename]);
 
   const handleSelect = useCallback(
     (field: FieldType) => {
@@ -92,22 +88,18 @@ export const ViewEditor = ({
     invariant(!readonly);
     const field = projection.createFieldProjection();
     setField(field);
-  }, [schema, view, readonly]);
+  }, [schema, projection, readonly]);
 
   const handleUpdate = useCallback(
-    ({ name, typename }: ViewMetaType) => {
+    ({ typename }: ViewMetaType) => {
       invariant(!readonly);
       requestAnimationFrame(() => {
-        if (view.name !== name) {
-          view.name = name;
-        }
-
         if (view.query.typename !== typename && !readonly) {
           onTypenameChanged?.(typename);
         }
       });
     },
-    [schema, view, onTypenameChanged, readonly],
+    [view.query.typename, onTypenameChanged, readonly],
   );
 
   const handleDelete = useCallback(
@@ -119,19 +111,19 @@ export const ViewEditor = ({
 
       onDelete?.(fieldId);
     },
-    [schema, field, onDelete, readonly],
+    [field, onDelete, readonly],
   );
 
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
       invariant(!readonly);
       // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
-      const fields = [...view.fields];
+      const fields = [...view.projection.fields];
       const [moved] = fields.splice(fromIndex, 1);
       fields.splice(toIndex, 0, moved);
-      view.fields = fields;
+      view.projection.fields = fields;
     },
-    [schema, view.fields, readonly],
+    [view.projection.fields, readonly],
   );
 
   const handleClose = useCallback(() => setField(undefined), []);
@@ -179,7 +171,7 @@ export const ViewEditor = ({
         <label className={mx(inputTextLabel)}>{t('fields label')}</label>
 
         <List.Root<FieldType>
-          items={view.fields}
+          items={view.projection.fields}
           isItem={Schema.is(FieldSchema)}
           getId={(field) => field.id}
           readonly={readonly}
@@ -207,13 +199,13 @@ export const ViewEditor = ({
                       data-testid='hide-field-button'
                       icon='ph--eye-slash--regular'
                       // TDOO(burdon): Is this the correct test?
-                      disabled={view.fields.length <= 1}
+                      disabled={view.projection.fields.length <= 1}
                       onClick={() => handleHide(field.id)}
                     />
                     {/* TODO(burdon): Remove unless implement undo. */}
                     {!readonly && (
                       <List.ItemDeleteButton
-                        disabled={view.fields.length <= 1}
+                        disabled={view.projection.fields.length <= 1}
                         onClick={() => handleDelete(field.id)}
                       />
                     )}
@@ -258,14 +250,7 @@ export const ViewEditor = ({
       </div>
 
       {field && (
-        <FieldEditor
-          key={field.id}
-          view={view}
-          projection={projection}
-          field={field}
-          registry={registry}
-          onSave={handleClose}
-        />
+        <FieldEditor key={field.id} projection={projection} field={field} registry={registry} onSave={handleClose} />
       )}
 
       {!readonly && !field && (
@@ -275,7 +260,7 @@ export const ViewEditor = ({
             label={t('button add property')}
             onClick={readonly ? undefined : handleAdd}
             // TODO(burdon): Show field limit in ux (not tooltip).
-            disabled={view.fields.length >= VIEW_FIELD_LIMIT}
+            disabled={view.projection.fields.length >= VIEW_FIELD_LIMIT}
             classNames='flex is-full'
           />
         </div>

package/src/components/deprecated/Form.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { live } from '@dxos/live-object';
@@ -12,7 +12,7 @@ import { testData, TestSchema, testView, type TestType } from '@dxos/schema/test
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { DeprecatedForm, type DeprecatedFormProps } from './Form';
-import translations from '../../translations';
+import { translations } from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
 
 const DefaultStory = (props: DeprecatedFormProps) => (
@@ -40,14 +40,14 @@ type Story = StoryObj<DeprecatedFormProps<TestType>>;
 export const Default: Story = {
   args: {
     object: live(testData),
-    view: live(testView),
+    projection: live(testView).projection,
     schema: TestSchema,
   },
 };
 
 export const Empty: Story = {
   args: {
-    view: live(testView),
+    projection: live(testView).projection,
     schema: TestSchema,
   },
 };
@@ -55,7 +55,7 @@ export const Empty: Story = {
 export const Readonly: Story = {
   args: {
     object: live(testData),
-    view: live(testView),
+    projection: live(testView).projection,
     schema: TestSchema,
     readonly: true,
   },

package/src/components/deprecated/Form.tsx

@@ -8,10 +8,10 @@ import React, { useState } from 'react';
 import { findProperty } from '@dxos/effect';
 import { Input, type ThemedClassName, type TextInputProps as NativeTextInputProps } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { type ViewType, getFieldValue, setFieldValue } from '@dxos/schema';
+import { getFieldValue, setFieldValue, type Projection } from '@dxos/schema';
 
 export type DeprecatedFormProps<T extends {} = {}> = ThemedClassName<{
-  view: ViewType;
+  projection: Projection;
   object: T;
   schema?: Schema.Schema<T>;
   readonly?: boolean;
@@ -22,14 +22,14 @@ export type DeprecatedFormProps<T extends {} = {}> = ThemedClassName<{
  */
 export const DeprecatedForm = <T extends {} = {}>({
   classNames,
-  view,
+  projection,
   object,
   schema,
   readonly,
 }: DeprecatedFormProps<T>) => {
   return (
     <div role='none' className={mx('flex flex-col w-full gap-2 p-2', classNames)}>
-      {view.fields.map((field) => {
+      {projection.fields.map((field) => {
         const prop = schema && findProperty(schema, field.path);
         const title = (prop && pipe(SchemaAST.getTitleAnnotation(prop), Option.getOrUndefined)) ?? '';
         const description = (prop && pipe(SchemaAST.getDescriptionAnnotation(prop), Option.getOrUndefined)) ?? title;

package/src/components/testing.tsx

@@ -17,7 +17,7 @@ export const TestLayout = ({ classNames, json, children }: ThemedClassName<Props
 );
 
 export const TestPanel = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
-  <Card.Content classNames={[textBlockWidth, classNames]}>{children}</Card.Content>
+  <Card.StaticRoot classNames={[textBlockWidth, classNames]}>{children}</Card.StaticRoot>
 );
 
 // Symbol for accessing debug objects in tests.

package/src/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import translations from './translations';
+import { translations } from './translations';
 
 export * from './components';
 export * from './hooks';

package/src/translations.ts

@@ -2,9 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type Resource } from '@dxos/react-ui';
+
 export const translationKey = 'react-ui-form';
 
-export default [
+export const translations = [
   {
     'en-US': {
       [translationKey]: {
@@ -75,4 +77,4 @@ export default [
       },
     },
   },
-];
+] as const satisfies Resource[];