@dxos/react-ui-form 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/components/Form/FormField/fields/DateField/DateField.stories.tsx

@@ -0,0 +1,60 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useState } from 'react';
+
+import { Format } from '@dxos/echo';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { TestLayout } from '../../../../../testing';
+import { Form } from '../../../Form';
+
+// DateField covers all three temporal formats; show each.
+const schema = Schema.Struct({
+  date: Format.DateOnly.annotations({ title: 'Date' }),
+  time: Format.TimeOnly.annotations({ title: 'Time' }),
+  dateTime: Format.DateTime.annotations({ title: 'Date & time' }),
+}).pipe(Schema.mutable);
+
+type Values = Schema.Schema.Type<typeof schema>;
+
+const DefaultStory = () => {
+  const [values, setValues] = useState<Values>({
+    date: '1990-05-12',
+    time: '09:00:00',
+    dateTime: '2026-06-01T15:30:00.000Z',
+  });
+  return (
+    <TestLayout json={values}>
+      <Form.Root
+        schema={schema}
+        values={values}
+        onValuesChanged={(values) => setValues((prev) => ({ ...prev, ...values }))}
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </TestLayout>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/FormField/DateField',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: { layout: 'fullscreen', translations },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Form/{fields → FormField/fields/DateField}/DateField.tsx

@@ -8,7 +8,9 @@ import React, { useCallback } from 'react';
 import { Format } from '@dxos/echo';
 import { Input } from '@dxos/react-ui';
 
-import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
+import { type FormFieldRendererProps } from '#types';
+
+import { FormRow } from '../../FormRow';
 
 /**
  * Stored value shapes:
@@ -52,7 +54,7 @@ export const DateField = ({
   onValueChange,
   onBlur: _onBlur,
   ...props
-}: FormFieldComponentProps<string>) => {
+}: FormFieldRendererProps<string>) => {
   const handleSimpleChange = useCallback((next: string) => onValueChange(type, next), [type, onValueChange]);
 
   const handleDateTimeChange = useCallback(
@@ -64,19 +66,19 @@ export const DateField = ({
   );
 
   return (
-    <FormFieldWrapper<string> readonly={readonly} format={format} {...props}>
+    <FormRow<string> {...props} readonly={readonly} format={format}>
       {({ value }) => {
         switch (format) {
           case Format.TypeFormat.Date:
             return (
-              <div className='grid grid-cols-[minmax(0,1fr)_min-content] items-stretch gap-1'>
+              <div className='grid grid-cols-[minmax(0,1fr)_min-content] gap-1 items-stretch'>
                 <Input.Date
                   classNames='min-w-0 overflow-hidden'
-                  disabled={!!readonly}
+                  disabled={readonly}
                   value={value ?? ''}
                   onValueChange={handleSimpleChange}
                 />
-                <Input.TriggerIcon classNames='h-full' />
+                <Input.TriggerIcon />
               </div>
             );
           case Format.TypeFormat.Time:
@@ -84,18 +86,18 @@ export const DateField = ({
           case Format.TypeFormat.DateTime:
           default:
             return (
-              <div className='grid grid-cols-[minmax(0,1fr)_min-content] items-stretch gap-1'>
+              <div className='grid grid-cols-[minmax(0,1fr)_min-content] gap-1 items-stretch'>
                 <Input.DateTime
                   classNames='min-w-0 overflow-hidden'
-                  disabled={!!readonly}
+                  disabled={readonly}
                   value={isoToLocalDateTime(value)}
                   onValueChange={handleDateTimeChange}
                 />
-                <Input.TriggerIcon classNames='h-full' />
+                <Input.TriggerIcon />
               </div>
             );
         }
       }}
-    </FormFieldWrapper>
+    </FormRow>
   );
 };

package/src/components/Form/FormField/fields/DateField/index.ts

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

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

@@ -0,0 +1,53 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useState } from 'react';
+
+import { Format } from '@dxos/echo';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { TestLayout } from '../../../../../testing';
+import { Form } from '../../../Form';
+
+const schema = Schema.Struct({
+  location: Format.GeoPoint.annotations({ title: 'Location' }),
+}).pipe(Schema.mutable);
+
+type Values = Schema.Schema.Type<typeof schema>;
+
+const DefaultStory = () => {
+  const [values, setValues] = useState<Values>({ location: [-74.006, 40.7128] });
+  return (
+    <TestLayout json={values}>
+      <Form.Root
+        schema={schema}
+        values={values}
+        onValuesChanged={(values) => setValues((prev) => ({ ...prev, ...values }))}
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </TestLayout>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/FormField/GeoPointField',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: { layout: 'fullscreen', translations },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Form/{fields → FormField/fields/GeoPointField}/GeoPointField.tsx

@@ -9,22 +9,19 @@ import { Input, useTranslation } from '@dxos/react-ui';
 import { safeParseFloat } from '@dxos/util';
 
 import { translationKey } from '#translations';
+import { type FormFieldRendererProps } from '#types';
 
-import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+import { FormRow } from '../../FormRow';
 
 export const GeoPointField = ({
   type,
-  label,
-  jsonPath,
   readonly,
-  layout,
-  getStatus,
   getValue,
   onValueChange,
   onBlur,
-}: FormFieldComponentProps<GeoPoint>) => {
+  ...props
+}: FormFieldRendererProps<GeoPoint>) => {
   const { t } = useTranslation(translationKey);
-  const { status, error } = getStatus();
   const geoPoint = useMemo<GeoPoint>(() => getValue() ?? [0, 0], [getValue]);
   const value = useMemo(() => GeoLocation.fromGeoPoint(geoPoint), [geoPoint]);
 
@@ -54,22 +51,23 @@ export const GeoPointField = ({
     [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} path={jsonPath} asChild />
-      )}
-      {layout === 'static' ? (
-        <LatLng {...value} />
-      ) : (
+    <FormRow<GeoPoint>
+      readonly={readonly}
+      getValue={getValue}
+      standalone
+      renderStatic={(point) => {
+        const location = GeoLocation.fromGeoPoint(point ?? [0, 0]);
+        // Treat a zero coordinate pair as empty (no meaningful location to display).
+        return !location.latitude && !location.longitude ? null : <LatLng {...location} />;
+      }}
+      {...props}
+    >
+      {({ presentation }) => (
         <div className='grid grid-cols-2 gap-form-gap'>
           <div>
             <Input.Root>
-              {layout !== 'inline' && <Input.Label>{t('latitude.label')}</Input.Label>}
+              {presentation.showLabel && <Input.Label>{t('latitude.label')}</Input.Label>}
               <Input.TextInput
                 type='number'
                 step='0.00001'
@@ -85,7 +83,7 @@ export const GeoPointField = ({
           </div>
           <div>
             <Input.Root>
-              {layout !== 'inline' && <Input.Label>{t('longitude.label')}</Input.Label>}
+              {presentation.showLabel && <Input.Label>{t('longitude.label')}</Input.Label>}
               <Input.TextInput
                 type='number'
                 step='0.00001'
@@ -101,7 +99,7 @@ export const GeoPointField = ({
           </div>
         </div>
       )}
-    </Input.Root>
+    </FormRow>
   );
 };
 

package/src/components/Form/FormField/fields/GeoPointField/index.ts

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

package/src/components/Form/{fields → FormField/fields/MarkdownField}/MarkdownField.stories.tsx

@@ -16,20 +16,20 @@ import { Text } from '@dxos/schema';
 
 import { translations } from '#translations';
 
-import { TestLayout } from '../../testing';
-import { Form } from '../Form';
+import { TestLayout } from '../../../../../testing';
+import { Form } from '../../../Form';
 
 //
 // String-backed markdown.
 //
 
-const StringSchema = Schema.Struct({
+const TestSchema = 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.Root schema={TestSchema} defaultValues={{ notes: '# Hello\n\nMarkdown text *here*.' }}>
       <Form.Viewport>
         <Form.Content>
           <Form.FieldSet />
@@ -61,7 +61,7 @@ const RefStory = () => {
   return (
     <TestLayout>
       <Panel.Root>
-        <Panel.Content asChild>
+        <Panel.Content>
           <Form.Root schema={TextNoteHolder} values={values as any} db={space.db}>
             <Form.Viewport>
               <Form.Content>
@@ -96,7 +96,7 @@ const EmptyRefStory = () => {
   return (
     <TestLayout>
       <Panel.Root>
-        <Panel.Content asChild>
+        <Panel.Content>
           <Form.Root schema={EmptyRefSchema} defaultValues={{}} db={space.db}>
             <Form.Viewport>
               <Form.Content>
@@ -111,7 +111,7 @@ const EmptyRefStory = () => {
 };
 
 const meta = {
-  title: 'ui/react-ui-form/MarkdownField',
+  title: 'ui/react-ui-form/FormField/MarkdownField',
   decorators: [withTheme(), withLayout({ layout: 'column' })],
   parameters: {
     layout: 'fullscreen',
@@ -134,7 +134,7 @@ export const StringBacked: Story = {
 export const StringBackedKeepsFocus: Story = {
   render: () => (
     <TestLayout>
-      <Form.Root schema={StringSchema} defaultValues={{ notes: '' }}>
+      <Form.Root schema={TestSchema} defaultValues={{ notes: '' }}>
         <Form.Viewport>
           <Form.Content>
             <Form.FieldSet />

package/src/components/Form/{fields → FormField/fields/MarkdownField}/MarkdownField.tsx

@@ -5,19 +5,27 @@
 import { useAtomValue } from '@effect-atom/atom-react';
 import React, { useCallback, useMemo } from 'react';
 
-import { type Database, Obj, Ref } from '@dxos/echo';
-import { createDocAccessor } from '@dxos/echo-client';
-import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
+import { type Database, Ref } from '@dxos/echo';
+import { Doc } from '@dxos/echo-doc';
+import { IconButton, 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 FormFieldRendererProps } from '#types';
 
-import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+import { FormRow } from '../../FormRow';
 
-const editorClassNames =
-  'transition-colors bg-input-surface focus-within:bg-focus-surface border border-separator rounded-xs p-1 px-2';
+// Mirror the focus treatment of `Input` (default variant): a `focus-ring-subtle` ring of `dx-focus-line`
+// width rather than a recolored 1px border, and suppress the editor wrapper's `accent-bg` border so a
+// second click never turns the outline blue. Keyed on `focus-within` because focus lands on the inner
+// CodeMirror contenteditable, not this wrapper.
+const editorClassNames = [
+  'min-h-[6lh] transition-colors rounded-xs p-1 px-2 bg-input-surface border border-input-separator',
+  'focus:border-separator focus-within:border-separator focus-within:bg-focus-surface',
+  'focus-within:ring-2 focus-within:ring-offset-0 focus-within:ring-focus-ring-subtle focus-within:z-[1]',
+];
 
 /**
  * Form field that edits a markdown value in a CodeMirror editor.
@@ -29,28 +37,30 @@ const editorClassNames =
 export const MarkdownField = ({
   type,
   readonly,
-  label,
-  jsonPath,
   placeholder,
-  layout,
   db,
-  getStatus,
   getValue,
   onValueChange,
-}: FormFieldComponentProps) => {
-  const { status, error } = getStatus();
+  ...props
+}: FormFieldRendererProps) => {
   const isRef = Ref.isRefType(type);
-  const value = getValue();
 
-  if ((readonly || layout === 'static') && value == null) {
-    return null;
-  }
+  // The field value is a runtime union the form's value type can't express: a `Ref<Text>` when the
+  // property is a markdown ref, or a plain string when it is annotated markdown text. `isRef`
+  // selects the branch, so the casts below narrow the opaque value accordingly.
+  const renderStatic = (value: unknown) => {
+    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>;
+  };
 
-  const renderEditor = () => {
+  const renderEditor = (value: unknown) => {
     if (isRef) {
       const reference = value as Ref.Ref<any> | undefined;
       if (reference) {
-        return <RefMarkdownEditor reference={reference} placeholder={placeholder} />;
+        return <RefMarkdownEditor reference={reference} placeholder={placeholder} readonly={!!readonly} />;
       }
 
       if (readonly) {
@@ -70,20 +80,10 @@ export const MarkdownField = ({
     );
   };
 
-  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} path={jsonPath} />}
-      {layout === 'static' ? renderStatic() : renderEditor()}
-      {layout === 'full' && <Input.Validation>{error}</Input.Validation>}
-    </Input.Root>
+    <FormRow readonly={readonly} getValue={getValue} renderStatic={renderStatic} {...props}>
+      {({ value }) => renderEditor(value)}
+    </FormRow>
   );
 };
 
@@ -93,21 +93,23 @@ const RefStaticText = ({ reference }: { reference: Ref.Ref<any> }) => {
   if (!text?.content) {
     return null;
   }
+
   return <p className='whitespace-pre-wrap'>{text.content}</p>;
 };
 
 type RefMarkdownEditorProps = {
   reference: Ref.Ref<any>;
   placeholder?: string;
+  readonly?: boolean;
 };
 
-const RefMarkdownEditor = ({ reference, placeholder }: RefMarkdownEditorProps) => {
+const RefMarkdownEditor = ({ reference, placeholder, readonly }: RefMarkdownEditorProps) => {
   const text = useAtomValue(useMemo(() => reference.atom, [reference]));
   const dataExtensions = useMemo(
-    () => (text ? [createDataExtensions({ id: reference.uri, text: createDocAccessor(text, ['content']) })] : []),
+    () => (text ? [createDataExtensions({ id: reference.uri, text: Doc.createAccessor(text, ['content']) })] : []),
     [text, reference],
   );
-  const extensions = useBasicMarkdownExtensions({ placeholder, extensions: dataExtensions });
+  const extensions = useBasicMarkdownExtensions({ placeholder, readonly, extensions: dataExtensions });
   if (!text) {
     return null;
   }
@@ -127,7 +129,7 @@ type StringMarkdownEditorProps = {
 };
 
 const StringMarkdownEditor = ({ value, placeholder, readonly, onChange }: StringMarkdownEditorProps) => {
-  const extensions = useBasicMarkdownExtensions({ placeholder });
+  const extensions = useBasicMarkdownExtensions({ placeholder, readonly });
   const handleChange = useCallback((next: string) => onChange(next), [onChange]);
 
   return (
@@ -150,18 +152,16 @@ type CreateTextButtonProps = {
 
 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));
+
+    onCreate(Ref.make(db.add(Text.make())));
   }, [db, onCreate]);
 
   return (
-    <Button onClick={handleClick} disabled={disabled}>
-      <Icon icon='ph--plus--regular' size={4} />
-      <span>{t('create-text.label')}</span>
-    </Button>
+    <IconButton icon='ph--plus--regular' label={t('create-text.label')} onClick={handleClick} disabled={disabled} />
   );
 };

package/src/components/Form/FormField/fields/MarkdownField/index.ts

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

package/src/components/Form/FormField/fields/NumberField/NumberField.stories.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useState } from 'react';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { TestLayout } from '../../../../../testing';
+import { Form } from '../../../Form';
+
+const schema = Schema.Struct({
+  count: Schema.Number.annotations({ title: 'Count' }),
+}).pipe(Schema.mutable);
+
+type Values = Schema.Schema.Type<typeof schema>;
+
+const DefaultStory = () => {
+  const [values, setValues] = useState<Values>({ count: 42 });
+  return (
+    <TestLayout json={values}>
+      <Form.Root
+        schema={schema}
+        values={values}
+        onValuesChanged={(values) => setValues((prev) => ({ ...prev, ...values }))}
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </TestLayout>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/FormField/NumberField',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: { layout: 'fullscreen', translations },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Form/FormField/fields/NumberField/NumberField.test.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import { describe, test } from 'vitest';
+
+import { getNumericConstraints } from './NumberField';
+
+describe('getNumericConstraints', () => {
+  test('reads min/max from Schema.between (bounds live on separate nested refinements)', ({ expect }) => {
+    const { ast } = Schema.Number.pipe(Schema.between(0, 23));
+    expect(getNumericConstraints(ast)).toEqual({ min: 0, max: 23, integer: false });
+  });
+
+  test('detects integer from Schema.int', ({ expect }) => {
+    const { ast } = Schema.Number.pipe(Schema.int(), Schema.between(0, 23));
+    expect(getNumericConstraints(ast)).toEqual({ min: 0, max: 23, integer: true });
+  });
+
+  test('returns empty constraints for an unconstrained number', ({ expect }) => {
+    expect(getNumericConstraints(Schema.Number.ast)).toEqual({ integer: false });
+  });
+
+  test('aggregates stacked bounds to the strictest (intersection semantics)', ({ expect }) => {
+    const { ast } = Schema.Number.pipe(Schema.greaterThanOrEqualTo(5), Schema.greaterThanOrEqualTo(10));
+    expect(getNumericConstraints(ast)).toEqual({ min: 10, max: undefined, integer: false });
+  });
+});