@dxos/react-ui-form 0.7.1-staging.599df14

package/src/components/Form/Defaults.tsx

@@ -0,0 +1,130 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { Input, Select } from '@dxos/react-ui';
+
+import { type InputProps, InputHeader } from './Input';
+
+export const TextInput = <T extends object>({
+  property,
+  type,
+  label,
+  disabled,
+  placeholder,
+  getStatus,
+  getValue,
+  onValueChange,
+  onBlur,
+}: InputProps<T>) => {
+  const { status, error } = getStatus?.(property);
+
+  return (
+    <Input.Root validationValence={status}>
+      <InputHeader error={error}>
+        <Input.Label>{label}</Input.Label>
+      </InputHeader>
+      <Input.TextInput
+        disabled={disabled}
+        placeholder={placeholder}
+        value={getValue(property) ?? ''}
+        onChange={(event) => onValueChange(property, type, event.target.value)}
+        onBlur={onBlur}
+      />
+    </Input.Root>
+  );
+};
+
+export const NumberInput = <T extends object>({
+  property,
+  type,
+  label,
+  disabled,
+  placeholder,
+  getStatus,
+  getValue,
+  onValueChange,
+  onBlur,
+}: InputProps<T>) => {
+  const { status, error } = getStatus?.(property);
+
+  // TODO(burdon): Only show stepper if bounded integer.
+  return (
+    <Input.Root validationValence={status}>
+      <InputHeader error={error}>
+        <Input.Label>{label}</Input.Label>
+      </InputHeader>
+      <Input.TextInput
+        type='number'
+        disabled={disabled}
+        placeholder={placeholder}
+        value={getValue(property) ?? 0}
+        onChange={(event) => onValueChange(property, type, event.target.value)}
+        onBlur={onBlur}
+      />
+    </Input.Root>
+  );
+};
+
+export const BooleanInput = <T extends object>({
+  property,
+  type,
+  label,
+  getStatus,
+  getValue,
+  onValueChange,
+}: InputProps<T>) => {
+  const { status, error } = getStatus?.(property);
+
+  return (
+    <Input.Root validationValence={status}>
+      <InputHeader error={error}>
+        <Input.Label>{label}</Input.Label>
+      </InputHeader>
+      <Input.Switch
+        checked={getValue<boolean>(property)}
+        onCheckedChange={(value) => onValueChange(property, type, value)}
+      />
+    </Input.Root>
+  );
+};
+
+export const SelectInput = <T extends object>({
+  property,
+  type,
+  label,
+  disabled,
+  placeholder,
+  options,
+  getStatus,
+  getValue,
+  onValueChange,
+}: InputProps<T>) => {
+  const { status, error } = getStatus?.(property);
+
+  return (
+    <Input.Root validationValence={status}>
+      <InputHeader error={error}>
+        <Input.Label>{label}</Input.Label>
+      </InputHeader>
+      <Select.Root value={getValue(property)} onValueChange={(value) => onValueChange(property, type, value)}>
+        {/* TODO(burdon): Placeholder not working? */}
+        <Select.TriggerButton classNames='is-full' disabled={disabled} placeholder={placeholder} />
+        <Select.Portal>
+          <Select.Content>
+            <Select.Viewport>
+              {options?.map(({ value, label }) => (
+                // NOTE: Numeric values are converted to and from strings.
+                <Select.Option key={String(value)} value={String(value)}>
+                  {label ?? String(value)}
+                </Select.Option>
+              ))}
+            </Select.Viewport>
+          </Select.Content>
+        </Select.Portal>
+      </Select.Root>
+    </Input.Root>
+  );
+};

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

