@dxos/react-ui-form 0.8.4-main.f5c0578 → 0.8.4-main.fcfe5033a5

package/src/components/Form/RefField.tsx

@@ -1,214 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type SchemaAST } from 'effect';
-import React, { type FocusEvent, useCallback, useMemo } from 'react';
-
-import {
-  Expando,
-  Ref,
-  ReferenceAnnotationId,
-  type ReferenceAnnotationValue,
-  getTypeAnnotation,
-} from '@dxos/echo-schema';
-import { findAnnotation } from '@dxos/effect';
-import { DXN } from '@dxos/keys';
-import { DxRefTag } from '@dxos/lit-ui/react';
-import { Input, useTranslation } from '@dxos/react-ui';
-import { TagPicker, type TagPickerItemData, type TagPickerMode } from '@dxos/react-ui-tag-picker';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
-import { isNonNullable } from '@dxos/util';
-
-import { type QueryRefOptions, useQueryRefOptions } from '../../hooks';
-import { translationKey } from '../../translations';
-
-import { TextInput } from './Defaults';
-import { InputHeader, type InputProps } from './Input';
-
-type RefFieldProps = InputProps & {
-  ast?: SchemaAST.AST;
-  array?: boolean;
-  onQueryRefOptions?: QueryRefOptions;
-};
-
-export const RefField = ({
-  type,
-  label,
-  disabled,
-  placeholder,
-  inputOnly,
-  array,
-  ast,
-  getValue,
-  onBlur,
-  onQueryRefOptions,
-  onValueChange,
-  ...restInputProps
-}: RefFieldProps) => {
-  const { t } = useTranslation(translationKey);
-  const refTypeInfo = useMemo(
-    () => (ast ? findAnnotation<ReferenceAnnotationValue>(ast, ReferenceAnnotationId) : undefined),
-    [ast],
-  );
-  const { options: availableOptions, loading: _loading } = useQueryRefOptions({ refTypeInfo, onQueryRefOptions });
-
-  if ((refTypeInfo && refTypeInfo?.typename === getTypeAnnotation(Expando)?.typename) || !onQueryRefOptions) {
-    // If ref type is expando, fall back to taking a DXN in string format.
-    return (
-      <RefFieldFallback
-        {...{ type, label, placeholder, disabled, inputOnly, getValue, onBlur, onValueChange, ...restInputProps }}
-      />
-    );
-  }
-
-  const handleGetValue = useCallback((): TagPickerItemData[] => {
-    const formValue = getValue();
-
-    const unknownToRefOption = (val: unknown) => {
-      if (Ref.isRef(val)) {
-        const dxnString = val.dxn.toString();
-        const matchingOption = availableOptions.find((option) => option.id === dxnString);
-        if (matchingOption) {
-          return matchingOption;
-        }
-      }
-      return undefined;
-    };
-
-    if (array && Array.isArray(formValue)) {
-      return formValue.map(unknownToRefOption).filter(isNonNullable) ?? [];
-    }
-
-    const option = unknownToRefOption(formValue);
-    if (option) {
-      return [option];
-    }
-
-    return [];
-  }, [getValue, availableOptions, array]);
-
-  const handleSearch = useCallback(
-    (text: string, ids: string[]): TagPickerItemData[] =>
-      availableOptions
-        .filter((option) => !ids.includes(option.id))
-        .filter((option) => option.label.toLowerCase().includes(text.toLowerCase()))
-        .map((option) => ({ id: option.id, label: option.label, hue: option.hue as any })),
-    [availableOptions],
-  );
-
-  const handleUpdate = useCallback(
-    (ids: string[]) => {
-      if (ids.length === 0) {
-        onValueChange('object', undefined);
-        return;
-      }
-
-      const refs = ids
-        .map((id) => {
-          const item = availableOptions.find((option) => option.id === id);
-          if (item) {
-            const dxn = DXN.parse(item.id);
-            return Ref.fromDXN(dxn);
-          }
-          return null;
-        })
-        .filter(isNonNullable);
-
-      if (array) {
-        onValueChange('object', refs);
-      } else {
-        onValueChange('object', refs[0]);
-      }
-    },
-    [availableOptions, array, onValueChange],
-  );
-
-  const tagPickerMode: TagPickerMode = useMemo(() => (array ? 'multi-select' : 'single-select'), [array]);
-
-  if (!refTypeInfo) {
-    return null;
-  }
-
-  const { status, error } = restInputProps.getStatus();
-
-  const items = handleGetValue();
-
-  // NOTE(thure): I left both predicates in-place in case we decide to add variants which do render readonly but empty values.
-  return disabled && items.length < 1 ? null : (
-    <Input.Root validationValence={status}>
-      {!inputOnly && <InputHeader error={error} label={label} />}
-      <div data-no-submit>
-        {disabled ? (
-          items.length < 1 ? (
-            <p className={mx(descriptionText, 'mbe-2')}>{t('empty readonly ref field label')}</p>
-          ) : (
-            items.map((item) => (
-              <DxRefTag key={item.id} refid={item.id} rootclassname='mie-1' style={{ marginInlineEnd: '.25rem' }}>
-                {item.label}
-              </DxRefTag>
-            ))
-          )
-        ) : (
-          <TagPicker
-            readonly={disabled}
-            items={items}
-            mode={tagPickerMode}
-            onBlur={(event) => onBlur(event as unknown as FocusEvent<HTMLElement>)}
-            onUpdate={handleUpdate}
-            onSearch={handleSearch}
-            classNames='bg-inputSurface p-1.5 rounded-sm'
-          />
-        )}
-      </div>
-      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
-    </Input.Root>
-  );
-};
-
-const RefFieldFallback = ({
-  type,
-  label,
-  disabled,
-  placeholder,
-  inputOnly,
-  getValue,
-  onValueChange,
-  ...restInputProps
-}: InputProps) => {
-  const handleOnValueChange = (_type: any, dxnString: string) => {
-    const dxn = DXN.tryParse(dxnString);
-    if (dxn) {
-      onValueChange?.('object', Ref.fromDXN(dxn));
-    } else if (dxnString === '') {
-      onValueChange?.('object', undefined);
-    } else {
-      onValueChange?.('string', dxnString);
-    }
-  };
-
-  const handleGetValue = () => {
-    const formValue = getValue();
-    if (typeof formValue === 'string') {
-      return formValue;
-    }
-    if (Ref.isRef(formValue)) {
-      return formValue.dxn.toString();
-    }
-
-    return undefined;
-  };
-
-  return (
-    <TextInput
-      type={type}
-      label={label}
-      disabled={disabled}
-      placeholder={placeholder}
-      inputOnly={inputOnly}
-      getValue={handleGetValue as <V>() => V | undefined}
-      onValueChange={handleOnValueChange}
-      {...restInputProps}
-    />
-  );
-};

