@dxos/react-ui-form 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/src/components/ViewEditor/ViewEditor.tsx

@@ -9,8 +9,7 @@ import * as Option from 'effect/Option';
 import * as Schema from 'effect/Schema';
 import React, { forwardRef, useCallback, useContext, useImperativeHandle, useMemo, useState } from 'react';
 
-import { Entity, Feed, Filter, Format, Obj, Query, QueryAST, Ref, type SchemaRegistry } from '@dxos/echo';
-import { View } from '@dxos/echo';
+import { Entity, Feed, Filter, Format, Obj, Query, QueryAST, Ref, type SchemaRegistry, View } from '@dxos/echo';
 import { EchoSchema, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { useObject, useQuery } from '@dxos/react-client/echo';
@@ -24,9 +23,10 @@ import {
   createEchoChangeCallback,
   getTypenameFromQuery,
 } from '@dxos/schema';
-import { mx, osTranslations, subtleHover } from '@dxos/ui-theme';
+import { mx, osTranslations } from '@dxos/ui-theme';
+
+import { translationKey } from '#translations';
 
-import { translationKey } from '../../translations';
 import { FieldEditor } from '../FieldEditor';
 import {
   Form,
@@ -100,8 +100,8 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
         if (from._tag !== 'scope') {
           return undefined;
         }
-        return Option.fromNullable(from.scope.queues).pipe(
-          Option.flatMap((queues) => Array.head(queues)),
+        return Option.fromNullable(from.scope.feeds).pipe(
+          Option.flatMap((feeds) => Array.head(feeds)),
           Option.map(String),
           Option.getOrUndefined,
         );
@@ -160,13 +160,13 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     const handleUpdate = useCallback(
       (values: any) => {
         const targetValue = values.target;
-        let queueDxn: string | undefined;
+        let feedDXN: string | undefined;
 
         if (Ref.isRef(targetValue)) {
-          const feedDxn = targetValue.dxn.toString();
-          const feed = feeds.find((feed) => Obj.getDXN(feed).toString() === feedDxn);
+          const targetDXN = targetValue.dxn.toString();
+          const feed = feeds.find((feed) => Obj.getDXN(feed).toString() === targetDXN);
           if (feed) {
-            queueDxn = Feed.getQueueDxn(feed)?.toString();
+            feedDXN = Feed.getQueueDxn(feed)?.toString();
           }
         }
 
@@ -175,7 +175,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
           mode === 'schema'
             ? Query.select(Filter.typename(values.query)).ast
             : JSON.parse(JSON.stringify(values.query));
-        onQueryChanged?.(query, queueDxn);
+        onQueryChanged?.(query, feedDXN);
       },
       [onQueryChanged, mode, feeds],
     );
@@ -189,7 +189,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     );
 
     return (
-      <div role='none' className={mx(classNames)}>
+      <div className={mx(classNames)}>
         {/* If readonly is set, then the callout is not needed. */}
         {schemaReadonly && !readonly && (
           <Message.Root valence='info' classNames='my-form-padding'>
@@ -274,12 +274,12 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
       invariant(!readonly);
-      Obj.change(view, (obj) => {
+      Obj.update(view, (view) => {
         // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
-        const fields = [...obj.projection.fields];
+        const fields = [...view.projection.fields];
         const [moved] = fields.splice(fromIndex, 1);
         fields.splice(toIndex, 0, moved);
-        obj.projection.fields = fields;
+        view.projection.fields = fields;
       });
     },
     [view, readonly],
@@ -328,20 +328,13 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                   classNames={'grid grid-cols-subgrid col-span-5'}
                   aria-expanded={expandedField === field.id}
                 >
-                  <div
-                    role='none'
-                    className={mx(
-                      subtleHover,
-                      'grid grid-cols-subgrid col-span-5',
-                      'rounded-xs cursor-pointer min-h-10',
-                    )}
-                  >
+                  <div className='grid grid-cols-subgrid col-span-5 rounded-xs cursor-pointer min-h-10 dx-hover'>
                     <List.ItemDragHandle disabled={readonly || schemaReadonly} />
                     <List.ItemTitle classNames={hidden && 'text-subdued'} onClick={() => handleToggleField(field)}>
                       {field.path}
                     </List.ItemTitle>
                     <List.ItemIconButton
-                      label={t(hidden ? 'show field label' : 'hide field label')}
+                      label={t(hidden ? 'show-field.label' : 'hide-field.label')}
                       data-testid={hidden ? 'show-field-button' : 'hide-field-button'}
                       icon={hidden ? 'ph--eye-closed--regular' : 'ph--eye--regular'}
                       autoHide={false}
@@ -369,7 +362,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                     )}
                   </div>
                   {expandedField === field.id && !readonly && (
-                    <div role='none' className='col-span-5 mt-1 mb-1 border border-separator rounded-md'>
+                    <div className='col-span-full mt-1 mb-1 border border-separator rounded-md'>
                       <FieldEditor
                         readonly={readonly || schemaReadonly}
                         registry={registry}
@@ -384,7 +377,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
             })}
           </div>
           {!readonly && !expandedField && (
-            <div role='none' className='my-form-padding'>
+            <div className='my-form-padding'>
               <IconButton
                 icon='ph--plus--regular'
                 label={t('add-property-button.label')}

package/src/components/index.ts

@@ -4,6 +4,8 @@
 
 export * from './FieldEditor';
 export * from './Form';
+export * from './ObjectForm';
 export * from './ObjectPicker';
+export * from './ObjectProperties';
 export * from './Settings';
 export * from './ViewEditor';

package/src/components/testing.tsx

@@ -4,27 +4,25 @@
 
 import React, { type PropsWithChildren } from 'react';
 
-import { Column, type ThemedClassName } from '@dxos/react-ui';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/ui-theme';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
+import { composableProps, slottable } from '@dxos/ui-theme';
 
-type TestLayoutProps = ThemedClassName<PropsWithChildren<{ json?: any }>>;
+type TestLayoutProps = PropsWithChildren<{ json?: any }>;
 
-export const TestLayout = ({ classNames, children, json }: TestLayoutProps) => {
+export const TestLayout = ({ children, json }: TestLayoutProps) => {
   return (
-    <div className='h-full w-full grid grid-cols-[1fr_1fr] p-4 gap-4 overflow-hidden'>
-      <TestPanel classNames={['dx-container', classNames]}>
-        <Column.Root classNames='dx-container' gutter='sm'>
-          {children}
-        </Column.Root>
-      </TestPanel>
-      <TestPanel classNames={'overflow-hidden'}>
-        <Json.Root data={json}>
-          <Json.Content classNames='h-full'>
-            <Json.Filter />
-            <Json.Data testId='debug' classNames='text-xs' />
-          </Json.Content>
-        </Json.Root>
+    <div className='dx-container grid grid-cols-[1fr_1fr] p-4 gap-4'>
+      <TestPanel>{children}</TestPanel>
+      <TestPanel>
+        <Syntax.Root data={json}>
+          <Syntax.Content>
+            <Syntax.Filter />
+            <Syntax.Viewport>
+              <Syntax.Code testId='debug' classNames='text-xs' />
+            </Syntax.Viewport>
+          </Syntax.Content>
+        </Syntax.Root>
       </TestPanel>
     </div>
   );
@@ -32,14 +30,15 @@ export const TestLayout = ({ classNames, children, json }: TestLayoutProps) => {
 
 type TestPanelProps = ThemedClassName<PropsWithChildren>;
 
-const TestPanel = ({ classNames, children }: TestPanelProps) => {
+const TestPanel = slottable<HTMLDivElement, TestPanelProps>(({ children }, forwardedRef) => {
   return (
-    <div role='none' className={mx(['dx-document h-full bg-modal-surface rounded-md', classNames])}>
+    <div {...composableProps({ classNames: 'dx-container bg-modal-surface rounded-md' })} ref={forwardedRef}>
       {children}
     </div>
   );
-};
+});
 
 // Symbol for accessing debug objects in tests.
 export const VIEW_EDITOR_DEBUG_SYMBOL = Symbol('viewEditorDebug');
 export const FIELD_EDITOR_DEBUG_SYMBOL = Symbol('fieldEditorDebug');
+export const OBJECT_PROPERTIES_DEBUG_SYMBOL = Symbol('objectPropertiesDebug');

package/src/index.ts

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

package/src/translations.ts

@@ -14,22 +14,25 @@ export const translations = [
         'hidden-fields.label': 'Hidden Fields',
         'empty-readonly-ref-field.label': '(none)',
 
-        'add-property-button.label': 'Add property',
         'field-property.label': 'Property',
         'field-property.placeholder': 'Property name',
         'field-format.label': 'Type',
         'field-path.label': 'Field path',
-        'add-field.button': 'Add field',
+
+        'add-item.button': 'Add item',
+        'add-property-button.label': 'Add property',
         'boolean-input-true.value': 'Yes',
         'boolean-input-false.value': 'No',
         'show-field.label': 'Show field',
         'hide-field.label': 'Hide field',
         'delete-field.label': 'Delete field',
+        'create-option.label': 'Create',
+        'add-tag.label': 'Add tag',
+
         'ref-field-combobox-input.placeholder': 'Search…',
         'ref-field.placeholder': 'Select…',
         'ref-field.placeholder_one': 'Select…',
         'ref-field.placeholder_other': 'Select items…',
-        'create-option.label': 'Create',
 
         'example.placeholder': 'Example',
         'latitude.placeholder': 'Latitude (e.g., 40.7128)',
@@ -37,6 +40,7 @@ export const translations = [
 
         'cancel-button.label': 'Cancel',
         'save-button.label': 'Save',
+        'create-text.label': 'Create text',
 
         // TypeFormat
         'format.boolean.label': 'Boolean',

package/src/util/field-type.ts

@@ -0,0 +1,60 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as SchemaAST from 'effect/SchemaAST';
+
+import { getAnnotation, isLiteralUnion } from '@dxos/effect';
+
+/**
+ * Detected field type for a schema property.
+ */
+export type SettingsFieldType = 'boolean' | 'string' | 'number' | 'select' | 'struct';
+
+export type SelectOption = {
+  value: string | number;
+  label?: string;
+};
+
+/**
+ * Detect the field type from an Effect Schema AST node.
+ */
+export const detectFieldType = (ast: SchemaAST.AST): SettingsFieldType | undefined => {
+  if (isLiteralUnion(ast)) {
+    return 'select';
+  }
+  if (SchemaAST.isTypeLiteral(ast)) {
+    return 'struct';
+  }
+
+  switch (ast._tag) {
+    case 'BooleanKeyword':
+      return 'boolean';
+    case 'StringKeyword':
+      return 'string';
+    case 'NumberKeyword':
+      return 'number';
+  }
+
+  return undefined;
+};
+
+/**
+ * Extract select options from a literal union AST node.
+ * Reads title annotations from individual literals for labels.
+ */
+export const getSelectOptionsFromAst = (ast: SchemaAST.AST): SelectOption[] | undefined => {
+  if (!isLiteralUnion(ast)) {
+    return undefined;
+  }
+
+  return (ast as SchemaAST.Union<SchemaAST.Literal>).types.flatMap((literalNode) => {
+    const value = literalNode.literal;
+    if (typeof value !== 'string' && typeof value !== 'number') {
+      return [];
+    }
+    const title = getAnnotation<string>(SchemaAST.TitleAnnotationId, false)(literalNode);
+    const label = title ?? (typeof value === 'string' ? value.charAt(0).toUpperCase() + value.slice(1) : String(value));
+    return [{ value, label }];
+  });
+};

package/src/util/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './field';
+export * from './field-type';
 export * from './formatting';
 export * from './properties';
 export * from './refs';