@dxos/react-ui-form 0.9.0 → 0.9.1-main.c7dcc2e112

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 { FormFieldWrapper } from '../../FormFieldWrapper';
 
 /**
  * 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(

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,8 +9,9 @@ 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 { FormFieldLabel } from '../../FormFieldWrapper';
 
 export const GeoPointField = ({
   type,
@@ -22,7 +23,7 @@ export const GeoPointField = ({
   getValue,
   onValueChange,
   onBlur,
-}: FormFieldComponentProps<GeoPoint>) => {
+}: FormFieldRendererProps<GeoPoint>) => {
   const { t } = useTranslation(translationKey);
   const { status, error } = getStatus();
   const geoPoint = useMemo<GeoPoint>(() => getValue() ?? [0, 0], [getValue]);
@@ -61,7 +62,7 @@ export const GeoPointField = ({
   return (
     <Input.Root validationValence={status}>
       {layout !== 'inline' && (
-        <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} asChild />
+        <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} standalone />
       )}
       {layout === 'static' ? (
         <LatLng {...value} />

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 />
@@ -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

@@ -13,8 +13,9 @@ 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 { FormFieldLabel } from '../../FormFieldWrapper';
 
 const editorClassNames =
   'transition-colors bg-input-surface focus-within:bg-focus-surface border border-separator rounded-xs p-1 px-2';
@@ -37,7 +38,7 @@ export const MarkdownField = ({
   getStatus,
   getValue,
   onValueChange,
-}: FormFieldComponentProps) => {
+}: FormFieldRendererProps) => {
   const { status, error } = getStatus();
   const isRef = Ref.isRefType(type);
   const value = getValue();

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/{fields → FormField/fields/NumberField}/NumberField.tsx

@@ -2,12 +2,33 @@
 // Copyright 2024 DXOS.org
 //
 
+import * as Option from 'effect/Option';
+import * as SchemaAST from 'effect/SchemaAST';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { Input, type TextInputProps } from '@dxos/react-ui';
 import { safeParseFloat } from '@dxos/util';
 
-import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
+import { type FormFieldRendererProps } from '#types';
+
+import { FormFieldWrapper } from '../../FormFieldWrapper';
+
+/**
+ * Extracts numeric `minimum`/`maximum` bounds from a Refinement AST's JSON schema annotation
+ * (e.g. produced by Schema.between). Returns undefined when no bounds are declared.
+ */
+const getRefinementBounds = (ast: SchemaAST.AST): { min?: number; max?: number } => {
+  if (!SchemaAST.isRefinement(ast)) {
+    return {};
+  }
+  const jsonSchema = Option.getOrUndefined(SchemaAST.getJSONSchemaAnnotation(ast));
+  if (jsonSchema == null) {
+    return {};
+  }
+  const min = 'minimum' in jsonSchema && typeof jsonSchema.minimum === 'number' ? jsonSchema.minimum : undefined;
+  const max = 'maximum' in jsonSchema && typeof jsonSchema.maximum === 'number' ? jsonSchema.maximum : undefined;
+  return { min, max };
+};
 
 export const NumberField = ({
   type,
@@ -17,7 +38,9 @@ export const NumberField = ({
   onValueChange,
   onBlur,
   ...props
-}: FormFieldComponentProps<number>) => {
+}: FormFieldRendererProps<number>) => {
+  const { min, max } = getRefinementBounds(type);
+
   // Track raw string input so the user can clear the field before typing a new number.
   // We only commit to onValueChange when the raw string parses to a valid number.
   const [raw, setRaw] = useState<string>(() => {
@@ -67,6 +90,8 @@ export const NumberField = ({
           disabled={!!readonly}
           placeholder={placeholder}
           value={raw}
+          min={min}
+          max={max}
           onChange={handleChange}
           onBlur={handleBlur}
         />

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

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

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

@@ -14,8 +14,9 @@ import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
 
 import { translationKey } from '#translations';
 
-import { Form, omitId } from '../Form';
-import { FormFieldLabel } from '../FormFieldComponent';
+import { omitId } from '../../../../../util';
+import { FormContent, FormFieldSet, FormRoot } from '../../../FormControls';
+import { FormFieldLabel } from '../../FormFieldWrapper';
 import { type RefFieldProps } from './RefField';
 
 /**
@@ -129,10 +130,10 @@ const InlineForm = ({ reference, db, readonly, useType = defaultUseType }: Inlin
   }
 
   return (
-    <Form.Root db={db} schema={formSchema} defaultValues={defaultValues as any} onValuesChanged={handleChange}>
-      <Form.Content>
-        <Form.FieldSet collapsible readonly={readonly} />
-      </Form.Content>
-    </Form.Root>
+    <FormRoot db={db} schema={formSchema} defaultValues={defaultValues as any} onValuesChanged={handleChange}>
+      <FormContent>
+        <FormFieldSet collapsible readonly={readonly} />
+      </FormContent>
+    </FormRoot>
   );
 };

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

@@ -0,0 +1,97 @@
+//
+// 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 { Annotation, Obj, Ref } from '@dxos/echo';
+import { useSpaces } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { Organization, TestLayout } from '../../../../../testing';
+import { Form } from '../../../Form';
+
+// Picker: select an existing Organization.
+const RefSchema = Schema.Struct({
+  employer: Ref.Ref(Organization).annotations({ title: 'Employer' }),
+}).pipe(Schema.mutable);
+
+// Inline: edit the referenced Organization's fields in a nested form.
+const InlineSchema = Schema.Struct({
+  employer: Ref.Ref(Organization).pipe(
+    Schema.annotations({ title: 'Employer' }),
+    Annotation.FormInlineAnnotation.set(true),
+  ),
+}).pipe(Schema.mutable);
+
+const RefStory = ({ schema }: { schema: Schema.Schema<any> }) => {
+  const spaces = useSpaces();
+  const space = spaces[0];
+  const [values, setValues] = useState<Record<string, unknown>>({});
+  if (!space) {
+    return <Loading />;
+  }
+
+  return (
+    <TestLayout json={values}>
+      <Form.Root
+        schema={schema}
+        values={values}
+        db={space.db}
+        onValuesChanged={(values) => setValues((prev) => ({ ...prev, ...values }))}
+        // `name` is required; the inline create starts from `{}`, so seed a default the form can then edit.
+        onCreate={(_type, props: any) => space.db.add(Obj.make(Organization, { name: 'New organization', ...props }))}
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </TestLayout>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/FormField/RefField',
+  render: RefStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [Organization],
+      onCreateSpace: ({ space }) => {
+        Array.from({ length: 8 }).forEach((_, i) =>
+          space.db.add(Obj.make(Organization, { name: `Organization ${i}` })),
+        );
+      },
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof RefStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    schema: RefSchema,
+  },
+};
+
+export const Inline: Story = {
+  args: {
+    schema: InlineSchema,
+  },
+};

package/src/components/Form/{fields → FormField/fields/RefField}/RefField.test.ts

@@ -4,7 +4,8 @@
 
 import { describe, test } from 'vitest';
 
-import { type RefOption } from '../../ObjectPicker';
+import { type RefOption } from '#types';
+
 import { findRefOption } from './RefField';
 
 // Sample qualified self URIs as produced by an in-space object (Entity.getURI / `echo://<space>/<id>`).

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

@@ -5,7 +5,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
 import '@dxos/lit-ui/dx-tag-picker.pcss';
-import { type Database, Entity, Filter, Obj, Query, Ref, Scope, Type } from '@dxos/echo';
+import { Entity, Filter, Obj, Query, Ref, Scope, Type } from '@dxos/echo';
 import { useQuery, useType as defaultUseType } from '@dxos/echo-react';
 import { ANY_OBJECT_TYPENAME, ReferenceAnnotationId, type ReferenceAnnotationValue } from '@dxos/echo/internal';
 import { SchemaEx } from '@dxos/effect';
@@ -15,10 +15,11 @@ import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
 import { ParentLabelAnnotationId } from '@dxos/schema';
 
 import { translationKey } from '#translations';
+import { type CreateOptions, type FormFieldRendererProps, type RefFieldDataProps, type RefOption } from '#types';
 
-import { ObjectPicker, type ObjectPickerContentProps, type RefOption } from '../../ObjectPicker';
-import { omitHiddenFormFields, omitId } from '../Form';
-import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+import { omitHiddenFormFields, omitId } from '../../../../../util';
+import { ObjectPicker } from '../../../../ObjectPicker';
+import { FormFieldLabel } from '../../FormFieldWrapper';
 
 // TODO(burdon): Factor out.
 const isRefSnapshot = (val: any): val is { '/': string } => {
@@ -89,27 +90,7 @@ const defaultUseResults: NonNullable<RefFieldProps['useResults']> = (db, typenam
           Query.select(Filter.type(DXN.make(typename))).from(Scope.space(), Scope.registry()),
   );
 
-export type RefFieldProps = FormFieldComponentProps &
-  Pick<
-    ObjectPickerContentProps,
-    'createOptionLabel' | 'createOptionIcon' | 'createInitialValuePath' | 'createFieldMap'
-  > & {
-    db?: Database.Database;
-    // TODO(burdon): Replace hooks with callbacks.
-    useType?: (db?: Database.Database, typeUri?: URI.URI) => Type.AnyEntity;
-    useResults?: (db?: Database.Database, typename?: string) => Entity.Any[];
-    getOptions?: (
-      objects: Entity.Any[],
-      options?: { parentLabel?: boolean; getTypePlaceholder?: (typename: string) => string },
-    ) => RefOption[];
-    /**
-     * Persist a newly-created object. Called after the user fills out the
-     * inline create form and clicks Save. Should add the object to the
-     * database and return it (sync or async). The returned object is then
-     * wired into this slot's form value as a Ref.
-     */
-    onCreate?: (schema: Type.AnyEntity, values: any) => Obj.Unknown | Promise<Obj.Unknown> | undefined | void;
-  };
+export type RefFieldProps = FormFieldRendererProps & RefFieldDataProps & CreateOptions;
 
 export const RefField = (props: RefFieldProps) => {
   const {

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

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

package/src/components/Form/FormField/fields/SelectField/SelectField.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 { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { TestLayout } from '../../../../../testing';
+import { Form } from '../../../Form';
+
+// A literal union auto-dispatches to SelectField.
+const schema = Schema.Struct({
+  status: Schema.Literal('active', 'inactive', 'archived').annotations({ title: 'Status' }),
+}).pipe(Schema.mutable);
+
+type Values = Schema.Schema.Type<typeof schema>;
+
+const DefaultStory = () => {
+  const [values, setValues] = useState<Values>({ status: 'active' });
+  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/SelectField',
+  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/SelectField}/SelectField.tsx

@@ -7,9 +7,11 @@ import React, { useCallback } from 'react';
 import { Icon, Input, Select, type SelectRootProps } from '@dxos/react-ui';
 import { getStyles } from '@dxos/ui-theme';
 
-import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+import { type FormFieldRendererProps } from '#types';
 
-export type SelectFieldOptions = FormFieldComponentProps & {
+import { FormFieldLabel } from '../../FormFieldWrapper';
+
+export type SelectFieldOptions = FormFieldRendererProps & {
   options?: Array<{ value: string | number; label?: string; secondaryLabel?: string; icon?: string; iconHue?: string }>;
 };
 

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

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

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

@@ -11,11 +11,11 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '#translations';
 
-import { TestLayout } from '../../testing';
-import { Form } from '../Form';
+import { TestLayout } from '../../../../../testing';
+import { Form } from '../../../Form';
 import { SelectOptionField } from './SelectOptionField';
 
-const schema = Schema.Struct({
+const TestSchema = Schema.Struct({
   options: Schema.Array(SelectOption).pipe(Schema.mutable),
 }).pipe(Schema.mutable);
 
@@ -32,7 +32,7 @@ const DefaultStory = () => {
   return (
     <TestLayout>
       <Form.Root
-        schema={schema}
+        schema={TestSchema}
         values={values}
         fieldMap={{ options: SelectOptionField }}
         onSave={(values) => setValues(values)}
@@ -49,7 +49,7 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'ui/react-ui-form/SelectOptionField',
+  title: 'ui/react-ui-form/FormField/SelectOptionField',
   component: SelectOptionField as any,
   render: DefaultStory,
   decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],