@dxos/react-ui-form 0.8.4-main.b97322e → 0.8.4-main.c4373fc

package/src/hooks/useForm.ts

@@ -2,14 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import { SchemaAST, type Schema } from 'effect';
+import type * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
 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 BaseObject, getValue, setValue } from '@dxos/echo/internal';
+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 +27,8 @@ export type FormHandler<T extends BaseObject> = {
   changed: Record<JsonPath, boolean>;
   canSave: boolean;
   formIsValid: boolean;
+
+  // TODO(burdon): Return onSave.
   handleSave: () => void;
 
   //
@@ -201,6 +204,7 @@ export const useForm = <T extends BaseObject>({
     [values],
   );
 
+  // TODO(wittjosiah): This is causing the entire form to re-render on every change.
   const onValueChange = useCallback<FormHandler<T>['onValueChange']>(
     (path: (string | number)[], type: SimpleType, value: any) => {
       const jsonPath = createJsonPath(path);

package/src/hooks/useQueryRefOptions.ts

@@ -4,15 +4,21 @@
 
 import { useEffect, useState } from 'react';
 
-import { type TypeAnnotation } from '@dxos/echo-schema';
+import { type TypeAnnotation } from '@dxos/echo/internal';
 import { type DXN } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { type TagPickerItemData } from '@dxos/react-ui-tag-picker';
+import { type Palette } from '@dxos/react-ui-types';
 import { type MaybePromise } from '@dxos/util';
 
 export type RefOption = { dxn: DXN; label?: string };
 export type QueryRefOptions = (type: TypeAnnotation) => MaybePromise<RefOption[]>;
 
+export type QueryTag = {
+  id: string;
+  label: string;
+  hue?: Palette;
+};
+
 type UseQueryRefOptionsProps = { refTypeInfo: TypeAnnotation | undefined; onQueryRefOptions?: QueryRefOptions };
 
 /**
@@ -20,7 +26,7 @@ type UseQueryRefOptionsProps = { refTypeInfo: TypeAnnotation | undefined; onQuer
  * Used internally within forms to fetch and format reference options for reference fields.
  */
 export const useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }: UseQueryRefOptionsProps) => {
-  const [options, setOptions] = useState<TagPickerItemData[]>([]);
+  const [options, setOptions] = useState<QueryTag[]>([]);
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {

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/internal';
 import { Filter, type Space } from '@dxos/react-client/echo';
 import { isNonNullable } from '@dxos/util';
 

package/src/translations.ts

@@ -25,6 +25,12 @@ 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 combobox input placeholder': 'Search…',
+        'ref field placeholder_one': 'Select…',
+        'ref field placeholder_other': 'Select items…',
 
         // TODO(burdon): Factor out?
         'button cancel': 'Cancel',
@@ -43,7 +49,7 @@ export const translations = [
         'format hostname': 'Hostname',
         'format integer': 'Integer',
         'format json': 'JSON',
-        'format latlng': 'Geopoint',
+        'format lnglat': 'Geopoint',
         'format markdown': 'Markdown',
         'format percent': 'Percent',
         'format ref': 'Reference',
@@ -60,9 +66,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 +78,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

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo/internal';
 import { type ValidationError } from '@dxos/schema';
 
 /**
@@ -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/src/util/formatting.ts

@@ -4,7 +4,7 @@
 
 import { format as formatDate } from 'date-fns/format';
 
-import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo/internal';
 
 type ValueFormatProps = {
   type: TypeEnum;

package/src/util/refs.ts

@@ -2,9 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type SchemaAST } from 'effect';
+import type * as SchemaAST from 'effect/SchemaAST';
 
-import { FormatEnum, ReferenceAnnotationId } from '@dxos/echo-schema';
+import { FormatEnum, ReferenceAnnotationId } from '@dxos/echo/internal';
 import { findAnnotation } from '@dxos/effect';
 import { type SchemaProperty } from '@dxos/schema';
 

package/src/util/schema.ts

@@ -2,13 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { SchemaAST } from 'effect';
+import * as SchemaAST from 'effect/SchemaAST';
 
 import { findNode } from '@dxos/effect';
 
 export const findArrayElementType = (ast: SchemaAST.AST) => {
   const tupleType = findNode(ast, SchemaAST.isTupleType);
-  const elementType = (tupleType as SchemaAST.TupleType | undefined)?.rest[0]?.type;
-
-  return elementType;
+  return (tupleType as SchemaAST.TupleType | undefined)?.rest[0]?.type;
 };

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,
-  },
-};

package/src/components/deprecated/Form.tsx

@@ -1,119 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { SchemaAST, type Schema, Option, pipe } from 'effect';
-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 { getFieldValue, setFieldValue, 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 const DeprecatedForm = <T extends {} = {}>({
-  classNames,
-  projection,
-  object,
-  schema,
-  readonly,
-}: DeprecatedFormProps<T>) => {
-  return (
-    <div role='none' className={mx('flex flex-col w-full gap-2 p-2', classNames)}>
-      {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;
-        // const format =
-        //   (prop && (getPatternAnnotation(prop) ?? (SchemaAST.isNumberKeyword(prop) && RealNumberFormat))) || undefined;
-
-        //
-        // Boolean
-        //
-
-        if (prop && SchemaAST.isBooleanKeyword(prop)) {
-          const value = object && getFieldValue(object, field);
-          const onChange = (checked: boolean) => {
-            setFieldValue(object, field, checked);
-          };
-
-          return (
-            <div key={field.path} className='flex flex-col w-full gap-1'>
-              <Input.Root>
-                <Input.Label classNames='px-1'>{title}</Input.Label>
-                <Input.Switch disabled={readonly} checked={!!value} onCheckedChange={(checked) => onChange(checked)} />
-              </Input.Root>
-            </div>
-          );
-        }
-
-        //
-        // Strings
-        // TODO(burdon): Other types:
-        //  - RichText editor
-        //  - Numbers (with formatting: commas, currency, etc.)
-        //  - Date (https://ark-ui.com/react/docs/components/date-picker)
-        //  - Enum (single/multi-select)
-        //
-
-        const value = object ? getFieldValue(object, field) : undefined;
-
-        return (
-          <div key={field.path} className='flex flex-col w-full gap-1'>
-            <Input.Root>
-              <Input.Label classNames='px-1'>{title}</Input.Label>
-              <TextInput
-                disabled={readonly}
-                placeholder={description}
-                // format={format}
-                value={value ? String(value) : ''}
-                onChange={(event) => setFieldValue(object, field, event.target.value)}
-              />
-            </Input.Root>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-type TextInputProps = {
-  // format?: PatternAnnotation;
-} & Omit<NativeTextInputProps, 'style'>;
-
-/**
- * @deprecated
- */
-// TODO(burdon): Remove.
-// TODO(burdon): Use schema validation directly.
-const TextInput = ({ onChange, ...props }: TextInputProps) => {
-  const [valid, _setValid] = useState(true);
-
-  const handleChange: NativeTextInputProps['onChange'] = (ev) => {
-    // const text = ev.target.value;
-    // if (!format?.filter || text.match(format.filter)) {
-    onChange?.(ev);
-    //   if (format?.valid) {
-    //     setValid(format.valid.test(text));
-    //   }
-    // }
-  };
-
-  return (
-    <Input.TextInput
-      {...props}
-      // TODO(burdon): validationValence on Input.
-      style={valid ? {} : ({ '--tw-ring-color': 'red' } as any)}
-      onChange={handleChange}
-    />
-  );
-};

package/src/components/deprecated/FormInput.tsx

@@ -1,71 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type JSX, type PropsWithChildren } from 'react';
-
-import { Input, type ThemedClassName } from '@dxos/react-ui';
-import { mx, textBlockWidth } from '@dxos/react-ui-theme';
-
-/**
- * @deprecated
- */
-export const DeprecatedFormContainer = ({ children, classNames }: ThemedClassName<PropsWithChildren>) => {
-  return (
-    <div role='none' className='container-max-width p-4 justify-center overflow-x-hidden overflow-y-auto'>
-      <div role='form' className={mx('flex flex-col', textBlockWidth, classNames)}>
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export type DeprecatedFormInputProps = {
-  label: string;
-  description?: JSX.Element;
-  secondary?: JSX.Element;
-};
-
-/**
- * @deprecated
- */
-export const DeprecatedFormInput = ({
-  label,
-  description,
-  secondary,
-  children,
-}: PropsWithChildren<DeprecatedFormInputProps>) => {
-  const primary = (
-    <div role='none' className='flex w-full gap-4 py-1'>
-      <Input.Root>
-        <div role='none' className='flex flex-col w-full'>
-          <Input.Label classNames='flex min-bs-[--rail-action] items-center' style={{ fontSize: 'unset' }}>
-            {label}
-          </Input.Label>
-          {description && (
-            <Input.DescriptionAndValidation classNames='mbs-0.5'>
-              <Input.Description>{description}</Input.Description>
-            </Input.DescriptionAndValidation>
-          )}
-        </div>
-
-        <div role='none'>
-          <div role='none' className='flex min-bs-[--rail-action] items-center'>
-            {children}
-          </div>
-        </div>
-      </Input.Root>
-    </div>
-  );
-
-  if (secondary) {
-    return (
-      <div role='none'>
-        {primary}
-        {secondary}
-      </div>
-    );
-  }
-
-  return primary;
-};

package/src/components/deprecated/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './FormInput';