@dxos/react-ui-form 0.7.5-labs.e27f9b9 → 0.7.5-main.2567c87

package/src/components/Form/ArrayField.tsx

@@ -1,111 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { pipe } from 'effect';
-import { capitalize } from 'effect/String';
-import React, { useCallback, useMemo } from 'react';
-
-import { AST } from '@dxos/echo-schema';
-import { findNode, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from '@dxos/effect';
-import { invariant } from '@dxos/invariant';
-import { IconButton, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
-
-import { type ComponentLookup } from './Form';
-import { FormField } from './FormContent';
-import { useFormValues, type FormInputStateProps } from './FormContext';
-import { InputHeader, type InputComponent } from './Input';
-import { translationKey } from '../../translations';
-
-const padding = 'px-2';
-
-type ArrayFieldProps = {
-  property: SchemaProperty<any>;
-  readonly?: boolean;
-  inputProps: FormInputStateProps;
-  path?: (string | number)[];
-  Custom?: Partial<Record<string, InputComponent>>;
-  lookupComponent?: ComponentLookup;
-};
-
-export const ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }: ArrayFieldProps) => {
-  const { t } = useTranslation(translationKey);
-  const { ast, name, type, title } = property;
-  const values = useFormValues(path ?? []) as any[];
-  invariant(Array.isArray(values), `Values at path ${path?.join('.')} must be an array.`);
-  const label = title ?? pipe(name, capitalize);
-
-  const tupleType = findNode(ast, AST.isTupleType);
-  const elementType = (tupleType as AST.TupleType | undefined)?.rest[0]?.type;
-
-  const getDefaultObjectValue = (typeNode: AST.AST): any => {
-    const baseNode = findNode(typeNode, isDiscriminatedUnion);
-    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, {}) : findNode(typeNode, AST.isTypeLiteral);
-    if (!typeLiteral) {
-      return {};
-    }
-
-    return Object.fromEntries(getSchemaProperties(typeLiteral, {}).map((prop) => [prop.name, prop.defaultValue]));
-  };
-
-  const newValue = useMemo(() => {
-    if (type === 'object' && elementType) {
-      return getDefaultObjectValue(elementType);
-    } else {
-      return SimpleType.getDefaultValue(type);
-    }
-  }, [type, elementType]);
-
-  const handleAdd = useCallback(() => {
-    inputProps.onValueChange(type, [...values, newValue]);
-  }, [type, elementType, inputProps, newValue, values]);
-
-  const handleRemove = useCallback(
-    (index: number) => {
-      const newValues = values.filter((_, i) => i !== index);
-      inputProps.onValueChange(type, newValues);
-    },
-    [type, inputProps, values],
-  );
-
-  if (!elementType) {
-    return null;
-  }
-
-  return (
-    <div role='none' className={mx(padding)}>
-      <InputHeader>{label}</InputHeader>
-      <div role='none' className='flex flex-col gap-1'>
-        {values.map((_value, index) => (
-          <div key={index} role='none' className='flex items-center gap-1'>
-            <div role='none' className='flex-1'>
-              <FormField
-                property={{
-                  ...property,
-                  array: false, // NOTE(ZaymonFC): This breaks arrays of arrays but ¯\_(ツ)_/¯. Ping me if you need that.
-                  ast: elementType,
-                }}
-                path={[...(path ?? []), index]}
-                readonly={readonly}
-                inline
-                Custom={Custom}
-                lookupComponent={lookupComponent}
-              />
-            </div>
-            <IconButton
-              icon='ph--trash--regular'
-              iconOnly
-              label={t('button remove')}
-              onClick={() => handleRemove(index)}
-            />
-          </div>
-        ))}
-      </div>
-      <div role='none' className='flex justify-between items-center plb-1'>
-        <IconButton icon='ph--plus--regular' iconOnly label={t('button add')} onClick={handleAdd} />
-      </div>
-    </div>
-  );
-};

package/src/components/Form/FormActions.tsx