package/src/components/Form/custom/GeoPointInput.tsx

@@ -1,72 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
-
-import { GeoLocation, type GeoPoint } from '@dxos/echo-schema';
-import { Input, useTranslation } from '@dxos/react-ui';
-import { safeParseFloat } from '@dxos/util';
-
-import { translationKey } from '../../../translations';
-import { InputHeader, type InputProps } from '../Input';
-
-export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onValueChange, onBlur }: InputProps) => {
-  const { t } = useTranslation(translationKey);
-  const { status, error } = getStatus();
-  const geoPoint = useMemo<GeoPoint>(() => getValue<GeoPoint>() ?? [0, 0], [getValue]);
-  const geoLocation = useMemo(() => GeoLocation.fromGeoPoint(geoPoint), [geoPoint]);
-
-  const [longitudeText, setLongitudeText] = useState(geoLocation.longitude?.toString());
-  const [latitudeText, setLatitudeText] = useState(geoLocation.latitude?.toString());
-
-  useEffect(() => {
-    const location = GeoLocation.fromGeoPoint(geoPoint);
-    setLongitudeText(location.longitude.toString());
-    setLatitudeText(location.latitude.toString());
-  }, [geoPoint]);
-
-  const handleCoordinateChange = 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<GeoPoint>() ?? [0, 0]);
-            const newLocation = { ...currentLocation, [coordinateType]: coord };
-            const newValue = GeoLocation.toGeoPoint(newLocation);
-            onValueChange(type, newValue);
-          }
-        }
-      },
-    [getValue, onValueChange, type],
-  );
-
-  return (
-    <Input.Root validationValence={status}>
-      <InputHeader error={error} label={label} />
-      <div role='none' className='grid grid-cols-2 gap-2'>
-        <Input.TextInput
-          type='text'
-          pattern='^-?[0-9]*\.?[0-9]*$'
-          disabled={disabled}
-          placeholder={t('placeholder latitude')}
-          value={latitudeText}
-          onChange={handleCoordinateChange('latitude', setLatitudeText)}
-          onBlur={onBlur}
-        />
-        <Input.TextInput
-          type='text'
-          pattern='^-?[0-9]*\.?[0-9]*$'
-          disabled={disabled}
-          placeholder={t('placeholder longitude')}
-          value={longitudeText}
-          onChange={handleCoordinateChange('longitude', setLongitudeText)}
-          onBlur={onBlur}
-        />
-      </div>
-    </Input.Root>
-  );
-};

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

