@dxos/react-ui-form 0.7.4 → 0.7.5-labs.5f04cf6

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

@@ -0,0 +1,44 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { type GeoPoint } from '@dxos/echo-schema';
+import { Input, useTranslation } from '@dxos/react-ui';
+import { safeParseFloat } from '@dxos/util';
+
+import { translationKey } from '../../../translations';
+import { InputHeader, type InputProps } from '../Input';
+
+export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onValueChange, onBlur }: InputProps) => {
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus();
+  const [lng = 0, lat = 0] = getValue<GeoPoint>() ?? [];
+
+  return (
+    <Input.Root validationValence={status}>
+      <InputHeader error={error}>
+        <Input.Label>{label}</Input.Label>
+      </InputHeader>
+      <div className='grid grid-cols-2 gap-2'>
+        <Input.TextInput
+          type='number'
+          disabled={disabled}
+          placeholder={t('placeholder longitude')}
+          value={lng}
+          onChange={(event) => onValueChange(type, [lat, safeParseFloat(event.target.value, 0)])}
+          onBlur={onBlur}
+        />
+        <Input.TextInput
+          type='number'
+          disabled={disabled}
+          placeholder={t('placeholder latitude')}
+          value={lat}
+          onChange={(event) => onValueChange(type, [safeParseFloat(event.target.value, 0), lng])}
+          onBlur={onBlur}
+        />
+      </div>
+    </Input.Root>
+  );
+};

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

@@ -0,0 +1,49 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { Input } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { safeParseFloat } from '@dxos/util';
+
+import { InputHeader, type InputProps } from '../Input';
+
+const gridCols = ['grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4'];
+
+export const TupleInput = ({
+  binding,
+  type,
+  label,
+  disabled,
+  getStatus,
+  getValue,
+  onValueChange,
+  onBlur,
+}: InputProps & { binding: string[] }) => {
+  const { status, error } = getStatus();
+
+  // TODO(burdon): Generalize number/float/string, etc.
+  const values: Record<string, number> = getValue<Record<string, number>>() ?? {};
+
+  return (
+    <Input.Root validationValence={status}>
+      <InputHeader error={error}>
+        <Input.Label>{label}</Input.Label>
+      </InputHeader>
+      <div className={mx('grid gap-2', gridCols[binding.length - 1])}>
+        {binding.map((prop) => (
+          <Input.TextInput
+            key={prop}
+            type='number'
+            disabled={disabled}
+            value={values[prop]}
+            onChange={(event) => onValueChange(type, { ...values, [prop]: safeParseFloat(event.target.value, 0) })}
+            onBlur={onBlur}
+          />
+        ))}
+      </div>
+    </Input.Root>
+  );
+};

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

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './GeoPointInput';
+export * from './TupleInput';

package/src/components/Form/factory.tsx