@@ -1,41 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { IconButton, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-import { useFormContext } from './FormContext';
-import { translationKey } from '../../translations';
-
-export type FormActionsProps = {
-  readonly?: boolean;
-  onCancel?: () => void;
-};
-
-export const FormActions = ({ onCancel, readonly }: FormActionsProps) => {
-  const { t } = useTranslation(translationKey);
-  const { canSave, handleSave } = useFormContext();
-
-  return (
-    <div role='none' className='flex justify-center'>
-      <div role='none' className={mx(onCancel && !readonly && 'grid grid-cols-2 gap-2')}>
-        {onCancel && !readonly && (
-          <IconButton data-testid='cancel-button' icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />
-        )}
-        {handleSave && (
-          <IconButton
-            type='submit'
-            data-testid='save-button'
-            disabled={!canSave}
-            icon='ph--check--regular'
-            label={t('button save')}
-            onClick={handleSave}
-          />
-        )}
-      </div>
-    </div>
-  );
-};

package/src/components/Form/FormContent.tsx

@@ -1,173 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { pipe } from 'effect';
-import { capitalize } from 'effect/String';
-import React, { useMemo } from 'react';
-
-import { AST, S } from '@dxos/echo-schema';
-import { createJsonPath, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
-import { mx } from '@dxos/react-ui-theme';
-import { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
-import { isNotFalsy } from '@dxos/util';
-
-import { ArrayField } from './ArrayField';
-import { SelectInput } from './Defaults';
-import { type ComponentLookup } from './Form';
-import { useInputProps, useFormValues } from './FormContext';
-import { type InputComponent } from './Input';
-import { getInputComponent } from './factory';
-
-export type FormContentProps = {
-  schema: S.Schema.All;
-  path?: (string | number)[];
-  filter?: (props: SchemaProperty<any>[]) => SchemaProperty<any>[];
-  sort?: string[];
-  readonly?: boolean;
-  lookupComponent?: ComponentLookup;
-  Custom?: Partial<Record<string, InputComponent>>;
-};
-
-export type FormFieldProps = {
-  property: SchemaProperty<any>;
-  path?: (string | number)[];
-  readonly?: boolean;
-  /** Used to indicate if input should be presented inline (e.g. for array items). */
-  inline?: boolean;
-  lookupComponent?: ComponentLookup;
-  Custom?: Partial<Record<string, InputComponent>>;
-};
-
-export const FormField = ({ property, path, readonly, inline, lookupComponent, Custom }: FormFieldProps) => {
-  const inputProps = useInputProps(path);
-  const { ast, name, type, format, title, description, options, examples, array } = property;
-
-  const label = useMemo(() => title ?? pipe(name, capitalize), [title, name]);
-  const placeholder = useMemo(
-    () => (examples?.length ? `Example: "${examples[0]}"` : description),
-    [examples, description],
-  );
-
-  const FoundComponent = lookupComponent?.({
-    prop: name,
-    schema: S.make(ast),
-    inputProps: {
-      type,
-      format,
-      label,
-      disabled: readonly,
-      placeholder,
-      ...inputProps,
-    },
-  });
-
-  if (FoundComponent) {
-    return <div role='none'>{FoundComponent}</div>;
-  }
-
-  const jsonPath = createJsonPath(path ?? []);
-  const CustomComponent = Custom?.[jsonPath];
-  if (CustomComponent) {
-    return (
-      // TODO(ZaymonFC): We should try to remove this div wrapper.
-      <div role='none'>
-        <CustomComponent
-          type={type}
-          format={format}
-          label={label}
-          inputOnly={inline}
-          placeholder={placeholder}
-          disabled={readonly}
-          {...inputProps}
-        />
-      </div>
-    );
-  }
-
-  if (array) {
-    return <ArrayField property={property} path={path} inputProps={inputProps} readonly={readonly} Custom={Custom} />;
-  }
-
-  const InputComponent = getInputComponent(type, format);
-  if (InputComponent) {
-    return (
-      <div role='none'>
-        <InputComponent
-          type={type}
-          format={format}
-          label={label}
-          inputOnly={inline}
-          placeholder={placeholder}
-          disabled={readonly}
-          {...inputProps}
-        />
-      </div>
-    );
-  }
-
-  if (options) {
-    return (
-      <div role='none'>
-        <SelectInput
-          type={type}
-          format={format}
-          disabled={readonly}
-          inputOnly={inline}
-          label={label}
-          options={options.map((option) => ({ value: option, label: String(option) }))}
-          placeholder={placeholder}
-          {...inputProps}
-        />
-      </div>
-    );
-  }
-
-  if (type === 'object') {
-    const baseNode = findNode(ast, isDiscriminatedUnion);
-    const typeLiteral = baseNode
-      ? getDiscriminatedType(baseNode, inputProps.getValue() as any)
-      : findNode(ast, AST.isTypeLiteral);
-
-    if (typeLiteral) {
-      return (
-        <div role='none'>
-          {!inline && <div>{label}</div>}
-          <FormFields schema={S.make(typeLiteral)} path={path} readonly={readonly} Custom={Custom} />
-        </div>
-      );
-    }
-  }
-
-  return null;
-};
-
-export const FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custom }: FormContentProps) => {
-  const values = useFormValues(path);
-
-  const properties = useMemo(() => {
-    const props = getSchemaProperties(schema.ast, values);
-    const filtered = filter ? filter(props) : props;
-
-    return sort ? filtered.sort((a, b) => sort.indexOf(a.name) - sort.indexOf(b.name)) : filtered;
-  }, [schema, values, filter, sort]);
-
-  return (
-    <div role='form' className={mx('flex flex-col w-full gap-2 py-2')}>
-      {properties
-        .map((property) => {
-          return (
-            <FormField
-              key={property.name}
-              property={property}
-              path={[...(path ?? []), property.name]}
-              readonly={readonly}
-              lookupComponent={lookupComponent}
-              Custom={Custom}
-            />
-          );
-        })
-        .filter(isNotFalsy)}
-    </div>
-  );
-};

package/src/components/Form/FormContext.tsx

@@ -1,48 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { createContext, useContext, type FocusEvent, type PropsWithChildren } from 'react';
-
-import { raise } from '@dxos/debug';
-import { type BaseObject, getValue } from '@dxos/echo-schema';
-import { createJsonPath, type SimpleType } from '@dxos/effect';
-
-import { type FormHandler, type FormOptions, useForm } from '../../hooks';
-
-type FormContextValue<T extends BaseObject> = FormHandler<T>;
-
-const FormContext = createContext<FormContextValue<any> | undefined>(undefined);
-
-export const useFormContext = <T extends BaseObject>(): FormContextValue<T> => {
-  return useContext(FormContext) ?? raise(new Error('Missing FormContext'));
-};
-
-export const useFormValues = (path: (string | number)[] = []): any => {
-  const { values: formValues } = useFormContext();
-  const jsonPath = createJsonPath(path);
-  return getValue(formValues, jsonPath) as BaseObject;
-};
-
-export type FormInputStateProps = {
-  getStatus: () => { status?: 'error'; error?: string };
-  getValue: <V>() => V | undefined;
-  onValueChange: (type: SimpleType, value: any) => void;
-  onBlur: (event: FocusEvent<HTMLElement>) => void;
-};
-
-export const useInputProps = (path: (string | number)[] = []): FormInputStateProps => {
-  const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
-
-  return {
-    getStatus: () => getStatus(path),
-    getValue: () => getFormValue(path),
-    onValueChange: (type: SimpleType, value: any) => onValueChange(path, type, value),
-    onBlur: () => onTouched(path),
-  };
-};
-
-export const FormProvider = ({ children, ...formOptions }: PropsWithChildren<FormOptions<any>>) => {
-  const formHandler = useForm(formOptions);
-  return <FormContext.Provider value={formHandler}>{children}</FormContext.Provider>;
-};

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

@@ -1,58 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-
-import { S, SelectOptionSchema, type SelectOption } from '@dxos/echo-schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { SelectOptionInput } from './SelectOptionsInput';
-import translations from '../../../translations';
-import { TestLayout, TestPanel } from '../../testing';
-import { Form } from '../Form';
-
-const schema = S.Struct({
-  options: S.Array(SelectOptionSchema).pipe(S.mutable),
-}).pipe(S.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,
-  decorators: [withTheme, withLayout({ tooltips: true })],
-  parameters: { translations },
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
-  render: DefaultStory,
-};

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

@@ -1,192 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback, useEffect, useState, type ChangeEvent, useRef } from 'react';
-
-import { type SelectOption } from '@dxos/echo-schema';
-import { PublicKey } from '@dxos/keys';
-import { type ChromaticPalette, Icon, IconButton, Input, Tag, Toolbar, useTranslation } from '@dxos/react-ui';
-import { List } from '@dxos/react-ui-list';
-import { HuePickerToolbarButton } from '@dxos/react-ui-pickers';
-import { hueTokenThemes, mx } from '@dxos/react-ui-theme';
-
-import { translationKey } from '../../../translations';
-import { InputHeader, type InputProps } from '../Input';
-
-// TODO(ZaymonFC): Handle disabled.
-export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue, onValueChange }: InputProps) => {
-  const [selected, setSelectedId] = useState<string | null>(null);
-  const [isNewOption, setIsNewOption] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const { t } = useTranslation(translationKey);
-  const { status, error } = getStatus();
-  const options = getValue<SelectOption[] | undefined>();
-
-  // Initialization.
-  useEffect(() => {
-    if (options === undefined) {
-      onValueChange(type, []);
-    }
-  }, [options, onValueChange, type]);
-
-  const randomHue = () => {
-    const usedHues = new Set(options?.map((option) => option.color) ?? []);
-    const hueKeys = Object.keys(hueTokenThemes) as Array<keyof typeof hueTokenThemes>;
-
-    // Pick a random unused option from hueTokenThemes.
-    const unusedHues = hueKeys.filter((hue) => !usedHues.has(hue));
-    if (unusedHues.length > 0) {
-      return unusedHues[Math.floor(Math.random() * unusedHues.length)];
-    }
-
-    // Pick a random one that hasn't been used in the last three options
-    const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
-    const availableHues = hueKeys.filter((hue) => !lastThree.has(hue));
-    return (
-      availableHues[Math.floor(Math.random() * availableHues.length)] ??
-      hueKeys[Math.floor(Math.random() * hueKeys.length)]
-    );
-  };
-
-  const handleAdd = useCallback(() => {
-    const newId = PublicKey.random().truncate();
-    const newOption = { id: newId, title: '', color: randomHue() };
-    onValueChange(type, [...(options ?? []), newOption]);
-    setSelectedId(newId);
-    setIsNewOption(true);
-  }, [options, type, onValueChange]);
-
-  const handleDelete = useCallback(
-    (id: string) => {
-      const newOptions = options?.filter((option) => option.id !== id) ?? [];
-      onValueChange(type, newOptions);
-      setSelectedId(null);
-    },
-    [options, type, onValueChange],
-  );
-
-  const handleMove = useCallback(
-    (from: number, to: number) => {
-      if (!options) {
-        return;
-      }
-
-      const newOptions = [...options];
-      const [removed] = newOptions.splice(from, 1);
-      newOptions.splice(to, 0, removed);
-      onValueChange(type, newOptions);
-    },
-    [options, type, onValueChange],
-  );
-
-  const handleClick = useCallback((id: string) => {
-    setSelectedId((current) => (current === id ? null : id));
-  }, []);
-
-  const handleTitleChange = useCallback(
-    (id: string) => (e: ChangeEvent<HTMLInputElement>) => {
-      const newOptions = options?.map((o) => (o.id === id ? { ...o, title: e.target.value } : o));
-      onValueChange(type, newOptions ?? []);
-    },
-    [options, type, onValueChange],
-  );
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      setSelectedId(null);
-    }
-  }, []);
-
-  const handleColorChange = useCallback(
-    (id: string) => (hue: string) => {
-      const newOptions = options?.map((o) => (o.id === id ? { ...o, color: hue } : o));
-      onValueChange(type, newOptions ?? []);
-    },
-    [options, type, onValueChange],
-  );
-
-  useEffect(() => {
-    if (selected && isNewOption && inputRef.current) {
-      inputRef.current.focus();
-      setIsNewOption(false);
-    }
-  }, [selected, isNewOption]);
-
-  return (
-    <Input.Root validationValence={status}>
-      <InputHeader error={error}>
-        <Input.Label>{label}</Input.Label>
-      </InputHeader>
-      <div role='none'>
-        {options && (
-          <List.Root items={options} isItem={(item) => true} onMove={handleMove}>
-            {({ items }) => (
-              <div role='list' className='w-full overflow-auto'>
-                {items?.map((item) => (
-                  <div key={item.id}>
-                    <List.Item
-                      role='button'
-                      item={item}
-                      classNames={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
-                      aria-expanded={selected === item.id}
-                    >
-                      <div className='flex items-center'>
-                        <List.ItemDragHandle />
-                        <List.ItemTitle onClick={() => handleClick(item.id)} classNames='flex-1'>
-                          {/* TODO(ZaymonFC): Move spacer into Tag component. */}
-                          <Tag palette={item.color as ChromaticPalette}>{item.title || '\u200b'}</Tag>
-                        </List.ItemTitle>
-                        <Icon
-                          icon={selected === item.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
-                          onClick={() => handleClick(item.id)}
-                        />
-                      </div>
-                      {selected === item.id && (
-                        <div className='mis-4 mbs-2 flex flex-col gap-1'>
-                          {/* 16px to match drag handle width. */}
-                          <Input.Label classNames='text-xs'>{t('select option label')}</Input.Label>
-                          <div className='flex flex-row items-center gap-1'>
-                            <Input.TextInput
-                              placeholder={t('select option label placeholder')}
-                              ref={selected === item.id ? inputRef : undefined}
-                              value={item.title}
-                              onChange={handleTitleChange(item.id)}
-                              onKeyDown={handleKeyDown}
-                              classNames='flex-1'
-                            />
-                            <Toolbar.Root classNames='p-0 m-0 !is-auto'>
-                              <HuePickerToolbarButton hue={item.color} onChangeHue={handleColorChange(item.id)} />
-                            </Toolbar.Root>
-                            <IconButton
-                              icon='ph--trash--fill'
-                              iconOnly
-                              label={t('select option delete')}
-                              onClick={() => handleDelete(item.id)}
-                            />
-                          </div>
-                        </div>
-                      )}
-                    </List.Item>
-                  </div>
-                ))}
-                <div role='listitem'>
-                  <div
-                    role='button'
-                    className={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
-                    onClick={handleAdd}
-                  >
-                    <div className='flex items-center gap-1'>
-                      <Icon icon='ph--plus--regular' />
-                      <span className='text-sm'>{t('select option add')}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-          </List.Root>
-        )}
-      </div>
-    </Input.Root>
-  );
-};