@dxos/react-ui-form 0.7.5-main.9d26e3a → 0.7.5-main.b19bfc8

package/src/components/Form/custom/TupleInput.tsx

@@ -4,7 +4,6 @@
 
 import React from 'react';
 
-import { type BaseObject } from '@dxos/echo-schema';
 import { Input } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 import { safeParseFloat } from '@dxos/util';
@@ -13,9 +12,8 @@ import { InputHeader, type InputProps } from '../Input';
 
 const gridCols = ['grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4'];
 
-export const TupleInput = <T extends BaseObject>({
+export const TupleInput = ({
   binding,
-  property,
   type,
   label,
   disabled,
@@ -23,11 +21,11 @@ export const TupleInput = <T extends BaseObject>({
   getValue,
   onValueChange,
   onBlur,
-}: InputProps<T> & { binding: string[] }) => {
-  const { status, error } = getStatus?.(property);
+}: InputProps & { binding: string[] }) => {
+  const { status, error } = getStatus();
 
   // TODO(burdon): Generalize number/float/string, etc.
-  const values: Record<string, number> = getValue<Record<string, number>>(property) ?? {};
+  const values: Record<string, number> = getValue<Record<string, number>>() ?? {};
 
   return (
     <Input.Root validationValence={status}>
@@ -41,9 +39,7 @@ export const TupleInput = <T extends BaseObject>({
             type='number'
             disabled={disabled}
             value={values[prop]}
-            onChange={(event) =>
-              onValueChange(property, type, { ...values, [prop]: safeParseFloat(event.target.value, 0) })
-            }
+            onChange={(event) => onValueChange(type, { ...values, [prop]: safeParseFloat(event.target.value, 0) })}
             onBlur={onBlur}
           />
         ))}

package/src/components/Form/custom/index.ts

@@ -3,4 +3,5 @@
 //
 
 export * from './GeoPointInput';
+export * from './SelectOptionsInput';
 export * from './TupleInput';

package/src/components/Form/factory.tsx

@@ -2,23 +2,22 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type BaseObject, FormatEnum } from '@dxos/echo-schema';
+import { FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 
-import { BooleanInput, NumberInput, TextInput } from './Defaults';
+import { BooleanInput, MarkdownInput, NumberInput, TextInput } from './Defaults';
 import { type InputComponent } from './Input';
 import { GeoPointInput } from './custom';
 
 /**
  * Get property input component.
  */
-export const getInputComponent = <T extends BaseObject>(
-  type: SimpleType,
-  format?: FormatEnum,
-): InputComponent<T> | undefined => {
+export const getInputComponent = (type: SimpleType, format?: FormatEnum): InputComponent | undefined => {
   switch (format) {
-    case FormatEnum.LatLng:
+    case FormatEnum.GeoPoint:
       return GeoPointInput;
+    case FormatEnum.Markdown:
+      return MarkdownInput;
   }
 
   switch (type) {

package/src/components/Form/index.ts

@@ -2,8 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useFormValues } from './FormContext';
+
 export * from './custom';
 
 export * from './Defaults';
 export * from './Form';
 export * from './Input';
+export { useFormValues };

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

@@ -5,13 +5,13 @@
 import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import { Format, type EchoSchema, S, toJsonSchema, TypedObject } from '@dxos/echo-schema';
-import { useSpace } from '@dxos/react-client/echo';
+import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { type ViewType, ViewProjection, createView } from '@dxos/schema';
+import { ViewProjection, ViewType, createView } from '@dxos/schema';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { ViewEditor } from './ViewEditor';
@@ -41,6 +41,21 @@ const DefaultStory = () => {
     }
   }, [space]);
 
+  const views = useQuery(space, Filter.schema(ViewType));
+  const currentTypename = useMemo(() => view?.query?.type, [view]);
+  const updateViewTypename = useCallback(
+    (newTypename: string) => {
+      if (!schema) {
+        return;
+      }
+      const matchingViews = views.filter((view) => view.query.type === currentTypename);
+      for (const view of matchingViews) {
+        view.query.type = newTypename;
+      }
+      schema.updateTypename(newTypename);
+    },
+    [views, schema],
+  );
   const handleDelete = useCallback((property: string) => projection?.deleteFieldProjection(property), [projection]);
 
   if (!schema || !view || !projection) {
@@ -50,7 +65,13 @@ const DefaultStory = () => {
   return (
     <TestLayout json={{ schema, view, projection }}>
       <TestPanel>
-        <ViewEditor schema={schema} view={view} registry={space?.db.schemaRegistry} onDelete={handleDelete} />
+        <ViewEditor
+          schema={schema}
+          view={view}
+          registry={space?.db.schemaRegistry}
+          onTypenameChanged={updateViewTypename}
+          onDelete={handleDelete}
+        />
       </TestPanel>
     </TestLayout>
   );

package/src/components/ViewEditor/ViewEditor.tsx

@@ -10,7 +10,6 @@ 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';
 import { FieldSchema, type FieldType, type ViewType, ViewProjection, VIEW_FIELD_LIMIT } from '@dxos/schema';
-import { arrayMove } from '@dxos/util';
 
 import { translationKey } from '../../translations';
 import { FieldEditor } from '../FieldEditor';
@@ -22,7 +21,7 @@ const ViewMetaSchema = S.Struct({
   name: S.String.annotations({
     [AST.TitleAnnotationId]: 'View',
   }),
-  typename: Format.DXN.annotations({
+  typename: Format.URL.annotations({
     [AST.TitleAnnotationId]: 'Typename',
   }),
 }).pipe(S.mutable);
@@ -35,6 +34,7 @@ export type ViewEditorProps = ThemedClassName<{
   registry?: SchemaRegistry;
   readonly?: boolean;
   showHeading?: boolean;
+  onTypenameChanged: (typename: string) => void;
   onDelete: (fieldId: string) => void;
 }>;
 
@@ -48,6 +48,7 @@ export const ViewEditor = ({
   registry,
   readonly,
   showHeading = false,
+  onTypenameChanged,
   onDelete,
 }: ViewEditorProps) => {
   const { t } = useTranslation(translationKey);
@@ -67,12 +68,15 @@ export const ViewEditor = ({
   const handleViewUpdate = useCallback(
     ({ name, typename }: ViewMetaType) => {
       requestAnimationFrame(() => {
-        view.name = name;
-        view.query.type = typename;
-        schema.updateTypename(typename);
+        if (view.name !== name) {
+          view.name = name;
+        }
+        if (view.query.type !== typename) {
+          onTypenameChanged(typename);
+        }
       });
     },
-    [view, schema],
+    [view, schema, onTypenameChanged],
   );
 
   const handleSelect = useCallback((field: FieldType) => {
@@ -86,7 +90,11 @@ export const ViewEditor = ({
 
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
-      arrayMove(view.fields, fromIndex, toIndex);
+      // 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],
   );
@@ -95,7 +103,7 @@ export const ViewEditor = ({
 
   return (
     <div role='none' className={mx('flex flex-col w-full divide-y divide-separator', classNames)}>
-      <Form<ViewMetaType> autoFocus autoSave schema={ViewMetaSchema} values={viewValues} onSave={handleViewUpdate} />
+      <Form<ViewMetaType> autoSave schema={ViewMetaSchema} values={viewValues} onSave={handleViewUpdate} />
 
       <div>
         {/* TODO(burdon): Clean up common form ux. */}

package/src/components/deprecated/FormInput.tsx

@@ -4,7 +4,21 @@
 
 import React, { type JSX, type PropsWithChildren } from 'react';
 
-import { Input } from '@dxos/react-ui';
+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='w-full 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;
@@ -15,7 +29,6 @@ export type DeprecatedFormInputProps = {
 /**
  * @deprecated
  */
-// TODO(burdon): Still used in ObservabilitySettings and all settings.
 export const DeprecatedFormInput = ({
   label,
   description,
@@ -26,8 +39,9 @@ export const DeprecatedFormInput = ({
     <div role='none' className='flex w-full gap-4 py-1'>
       <Input.Root>
         <div role='none' className='flex flex-col w-full'>
-          {/* TODO(burdon): Consistent height for controls (e.g., Select, Textbox, and Checkbox are all different). */}
-          <Input.Label classNames='flex min-h-[40px] items-center'>{label}</Input.Label>
+          <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>
@@ -36,7 +50,7 @@ export const DeprecatedFormInput = ({
         </div>
 
         <div role='none'>
-          <div role='none' className='flex min-h-[40px] items-center'>
+          <div role='none' className='flex min-bs-[--rail-action] items-center'>
             {children}
           </div>
         </div>
@@ -45,9 +59,8 @@ export const DeprecatedFormInput = ({
   );
 
   if (secondary) {
-    // console.log(secondary);
     return (
-      <div role='none' className='flex flex-col w-full'>
+      <div role='none'>
         {primary}
         {secondary}
       </div>

package/src/hooks/useForm.ts

@@ -2,10 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type FocusEvent, useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { type BaseObject, type PropertyKey, getValue, setValue } from '@dxos/echo-schema';
-import { type SimpleType, type S, type JsonPath } from '@dxos/effect';
+import { type BaseObject, getValue, setValue } from '@dxos/echo-schema';
+import { AST, type S, type SimpleType, type JsonPath, createJsonPath, fromEffectValidationPath } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { validateSchema, type ValidationError } from '@dxos/schema';
@@ -20,20 +20,21 @@ export type FormHandler<T extends BaseObject> = {
   //
 
   values: Partial<T>;
-  errors: Record<PropertyKey<T>, string>;
-  touched: Record<PropertyKey<T>, boolean>;
-  changed: Record<PropertyKey<T>, boolean>;
+  errors: Record<JsonPath, string>;
+  touched: Record<JsonPath, boolean>;
+  changed: Record<JsonPath, boolean>;
   canSave: boolean;
+  formIsValid: boolean;
   handleSave: () => void;
 
   //
   // Form input component helpers.
   //
 
-  getStatus: (property: PropertyKey<T>) => { status?: 'error'; error?: string };
-  getValue: <V>(property: PropertyKey<T>) => V | undefined;
-  onValueChange: <V>(property: PropertyKey<T>, type: SimpleType, value: V) => void;
-  onBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  getStatus: (path: string | (string | number)[]) => { status?: 'error'; error?: string };
+  getValue: <V>(path: (string | number)[]) => V | undefined;
+  onValueChange: <V>(path: (string | number)[], type: SimpleType, value: V) => void;
+  onTouched: (path: (string | number)[]) => void;
 };
 
 /**
@@ -41,9 +42,8 @@ export type FormHandler<T extends BaseObject> = {
  */
 export interface FormOptions<T extends BaseObject> {
   /**
-   * Effect schema.
+   * Effect schema (Type literal).
    */
-  // TODO(burdon): Change to S.Struct<T>?
   schema: S.Schema<T>;
 
   /**
@@ -89,21 +89,22 @@ export const useForm = <T extends BaseObject>({
   onValid,
   onSave,
 }: FormOptions<T>): FormHandler<T> => {
+  invariant(AST.isTypeLiteral(schema.ast));
+
   const [values, setValues] = useState<Partial<T>>(initialValues);
   useEffect(() => {
     setValues(initialValues);
   }, [initialValues]);
 
-  const [touched, setTouched] = useState<Record<PropertyKey<T>, boolean>>(createKeySet(initialValues, false));
-  const [changed, setChanged] = useState<Record<PropertyKey<T>, boolean>>(createKeySet(initialValues, false));
-  const [errors, setErrors] = useState<Record<PropertyKey<T>, string>>({} as Record<PropertyKey<T>, string>);
+  const [touched, setTouched] = useState<Record<JsonPath, boolean>>(createKeySet(initialValues, false));
+  const [changed, setChanged] = useState<Record<JsonPath, boolean>>(createKeySet(initialValues, false));
+  const [errors, setErrors] = useState<Record<JsonPath, string>>({});
   const [saving, setSaving] = useState(false);
 
   //
   // Validation.
   //
 
-  // TODO(burdon): Validate each property separately.
   const validate = useCallback(
     (values: Partial<T>): values is T => {
       let errors: ValidationError[] = validateSchema(schema, values) ?? [];
@@ -129,6 +130,10 @@ export const useForm = <T extends BaseObject>({
     }
   }, [values, schemaDirty]);
 
+  const formIsValid = useMemo(() => {
+    return Object.keys(errors).length === 0;
+  }, [errors]);
+
   /**
    * NOTE: We can submit if there is no touched field that has an error.
    * Basically, if there's a validation message visible in the form, submit should be disabled.
@@ -136,8 +141,15 @@ export const useForm = <T extends BaseObject>({
   const canSave = useMemo(
     () =>
       !saving &&
-      Object.keys(values).every((property) => touched[property as JsonPath] === false || !errors[property as JsonPath]),
-    [values, touched, errors, saving],
+      // Check if any error paths that are touched have errors
+      !Object.entries(touched).some(
+        ([path, isTouched]) =>
+          isTouched &&
+          Object.keys(errors).some(
+            (errorPath) => errorPath === path || errorPath.startsWith(`${path}.`) || errorPath.startsWith(`${path}[`),
+          ),
+      ),
+    [touched, errors, saving],
   );
 
   const handleSave = useCallback(async () => {
@@ -156,19 +168,27 @@ export const useForm = <T extends BaseObject>({
   //
 
   const getStatus = useCallback<FormHandler<T>['getStatus']>(
-    (property: PropertyKey<T>) => ({
-      status: errors[property] ? 'error' : undefined,
-      error: errors[property] ? errors[property] : undefined,
-    }),
-    [touched, errors],
+    (path) => {
+      const jsonPath = Array.isArray(path) ? createJsonPath(path) : path;
+      const matchingError = Object.entries(errors).find(
+        ([errorPath]) =>
+          errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`),
+      );
+
+      return {
+        status: matchingError ? 'error' : undefined,
+        error: matchingError ? matchingError[1] : undefined,
+      };
+    },
+    [errors],
   );
 
-  // TODO(burdon): Use path to extract hierarchical value.
-  const getFormValue = <V>(property: PropertyKey<T>): V | undefined => {
-    return getValue(values, property as any as JsonPath);
+  const getFormValue = <V>(path: (string | number)[]): V | undefined => {
+    return getValue(values, createJsonPath(path));
   };
 
-  const onValueChange = (property: PropertyKey<T>, type: SimpleType, value: any) => {
+  const onValueChange = (path: (string | number)[], type: SimpleType, value: any) => {
+    const jsonPath = createJsonPath(path);
     let parsedValue = value;
     try {
       if (type === 'number') {
@@ -179,9 +199,9 @@ export const useForm = <T extends BaseObject>({
       parsedValue = undefined;
     }
 
-    const newValues = { ...setValue(values, property as any as JsonPath, parsedValue) };
+    const newValues = { ...setValue(values, jsonPath, parsedValue) };
     setValues(newValues);
-    setChanged((prev) => ({ ...prev, [property]: true }));
+    setChanged((prev) => ({ ...prev, [jsonPath]: true }));
     onValuesChanged?.(newValues);
 
     const isValid = validate(newValues);
@@ -190,19 +210,10 @@ export const useForm = <T extends BaseObject>({
     }
   };
 
-  // TODO(burdon): This is a leaky abstraction: the hook ideally shouldn't get involved in UX.
-  const onBlur = useCallback(
-    (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const { name } = event.target;
-      setTouched((touched) => ({ ...touched, [name]: true }));
-
-      // TODO(Zan): This should be configurable behavior.
-      if (event.relatedTarget?.getAttribute('type') === 'submit') {
-        // NOTE: We do this here instead of onSave because the blur event is triggered before the submit event
-        //  and results in the submit button being disabled when the form is invalid.
-        setTouched(createKeySet(values, true));
-      }
-
+  const onTouched = useCallback(
+    (path: (string | number)[]) => {
+      const jsonPath = createJsonPath(path);
+      setTouched((touched) => ({ ...touched, [jsonPath]: true }));
       validate(values);
     },
     [validate, values],
@@ -216,28 +227,31 @@ export const useForm = <T extends BaseObject>({
     changed,
     canSave,
     handleSave,
+    formIsValid,
 
     // Field utils.
     getStatus,
     getValue: getFormValue,
     onValueChange,
-    onBlur,
+    onTouched,
   } satisfies FormHandler<T>;
 };
 
-const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<PropertyKey<T>, V> => {
+const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<JsonPath, V> => {
   invariant(obj);
-  return Object.keys(obj).reduce((acc, key) => ({ ...acc, [key]: value }), {} as Record<PropertyKey<T>, V>);
+  return Object.keys(obj).reduce((acc, key) => ({ ...acc, [key]: value }), {} as Record<JsonPath, V>);
 };
 
-const flatMap = <T extends BaseObject>(errors: ValidationError[]) => {
+const flatMap = (errors: ValidationError[]) => {
   return errors.reduce(
     (result, { path, message }) => {
-      if (!(path in result)) {
-        result[path as PropertyKey<T>] = message;
+      // Convert the validation error path format to our JsonPath format
+      const jsonPath = fromEffectValidationPath(path);
+      if (!(jsonPath in result)) {
+        result[jsonPath] = message;
       }
       return result;
     },
-    {} as Record<PropertyKey<T>, string>,
+    {} as Record<JsonPath, string>,
   );
 };

package/src/translations.ts

@@ -36,12 +36,13 @@ export default [
         'format hostname': 'Hostname',
         'format integer': 'Integer',
         'format json': 'JSON',
-        'format latlng': 'LatLng',
+        'format latlng': 'Geopoint',
         'format markdown': 'Markdown',
         'format percent': 'Percent',
         'format ref': 'Reference',
         'format regex': 'RegExp',
         'format string': 'String',
+        'format single-select': 'Select',
         'format text': 'Long text',
         'format time': 'Time',
         'format timestamp': 'Timestamp',
@@ -53,6 +54,13 @@ export default [
         // Placeholders
         'placeholder latitude': 'Latitude',
         'placeholder longitude': 'Longitude',
+
+        // SelectOptionsInput
+        'select option label': 'Label',
+        'select option label placeholder': 'Option label',
+        'select option color': 'Color',
+        'select option delete': 'Delete',
+        'select option add': 'Add option',
       },
     },
   },

package/src/util/field.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
 import { type ValidationError } from '@dxos/schema';
 
 /**
@@ -81,6 +81,24 @@ export const parseValue = ({ type, format, value }: ParseProps) => {
       return isNaN(date.getTime()) ? null : date;
     }
 
+    case FormatEnum.GeoPoint: {
+      // Parse string in format "lat,long" to GeoPoint [longitude, latitude].
+      if (typeof value === 'string') {
+        // Only keep digits, decimal points, minus signs, and commas.
+        const cleaned = value.replace(/[^0-9.,-]+/g, '');
+        const parts = cleaned.split(',');
+        if (parts.length === 2) {
+          const lat = parseFloat(parts[0]);
+          const long = parseFloat(parts[1]);
+          if (!isNaN(lat) && !isNaN(long)) {
+            return GeoLocation.toGeoPoint({ latitude: lat, longitude: long });
+          }
+        }
+      }
+
+      return [0, 0];
+    }
+
     default: {
       return value;
     }

package/src/util/formatting.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
 
 type ValueFormatProps = {
   type: TypeEnum;
@@ -73,6 +73,19 @@ export const formatForDisplay = ({ type, format, value, locale = undefined }: Va
         return date.toLocaleTimeString(locale);
       }
     }
+    case FormatEnum.GeoPoint: {
+      if (value === null || value === undefined) {
+        return '';
+      }
+
+      // For GeoPoint format [longitude, latitude].
+      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
+        const { latitude, longitude } = GeoLocation.fromGeoPoint(value as [number, number]);
+        return `${latitude},${longitude}`;
+      }
+
+      return String(value);
+    }
     default: {
       if (value === null || value === 'undefined') {
         return '';
@@ -125,6 +138,21 @@ export const formatForEditing = ({ type, format, value, locale = undefined }: Va
       const date = new Date(value as number);
       return date.toISOString().split('T')[1].split('.')[0];
     }
+    case FormatEnum.GeoPoint: {
+      // Handle null or undefined
+      if (value === null || value === undefined) {
+        return '';
+      }
+
+      // For GeoPoint format [longitude, latitude].
+      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
+        const { latitude, longitude } = GeoLocation.fromGeoPoint(value as [number, number]);
+        return `${latitude},${longitude}`;
+      }
+
+      return String(value);
+    }
+
     default: {
       return String(value);
     }