@dxos/react-ui-form 0.8.4-main.5acf9ea → 0.8.4-main.5ea62a8

package/src/components/ViewEditor/ViewEditor.tsx

@@ -11,18 +11,19 @@ import { invariant } from '@dxos/invariant';
 import { Callout, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 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, VIEW_FIELD_LIMIT, type DataType, ProjectionModel } from '@dxos/schema';
+import { inputTextLabel, mx, subtleHover } from '@dxos/react-ui-theme';
+import { type DataType, FieldSchema, type FieldType, ProjectionModel, VIEW_FIELD_LIMIT } from '@dxos/schema';
 
 import { translationKey } from '../../translations';
 import { FieldEditor } from '../FieldEditor';
 import { Form, type FormProps } from '../Form';
 
-const grid = 'grid grid-cols-[32px_1fr_32px_32px] min-bs-[2.5rem]';
+const listGrid = 'grid grid-cols-[min-content_1fr_min-content_min-content_min-content]';
+const listItemGrid = 'grid grid-cols-subgrid col-span-5';
 
 const ViewMetaSchema = Schema.Struct({
   typename: Format.URL.annotations({
-    title: 'Typename',
+    title: 'Record type',
   }),
 }).pipe(Schema.mutable);
 
@@ -48,20 +49,20 @@ export const ViewEditor = ({
   schema,
   view,
   registry,
-  readonly: _readonly,
+  readonly,
   showHeading = false,
   onTypenameChanged,
   onDelete,
   outerSpacing = true,
 }: ViewEditorProps) => {
+  const schemaReadonly = !isMutable(schema);
   const { t } = useTranslation(translationKey);
-  const projection = useMemo(() => {
+  const projectionModel = useMemo(() => {
     // Use reactive and mutable version of json schema when schema is mutable.
     const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
     return new ProjectionModel(jsonSchema, view.projection);
   }, [schema, view.projection]);
-  const [field, setField] = useState<FieldType>();
-  const readonly = _readonly || !isMutable(schema);
+  const [expandedField, setExpandedField] = useState<FieldType['id']>();
 
   // TODO(burdon): Should be reactive.
   const viewValues = useMemo(() => {
@@ -72,12 +73,9 @@ export const ViewEditor = ({
     };
   }, [view.query.typename]);
 
-  const handleSelect = useCallback(
+  const handleToggleField = useCallback(
     (field: FieldType) => {
-      if (readonly) {
-        return;
-      }
-      setField((f) => (f === field ? undefined : field));
+      setExpandedField((prevExpandedFieldId) => (prevExpandedFieldId === field.id ? undefined : field.id));
     },
     [readonly],
   );
@@ -86,9 +84,9 @@ export const ViewEditor = ({
 
   const handleAdd = useCallback(() => {
     invariant(!readonly);
-    const field = projection.createFieldProjection();
-    setField(field);
-  }, [schema, projection, readonly]);
+    const field = projectionModel.createFieldProjection();
+    setExpandedField(field.id);
+  }, [schema, projectionModel, readonly]);
 
   const handleUpdate = useCallback(
     ({ typename }: ViewMetaType) => {
@@ -105,13 +103,13 @@ export const ViewEditor = ({
   const handleDelete = useCallback(
     (fieldId: string) => {
       invariant(!readonly);
-      if (fieldId === field?.id) {
-        setField(undefined);
+      if (fieldId === expandedField) {
+        setExpandedField(undefined);
       }
 
       onDelete?.(fieldId);
     },
-    [field, onDelete, readonly],
+    [expandedField, onDelete, readonly],
   );
 
   const handleMove = useCallback(
@@ -126,34 +124,33 @@ export const ViewEditor = ({
     [view.projection.fields, readonly],
   );
 
-  const handleClose = useCallback(() => setField(undefined), []);
-
-  const hiddenProperties = projection.getHiddenProperties();
+  const handleClose = useCallback(() => setExpandedField(undefined), []);
 
   const handleHide = useCallback(
     (fieldId: string) => {
-      setField(undefined);
-      projection.hideFieldProjection(fieldId);
+      setExpandedField(undefined);
+      projectionModel.hideFieldProjection(fieldId);
     },
-    [projection],
+    [projectionModel],
   );
 
   const handleShow = useCallback(
     (property: string) => {
-      setField(undefined);
-      projection.showFieldProjection(property as JsonProp);
+      setExpandedField(undefined);
+      projectionModel.showFieldProjection(property as JsonProp);
     },
-    [projection],
+    [projectionModel],
   );
 
   return (
     <div role='none' className={mx(classNames)}>
-      {readonly && (
-        <div role='none' className={mx('is-full', outerSpacing && 'plb-cardSpacingBlock pli-cardSpacingInline')}>
-          <Callout.Root valence='info'>
-            <Callout.Title>{t('system schema description')}</Callout.Title>
-          </Callout.Root>
-        </div>
+      {schemaReadonly && (
+        <Callout.Root
+          valence='info'
+          classNames={['is-full mlb-cardSpacingBlock', outerSpacing && 'mli-cardSpacingInline']}
+        >
+          <Callout.Title>{t('system schema description')}</Callout.Title>
+        </Callout.Root>
       )}
 
       {/* TODO(burdon): Is the form read-only or just the schema? */}
@@ -162,98 +159,84 @@ export const ViewEditor = ({
         autoSave
         schema={ViewMetaSchema}
         values={viewValues}
-        readonly={readonly}
+        readonly={readonly ? 'disabled-input' : false}
         onSave={handleUpdate}
         outerSpacing={outerSpacing}
       />
 
       <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
-        <label className={mx(inputTextLabel)}>{t('fields label')}</label>
+        <h2 className={mx(inputTextLabel)}>{t('fields label')}</h2>
 
         <List.Root<FieldType>
           items={view.projection.fields}
           isItem={Schema.is(FieldSchema)}
           getId={(field) => field.id}
-          readonly={readonly}
           onMove={readonly ? undefined : handleMove}
+          readonly={readonly}
         >
           {({ items: fields }) => (
             <>
-              {showHeading && (
-                <div role='heading' className={grid}>
-                  <div />
-                  <div className='flex items-center text-sm'>{t('field path label')}</div>
-                </div>
-              )}
-
-              <div role='list' className='flex flex-col is-full'>
-                {fields?.map((field) => (
-                  <List.Item<FieldType>
-                    key={field.id}
-                    item={field}
-                    classNames={mx(grid, ghostHover, 'overflow-hidden', !readonly && 'cursor-pointer')}
-                  >
-                    <List.ItemDragHandle />
-                    <List.ItemTitle onClick={() => handleSelect(field)}>{field.path}</List.ItemTitle>
-                    <List.ItemButton
-                      data-testid='hide-field-button'
-                      icon='ph--eye-slash--regular'
-                      // TDOO(burdon): Is this the correct test?
-                      disabled={view.projection.fields.length <= 1}
-                      onClick={() => handleHide(field.id)}
-                    />
-                    {/* TODO(burdon): Remove unless implement undo. */}
-                    {!readonly && (
-                      <List.ItemDeleteButton
-                        disabled={view.projection.fields.length <= 1}
-                        onClick={() => handleDelete(field.id)}
-                      />
-                    )}
-                  </List.Item>
-                ))}
+              {showHeading && <h3 className='text-sm'>{t('field path label')}</h3>}
+              <div role='list' className={listGrid}>
+                {fields?.map((field) => {
+                  const hidden = field.visible === false;
+                  return (
+                    <List.Item<FieldType>
+                      key={field.id}
+                      item={field}
+                      classNames={listItemGrid}
+                      aria-expanded={expandedField === field.id}
+                    >
+                      <div role='none' className={mx(subtleHover, listItemGrid, 'rounded-sm cursor-pointer min-bs-10')}>
+                        <List.ItemDragHandle disabled={readonly} />
+                        <List.ItemTitle classNames={hidden && 'text-subdued'} onClick={() => handleToggleField(field)}>
+                          {field.path}
+                        </List.ItemTitle>
+                        <List.ItemButton
+                          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}
+                          disabled={readonly || (!hidden && projectionModel.fields.length <= 1)}
+                          onClick={() => (hidden ? handleShow(field.path) : handleHide(field.id))}
+                        />
+                        {/* TODO(burdon): Remove unless implement undo. */}
+                        <List.ItemDeleteButton
+                          label={t('delete field label')}
+                          autoHide={false}
+                          disabled={readonly || schemaReadonly || view.projection.fields.length <= 1}
+                          onClick={() => handleDelete(field.id)}
+                          data-testid='field.delete'
+                        />
+                        <IconButton
+                          iconOnly
+                          variant='ghost'
+                          label={t('toggle expand label', { ns: 'os' })}
+                          icon={expandedField === field.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
+                          onClick={() => handleToggleField(field)}
+                        />
+                      </div>
+                      {expandedField === field.id && (
+                        <div role='none' className='col-span-5 mbs-1 mbe-1 border border-separator rounded-md'>
+                          <FieldEditor
+                            readonly={readonly || schemaReadonly ? 'disabled-input' : false}
+                            projection={projectionModel}
+                            field={field}
+                            registry={registry}
+                            onSave={handleClose}
+                          />
+                        </div>
+                      )}
+                    </List.Item>
+                  );
+                })}
               </div>
             </>
           )}
         </List.Root>
-
-        {hiddenProperties.length > 0 && (
-          <>
-            <label className={mx(inputTextLabel)}>{t('hidden fields label')}</label>
-
-            <List.Root<string>
-              items={hiddenProperties}
-              isItem={(item): item is string => typeof item === 'string'}
-              getId={(property) => property}
-            >
-              {({ items: properties }) => (
-                <div role='list' className='flex flex-col is-full'>
-                  {properties?.map((property) => (
-                    <List.Item<string>
-                      key={property}
-                      item={property}
-                      classNames={mx(grid, ghostHover, !readonly && 'cursor-pointer')}
-                    >
-                      <List.ItemDragHandle disabled />
-                      <List.ItemTitle>{property}</List.ItemTitle>
-                      <List.ItemButton
-                        icon='ph--eye--regular'
-                        onClick={() => handleShow(property)}
-                        data-testid='show-field-button'
-                      />
-                    </List.Item>
-                  ))}
-                </div>
-              )}
-            </List.Root>
-          </>
-        )}
       </div>
 
-      {field && (
-        <FieldEditor key={field.id} projection={projection} field={field} registry={registry} onSave={handleClose} />
-      )}
-
-      {!readonly && !field && (
+      {!readonly && !expandedField && (
         <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
           <IconButton
             icon='ph--plus--regular'
@@ -261,7 +244,7 @@ export const ViewEditor = ({
             onClick={readonly ? undefined : handleAdd}
             // TODO(burdon): Show field limit in ux (not tooltip).
             disabled={view.projection.fields.length >= VIEW_FIELD_LIMIT}
-            classNames='flex is-full'
+            classNames='is-full'
           />
         </div>
       )}

package/src/components/index.ts

@@ -2,8 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './deprecated';
-
 export * from './ControlSection';
 export * from './FieldEditor';
 export * from './Form';

package/src/components/testing.tsx

@@ -9,16 +9,22 @@ import { Card } from '@dxos/react-ui-stack';
 import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
 import { mx, textBlockWidth } from '@dxos/react-ui-theme';
 
-export const TestLayout = ({ classNames, json, children }: ThemedClassName<PropsWithChildren<{ json?: any }>>) => (
-  <div className='w-full h-full grid grid-cols-[1fr_1fr] gap-2 overflow-hidden'>
-    <div className={mx('p-4 justify-center overflow-y-auto', classNames)}>{children}</div>
-    <JsonFilter data={json} classNames='w-full text-xs' testId='debug' />
-  </div>
-);
+type TestLayoutProps = ThemedClassName<PropsWithChildren<{ json?: any }>>;
 
-export const TestPanel = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
-  <Card.StaticRoot classNames={[textBlockWidth, classNames]}>{children}</Card.StaticRoot>
-);
+export const TestLayout = ({ classNames, children, json }: TestLayoutProps) => {
+  return (
+    <div className='w-full h-full grid grid-cols-[1fr_1fr] gap-2 overflow-hidden'>
+      <div className={mx('p-4 justify-center overflow-y-auto', classNames)}>{children}</div>
+      <JsonFilter data={json} classNames='w-full text-xs' testId='debug' />
+    </div>
+  );
+};
+
+type TestPanelProps = ThemedClassName<PropsWithChildren>;
+
+export const TestPanel = ({ classNames, children }: TestPanelProps) => {
+  return <Card.StaticRoot classNames={[textBlockWidth, classNames]}>{children}</Card.StaticRoot>;
+};
 
 // Symbol for accessing debug objects in tests.
 export const VIEW_EDITOR_DEBUG_SYMBOL = Symbol('viewEditorDebug');

package/src/hooks/useForm.ts

@@ -2,14 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { SchemaAST, type Schema } from 'effect';
+import { type Schema, SchemaAST } from 'effect';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { type BaseObject, getValue, setValue } from '@dxos/echo-schema';
-import { type SimpleType, type JsonPath, createJsonPath, fromEffectValidationPath } from '@dxos/effect';
+import { type JsonPath, type SimpleType, createJsonPath, fromEffectValidationPath } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { validateSchema, type ValidationError } from '@dxos/schema';
+import { type ValidationError, validateSchema } from '@dxos/schema';
 import { type MaybePromise } from '@dxos/util';
 
 /**
@@ -26,6 +26,8 @@ export type FormHandler<T extends BaseObject> = {
   changed: Record<JsonPath, boolean>;
   canSave: boolean;
   formIsValid: boolean;
+
+  // TODO(burdon): Return onSave.
   handleSave: () => void;
 
   //

package/src/hooks/useRefQueryLookupHandler.ts

@@ -4,7 +4,7 @@
 
 import { useCallback } from 'react';
 
-import { getObjectDXN, type TypeAnnotation } from '@dxos/echo-schema';
+import { type TypeAnnotation, getObjectDXN } from '@dxos/echo-schema';
 import { Filter, type Space } from '@dxos/react-client/echo';
 import { isNonNullable } from '@dxos/util';
 

package/src/translations.ts

@@ -25,6 +25,11 @@ export const translations = [
         'field limit reached': 'Maximum number of fields reached',
         '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',
+        'ref field placeholder_one': 'Select…',
+        'ref field placeholder_other': 'Select items…',
 
         // TODO(burdon): Factor out?
         'button cancel': 'Cancel',
@@ -60,9 +65,9 @@ export const translations = [
         'format url': 'URL',
         'format uuid': 'UUID',
 
-        // Placeholders.
-        'placeholder latitude': 'Latitude',
-        'placeholder longitude': 'Longitude',
+        // GeoPointInput.
+        'latitude label': 'Latitude',
+        'longitude label': 'Longitude',
 
         // SelectOptionsInput.
         'select option label': 'Label',
@@ -72,8 +77,9 @@ export const translations = [
         'select option add': 'Add option',
 
         // System schema message.
-        'system schema title': 'System Schema',
-        'system schema description': 'This is a system schema and cannot be modified.',
+        'system schema title': 'System record type',
+        'system schema description':
+          'This is a system record type and cannot be modified, though the view can still be configured.',
       },
     },
   },

package/src/util/field.ts

@@ -112,24 +112,7 @@ export type CellClassesForFieldTypeProps = {
 };
 
 export const cellClassesForFieldType = ({ type, format }: CellClassesForFieldTypeProps): string[] | undefined => {
-  if (!format) {
-    switch (type) {
-      case TypeEnum.Number:
-        return ['text-right', 'font-mono'];
-      case TypeEnum.Boolean:
-        return ['text-right', 'font-mono'];
-      case TypeEnum.String:
-        return undefined;
-      case TypeEnum.Ref:
-        return undefined;
-
-      default: {
-        return undefined;
-      }
-    }
-  }
-
-  switch (format) {
+  switch (format || type) {
     case FormatEnum.Markdown:
       return undefined;
     case FormatEnum.Time:
@@ -143,6 +126,13 @@ export const cellClassesForFieldType = ({ type, format }: CellClassesForFieldTyp
     case FormatEnum.JSON:
     case FormatEnum.DID:
       return ['font-mono'];
+    case TypeEnum.Number:
+    case TypeEnum.Boolean:
+      return ['text-right', 'font-mono'];
+    case TypeEnum.String:
+      return undefined;
+    case TypeEnum.Ref:
+      return undefined;
     default:
       return undefined;
   }

package/dist/types/src/components/deprecated/Form.d.ts

@@ -1,15 +0,0 @@
-import { type Schema } from 'effect';
-import React from 'react';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { type Projection } from '@dxos/schema';
-export type DeprecatedFormProps<T extends {} = {}> = ThemedClassName<{
-    projection: Projection;
-    object: T;
-    schema?: Schema.Schema<T>;
-    readonly?: boolean;
-}>;
-/**
- * Schema-based object form.
- */
-export declare const DeprecatedForm: <T extends {} = {}>({ classNames, projection, object, schema, readonly, }: DeprecatedFormProps<T>) => React.JSX.Element;
-//# sourceMappingURL=Form.d.ts.map

package/dist/types/src/components/deprecated/Form.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/Form.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAC9D,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAS,KAAK,eAAe,EAA+C,MAAM,gBAAgB,CAAC;AAE1G,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE7E,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,eAAe,CAAC;IACnE,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,EAAE,GAAG,EAAE,EAAE,uDAM/C,mBAAmB,CAAC,CAAC,CAAC,sBA0DxB,CAAC"}

package/dist/types/src/components/deprecated/Form.stories.d.ts

@@ -1,13 +0,0 @@
-import '@dxos-theme';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { type TestType } from '@dxos/schema/testing';
-import { type DeprecatedFormProps } from './Form';
-declare const DefaultStory: (props: DeprecatedFormProps) => React.JSX.Element;
-declare const meta: Meta<typeof DefaultStory>;
-export default meta;
-type Story = StoryObj<DeprecatedFormProps<TestType>>;
-export declare const Default: Story;
-export declare const Empty: Story;
-export declare const Readonly: Story;
-//# sourceMappingURL=Form.stories.d.ts.map

package/dist/types/src/components/deprecated/Form.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkC,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGrF,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAIlE,QAAA,MAAM,YAAY,GAAI,OAAO,mBAAmB,sBAM/C,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAQnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC;AAErD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC"}

package/dist/types/src/components/deprecated/FormInput.d.ts

@@ -1,16 +0,0 @@
-import { type JSX, type PropsWithChildren } from 'react';
-import { type ThemedClassName } from '@dxos/react-ui';
-/**
- * @deprecated
- */
-export declare const DeprecatedFormContainer: ({ children, classNames }: ThemedClassName<PropsWithChildren>) => JSX.Element;
-export type DeprecatedFormInputProps = {
-    label: string;
-    description?: JSX.Element;
-    secondary?: JSX.Element;
-};
-/**
- * @deprecated
- */
-export declare const DeprecatedFormInput: ({ label, description, secondary, children, }: PropsWithChildren<DeprecatedFormInputProps>) => JSX.Element;
-//# sourceMappingURL=FormInput.d.ts.map

package/dist/types/src/components/deprecated/FormInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/FormInput.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,GAAG,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAS,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAG7D;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAAI,0BAA0B,eAAe,CAAC,iBAAiB,CAAC,gBAQnG,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,8CAKjC,iBAAiB,CAAC,wBAAwB,CAAC,gBAkC7C,CAAC"}

package/dist/types/src/components/deprecated/index.d.ts

@@ -1,2 +0,0 @@
-export * from './FormInput';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/deprecated/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC"}

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

@@ -1,62 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { live } from '@dxos/live-object';
-import { testData, TestSchema, testView, type TestType } from '@dxos/schema/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { DeprecatedForm, type DeprecatedFormProps } from './Form';
-import { translations } from '../../translations';
-import { TestLayout, TestPanel } from '../testing';
-
-const DefaultStory = (props: DeprecatedFormProps) => (
-  <TestLayout json={{ props }}>
-    <TestPanel>
-      <DeprecatedForm {...props} />
-    </TestPanel>
-  </TestLayout>
-);
-
-const meta: Meta<typeof DefaultStory> = {
-  title: 'ui/react-ui-form/DeprecatedForm',
-  component: DeprecatedForm,
-  render: DefaultStory,
-  decorators: [withLayout({ fullscreen: true }), withTheme],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<DeprecatedFormProps<TestType>>;
-
-export const Default: Story = {
-  args: {
-    object: live(testData),
-    projection: live(testView).projection,
-    schema: TestSchema,
-  },
-};
-
-export const Empty: Story = {
-  args: {
-    projection: live(testView).projection,
-    schema: TestSchema,
-  },
-};
-
-export const Readonly: Story = {
-  args: {
-    object: live(testData),
-    projection: live(testView).projection,
-    schema: TestSchema,
-    readonly: true,
-  },
-};