@dxos/react-ui-form 0.8.4-main.dedc0f3 → 0.8.4-main.dfabb4ec29

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

@@ -0,0 +1,155 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Option from 'effect/Option';
+import * as SchemaAST from 'effect/SchemaAST';
+import React, { useCallback } from 'react';
+
+import { findNode, getArrayElementType, getDiscriminatedType, isDiscriminatedUnion, isNestedType } from '@dxos/effect';
+import { IconButton, useTranslation } from '@dxos/react-ui';
+
+import { translationKey } from '#translations';
+
+import { getFormProperties } from '../../../util';
+import { useFormValues } from '../Form';
+import { FormField, type FormFieldProps } from '../FormField';
+import { FormFieldLabel, type FormFieldStateProps } from '../FormFieldComponent';
+
+export type ArrayFieldProps = {
+  label: string;
+  fieldProps: FormFieldStateProps;
+} & FormFieldProps;
+
+export const ArrayField = ({
+  type,
+  path,
+  label,
+  readonly,
+  layout,
+  fieldProps: inputProps,
+  ...props
+}: ArrayFieldProps) => {
+  const { t } = useTranslation(translationKey);
+  const elementType = getArrayElementType(type);
+  const { onValueChange } = inputProps;
+  const values = useFormValues(ArrayField.displayName, path, () => []);
+
+  const getDefaultObjectValue = (typeNode: SchemaAST.AST): any => {
+    const baseNode = findNode(typeNode, isDiscriminatedUnion);
+    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, {}) : findNode(typeNode, SchemaAST.isTypeLiteral);
+    if (!typeLiteral) {
+      return {};
+    }
+
+    return Object.fromEntries(
+      getFormProperties(typeLiteral).map((prop) => {
+        const defaultValue = SchemaAST.getDefaultAnnotation(prop.type).pipe((annotation) =>
+          Option.getOrUndefined(annotation),
+        );
+        return [prop.name, defaultValue];
+      }),
+    );
+  };
+
+  const handleAdd = useCallback(() => {
+    const defaultValue =
+      isNestedType(type) && elementType ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
+    values && onValueChange(type, [...values, defaultValue]);
+  }, [onValueChange, type, elementType, values]);
+
+  const handleDelete = useCallback(
+    (idx: number) => {
+      onValueChange(
+        type,
+        values?.filter((_, i) => i !== idx),
+      );
+    },
+    [onValueChange, type, values],
+  );
+
+  if (!elementType || ((readonly || layout === 'static') && values && values.length < 1)) {
+    return null;
+  }
+
+  return (
+    <>
+      {(layout !== 'static' || (values && values.length > 0)) && (
+        <FormFieldLabel readonly={readonly} label={label} asChild />
+      )}
+
+      <div className='flex flex-col gap-form-gap'>
+        {values?.map((_, index) => {
+          return (
+            <div key={index} className='grid grid-cols-[1fr_min-content] gap-form-gap last:mb-form-gap items-center'>
+              <FormField
+                autoFocus={index === values.length - 1}
+                type={elementType}
+                path={[...(path ?? []), index]}
+                readonly={readonly || layout === 'static'}
+                layout='inline'
+                {...props}
+              />
+
+              {!readonly && layout !== 'static' && (
+                <div className='flex flex-col h-full justify-end'>
+                  {/* NOTE: Aligns with center of last field if multi-field object. */}
+                  <div className='flex items-center h-[2rem]'>
+                    <IconButton
+                      icon='ph--x--regular'
+                      iconOnly
+                      label={t('remove.button')}
+                      onClick={() => handleDelete(index)}
+                      classNames='self-center'
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* TODO(burdon): Get label from schema. */}
+      {!readonly && layout !== 'static' && (
+        <IconButton
+          classNames='flex w-full'
+          icon='ph--plus--regular'
+          label={t('add-item.button')}
+          onClick={handleAdd}
+        />
+      )}
+    </>
+  );
+};
+
+ArrayField.displayName = 'Form.ArrayField';
+
+/**
+ * Returns the default empty value for a given AST.
+ * Used for initializing new array values etc.
+ */
+// TODO(wittjosiah): Factor out?
+export const getDefaultValue = (ast?: SchemaAST.AST): any => {
+  switch (ast?._tag) {
+    case 'StringKeyword': {
+      return '';
+    }
+    case 'NumberKeyword': {
+      return 0;
+    }
+    case 'BooleanKeyword': {
+      return false;
+    }
+    case 'Suspend': {
+      return getDefaultValue(ast.f());
+    }
+    default: {
+      if (ast && isNestedType(ast)) {
+        return {};
+      } else {
+        throw new Error(`Unsupported type: ${ast?._tag}`);
+      }
+    }
+  }
+};

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

@@ -0,0 +1,22 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Input, type SwitchProps } from '@dxos/react-ui';
+
+import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
+
+export const BooleanField = ({ type, readonly, onValueChange, ...props }: FormFieldComponentProps<boolean>) => {
+  const handleChange = useCallback<NonNullable<SwitchProps['onCheckedChange']>>(
+    (value) => onValueChange?.(type, value),
+    [type, onValueChange],
+  );
+
+  return (
+    <FormFieldWrapper<boolean> readonly={readonly} {...props}>
+      {({ value }) => <Input.Switch disabled={!!readonly} checked={value} onCheckedChange={handleChange} />}
+    </FormFieldWrapper>
+  );
+};

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

@@ -0,0 +1,121 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
+
+import { GeoLocation, type GeoPoint } from '@dxos/echo/internal';
+import { Input, useTranslation } from '@dxos/react-ui';
+import { safeParseFloat } from '@dxos/util';
+
+import { translationKey } from '#translations';
+
+import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+
+export const GeoPointField = ({
+  type,
+  label,
+  readonly,
+  layout,
+  getStatus,
+  getValue,
+  onValueChange,
+  onBlur,
+}: FormFieldComponentProps<GeoPoint>) => {
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus();
+  const geoPoint = useMemo<GeoPoint>(() => getValue() ?? [0, 0], [getValue]);
+  const value = useMemo(() => GeoLocation.fromGeoPoint(geoPoint), [geoPoint]);
+
+  const [longitudeText, setLongitudeText] = useState(value.longitude?.toString());
+  const [latitudeText, setLatitudeText] = useState(value.latitude?.toString());
+  useEffect(() => {
+    const location = GeoLocation.fromGeoPoint(geoPoint);
+    setLongitudeText(location.longitude?.toString());
+    setLatitudeText(location.latitude?.toString());
+  }, [geoPoint]);
+
+  const handleChange = useCallback(
+    (coordinateType: keyof Pick<GeoLocation, 'longitude' | 'latitude'>, setText: (text: string) => void) =>
+      (event: ChangeEvent<HTMLInputElement>) => {
+        const inputText = event.target.value;
+        setText(inputText);
+        if (inputText !== '' && inputText !== '-') {
+          const coord = safeParseFloat(inputText);
+          if (coord !== undefined && !isNaN(coord)) {
+            const currentLocation = GeoLocation.fromGeoPoint(getValue() ?? [0, 0]);
+            const newLocation = { ...currentLocation, [coordinateType]: coord };
+            const newValue = GeoLocation.toGeoPoint(newLocation);
+            onValueChange(type, newValue);
+          }
+        }
+      },
+    [type, getValue, onValueChange],
+  );
+
+  if ((readonly || layout === 'static') && !value?.latitude && !value?.longitude) {
+    return null;
+  }
+
+  return (
+    <Input.Root validationValence={status}>
+      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} asChild />}
+      {layout === 'static' ? (
+        <LatLng {...value} />
+      ) : (
+        <div className='grid grid-cols-2 gap-form-gap'>
+          <div>
+            <Input.Root>
+              {layout !== 'inline' && <Input.Label>{t('latitude.label')}</Input.Label>}
+              <Input.TextInput
+                type='number'
+                step='0.00001'
+                min='-90'
+                max='90'
+                disabled={!!readonly}
+                placeholder={t('latitude.placeholder')}
+                value={latitudeText ?? ''}
+                onChange={handleChange('latitude', setLatitudeText)}
+                onBlur={onBlur}
+              />
+            </Input.Root>
+          </div>
+          <div>
+            <Input.Root>
+              {layout !== 'inline' && <Input.Label>{t('longitude.label')}</Input.Label>}
+              <Input.TextInput
+                type='number'
+                step='0.00001'
+                min='-180'
+                max='180'
+                disabled={!!readonly}
+                placeholder={t('longitude.placeholder')}
+                value={longitudeText ?? ''}
+                onChange={handleChange('longitude', setLongitudeText)}
+                onBlur={onBlur}
+              />
+            </Input.Root>
+          </div>
+        </div>
+      )}
+    </Input.Root>
+  );
+};
+
+const LatLng = ({ latitude = 0, longitude = 0 }: GeoLocation) => {
+  const latHem = latitude >= 0 ? 'N' : 'S';
+  const lngHem = longitude >= 0 ? 'E' : 'W';
+
+  return (
+    <span className='inline-flex items-center gap-form-gap'>
+      <span>
+        <span>{Math.abs(latitude).toFixed(5)}</span>
+        <span className='text-subdued'>°{latHem}</span>
+      </span>
+      <span>
+        <span>{Math.abs(longitude).toFixed(5)}</span>
+        <span className='text-subdued'>°{lngHem}</span>
+      </span>
+    </span>
+  );
+};

package/src/components/Form/fields/MarkdownField.stories.tsx

@@ -0,0 +1,206 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useMemo } from 'react';
+import { expect, userEvent } from 'storybook/test';
+
+import { Filter, Format, Obj, Ref } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { Panel } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Text } from '@dxos/schema';
+
+import { translations } from '#translations';
+
+import { TestLayout } from '../../testing';
+import { Form } from '../Form';
+
+//
+// String-backed markdown.
+//
+
+const StringSchema = Schema.Struct({
+  notes: Schema.String.pipe(Format.FormatAnnotation.set(Format.TypeFormat.Markdown)).annotations({ title: 'Notes' }),
+});
+
+const StringStory = () => (
+  <TestLayout>
+    <Form.Root schema={StringSchema} defaultValues={{ notes: '# Hello\n\nMarkdown text *here*.' }}>
+      <Form.Viewport>
+        <Form.Content>
+          <Form.FieldSet />
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
+  </TestLayout>
+);
+
+//
+// Ref<Text>-backed markdown.
+//
+
+const TextNoteHolder = Schema.Struct({
+  instructions: Ref.Ref(Text.Text)
+    .pipe(Format.FormatAnnotation.set(Format.TypeFormat.Markdown))
+    .annotations({ title: 'Instructions' }),
+});
+
+const RefStory = () => {
+  const { space } = useClientStory();
+  const [text] = useQuery(space?.db, Filter.type(Text.Text));
+  const values = useMemo(() => (text ? { instructions: Ref.make(text) } : undefined), [text]);
+
+  if (!space || !values) {
+    return null;
+  }
+
+  return (
+    <TestLayout>
+      <Panel.Root>
+        <Panel.Content asChild>
+          <Form.Root schema={TextNoteHolder} values={values as any} db={space.db}>
+            <Form.Viewport>
+              <Form.Content>
+                <Form.FieldSet />
+              </Form.Content>
+            </Form.Viewport>
+          </Form.Root>
+        </Panel.Content>
+      </Panel.Root>
+    </TestLayout>
+  );
+};
+
+//
+// Ref<Text> empty — shows the create button.
+//
+
+const EmptyRefSchema = Schema.Struct({
+  instructions: Schema.optional(
+    Ref.Ref(Text.Text)
+      .pipe(Format.FormatAnnotation.set(Format.TypeFormat.Markdown))
+      .annotations({ title: 'Instructions' }),
+  ),
+});
+
+const EmptyRefStory = () => {
+  const { space } = useClientStory();
+  if (!space) {
+    return null;
+  }
+
+  return (
+    <TestLayout>
+      <Panel.Root>
+        <Panel.Content asChild>
+          <Form.Root schema={EmptyRefSchema} defaultValues={{}} db={space.db}>
+            <Form.Viewport>
+              <Form.Content>
+                <Form.FieldSet />
+              </Form.Content>
+            </Form.Viewport>
+          </Form.Root>
+        </Panel.Content>
+      </Panel.Root>
+    </TestLayout>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/MarkdownField',
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const StringBacked: Story = {
+  render: () => <StringStory />,
+};
+
+// Regression test: keystrokes into a string-backed markdown field must not
+// blur the editor. Previously the EditorView was destroyed and recreated on
+// every change because `onChange` was a useTextEditor dep and form callbacks
+// are unstable across renders.
+export const StringBackedKeepsFocus: Story = {
+  render: () => (
+    <TestLayout>
+      <Form.Root schema={StringSchema} defaultValues={{ notes: '' }}>
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </TestLayout>
+  ),
+  play: async ({ canvasElement }) => {
+    const waitFor = async <T,>(predicate: () => T | null | undefined, message: string): Promise<T> => {
+      for (let attempt = 0; attempt < 50; attempt++) {
+        const value = predicate();
+        if (value) {
+          return value;
+        }
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+      throw new Error(message);
+    };
+
+    const editorRoot = await waitFor(
+      () => canvasElement.querySelector<HTMLElement>('.cm-editor'),
+      'CodeMirror editor root (.cm-editor) not found',
+    );
+    const editorContent = editorRoot.querySelector<HTMLElement>('.cm-content')!;
+    await expect(editorContent).toBeVisible();
+
+    // Focus editor and wait for focus to settle inside the editor root.
+    editorContent.focus();
+    await waitFor(() => (editorRoot.contains(document.activeElement) ? true : null), 'Editor did not receive focus');
+
+    // Type several characters; focus must be preserved inside the editor root
+    // after every keystroke. Regression: previously the EditorView was
+    // destroyed and recreated on every change, which detached the focused
+    // contentDOM and blurred the input.
+    const phrase = 'hello world';
+    for (const ch of phrase) {
+      await userEvent.keyboard(ch);
+      await expect(editorRoot.contains(document.activeElement)).toBe(true);
+    }
+
+    await expect(editorContent).toHaveTextContent(phrase);
+  },
+};
+
+export const RefPopulated: Story = {
+  render: () => <RefStory />,
+  decorators: [
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [Text.Text],
+      onCreateSpace: async ({ space }) => {
+        space.db.add(Obj.make(Text.Text, { content: '# Magazine brief\n\nLong-form text describing what to gather.' }));
+      },
+    }),
+  ],
+};
+
+export const RefEmpty: Story = {
+  render: () => <EmptyRefStory />,
+  decorators: [
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [Text.Text],
+    }),
+  ],
+};

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

