@dxos/react-ui-form 0.8.2-main.fbd8ed0 → 0.8.2-staging.42af850

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

@@ -15,11 +15,13 @@ import { useAsyncEffect } from '@dxos/react-ui';
 import { ViewProjection, ViewType, createView } from '@dxos/schema';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
-import { ViewEditor } from './ViewEditor';
+import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 import translations from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
 
-const DefaultStory = () => {
+type StoryProps = Pick<ViewEditorProps, 'readonly'>;
+
+const DefaultStory = (props: StoryProps) => {
   const space = useSpace();
   const [schema, setSchema] = useState<EchoSchema>();
   const [view, setView] = useState<ViewType>();
@@ -57,6 +59,7 @@ const DefaultStory = () => {
     },
     [views, schema],
   );
+
   const handleDelete = useCallback((property: string) => projection?.deleteFieldProjection(property), [projection]);
 
   if (!schema || !view || !projection) {
@@ -70,6 +73,7 @@ const DefaultStory = () => {
           schema={schema}
           view={view}
           registry={space?.db.schemaRegistry}
+          readonly={props.readonly}
           onTypenameChanged={updateViewTypename}
           onDelete={handleDelete}
         />
@@ -78,9 +82,8 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta<typeof ViewEditor> = {
+const meta: Meta<StoryProps> = {
   title: 'ui/react-ui-form/ViewEditor',
-  component: ViewEditor,
   render: DefaultStory,
   decorators: [withClientProvider({ createSpace: true }), withLayout({ fullscreen: true }), withTheme],
   parameters: {
@@ -90,6 +93,12 @@ const meta: Meta<typeof ViewEditor> = {
 
 export default meta;
 
-type Story = StoryObj;
+type Story = StoryObj<StoryProps>;
 
 export const Default: Story = {};
+
+export const Readonly: Story = {
+  args: {
+    readonly: true,
+  },
+};

package/src/components/ViewEditor/ViewEditor.tsx

@@ -2,13 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema, SchemaAST } from 'effect';
+import { Schema } from 'effect';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { type SchemaRegistry } from '@dxos/echo-db';
-import { Format, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo-schema';
+import { EchoSchema, Format, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Icon, IconButton, Message, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { ghostHover, inputTextLabel, mx } from '@dxos/react-ui-theme';
 import { FieldSchema, type FieldType, type ViewType, ViewProjection, VIEW_FIELD_LIMIT } from '@dxos/schema';
@@ -21,10 +21,10 @@ const grid = 'grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]';
 
 const ViewMetaSchema = Schema.Struct({
   name: Schema.String.annotations({
-    [SchemaAST.TitleAnnotationId]: 'View',
+    title: 'View',
   }),
   typename: Format.URL.annotations({
-    [SchemaAST.TitleAnnotationId]: 'Typename',
+    title: 'Typename',
   }),
 }).pipe(Schema.mutable);
 
@@ -54,7 +54,11 @@ export const ViewEditor = ({
   onDelete,
 }: ViewEditorProps) => {
   const { t } = useTranslation(translationKey);
-  const projection = useMemo(() => new ViewProjection(toJsonSchema(schema), view), [schema, view]);
+  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]);
   const [field, setField] = useState<FieldType>();
   const immutable = readonly || !isMutable(schema);
 
@@ -68,9 +72,15 @@ export const ViewEditor = ({
     };
   }, [view]);
 
-  const handleSelect = useCallback((field: FieldType) => {
-    setField((f) => (f === field ? undefined : field));
-  }, []);
+  const handleSelect = useCallback(
+    (field: FieldType) => {
+      if (immutable) {
+        return;
+      }
+      setField((f) => (f === field ? undefined : field));
+    },
+    [immutable],
+  );
 
   // TODO(burdon): Check if mutable; variant of useCallback that return undefined if readonly?
 
@@ -88,12 +98,12 @@ export const ViewEditor = ({
           view.name = name;
         }
 
-        if (view.query.typename !== typename) {
+        if (view.query.typename !== typename && !immutable) {
           onTypenameChanged?.(typename);
         }
       });
     },
-    [schema, view, onTypenameChanged],
+    [schema, view, onTypenameChanged, immutable],
   );
 
   const handleDelete = useCallback(
@@ -141,16 +151,28 @@ export const ViewEditor = ({
   );
 
   return (
-    <div role='none' className={mx('grid grid-rows-[1fr_1fr] min-bs-0', classNames)}>
-      <Form<ViewMetaType>
-        autoSave
-        schema={ViewMetaSchema}
-        values={viewValues}
-        onSave={immutable ? undefined : handleUpdate}
-        classNames='min-bs-0 overflow-y-auto'
-      />
-
-      <div role='none' className='border-bs border-separator min-bs-0 overflow-y-auto'>
+    <div role='none' className={mx('overflow-y-auto', classNames)}>
+      <div role='none' className='p-2'>
+        <div role='none' className='mbe-2'>
+          {immutable && (
+            <Message.Root valence='neutral' className='rounded'>
+              <Message.Title>
+                <Icon icon='ph--info--regular' size={5} classNames='inline' /> {t('system schema title')}
+              </Message.Title>
+              <Message.Body>{t('system schema description')}</Message.Body>
+            </Message.Root>
+          )}
+        </div>
+        <Form<ViewMetaType>
+          autoSave
+          schema={ViewMetaSchema}
+          values={viewValues}
+          onSave={handleUpdate}
+          classNames='min-bs-0 overflow-y-auto'
+        />
+      </div>
+
+      <div role='none' className='min-bs-0 overflow-y-auto'>
         {/* TODO(burdon): Clean up common form ux. */}
         <div role='none' className='p-2'>
           <label className={mx(inputTextLabel)}>{t('fields label')}</label>
@@ -173,7 +195,11 @@ export const ViewEditor = ({
 
               <div role='list' className='flex flex-col w-full'>
                 {fields?.map((field) => (
-                  <List.Item<FieldType> key={field.id} item={field} classNames={mx(grid, ghostHover, 'cursor-pointer')}>
+                  <List.Item<FieldType>
+                    key={field.id}
+                    item={field}
+                    classNames={mx(grid, ghostHover, !immutable && 'cursor-pointer')}
+                  >
                     <List.ItemDragHandle />
                     <List.ItemTitle onClick={() => handleSelect(field)}>{field.path}</List.ItemTitle>
                     <div className='flex items-center gap-2 -ml-4'>
@@ -214,7 +240,7 @@ export const ViewEditor = ({
                     <List.Item<string>
                       key={property}
                       item={property}
-                      classNames={mx(grid, ghostHover, 'cursor-pointer')}
+                      classNames={mx(grid, ghostHover, !immutable && 'cursor-pointer')}
                     >
                       <div />
                       <List.ItemTitle>{property}</List.ItemTitle>
@@ -240,13 +266,14 @@ export const ViewEditor = ({
       )}
 
       {!readonly && !field && (
-        <div className='flex p-2 justify-center'>
+        <div role='none' className='p-2'>
           <IconButton
             icon='ph--plus--regular'
             label={t('button add property')}
             onClick={immutable ? undefined : handleAdd}
             // TODO(burdon): Show field limit in ux (not tooltip).
             disabled={view.fields.length >= VIEW_FIELD_LIMIT}
+            classNames='flex is-full'
           />
         </div>
       )}

package/src/components/testing.tsx

@@ -5,20 +5,16 @@
 import React, { type PropsWithChildren } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/react-ui-theme';
 
 export const TestPanel = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
-  <div className='flex flex-col p-4'>
-    <div className={mx('flex flex-col border border-separator rounded w-[300px]', classNames)}>{children}</div>
-  </div>
+  <div className={mx('w-full max-w-[30rem] border border-separator p-2 rounded', classNames)}>{children}</div>
 );
 
 export const TestLayout = ({ classNames, json, children }: ThemedClassName<PropsWithChildren<{ json?: any }>>) => (
-  <div className='w-full h-full grid grid-cols-3'>
-    <div className={mx('flex col-span-2 w-full justify-center overflow-y-auto', classNames)}>{children}</div>
-    <SyntaxHighlighter language='json' className='w-full text-xs font-thin'>
-      {JSON.stringify(json, null, 2)}
-    </SyntaxHighlighter>
+  <div className='w-full h-full grid grid-cols-[1fr_1fr]'>
+    <div className={mx('m-2 justify-center overflow-y-auto', classNames)}>{children}</div>
+    <JsonFilter data={json} classNames='w-full text-xs' testId='debug' />
   </div>
 );

package/src/hooks/useRefQueryLookupHandler.ts

@@ -13,7 +13,7 @@ import { type QueryRefOptions } from './useQueryRefOptions';
 type UseRefQueryLookupProps = { space?: Space };
 
 export const useRefQueryLookupHandler = ({ space }: UseRefQueryLookupProps): QueryRefOptions => {
-  const handleRefQueryLookup = useCallback(
+  return useCallback(
     async (typeInfo: TypeAnnotation) => {
       if (!space) {
         return [];
@@ -36,6 +36,4 @@ export const useRefQueryLookupHandler = ({ space }: UseRefQueryLookupProps): Que
     },
     [space],
   );
-
-  return handleRefQueryLookup;
 };

package/src/translations.ts

@@ -10,6 +10,7 @@ export default [
       [translationKey]: {
         'fields label': 'Fields',
         'hidden fields label': 'Hidden Fields',
+        'empty readonly ref field label': '(none)',
 
         // TODO(burdon): Standardize field/property.
         'button add property': 'Add property',
@@ -20,6 +21,8 @@ export default [
         'add field': 'Add field',
         'delete field': 'Delete field',
         'field limit reached': 'Maximum number of fields reached',
+        'boolean input true value': 'Yes',
+        'boolean input false value': 'No',
 
         // TODO(burdon): Factor out?
         'button cancel': 'Cancel',
@@ -52,16 +55,20 @@ export default [
         'format uri': 'URI',
         'format uuid': 'UUID',
 
-        // Placeholders
+        // Placeholders.
         'placeholder latitude': 'Latitude',
         'placeholder longitude': 'Longitude',
 
-        // SelectOptionsInput
+        // SelectOptionsInput.
         'select option label': 'Label',
         'select option label placeholder': 'Option label',
         'select option color': 'Color',
         'select option delete': 'Delete',
         'select option add': 'Add option',
+
+        // System schema message.
+        'system schema title': 'System Schema',
+        'system schema description': 'This schema is managed by the system and cannot be modified.',
       },
     },
   },

package/src/vitest-setup.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// https://github.com/testing-library/jest-dom#with-vitest
+import '@testing-library/jest-dom/vitest';
+
+// https://github.com/jsdom/jsdom/issues/3368#issuecomment-1396749033
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;