@dxos/react-ui-form 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

package/src/components/Form/Form.tsx

@@ -5,12 +5,12 @@
 import { createContext } from '@radix-ui/react-context';
 import * as Schema from 'effect/Schema';
 import type * as SchemaAST from 'effect/SchemaAST';
-import React, { type PropsWithChildren, useMemo, useRef } from 'react';
+import React, { type PropsWithChildren, useEffect, useMemo, useRef } from 'react';
 
 import { type AnyProperties } from '@dxos/echo/internal';
 import { createJsonPath, getValue as getValue$ } from '@dxos/effect';
 import { IconButton, type IconButtonProps, ScrollArea, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import {
   type FormHandler,
@@ -20,6 +20,7 @@ import {
   useKeyHandler,
 } from '../../hooks';
 import { translationKey } from '../../translations';
+import { setValueEchoAware } from '../../util';
 
 import { FormFieldLabel, type FormFieldLabelProps, type FormFieldStateProps } from './FormFieldComponent';
 import {
@@ -76,13 +77,28 @@ const [FormContextProvider, useFormContext] = createContext<FormContextValue>('F
 /**
  * Get the current form values.
  */
-const useFormValues = <T extends AnyProperties>(componentName: string, path: (string | number)[] = []): T => {
+const useFormValues: {
+  <T extends AnyProperties>(componentName: string, path?: (string | number)[]): T;
+  <T extends AnyProperties>(
+    componentName: string,
+    path: (string | number)[] | undefined,
+    defaultValue: () => T,
+  ): T | undefined;
+} = (componentName: string, path: (string | number)[] = [], defaultValue?: () => any) => {
   const jsonPath = createJsonPath(path);
   const {
     form: { values },
   } = useFormContext(componentName);
 
-  return getValue$(values, jsonPath) as T;
+  const value = getValue$(values, jsonPath);
+
+  useEffect(() => {
+    if (!value && defaultValue) {
+      setValueEchoAware(values, jsonPath, defaultValue());
+    }
+  }, [value, defaultValue]);
+
+  return value;
 };
 
 /**
@@ -148,30 +164,32 @@ FormRoot.displayName = 'Form.Root';
 // Viewport
 //
 
-type FormViewportProps = ThemedClassName<PropsWithChildren<{}>>;
+const FORM_VIEWPORT_NAME = 'Form.Viewport';
 
-const FormViewport = ({ classNames, children }: FormViewportProps) => {
+type FormViewportProps = PropsWithChildren<{}>;
+
+// TODO(burdon): Ref and props (allow asChild).
+const FormViewport = ({ children }: FormViewportProps) => {
   return (
-    <ScrollArea.Root>
-      <ScrollArea.Viewport classNames={['plb-cardSpacingBlock', classNames]}>{children}</ScrollArea.Viewport>
-      <ScrollArea.Scrollbar orientation='vertical'>
-        <ScrollArea.Thumb />
-      </ScrollArea.Scrollbar>
+    <ScrollArea.Root orientation='vertical'>
+      <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
     </ScrollArea.Root>
   );
 };
 
-FormViewport.displayName = 'Form.Viewport';
+FormViewport.displayName = FORM_VIEWPORT_NAME;
 
 //
 // Content
 //
 
+const FORM_CONTENT_NAME = 'Form.Content';
+
 type FormContentProps = ThemedClassName<PropsWithChildren<{}>>;
 
 // TOOD(burdon): Figure out nesting (indent and testId).
 const FormContent = ({ classNames, children }: FormContentProps) => {
-  const { form, testId } = useFormContext(FormContent.displayName);
+  const { form, testId } = useFormContext(FORM_CONTENT_NAME);
   const ref = useRef<HTMLDivElement>(null);
   useKeyHandler(ref.current, form);
 
@@ -179,7 +197,7 @@ const FormContent = ({ classNames, children }: FormContentProps) => {
     <div
       ref={ref}
       role='form'
-      className={mx('flex flex-col is-full pli-cardSpacingInline', classNames)}
+      className={mx('flex flex-col is-full pli-cardSpacingInline density-fine', classNames)}
       data-testid={testId}
     >
       {children}
@@ -187,35 +205,39 @@ const FormContent = ({ classNames, children }: FormContentProps) => {
   );
 };
 
-FormContent.displayName = 'Form.Content';
+FormContent.displayName = FORM_CONTENT_NAME;
 
 //
 // FieldSet
 //
 
+const FORM_FIELDSET_NAME = 'Form.FieldSet';
+
 type FormFieldSetProps = ThemedClassName<{}>;
 
 const FormFieldSet = ({ classNames }: FormFieldSetProps) => {
-  const { form, ...props } = useFormContext(FormFieldSet.displayName);
+  const { form, ...props } = useFormContext(FORM_FIELDSET_NAME);
 
   return <NaturalFormFieldSet classNames={classNames} schema={form.schema} {...props} />;
 };
 
-FormFieldSet.displayName = 'Form.FieldSet';
+FormFieldSet.displayName = FORM_FIELDSET_NAME;
 
 //
 // Actions
 //
 
+const FORM_ACTIONS_NAME = 'Form.Actions';
+
 type FormActionsProps = ThemedClassName<{}>;
 
 const FormActions = ({ classNames }: FormActionsProps) => {
   const { t } = useTranslation(translationKey);
   const {
-    form: { isValid, onSave, onCancel },
+    form: { canSave, onSave, onCancel },
     readonly,
     layout,
-  } = useFormContext(FormActions.displayName);
+  } = useFormContext(FORM_ACTIONS_NAME);
 
   if (readonly || layout === 'static') {
     return null;
@@ -239,7 +261,7 @@ const FormActions = ({ classNames }: FormActionsProps) => {
         <IconButton
           type='submit'
           variant='primary'
-          disabled={!isValid}
+          disabled={!canSave}
           icon='ph--check--regular'
           iconEnd
           label={t('save button label')}
@@ -251,21 +273,23 @@ const FormActions = ({ classNames }: FormActionsProps) => {
   );
 };
 
-FormActions.displayName = 'Form.Actions';
+FormActions.displayName = FORM_ACTIONS_NAME;
 
 //
 // Submit
 //
 
-type FormSubmitProps = ThemedClassName<Partial<Pick<IconButtonProps, 'icon' | 'label'>>>;
+const FORM_SUBMIT_NAME = 'Form.Submit';
+
+type FormSubmitProps = ThemedClassName<Partial<Pick<IconButtonProps, 'icon' | 'label' | 'disabled'>>>;
 
-const FormSubmit = ({ classNames, label, icon }: FormSubmitProps) => {
+const FormSubmit = ({ classNames, label, icon, disabled }: FormSubmitProps) => {
   const { t } = useTranslation(translationKey);
   const {
-    form: { isValid, onSave },
+    form: { canSave, onSave },
     readonly,
     layout,
-  } = useFormContext(FormSubmit.displayName);
+  } = useFormContext(FORM_SUBMIT_NAME);
 
   if (readonly || layout === 'static') {
     return null;
@@ -277,7 +301,7 @@ const FormSubmit = ({ classNames, label, icon }: FormSubmitProps) => {
         classNames='is-full'
         type='submit'
         variant='primary'
-        disabled={!isValid}
+        disabled={disabled ?? !canSave}
         icon={icon ?? 'ph--check--regular'}
         label={label ?? t('save button label')}
         onClick={onSave}
@@ -287,7 +311,7 @@ const FormSubmit = ({ classNames, label, icon }: FormSubmitProps) => {
   );
 };
 
-FormSubmit.displayName = 'Form.Submit';
+FormSubmit.displayName = FORM_SUBMIT_NAME;
 
 //
 // Form
@@ -312,5 +336,6 @@ export type {
   FormContentProps,
   FormFieldSetProps,
   FormActionsProps,
+  FormSubmitProps,
   FormFieldLabelProps as LabelProps,
 };

package/src/components/Form/FormField.tsx

@@ -78,18 +78,17 @@ export type FormFieldProps = {
    * Function to lookup custom renderers for specific properties.
    */
   fieldProvider?: FormFieldProvider;
-} & Pick<
-  RefFieldProps,
-  | 'autoFocus'
-  | 'readonly'
-  | 'layout'
-  | 'createSchema'
-  | 'createOptionLabel'
-  | 'createOptionIcon'
-  | 'createInitialValuePath'
-  | 'onCreate'
-  | 'onQueryRefOptions'
->;
+} & Pick<FormFieldComponentProps, 'autoFocus' | 'readonly' | 'layout'> &
+  Pick<
+    RefFieldProps,
+    | 'createOptionLabel'
+    | 'createOptionIcon'
+    | 'createInitialValuePath'
+    | 'db'
+    | 'schemaHook'
+    | 'getOptions'
+    | 'onCreate'
+  >;
 
 export const FormField = (props: FormFieldProps) => {
   const {
@@ -101,12 +100,15 @@ export const FormField = (props: FormFieldProps) => {
     fieldProvider,
     readonly,
     layout,
-    createSchema,
+
+    // RefFieldProps
     createOptionLabel,
     createOptionIcon,
     createInitialValuePath,
+    db,
+    schemaHook,
+    getOptions: getRefOptions,
     onCreate,
-    onQueryRefOptions,
   } = props;
   const { t } = useTranslation(translationKey);
   const title = getAnnotation<string>(SchemaAST.TitleAnnotationId)(type);
@@ -190,12 +192,13 @@ export const FormField = (props: FormFieldProps) => {
       <RefField
         {...fieldProps}
         {...refProps}
-        createSchema={createSchema}
         createOptionLabel={createOptionLabel}
         createOptionIcon={createOptionIcon}
         createInitialValuePath={createInitialValuePath}
+        db={db}
+        schemaHook={schemaHook}
+        getOptions={getRefOptions}
         onCreate={onCreate}
-        onQueryRefOptions={onQueryRefOptions}
       />
     );
   }
@@ -224,8 +227,11 @@ export const FormField = (props: FormFieldProps) => {
           fieldProvider={fieldProvider}
           createOptionLabel={createOptionLabel}
           createOptionIcon={createOptionIcon}
+          createInitialValuePath={createInitialValuePath}
+          db={db}
+          schemaHook={schemaHook}
+          getOptions={getRefOptions}
           onCreate={onCreate}
-          onQueryRefOptions={onQueryRefOptions}
         />
       );
     }

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

@@ -44,7 +44,7 @@ const Component = ({
 const meta: Meta<typeof Component> = {
   title: 'ui/react-ui-form/FormFieldComponent',
   component: Component,
-  decorators: [withTheme, withLayout({ container: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Form/FormFieldComponent.tsx

@@ -15,11 +15,12 @@ import React, {
 
 import { type Format } from '@dxos/echo/internal';
 import { Icon, Input, Tooltip } from '@dxos/react-ui';
-import { labelSpacing } from '@dxos/react-ui-stack';
-import { errorText, mx } from '@dxos/react-ui-theme';
+import { errorText } from '@dxos/ui-theme';
 
 import { type FormFieldStatus } from '../../hooks';
 
+const labelSpacing = 'mbs-inputSpacingBlock mbe-labelSpacingBlock';
+
 /**
  * Dynamic props passed to input components.
  */
@@ -78,17 +79,15 @@ export type FormFieldLabelProps = {
 
 export const FormFieldLabel = ({ label, error, readonly, asChild }: FormFieldLabelProps) => {
   const Label = readonly || asChild ? 'span' : Input.Label;
-  const labelProps = readonly || asChild ? { className: 'text-description text-sm' } : { classNames: '!mlb-0 text-sm' };
-
   return (
-    <div role='none' className={mx('flex justify-between items-center', labelSpacing)}>
-      <Label {...labelProps}>{label}</Label>
+    <>
+      <Label>{label}</Label>
       {error && (
         <Tooltip.Trigger asChild content={error} side='bottom'>
           <Icon icon='ph--warning--regular' size={4} classNames={errorText} />
         </Tooltip.Trigger>
       )}
-    </div>
+    </>
   );
 };
 
@@ -117,15 +116,17 @@ export const FormFieldWrapper = <T,>(props: FormFieldWrapperProps<T>) => {
   const str = String(value ?? '');
 
   return (
-    <Input.Root validationValence={status}>
-      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
-      {layout === 'static' ? <p>{str}</p> : children ? children({ value }) : null}
-      {layout === 'full' && (
-        <Input.DescriptionAndValidation>
-          <Input.Validation>{error}</Input.Validation>
-        </Input.DescriptionAndValidation>
-      )}
-    </Input.Root>
+    <div role='none' className='contents'>
+      <Input.Root validationValence={status}>
+        {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
+        {layout === 'static' ? <p>{str}</p> : children ? children({ value }) : null}
+        {layout === 'full' && (
+          <Input.DescriptionAndValidation>
+            <Input.Validation>{error}</Input.Validation>
+          </Input.DescriptionAndValidation>
+        )}
+      </Input.Root>
+    </div>
   );
 };
 

package/src/components/Form/FormFieldSet.tsx

@@ -7,7 +7,7 @@ import React, { forwardRef, useMemo } from 'react';
 import { type AnyProperties } from '@dxos/echo/internal';
 import { type SchemaProperty } from '@dxos/effect';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 import { isTruthy } from '@dxos/util';
 
 import { type FormHandlerProps } from '../../hooks';
@@ -32,18 +32,21 @@ export type FormFieldSetProps<T extends AnyProperties> = ThemedClassName<
       | 'projection'
       | 'fieldMap'
       | 'fieldProvider'
-      | 'createSchema'
       | 'createOptionLabel'
       | 'createOptionIcon'
       | 'createInitialValuePath'
+      | 'db'
+      | 'schemaHook'
+      | 'getOptions'
       | 'onCreate'
-      | 'onQueryRefOptions'
     >
 >;
 
+const FORM_FIELDSET_NAME = 'Form.FieldSet';
+
 export const FormFieldSet = forwardRef<HTMLDivElement, FormFieldSetProps<any>>(
   ({ classNames, label, schema, readonly, path, exclude, sort, projection, layout, ...props }, forwardRef) => {
-    const values = useFormValues(FormFieldSet.displayName!, path);
+    const values = useFormValues(FORM_FIELDSET_NAME, path);
 
     // TODO(burdon): Updates on every value change.
     //  Remove values dep if can remove from getSchemaProperties.
@@ -121,4 +124,4 @@ export const FormFieldSet = forwardRef<HTMLDivElement, FormFieldSetProps<any>>(
   },
 );
 
-FormFieldSet.displayName = 'Form.Fields';
+FormFieldSet.displayName = FORM_FIELDSET_NAME;

package/src/components/Form/fields/ArrayField.tsx

@@ -7,7 +7,6 @@ import * as SchemaAST from 'effect/SchemaAST';
 import React, { Fragment, useCallback } from 'react';
 
 import { findNode, getArrayElementType, getDiscriminatedType, isDiscriminatedUnion, isNestedType } from '@dxos/effect';
-import { invariant } from '@dxos/invariant';
 import { IconButton, useTranslation } from '@dxos/react-ui';
 
 import { translationKey } from '../../../translations';
@@ -33,11 +32,7 @@ export const ArrayField = ({
   const { t } = useTranslation(translationKey);
   const elementType = getArrayElementType(type);
   const { onValueChange } = inputProps;
-
-  // TODO(wittjosiah): The fallback to an empty array stops the form from crashing but isn't immediately live.
-  //  It doesn't become live until another field is touched, but that's better than the whole form crashing.
-  const values = useFormValues(ArrayField.displayName, path) ?? [];
-  invariant(Array.isArray(values), `Expected array at: ${path?.join('.')}`);
+  const values = useFormValues(ArrayField.displayName, path, () => []);
 
   const getDefaultObjectValue = (typeNode: SchemaAST.AST): any => {
     const baseNode = findNode(typeNode, isDiscriminatedUnion);
@@ -59,29 +54,31 @@ export const ArrayField = ({
   const handleAdd = useCallback(() => {
     const defaultValue =
       isNestedType(type) && elementType ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
-    onValueChange(type, [...values, defaultValue]);
+    values && onValueChange(type, [...values, defaultValue]);
   }, [onValueChange, type, elementType, values]);
 
   const handleDelete = useCallback(
     (idx: number) => {
       onValueChange(
         type,
-        values.filter((_, i) => i !== idx),
+        values?.filter((_, i) => i !== idx),
       );
     },
     [onValueChange, type, values],
   );
 
-  if (!elementType || ((readonly || layout === 'static') && values.length < 1)) {
+  if (!elementType || ((readonly || layout === 'static') && values && values.length < 1)) {
     return null;
   }
 
   return (
     <>
-      {(layout !== 'static' || values.length > 0) && <FormFieldLabel readonly={readonly} label={label} asChild />}
+      {(layout !== 'static' || (values && values.length > 0)) && (
+        <FormFieldLabel readonly={readonly} label={label} asChild />
+      )}
 
       <div role='none' className='flex flex-col gap-2'>
-        {values.map((_, index) => {
+        {values?.map((_, index) => {
           return (
             <div role='none' key={index} className='grid grid-cols-[1fr_min-content] gap-2 last:mb-3'>
               <FormField
@@ -143,6 +140,9 @@ export const getDefaultValue = (ast?: SchemaAST.AST): any => {
     case 'BooleanKeyword': {
       return false;
     }
+    case 'Suspend': {
+      return getDefaultValue(ast.f());
+    }
     default: {
       if (ast && isNestedType(ast)) {
         return {};