@@ -2,23 +2,20 @@
 // 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 { GeiPointInput } from './Custom';
 import { BooleanInput, 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:
-      return GeiPointInput;
+      return GeoPointInput;
   }
 
   switch (type) {

package/src/components/Form/index.ts

@@ -2,7 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './Form';
-export * from './Custom';
+export * from './custom';
+
 export * from './Defaults';
+export * from './Form';
 export * from './Input';

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

@@ -5,12 +5,13 @@
 import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
-import { Format, type MutableSchema, S, toJsonSchema, TypedObject } from '@dxos/echo-schema';
-import { useSpace } from '@dxos/react-client/echo';
+import { Format, type EchoSchema, S, toJsonSchema, TypedObject } from '@dxos/echo-schema';
+import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { type ViewType, ViewProjection, createView } from '@dxos/schema';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { ViewProjection, ViewType, createView } from '@dxos/schema';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { ViewEditor } from './ViewEditor';
@@ -19,10 +20,10 @@ import { TestLayout, TestPanel } from '../testing';
 
 const DefaultStory = () => {
   const space = useSpace();
-  const [schema, setSchema] = useState<MutableSchema>();
+  const [schema, setSchema] = useState<EchoSchema>();
   const [view, setView] = useState<ViewType>();
   const [projection, setProjection] = useState<ViewProjection>();
-  useEffect(() => {
+  useAsyncEffect(async () => {
     if (space) {
       class TestSchema extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
         name: S.String,
@@ -30,7 +31,7 @@ const DefaultStory = () => {
         salary: Format.Currency(),
       }) {}
 
-      const schema = space.db.schemaRegistry.addSchema(TestSchema);
+      const [schema] = await space.db.schemaRegistry.register([TestSchema]);
       const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: toJsonSchema(TestSchema) });
       const projection = new ViewProjection(schema, view);
 
@@ -40,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) {
@@ -49,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

@@ -4,8 +4,8 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { type SchemaResolver } from '@dxos/echo-db';
-import { AST, Format, type MutableSchema, S } from '@dxos/echo-schema';
+import { type SchemaRegistry } from '@dxos/echo-db';
+import { AST, Format, type EchoSchema, S } from '@dxos/echo-schema';
 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';
@@ -30,11 +30,12 @@ const ViewMetaSchema = S.Struct({
 type ViewMetaType = S.Schema.Type<typeof ViewMetaSchema>;
 
 export type ViewEditorProps = ThemedClassName<{
-  schema: MutableSchema;
+  schema: EchoSchema;
   view: ViewType;
-  registry?: SchemaResolver;
+  registry?: SchemaRegistry;
   readonly?: boolean;
   showHeading?: boolean;
+  onTypenameChanged: (typename: string) => void;
   onDelete: (fieldId: string) => void;
 }>;
 
@@ -48,6 +49,7 @@ export const ViewEditor = ({
   registry,
   readonly,
   showHeading = false,
+  onTypenameChanged,
   onDelete,
 }: ViewEditorProps) => {
   const { t } = useTranslation(translationKey);
@@ -67,12 +69,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) => {

package/src/hooks/useForm.ts

@@ -2,18 +2,15 @@
 // 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 } from '@dxos/echo-schema';
-import { type SimpleType, type S } 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';
 import { type MaybePromise } from '@dxos/util';
 
-// TODO(ZaymonFC): Where should this live?
-export type FormPath<T extends object = {}> = PropertyKey<T> | `${PropertyKey<T>}.${number}`;
-
 /**
  * Return type from `useForm` hook.
  */
@@ -22,10 +19,10 @@ export type FormHandler<T extends BaseObject> = {
   // Form state management.
   //
 
-  values: T;
-  errors: Record<FormPath<T>, string>;
-  touched: Record<FormPath<T>, boolean>;
-  changed: Record<FormPath<T>, boolean>;
+  values: Partial<T>;
+  errors: Record<JsonPath, string>;
+  touched: Record<JsonPath, boolean>;
+  changed: Record<JsonPath, boolean>;
   canSave: boolean;
   handleSave: () => void;
 
@@ -33,10 +30,10 @@ export type FormHandler<T extends BaseObject> = {
   // Form input component helpers.
   //
 
-  getStatus: (property: FormPath<T>) => { status?: 'error'; error?: string };
-  getValue: <V>(property: FormPath<T>) => V;
-  onValueChange: <V>(property: FormPath<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;
 };
 
 /**
@@ -44,23 +41,21 @@ 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>;
 
   /**
    * Initial values (which may not pass validation).
    */
-  // TODO(burdon): Should be partial?
-  initialValues: T;
+  initialValues: Partial<T>;
 
   /**
    * Callback for value changes. Note: This is called even when values are invalid.
    * Sometimes the parent component may want to know about changes even if the form is
    * in an invalid state.
    */
-  onValuesChanged?: (values: T) => void;
+  onValuesChanged?: (values: Partial<T>) => void;
 
   /**
    * Custom validation function that runs only after schema validation passes.
@@ -93,14 +88,16 @@ export const useForm = <T extends BaseObject>({
   onValid,
   onSave,
 }: FormOptions<T>): FormHandler<T> => {
-  const [values, setValues] = useState<T>(initialValues);
+  invariant(AST.isTypeLiteral(schema.ast));
+
+  const [values, setValues] = useState<Partial<T>>(initialValues);
   useEffect(() => {
     setValues(initialValues);
   }, [initialValues]);
 
-  const [touched, setTouched] = useState<Record<FormPath<T>, boolean>>(createKeySet(initialValues, false));
-  const [changed, setChanged] = useState<Record<FormPath<T>, boolean>>(createKeySet(initialValues, false));
-  const [errors, setErrors] = useState<Record<FormPath<T>, string>>({} as Record<FormPath<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);
 
   //
@@ -109,14 +106,16 @@ export const useForm = <T extends BaseObject>({
 
   // TODO(burdon): Validate each property separately.
   const validate = useCallback(
-    (values: T) => {
+    (values: Partial<T>): values is T => {
       let errors: ValidationError[] = validateSchema(schema, values) ?? [];
       if (errors.length === 0 && onValidate) {
-        errors = onValidate(values) ?? [];
+        const validatedValues = values as T;
+        errors = onValidate(validatedValues) ?? [];
       }
 
       setErrors(flatMap(errors));
-      return errors.length === 0;
+      const valid = errors.length === 0;
+      return valid;
     },
     [schema, onValidate],
   );
@@ -138,10 +137,15 @@ export const useForm = <T extends BaseObject>({
   const canSave = useMemo(
     () =>
       !saving &&
-      Object.keys(values).every(
-        (property) => touched[property as PropertyKey<T>] === false || !errors[property as PropertyKey<T>],
+      // 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}[`),
+          ),
       ),
-    [values, touched, errors, saving],
+    [touched, errors, saving],
   );
 
   const handleSave = useCallback(async () => {
@@ -153,27 +157,34 @@ export const useForm = <T extends BaseObject>({
         setSaving(false);
       }
     }
-  }, [values, validate, onSave]);
+  }, [values, validate, onSave, changed]);
 
   //
   // Fields.
   //
 
   const getStatus = useCallback<FormHandler<T>['getStatus']>(
-    (property: FormPath<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 getValue = <V>(property: FormPath<T>): V => {
-    return getByPath(values, property);
+  const getFormValue = <V>(path: (string | number)[]): V | undefined => {
+    return getValue(values, createJsonPath(path));
   };
 
-  // TODO(burdon): Use path to set hierarchical value.
-  const onValueChange = (property: FormPath<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') {
@@ -184,9 +195,9 @@ export const useForm = <T extends BaseObject>({
       parsedValue = undefined;
     }
 
-    const newValues = setByPath(values, property, 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);
@@ -195,19 +206,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],
@@ -224,40 +226,27 @@ export const useForm = <T extends BaseObject>({
 
     // Field utils.
     getStatus,
-    getValue,
+    getValue: getFormValue,
     onValueChange,
-    onBlur,
+    onTouched,
   } satisfies FormHandler<T>;
 };
 
-const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<FormPath<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<FormPath<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 FormPath<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<FormPath<T>, string>,
+    {} as Record<JsonPath, string>,
   );
 };
-
-// TODO(ZaymonFC): Move to util?
-const getByPath = <T extends object, V>(obj: T, path: FormPath<T>): V => {
-  const [key, index] = path.split('.');
-  return index === undefined ? (obj[key as keyof T] as V) : ((obj[key as keyof T] as any[])[parseInt(index)] as V);
-};
-
-const setByPath = <T extends object>(obj: T, path: FormPath<T>, value: any): T => {
-  const [key, index] = path.split('.');
-  const newValue =
-    index === undefined
-      ? value
-      : [...(obj[key as keyof T] as any[])].map((v, i) => (i === parseInt(index) ? value : v));
-  return { ...obj, [key]: newValue };
-};

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

@@ -1,5 +0,0 @@
-import React from 'react';
-import { type BaseObject } from '@dxos/echo-schema';
-import { type InputProps } from './Input';
-export declare const GeiPointInput: <T extends BaseObject>({ property, type, label, disabled, getStatus, getValue, onValueChange, onBlur, }: InputProps<T>) => React.JSX.Element;
-//# sourceMappingURL=Custom.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Custom.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Custom.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,UAAU,EAAiB,MAAM,mBAAmB,CAAC;AAGnE,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAOvD,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,UAAU,oFAS/C,UAAU,CAAC,CAAC,CAAC,sBA8Bf,CAAC"}

package/src/components/Form/Custom.tsx

@@ -1,65 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React from 'react';
-
-import { type BaseObject, type GeoPoint } from '@dxos/echo-schema';
-import { Input, useTranslation } from '@dxos/react-ui';
-
-import { InputHeader, type InputProps } from './Input';
-import { translationKey } from '../../translations';
-
-//
-// Custom format components.
-//
-
-export const GeiPointInput = <T extends BaseObject>({
-  property,
-  type,
-  label,
-  disabled,
-  getStatus,
-  getValue,
-  onValueChange,
-  onBlur,
-}: InputProps<T>) => {
-  const { t } = useTranslation(translationKey);
-  const { status, error } = getStatus?.(property);
-  const [lng = 0, lat = 0] = getValue<GeoPoint>(property) ?? [];
-
-  return (
-    <Input.Root validationValence={status}>
-      <InputHeader error={error}>
-        <Input.Label>{label}</Input.Label>
-      </InputHeader>
-      <div className='grid grid-cols-2 gap-2'>
-        <Input.TextInput
-          type='number'
-          disabled={disabled}
-          placeholder={t('placeholder longitude')}
-          value={lng}
-          onChange={(event) => onValueChange(property, type, [lat, safeParseFloat(event.target.value, 0)])}
-          onBlur={onBlur}
-        />
-        <Input.TextInput
-          type='number'
-          disabled={disabled}
-          placeholder={t('placeholder latitude')}
-          value={lat}
-          onChange={(event) => onValueChange(property, type, [safeParseFloat(event.target.value, 0), lng])}
-          onBlur={onBlur}
-        />
-      </div>
-    </Input.Root>
-  );
-};
-
-// TODO(burdon): Factor out.
-const safeParseFloat = (str: string, defaultValue?: number): number | undefined => {
-  try {
-    return parseFloat(str);
-  } catch {
-    return defaultValue ?? 0;
-  }
-};