@dxos/react-ui-form 0.8.1-staging.391c573 → 0.8.1-staging.97aedb1

package/src/components/ViewEditor/ViewEditor.tsx

@@ -5,7 +5,8 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { type SchemaRegistry } from '@dxos/echo-db';
-import { AST, Format, type EchoSchema, S, type JsonProp } from '@dxos/echo-schema';
+import { AST, Format, type BaseSchema, S, type JsonProp } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
 import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { ghostHover, inputTextLabel, mx } from '@dxos/react-ui-theme';
@@ -29,13 +30,13 @@ const ViewMetaSchema = S.Struct({
 type ViewMetaType = S.Schema.Type<typeof ViewMetaSchema>;
 
 export type ViewEditorProps = ThemedClassName<{
-  schema: EchoSchema;
+  schema: BaseSchema;
   view: ViewType;
   registry?: SchemaRegistry;
   readonly?: boolean;
   showHeading?: boolean;
-  onTypenameChanged: (typename: string) => void;
-  onDelete: (fieldId: string) => void;
+  onTypenameChanged?: (typename: string) => void;
+  onDelete?: (fieldId: string) => void;
 }>;
 
 /**
@@ -52,7 +53,7 @@ export const ViewEditor = ({
   onDelete,
 }: ViewEditorProps) => {
   const { t } = useTranslation(translationKey);
-  const projection = useMemo(() => new ViewProjection(schema, view), [schema, view]);
+  const projection = useMemo(() => new ViewProjection(schema.jsonSchema, view), [schema, view]);
   const [field, setField] = useState<FieldType>();
 
   // TODO(burdon): Should be reactive.
@@ -65,48 +66,56 @@ export const ViewEditor = ({
     };
   }, [view]);
 
-  const handleViewUpdate = useCallback(
+  const handleSelect = useCallback((field: FieldType) => {
+    setField((f) => (f === field ? undefined : field));
+  }, []);
+
+  // TODO(burdon): Check if mutable; variant of useCallback that return undefined if readonly?
+
+  const handleAdd = useCallback(() => {
+    invariant(!schema.readonly);
+    const field = projection.createFieldProjection();
+    setField(field);
+  }, [schema, view]);
+
+  const handleUpdate = useCallback(
     ({ name, typename }: ViewMetaType) => {
+      invariant(!schema.readonly);
       requestAnimationFrame(() => {
         if (view.name !== name) {
           view.name = name;
         }
+
         if (view.query.typename !== typename) {
-          onTypenameChanged(typename);
+          onTypenameChanged?.(typename);
         }
       });
     },
-    [view, schema, onTypenameChanged],
+    [schema, view, onTypenameChanged],
   );
 
-  const handleSelect = useCallback((field: FieldType) => {
-    setField((f) => (f === field ? undefined : field));
-  }, []);
-
-  const handleAdd = useCallback(() => {
-    const field = projection.createFieldProjection();
-    setField(field);
-  }, [view]);
-
   const handleDelete = useCallback(
     (fieldId: string) => {
+      invariant(!schema.readonly);
       if (fieldId === field?.id) {
         setField(undefined);
       }
-      onDelete(fieldId);
+
+      onDelete?.(fieldId);
     },
-    [onDelete, field],
+    [schema, field, onDelete],
   );
 
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
+      invariant(!schema.readonly);
       // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
       const fields = [...view.fields];
       const [moved] = fields.splice(fromIndex, 1);
       fields.splice(toIndex, 0, moved);
       view.fields = fields;
     },
-    [view.fields],
+    [schema, view.fields],
   );
 
   const handleClose = useCallback(() => setField(undefined), []);
@@ -131,7 +140,12 @@ export const ViewEditor = ({
 
   return (
     <div role='none' className={mx('flex flex-col w-full divide-y divide-separator', classNames)}>
-      <Form<ViewMetaType> autoSave schema={ViewMetaSchema} values={viewValues} onSave={handleViewUpdate} />
+      <Form<ViewMetaType>
+        autoSave
+        schema={ViewMetaSchema}
+        values={viewValues}
+        onSave={schema.readonly ? undefined : handleUpdate}
+      />
 
       <div>
         {/* TODO(burdon): Clean up common form ux. */}
@@ -143,7 +157,7 @@ export const ViewEditor = ({
           items={view.fields}
           isItem={S.is(FieldSchema)}
           getId={(field) => field.id}
-          onMove={handleMove}
+          onMove={schema.readonly ? undefined : handleMove}
         >
           {({ items: fields }) => (
             <>
@@ -165,11 +179,13 @@ export const ViewEditor = ({
                         disabled={view.fields.length <= 1}
                         onClick={() => handleHide(field.id)}
                       />
-                      <List.ItemDeleteButton
-                        icon='ph--trash--regular'
-                        disabled={view.fields.length <= 1}
-                        onClick={() => handleDelete(field.id)}
-                      />
+                      {!schema.readonly && (
+                        <List.ItemDeleteButton
+                          icon='ph--trash--regular'
+                          disabled={view.fields.length <= 1}
+                          onClick={() => handleDelete(field.id)}
+                        />
+                      )}
                     </div>
                   </List.Item>
                 ))}
@@ -225,7 +241,7 @@ export const ViewEditor = ({
           <IconButton
             icon='ph--plus--regular'
             label={t('button add property')}
-            onClick={handleAdd}
+            onClick={schema.readonly ? undefined : handleAdd}
             // TODO(burdon): Show field limit in ux (not tooltip).
             disabled={view.fields.length >= VIEW_FIELD_LIMIT}
           />

package/src/components/index.ts

@@ -3,7 +3,7 @@
 //
 
 export * from './deprecated';
-
+export * from './ControlSection';
 export * from './FieldEditor';
 export * from './Form';
 export * from './ViewEditor';

package/src/hooks/useForm.ts

@@ -176,12 +176,21 @@ export const useForm = <T extends BaseObject>({
           errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`),
       );
 
+      // Only show errors for touched fields.
+      const isTouched = touched[jsonPath as JsonPath];
+      if (!isTouched) {
+        return {
+          status: undefined,
+          error: undefined,
+        };
+      }
+
       return {
         status: matchingError ? 'error' : undefined,
         error: matchingError ? matchingError[1] : undefined,
       };
     },
-    [errors],
+    [errors, touched],
   );
 
   const getFormValue = useCallback<FormHandler<T>['getValue']>(

package/src/util/field.ts

@@ -132,22 +132,22 @@ export const cellClassesForFieldType = ({ type, format }: CellClassesForFieldTyp
   switch (format) {
     case FormatEnum.Markdown:
       return undefined;
+    case FormatEnum.Time:
     case FormatEnum.Timestamp:
     case FormatEnum.DateTime:
     case FormatEnum.Date:
-    case FormatEnum.Time:
-      return ['font-mono'];
+    case FormatEnum.Duration:
+      return ['font-mono', 'text-right'];
     case FormatEnum.Currency:
       return ['text-right'];
     case FormatEnum.JSON:
+    case FormatEnum.DID:
       return ['font-mono'];
     default:
       return undefined;
   }
 };
 
-export const cellClassesForRowSelection = (selected: boolean) => (selected ? ['!bg-gridCellSelected'] : undefined);
-
 // TODO(ZaymonFC): How to do this with translations?
 export const pathNotUniqueError = (path: string): ValidationError => ({
   path: 'path',

package/src/util/formatting.ts

@@ -2,6 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
+import { format as formatDate } from 'date-fns/format';
+
 import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
 
 type ValueFormatProps = {
@@ -61,17 +63,14 @@ export const formatForDisplay = ({ type, format, value, locale = undefined }: Va
         maximumFractionDigits: 2,
       });
     }
-    case FormatEnum.DateTime:
-    case FormatEnum.Date:
+    case FormatEnum.Date: {
+      return formatDate(new Date(value as number), 'yyyy-MM-dd');
+    }
     case FormatEnum.Time: {
-      const date = new Date(value as number);
-      if (format === FormatEnum.DateTime) {
-        return date.toLocaleString(locale);
-      } else if (format === FormatEnum.Date) {
-        return date.toLocaleDateString(locale);
-      } else {
-        return date.toLocaleTimeString(locale);
-      }
+      return formatDate(new Date(value as number), 'HH:mm:ss');
+    }
+    case FormatEnum.DateTime: {
+      return formatDate(new Date(value as number), 'yyyy-MM-dd HH:mm:ss');
     }
     case FormatEnum.GeoPoint: {
       if (value === null || value === undefined) {