@@ -0,0 +1,168 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import React, { useCallback, useMemo } from 'react';
+
+import { type Database, Obj, Ref } from '@dxos/echo';
+import { AtomRef } from '@dxos/echo-atom';
+import { createDocAccessor } from '@dxos/echo-db';
+import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
+import { Editor, useBasicMarkdownExtensions } from '@dxos/react-ui-editor';
+import { Text } from '@dxos/schema';
+import { createDataExtensions } from '@dxos/ui-editor';
+
+import { translationKey } from '#translations';
+
+import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+
+const editorClassNames =
+  'transition-colors bg-input-surface focus-within:bg-focus-surface border border-separator rounded-xs p-1 px-2';
+
+/**
+ * Form field that edits a markdown value in a CodeMirror editor.
+ * Supports two backings:
+ * - `Schema.String` annotated with `Format.TypeFormat.Markdown`: edited as plain text via `getValue`/`onValueChange`.
+ * - `Ref<Text>` annotated with `Format.TypeFormat.Markdown`: edited in-place via an Automerge doc accessor.
+ *   When the ref is empty and a database is available, a create button is shown to allocate a new Text.
+ */
+export const MarkdownField = ({
+  type,
+  readonly,
+  label,
+  placeholder,
+  layout,
+  db,
+  getStatus,
+  getValue,
+  onValueChange,
+}: FormFieldComponentProps) => {
+  const { status, error } = getStatus();
+  const isRef = Ref.isRefType(type);
+  const value = getValue();
+
+  if ((readonly || layout === 'static') && value == null) {
+    return null;
+  }
+
+  const renderEditor = () => {
+    if (isRef) {
+      const reference = value as Ref.Ref<any> | undefined;
+      if (reference) {
+        return <RefMarkdownEditor reference={reference} placeholder={placeholder} />;
+      }
+
+      if (readonly) {
+        return null;
+      }
+
+      return <CreateTextButton db={db} disabled={!db} onCreate={(ref) => onValueChange(type, ref)} />;
+    }
+
+    return (
+      <StringMarkdownEditor
+        value={(value as string | undefined) ?? ''}
+        placeholder={placeholder}
+        readonly={!!readonly}
+        onChange={(next) => onValueChange(type, next)}
+      />
+    );
+  };
+
+  const renderStatic = () => {
+    if (isRef) {
+      const reference = value as Ref.Ref<any> | undefined;
+      return reference ? <RefStaticText reference={reference} /> : null;
+    }
+    return <p className='whitespace-pre-wrap'>{(value as string | undefined) ?? ''}</p>;
+  };
+
+  return (
+    <Input.Root validationValence={status}>
+      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
+      {layout === 'static' ? renderStatic() : renderEditor()}
+      {layout === 'full' && <Input.Validation>{error}</Input.Validation>}
+    </Input.Root>
+  );
+};
+
+/** Read-only static rendering for a `Ref<Text>` value: resolve the ref and print its content. */
+const RefStaticText = ({ reference }: { reference: Ref.Ref<any> }) => {
+  const text = useAtomValue(useMemo(() => AtomRef.make(reference), [reference]));
+  if (!text?.content) {
+    return null;
+  }
+  return <p className='whitespace-pre-wrap'>{text.content}</p>;
+};
+
+type RefMarkdownEditorProps = {
+  reference: Ref.Ref<any>;
+  placeholder?: string;
+};
+
+const RefMarkdownEditor = ({ reference, placeholder }: RefMarkdownEditorProps) => {
+  const text = useAtomValue(useMemo(() => AtomRef.make(reference), [reference]));
+  const dataExtensions = useMemo(
+    () =>
+      text ? [createDataExtensions({ id: reference.dxn.toString(), text: createDocAccessor(text, ['content']) })] : [],
+    [text, reference],
+  );
+  const extensions = useBasicMarkdownExtensions({ placeholder, extensions: dataExtensions });
+  if (!text) {
+    return null;
+  }
+
+  return (
+    <Editor.Root>
+      <Editor.View classNames={editorClassNames} extensions={extensions} />
+    </Editor.Root>
+  );
+};
+
+type StringMarkdownEditorProps = {
+  value: string;
+  placeholder?: string;
+  readonly?: boolean;
+  onChange: (value: string) => void;
+};
+
+const StringMarkdownEditor = ({ value, placeholder, readonly, onChange }: StringMarkdownEditorProps) => {
+  const extensions = useBasicMarkdownExtensions({ placeholder });
+  const handleChange = useCallback((next: string) => onChange(next), [onChange]);
+
+  return (
+    <Editor.Root>
+      <Editor.View
+        classNames={editorClassNames}
+        extensions={extensions}
+        value={value}
+        onChange={readonly ? undefined : handleChange}
+      />
+    </Editor.Root>
+  );
+};
+
+type CreateTextButtonProps = {
+  db?: Database.Database;
+  disabled?: boolean;
+  onCreate: (ref: Ref.Ref<Text.Text>) => void;
+};
+
+const CreateTextButton = ({ db, disabled, onCreate }: CreateTextButtonProps) => {
+  const { t } = useTranslation(translationKey);
+  const handleClick = useCallback(() => {
+    if (!db) {
+      return;
+    }
+    const text = db.add(Obj.make(Text.Text, { content: '' }));
+    onCreate(Ref.make(text));
+  }, [db, onCreate]);
+
+  return (
+    <Button onClick={handleClick} disabled={disabled}>
+      <Icon icon='ph--plus--regular' size={4} />
+      <span>{t('create-text.label')}</span>
+    </Button>
+  );
+};