@@ -1,62 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
-import React, { useState } from 'react';
-
-import { type SelectOption, SelectOptionSchema } from '@dxos/echo-schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { translations } from '../../../translations';
-import { TestLayout, TestPanel } from '../../testing';
-import { Form } from '../Form';
-
-import { SelectOptionInput } from './SelectOptionsInput';
-
-const schema = Schema.Struct({
-  options: Schema.Array(SelectOptionSchema).pipe(Schema.mutable),
-}).pipe(Schema.mutable);
-
-const DefaultStory = () => {
-  const [values, setValues] = useState<{ options: SelectOption[] }>({
-    // TODO(Zaymon): Pick colors from our limited set.
-    options: [
-      { id: 'opt_1', title: 'First option', color: 'amber' },
-      { id: 'opt_2', title: 'Second option', color: 'emerald' },
-      { id: 'opt_3', title: 'Third option', color: 'rose' },
-    ],
-  });
-
-  return (
-    <TestLayout>
-      <TestPanel>
-        <Form
-          schema={schema}
-          values={values}
-          onSave={(vals) => setValues(vals)}
-          Custom={{ options: SelectOptionInput }}
-        />
-      </TestPanel>
-    </TestLayout>
-  );
-};
-
-const meta: Meta = {
-  title: 'ui/react-ui-form/SelectOptionsInput',
-  component: SelectOptionInput,
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {};

package/src/components/Form/custom/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './GeoPointInput';
-export * from './SelectOptionsInput';
-export * from './TupleInput';

package/src/components/Form/factory.tsx

@@ -1,31 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { FormatEnum } from '@dxos/echo-schema';
-import { type SimpleType } from '@dxos/effect';
-
-import { GeoPointInput } from './custom';
-import { BooleanInput, MarkdownInput, NumberInput, TextInput } from './Defaults';
-import { type InputComponent } from './Input';
-
-/**
- * Get property input component.
- */
-export const getInputComponent = (type: SimpleType, format?: FormatEnum | string): InputComponent | undefined => {
-  switch (format) {
-    case FormatEnum.GeoPoint:
-      return GeoPointInput;
-    case FormatEnum.Markdown:
-      return MarkdownInput;
-  }
-
-  switch (type) {
-    case 'string':
-      return TextInput;
-    case 'number':
-      return NumberInput;
-    case 'boolean':
-      return BooleanInput;
-  }
-};

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

@@ -1,63 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { live } from '@dxos/live-object';
-import { TestSchema, type TestType, testData, testView } from '@dxos/schema/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { translations } from '../../translations';
-import { TestLayout, TestPanel } from '../testing';
-
-import { DeprecatedForm, type DeprecatedFormProps } from './Form';
-
-const DefaultStory = (props: DeprecatedFormProps) => (
-  <TestLayout json={{ props }}>
-    <TestPanel>
-      <DeprecatedForm {...props} />
-    </TestPanel>
-  </TestLayout>
-);
-
-const meta: Meta<typeof DefaultStory> = {
-  title: 'ui/react-ui-form/DeprecatedForm',
-  component: DeprecatedForm,
-  render: DefaultStory,
-  decorators: [withLayout({ fullscreen: true }), withTheme],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<DeprecatedFormProps<TestType>>;
-
-export const Default: Story = {
-  args: {
-    object: live(testData),
-    projection: live(testView).projection,
-    schema: TestSchema,
-  },
-};
-
-export const Empty: Story = {
-  args: {
-    projection: live(testView).projection,
-    schema: TestSchema,
-  },
-};
-
-export const Readonly: Story = {
-  args: {
-    object: live(testData),
-    projection: live(testView).projection,
-    schema: TestSchema,
-    readonly: true,
-  },
-};

package/src/components/deprecated/Form.tsx

@@ -1,119 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Option, type Schema, SchemaAST, pipe } from 'effect';
-import React, { useState } from 'react';
-
-import { findProperty } from '@dxos/effect';
-import { Input, type TextInputProps as NativeTextInputProps, type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { type Projection, getFieldValue, setFieldValue } from '@dxos/schema';
-
-export type DeprecatedFormProps<T extends {} = {}> = ThemedClassName<{
-  projection: Projection;
-  object: T;
-  schema?: Schema.Schema<T>;
-  readonly?: boolean;
-}>;
-
-/**
- * Schema-based object form.
- */
-export const DeprecatedForm = <T extends {} = {}>({
-  classNames,
-  projection,
-  object,
-  schema,
-  readonly,
-}: DeprecatedFormProps<T>) => {
-  return (
-    <div role='none' className={mx('flex flex-col w-full gap-2 p-2', classNames)}>
-      {projection.fields.map((field) => {
-        const prop = schema && findProperty(schema, field.path);
-        const title = (prop && pipe(SchemaAST.getTitleAnnotation(prop), Option.getOrUndefined)) ?? '';
-        const description = (prop && pipe(SchemaAST.getDescriptionAnnotation(prop), Option.getOrUndefined)) ?? title;
-        // const format =
-        //   (prop && (getPatternAnnotation(prop) ?? (SchemaAST.isNumberKeyword(prop) && RealNumberFormat))) || undefined;
-
-        //
-        // Boolean
-        //
-
-        if (prop && SchemaAST.isBooleanKeyword(prop)) {
-          const value = object && getFieldValue(object, field);
-          const onChange = (checked: boolean) => {
-            setFieldValue(object, field, checked);
-          };
-
-          return (
-            <div key={field.path} className='flex flex-col w-full gap-1'>
-              <Input.Root>
-                <Input.Label classNames='px-1'>{title}</Input.Label>
-                <Input.Switch disabled={readonly} checked={!!value} onCheckedChange={(checked) => onChange(checked)} />
-              </Input.Root>
-            </div>
-          );
-        }
-
-        //
-        // Strings
-        // TODO(burdon): Other types:
-        //  - RichText editor
-        //  - Numbers (with formatting: commas, currency, etc.)
-        //  - Date (https://ark-ui.com/react/docs/components/date-picker)
-        //  - Enum (single/multi-select)
-        //
-
-        const value = object ? getFieldValue(object, field) : undefined;
-
-        return (
-          <div key={field.path} className='flex flex-col w-full gap-1'>
-            <Input.Root>
-              <Input.Label classNames='px-1'>{title}</Input.Label>
-              <TextInput
-                disabled={readonly}
-                placeholder={description}
-                // format={format}
-                value={value ? String(value) : ''}
-                onChange={(event) => setFieldValue(object, field, event.target.value)}
-              />
-            </Input.Root>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-type TextInputProps = {
-  // format?: PatternAnnotation;
-} & Omit<NativeTextInputProps, 'style'>;
-
-/**
- * @deprecated
- */
-// TODO(burdon): Remove.
-// TODO(burdon): Use schema validation directly.
-const TextInput = ({ onChange, ...props }: TextInputProps) => {
-  const [valid, _setValid] = useState(true);
-
-  const handleChange: NativeTextInputProps['onChange'] = (ev) => {
-    // const text = ev.target.value;
-    // if (!format?.filter || text.match(format.filter)) {
-    onChange?.(ev);
-    //   if (format?.valid) {
-    //     setValid(format.valid.test(text));
-    //   }
-    // }
-  };
-
-  return (
-    <Input.TextInput
-      {...props}
-      // TODO(burdon): validationValence on Input.
-      style={valid ? {} : ({ '--tw-ring-color': 'red' } as any)}
-      onChange={handleChange}
-    />
-  );
-};

package/src/components/deprecated/FormInput.tsx

@@ -1,71 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type JSX, type PropsWithChildren } from 'react';
-
-import { Input, type ThemedClassName } from '@dxos/react-ui';
-import { mx, textBlockWidth } from '@dxos/react-ui-theme';
-
-/**
- * @deprecated
- */
-export const DeprecatedFormContainer = ({ children, classNames }: ThemedClassName<PropsWithChildren>) => {
-  return (
-    <div role='none' className='container-max-width p-4 justify-center overflow-x-hidden overflow-y-auto'>
-      <div role='form' className={mx('flex flex-col', textBlockWidth, classNames)}>
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export type DeprecatedFormInputProps = {
-  label: string;
-  description?: JSX.Element;
-  secondary?: JSX.Element;
-};
-
-/**
- * @deprecated
- */
-export const DeprecatedFormInput = ({
-  label,
-  description,
-  secondary,
-  children,
-}: PropsWithChildren<DeprecatedFormInputProps>) => {
-  const primary = (
-    <div role='none' className='flex w-full gap-4 py-1'>
-      <Input.Root>
-        <div role='none' className='flex flex-col w-full'>
-          <Input.Label classNames='flex min-bs-[--rail-action] items-center' style={{ fontSize: 'unset' }}>
-            {label}
-          </Input.Label>
-          {description && (
-            <Input.DescriptionAndValidation classNames='mbs-0.5'>
-              <Input.Description>{description}</Input.Description>
-            </Input.DescriptionAndValidation>
-          )}
-        </div>
-
-        <div role='none'>
-          <div role='none' className='flex min-bs-[--rail-action] items-center'>
-            {children}
-          </div>
-        </div>
-      </Input.Root>
-    </div>
-  );
-
-  if (secondary) {
-    return (
-      <div role='none'>
-        {primary}
-        {secondary}
-      </div>
-    );
-  }
-
-  return primary;
-};

package/src/components/deprecated/index.ts

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