@@ -0,0 +1,137 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React, { useCallback, useState } from 'react';
+
+import { AST, Format, S } from '@dxos/echo-schema';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { SelectInput } from './Defaults';
+import { Form, type FormProps } from './Form';
+import translations from '../../translations';
+import { TestLayout, TestPanel } from '../testing';
+
+// TODO(burdon): Translations?
+const TestSchema = S.Struct({
+  name: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'Name' })),
+  active: S.optional(S.Boolean.annotations({ [AST.TitleAnnotationId]: 'Active' })),
+  rank: S.optional(S.Number.annotations({ [AST.TitleAnnotationId]: 'Rank' })),
+  website: S.optional(Format.URL.annotations({ [AST.TitleAnnotationId]: 'Website' })),
+  address: S.optional(
+    S.Struct({
+      street: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'Street' })),
+      city: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'City' })),
+      zip: S.optional(S.String.pipe(S.pattern(/^\d{5}(-\d{4})?$/)).annotations({ [AST.TitleAnnotationId]: 'ZIP' })),
+      location: S.optional(Format.LatLng.annotations({ [AST.TitleAnnotationId]: 'Location' })),
+    }).annotations({ [AST.TitleAnnotationId]: 'Address' }),
+  ),
+}).pipe(S.mutable);
+
+type TestType = S.Schema.Type<typeof TestSchema>;
+
+type StoryProps = FormProps<TestType>;
+
+const DefaultStory = ({ values: initialValues }: StoryProps) => {
+  const [values, setValues] = useState(initialValues);
+  const handleSubmit = useCallback<NonNullable<FormProps<TestType>['onSubmit']>>((values) => {
+    setValues(values);
+  }, []);
+
+  return (
+    <TestLayout json={{ values, schema: TestSchema.ast.toJSON() }}>
+      <TestPanel>
+        <Form<TestType> schema={TestSchema} values={values} onSubmit={handleSubmit} />
+      </TestPanel>
+    </TestLayout>
+  );
+};
+
+const meta: Meta<StoryProps> = {
+  title: 'ui/react-ui-data/Form',
+  component: Form,
+  render: DefaultStory,
+  decorators: [withLayout({ fullscreen: true, tooltips: true }), withTheme],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<StoryProps>;
+
+export const Default: Story = {
+  args: {
+    values: {
+      name: 'DXOS',
+      active: true,
+      address: {
+        zip: '11205',
+      },
+    },
+  },
+};
+
+const ShapeSchema = S.Struct({
+  shape: S.optional(
+    S.Union(
+      S.Struct({
+        type: S.Literal('circle').annotations({ [AST.TitleAnnotationId]: 'Type' }),
+        radius: S.optional(S.Number.annotations({ [AST.TitleAnnotationId]: 'Radius' })),
+      }),
+      S.Struct({
+        type: S.Literal('square').annotations({ [AST.TitleAnnotationId]: 'Type' }),
+        size: S.optional(S.Number.annotations({ [AST.TitleAnnotationId]: 'Size' })),
+      }),
+    ).annotations({ [AST.TitleAnnotationId]: 'Shape' }),
+  ),
+}).pipe(S.mutable);
+
+type ShapeType = S.Schema.Type<typeof ShapeSchema>;
+type DiscriminatedUnionStoryProps = FormProps<ShapeType>;
+
+const DiscriminatedUnionStory = ({ values: initialValues }: DiscriminatedUnionStoryProps) => {
+  const [values, setValues] = useState(initialValues);
+  const handleSubmit = useCallback<NonNullable<FormProps<ShapeType>['onSubmit']>>((values) => {
+    setValues(values);
+  }, []);
+
+  return (
+    <TestLayout json={{ values, schema: ShapeSchema.ast.toJSON() }}>
+      <TestPanel>
+        <Form<ShapeType>
+          schema={ShapeSchema}
+          values={values}
+          onSubmit={handleSubmit}
+          Custom={{
+            ['shape.type' as const]: (props) => (
+              <SelectInput<ShapeType>
+                {...props}
+                options={['circle', 'square'].map((value) => ({
+                  value,
+                  label: value,
+                }))}
+              />
+            ),
+          }}
+        />
+      </TestPanel>
+    </TestLayout>
+  );
+};
+
+export const DiscriminatedShape: StoryObj<DiscriminatedUnionStoryProps> = {
+  render: DiscriminatedUnionStory,
+  args: {
+    values: {
+      shape: {
+        type: 'circle',
+        radius: 5,
+      },
+    },
+  },
+};

package/src/components/Form/Form.tsx

@@ -0,0 +1,176 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useMemo } from 'react';
+
+import { AST, S } from '@dxos/echo-schema';
+import { findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
+import { log } from '@dxos/log';
+import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { getSchemaProperties, type PropertyKey, type SchemaProperty } from '@dxos/schema';
+import { isNotFalsy } from '@dxos/util';
+
+import { type InputComponent } from './Input';
+import { getInputComponent } from './factory';
+import { type FormOptions, useForm } from '../../hooks';
+import { translationKey } from '../../translations';
+
+// TODO(burdon): Rename package react-ui-form; delete react-ui-card.
+
+const padding = 'px-2';
+
+export type PropsFilter<T extends Object> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
+
+export type FormProps<T extends object> = ThemedClassName<
+  {
+    values: T;
+    /** Path to the current object from the root. Used with nested forms. */
+    path?: string[];
+
+    // TODO(burdon): Autofocus first input.
+    autoFocus?: boolean;
+    readonly?: boolean;
+    // TODO(burdon): Change to JsonPath includes/excludes.
+    filter?: PropsFilter<T>;
+    sort?: PropertyKey<T>[];
+    autoSave?: boolean;
+    onCancel?: () => void;
+
+    /**
+     * Map of custom renderers for specific properties.
+     */
+    Custom?: Partial<Record<string, InputComponent<T>>>;
+  } & Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSubmit'>
+>;
+
+/**
+ * General purpose form component that displays field controls based on the given schema.
+ */
+export const Form = <T extends object = {}>({
+  classNames,
+  schema,
+  values: initialValues,
+  path = [],
+  readonly,
+  filter,
+  sort,
+  autoSave,
+  onValuesChanged,
+  onValidate,
+  onSubmit,
+  onCancel,
+  Custom,
+}: FormProps<T>) => {
+  const { t } = useTranslation(translationKey);
+  const onValid = useMemo(() => (autoSave ? onSubmit : undefined), [autoSave, onSubmit]);
+  const { canSubmit, values, errors, handleSubmit, ...inputProps } = useForm<T>({
+    schema,
+    initialValues,
+    onValuesChanged,
+    onValidate,
+    onValid,
+    onSubmit,
+  });
+
+  // Filter and sort props.
+  // TODO(burdon): Move into useForm?
+  const props = useMemo(() => {
+    const props = getSchemaProperties<T>(schema.ast, values);
+    const filtered = filter ? filter(props) : props;
+    const findIndex = (props: PropertyKey<T>[], prop: PropertyKey<T>) => {
+      const idx = props.findIndex((p) => p === prop);
+      return idx === -1 ? Infinity : idx;
+    };
+
+    return sort ? filtered.sort(({ name: a }, { name: b }) => findIndex(sort, a) - findIndex(sort, b)) : filtered;
+  }, [schema, filter, values]);
+
+  // TODO(burdon): Highlight in UX.
+  useEffect(() => {
+    if (errors && Object.keys(errors).length) {
+      log.warn('validation', { errors });
+    }
+  }, [errors]);
+
+  return (
+    <div role='form' className={mx('flex flex-col w-full gap-2 py-2', classNames)}>
+      {props
+        .map(({ prop, name, type, format, title, description, examples }) => {
+          // Custom property allows for sub forms.
+          // TODO(burdon): Use Select control if options are present in annotation?
+          const key = [...path, name];
+          const InputComponent = Custom?.[key.join('.')] ?? getInputComponent<T>(type, format);
+          if (!InputComponent) {
+            // Recursively render form.
+            if (type === 'object') {
+              const baseNode = findNode(prop.type, isDiscriminatedUnion);
+              const typeLiteral = baseNode
+                ? getDiscriminatedType(baseNode, values[name] as any)
+                : findNode(prop.type, AST.isTypeLiteral);
+
+              if (typeLiteral) {
+                const schema = S.make(typeLiteral);
+                return (
+                  <div key={name} role='none'>
+                    <div className={padding}>{title ?? name}</div>
+                    <Form<any>
+                      schema={schema}
+                      path={key}
+                      values={values[name] ?? {}}
+                      onValuesChanged={(childValues) => {
+                        inputProps.onValueChange(name, 'object', childValues);
+                      }}
+                      Custom={Custom as any}
+                    />
+                  </div>
+                );
+              }
+            }
+
+            log('no renderer for property', { name, type });
+            return null;
+          }
+
+          const placeholder = examples?.length ? `Example: ${examples[0]}` : description;
+
+          return (
+            <div key={name} role='none' className={padding}>
+              <InputComponent
+                type={type}
+                format={format}
+                property={name}
+                disabled={readonly}
+                label={title ?? name}
+                placeholder={placeholder}
+                {...inputProps}
+              />
+            </div>
+          );
+        })
+        .filter(isNotFalsy)}
+
+      {/* {errors && <div className='overflow-hidden text-sm'>{JSON.stringify(errors)}</div>} */}
+
+      {(onCancel || onSubmit) && !autoSave && (
+        <div role='none' className='flex justify-center'>
+          <div role='none' className={mx(onCancel && !readonly && 'grid grid-cols-2 gap-2')}>
+            {onCancel && !readonly && (
+              <IconButton icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />
+            )}
+            {onSubmit && (
+              <IconButton
+                type='submit'
+                disabled={!canSubmit}
+                icon='ph--check--regular'
+                label={t('button save')}
+                onClick={handleSubmit}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Form/Input.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type FC, type PropsWithChildren } from 'react';
+
+import { type FormatEnum } from '@dxos/echo-schema';
+import { type SimpleType } from '@dxos/effect';
+import { Icon, Tooltip } from '@dxos/react-ui';
+import { errorText } from '@dxos/react-ui-theme';
+import { type PropertyKey } from '@dxos/schema';
+
+import { type FormHandler } from '../../hooks';
+
+/**
+ * Props passed to input components.
+ */
+export type InputProps<T extends object = {}> = {
+  property: PropertyKey<T>;
+  type: SimpleType;
+  format?: FormatEnum;
+  label: string;
+  disabled?: boolean;
+  placeholder?: string;
+  // TODO(burdon): Provide from annotations? E.g., enum.
+  options?: Array<{ value: string | number; label?: string }>;
+} & Pick<FormHandler<T>, 'getStatus' | 'getValue' | 'onValueChange' | 'onBlur'>;
+
+/**
+ * Form input component.
+ */
+// TODO(burdon): Remove generic from inputs.
+export type InputComponent<T extends object = {}> = FC<InputProps<T>>;
+
+export type InputHeaderProps = PropsWithChildren<{
+  error?: string;
+}>;
+
+export const InputHeader = ({ children, error }: InputHeaderProps) => {
+  return (
+    <div role='none' className='flex justify-between items-center mb-1'>
+      {children}
+      {error && (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Icon icon='ph--warning--regular' size={4} classNames={errorText} />
+          </Tooltip.Trigger>
+          <Tooltip.Content side='bottom'>
+            <Tooltip.Arrow />
+            {error}
+          </Tooltip.Content>
+        </Tooltip.Root>
+      )}
+    </div>
+  );
+};

package/src/components/Form/factory.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { FormatEnum } from '@dxos/echo-schema';
+import { type SimpleType } from '@dxos/effect';
+
+import { LatLngInput } from './Custom';
+import { BooleanInput, NumberInput, TextInput } from './Defaults';
+import { type InputComponent } from './Input';
+
+/**
+ * Get property input component.
+ */
+export const getInputComponent = <T extends object>(
+  type: SimpleType,
+  format?: FormatEnum,
+): InputComponent<T> | undefined => {
+  switch (format) {
+    case FormatEnum.LatLng:
+      return LatLngInput;
+  }
+
+  switch (type) {
+    case 'string':
+      return TextInput;
+    case 'number':
+      return NumberInput;
+    case 'boolean':
+      return BooleanInput;
+  }
+};

package/src/components/Form/index.ts

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

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

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import { within, userEvent, expect, fn } from '@storybook/test';
+import React from 'react';
+
+// TODO(burdon): Need node exports.
+import { withTheme } from '@dxos/storybook-utils';
+
+// https://storybook.js.org/blog/storybook-test
+// https://github.com/storybookjs/storybook/tree/next/code/lib/test
+
+// TODO(burdon): Set-up: https://www.chromatic.com/storybook
+
+export type TestProps = {
+  onClick: () => void;
+};
+
+export const Test = ({ onClick }: TestProps) => (
+  <button className='p-2' onClick={onClick}>
+    Test
+  </button>
+);
+
+export const Primary: StoryObj<TestProps> = {
+  // TODO(burdon): Race condition on first load?
+  play: async ({ args, canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+    await expect(args.onClick).toHaveBeenCalled();
+  },
+  args: {
+    onClick: fn(),
+  },
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-form/Test',
+  component: Test,
+  decorators: [withTheme],
+};
+
+export default meta;

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

@@ -0,0 +1,73 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { Format, type MutableSchema, S, toJsonSchema, TypedObject } from '@dxos/echo-schema';
+import { useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { ViewProjection, createView } from '@dxos/schema';
+import { type ViewType } from '@dxos/schema';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { ViewEditor } from './ViewEditor';
+import translations from '../../translations';
+import { TestLayout, TestPanel } from '../testing';
+
+const DefaultStory = () => {
+  const space = useSpace();
+  const [schema, setSchema] = useState<MutableSchema>();
+  const [view, setView] = useState<ViewType>();
+  const [projection, setProjection] = useState<ViewProjection>();
+  useEffect(() => {
+    if (space) {
+      class TestSchema extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
+        name: S.String,
+        email: Format.Email,
+        salary: Format.Currency(),
+      }) {}
+
+      const schema = space.db.schemaRegistry.addSchema(TestSchema);
+      const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: toJsonSchema(TestSchema) });
+      const projection = new ViewProjection(schema, view);
+
+      setSchema(schema);
+      setView(view);
+      setProjection(projection);
+    }
+  }, [space]);
+
+  const handleDelete = useCallback((property: string) => projection?.deleteFieldProjection(property), [projection]);
+
+  if (!schema || !view || !projection) {
+    return <div />;
+  }
+
+  return (
+    <TestLayout json={{ schema, view, projection }}>
+      <TestPanel>
+        <ViewEditor schema={schema} view={view} registry={space?.db.schemaRegistry} onDelete={handleDelete} />
+      </TestPanel>
+    </TestLayout>
+  );
+};
+
+const meta: Meta<typeof ViewEditor> = {
+  title: 'ui/react-ui-form/ViewEditor',
+  component: ViewEditor,
+  render: DefaultStory,
+  decorators: [withClientProvider({ createSpace: true }), withLayout({ fullscreen: true, tooltips: true }), withTheme],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};