@dxos/react-ui-form 0.8.4-main.70d3990 → 0.8.4-main.74a063c4e0

package/src/components/ControlSection/ControlSection.stories.tsx

@@ -1,38 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { translations } from '../../translations';
-
-import { ControlPage, ControlSection } from './ControlSection';
-
-const meta = {
-  title: 'ui/react-ui-form/ControlSection',
-  component: ControlSection,
-  render: (args) => (
-    <ControlPage classNames='is-[40rem]'>
-      <ControlSection {...args} />
-    </ControlPage>
-  ),
-  decorators: [withTheme],
-  parameters: {
-    layout: 'centered',
-    translations,
-  },
-} satisfies Meta<typeof ControlSection>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    title: 'Control Section',
-    description: 'This is a control section',
-  },
-};

package/src/components/ControlSection/ControlSection.tsx

@@ -1,153 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
-
-import {
-  Button,
-  type ButtonProps,
-  Input,
-  type Label,
-  type ThemedClassName,
-  toLocalizedString,
-  useTranslation,
-} from '@dxos/react-ui';
-import { StackItem } from '@dxos/react-ui-stack';
-import { mx } from '@dxos/react-ui-theme';
-
-import { translationKey } from '../../translations';
-
-export type ControlPageProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
-
-export const ControlPage = ({ children, classNames, ...props }: ControlPageProps) => {
-  return (
-    <StackItem.Content scrollable classNames='[--control-spacing:var(--dx-trimMd)]'>
-      <div role='none' className={mx('pli-cardSpacingInline pbe-trimLg', classNames)} {...props}>
-        {children}
-      </div>
-    </StackItem.Content>
-  );
-};
-
-export type ControlSectionProps = PropsWithChildren<{
-  title: Label;
-  description?: Label;
-}>;
-
-export const ControlSection = ({ title, description, children }: ControlSectionProps) => {
-  return (
-    <>
-      <ControlSectionHeading title={title} description={description} />
-      {children}
-    </>
-  );
-};
-
-export const ControlSectionHeading = ({ title, description }: Omit<ControlSectionProps, 'children'>) => {
-  const { t } = useTranslation(translationKey);
-  return (
-    <>
-      <h2 className='pli-trimMd container-max-width text-xl mbs-trimLg mbe-trimMd'>{toLocalizedString(title, t)}</h2>
-      {description && (
-        <p className='pli-trimMd mlb-trimMd container-max-width text-description'>
-          {toLocalizedString(description, t)}
-        </p>
-      )}
-    </>
-  );
-};
-
-export const ControlGroupButton = ({ classNames, ...props }: ButtonProps) => {
-  return <Button {...props} classNames={['md:col-span-2', classNames]} />;
-};
-
-export type ControlGroupProps = ThemedClassName<PropsWithChildren>;
-
-export const ControlGroup = ({ children, classNames }: ControlGroupProps) => (
-  <div
-    role='none'
-    className={mx(
-      'group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-trimMd',
-      '[--control-spacing:0px] [&_input]:justify-self-end [&_button]:justify-self-end',
-      classNames,
-    )}
-  >
-    {children}
-  </div>
-);
-
-export const ControlFrame = ({ children }: ControlGroupProps) => (
-  <div
-    role='none'
-    className={mx(
-      'container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-trimSm md:gap-trimMd p-trimMd',
-      'border border-separator rounded-md',
-    )}
-  >
-    {children}
-  </div>
-);
-
-export const controlItemClasses = mx([
-  'container-max-width grid md:col-span-2 grid-cols-subgrid gap-trimSm items-center',
-  // TODO(burdon): Use grid gap consistently or apply margins consistently?
-  'mlb-[--control-spacing] *:first:!mbs-0 *:last:!mbe-0 pli-trimMd plb-trimMd',
-  'border border-separator rounded-md',
-]);
-
-const controlItemTitleClasses = 'mbe-0 text-lg text-baseText font-normal';
-const controlItemDescriptionClasses = 'mlb-trimSm md:mbe-0 text-base text-description';
-
-export type ControlItemProps = PropsWithChildren<{
-  title: Label;
-  description?: Label;
-}>;
-
-export const ControlItem = ({ title, description, children }: ControlItemProps) => {
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <div className={controlItemClasses}>
-      <div role='none'>
-        <h3 className={controlItemTitleClasses}>{toLocalizedString(title, t)}</h3>
-        {description && <p className={controlItemDescriptionClasses}>{toLocalizedString(description, t)}</p>}
-      </div>
-      {children}
-    </div>
-  );
-};
-
-export const ControlItemInput = ({ title, description, children }: ControlItemProps) => {
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <Input.Root>
-      <div className={controlItemClasses}>
-        <div role='none'>
-          <Input.Label classNames={controlItemTitleClasses}>{toLocalizedString(title, t)}</Input.Label>
-          {description && (
-            <Input.DescriptionAndValidation>
-              <Input.Description classNames={controlItemDescriptionClasses}>
-                {toLocalizedString(description, t)}
-              </Input.Description>
-            </Input.DescriptionAndValidation>
-          )}
-        </div>
-        {children}
-      </div>
-    </Input.Root>
-  );
-};
-
-export const ControlFrameItem = ({ title, description, children }: ControlItemProps) => {
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <div role='group' className='min-is-0'>
-      <h3 className='text-lg mbe-2'>{toLocalizedString(title, t)}</h3>
-      {description && <p className='mlb-trimSm md:mbe-0 text-description'>{toLocalizedString(description, t)}</p>}
-      {children}
-    </div>
-  );
-};

package/src/components/Form/ArrayField.tsx

@@ -1,127 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Function from 'effect/Function';
-import * as SchemaAST from 'effect/SchemaAST';
-import * as String from 'effect/String';
-import React, { Fragment, useCallback } from 'react';
-
-import { SimpleType, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
-import { invariant } from '@dxos/invariant';
-import { IconButton, useTranslation } from '@dxos/react-ui';
-import { type SchemaProperty, getSchemaProperties } from '@dxos/schema';
-
-import { translationKey } from '../../translations';
-import { findArrayElementType } from '../../util';
-
-import { type ComponentLookup } from './Form';
-import { FormField, type FormFieldProps } from './FormContent';
-import { type FormInputStateProps, useFormValues } from './FormContext';
-import { type InputComponent, InputHeader } from './Input';
-
-type ArrayFieldProps = {
-  property: SchemaProperty<any>;
-  inputProps: FormInputStateProps;
-  path?: (string | number)[];
-  Custom?: Partial<Record<string, InputComponent>>;
-  lookupComponent?: ComponentLookup;
-} & Pick<FormFieldProps, 'readonly'>;
-
-export const ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }: ArrayFieldProps) => {
-  const { t } = useTranslation(translationKey);
-  const { ast, name, type, title } = property;
-  // TODO(wittjosiah): The fallback to an empty array stops the form from crashing but isn't immediately live.
-  //  It doesn't become live until another field is touched, but that's better than the whole form crashing.
-  const values = (useFormValues(path ?? []) ?? []) as any[];
-  invariant(Array.isArray(values), `Values at path ${path?.join('.')} must be an array.`);
-  const label = title ?? Function.pipe(name, String.capitalize);
-
-  const elementType = findArrayElementType(ast);
-
-  const getDefaultObjectValue = (typeNode: SchemaAST.AST): any => {
-    const baseNode = findNode(typeNode, isDiscriminatedUnion);
-    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, {}) : findNode(typeNode, SchemaAST.isTypeLiteral);
-    if (!typeLiteral) {
-      return {};
-    }
-
-    return Object.fromEntries(
-      getSchemaProperties(typeLiteral, {}, { form: true }).map((prop) => [prop.name, prop.defaultValue]),
-    );
-  };
-
-  const getDefaultValue = () =>
-    type === 'object' && elementType ? getDefaultObjectValue(elementType) : SimpleType.getDefaultValue(type);
-
-  const handleAdd = useCallback(() => {
-    inputProps.onValueChange(type, [...values, getDefaultValue()]);
-  }, [type, elementType, inputProps, 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 readonly && values.length < 1 ? null : (
-    <>
-      <InputHeader readonly label={label} />
-      <div
-        role='none'
-        className={
-          readonly
-            ? 'flex flex-wrap gap-1 mlb-1'
-            : values.length > 0
-              ? 'grid gap-1 grid-cols-[1fr_min-content] mlb-1'
-              : 'hidden'
-        }
-      >
-        {values.map((_value, index) => {
-          const field = (
-            <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}
-            />
-          );
-          return readonly ? (
-            field
-          ) : (
-            <Fragment key={index}>
-              <div role='none'>{field}</div>
-              <IconButton
-                icon='ph--trash--regular'
-                iconOnly
-                label={t('button remove')}
-                onClick={() => handleRemove(index)}
-                classNames='self-center'
-              />
-            </Fragment>
-          );
-        })}
-      </div>
-      {!readonly && (
-        <IconButton
-          classNames='is-full mlb-cardSpacingBlock flex'
-          icon='ph--plus--regular'
-          label={t('add field')}
-          onClick={handleAdd}
-        />
-      )}
-    </>
-  );
-};

package/src/components/Form/Defaults.tsx

@@ -1,205 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback, useEffect, useRef } from 'react';
-
-import { Input, Select, useTranslation } from '@dxos/react-ui';
-
-import { translationKey } from '../../translations';
-
-import { InputHeader, type InputProps } from './Input';
-
-export const TextInput = ({
-  type,
-  label,
-  inputOnly,
-  readonly,
-  placeholder,
-  getStatus,
-  getValue,
-  onValueChange,
-  onBlur,
-}: InputProps) => {
-  const { status, error } = getStatus();
-
-  return readonly && !getValue() ? null : readonly === 'static' && inputOnly ? (
-    <p>{getValue() ?? ''}</p>
-  ) : (
-    <Input.Root validationValence={status}>
-      {!inputOnly && <InputHeader error={error} label={label} />}
-      {readonly === 'static' ? (
-        <p>{getValue() ?? ''}</p>
-      ) : (
-        <Input.TextInput
-          disabled={!!readonly}
-          placeholder={placeholder}
-          value={getValue() ?? ''}
-          onChange={(event) => onValueChange(type, event.target.value)}
-          onBlur={onBlur}
-        />
-      )}
-      {inputOnly && <Input.Validation>{error}</Input.Validation>}
-    </Input.Root>
-  );
-};
-
-export const NumberInput = ({
-  type,
-  label,
-  inputOnly,
-  readonly,
-  placeholder,
-  getStatus,
-  getValue,
-  onValueChange,
-  onBlur,
-}: InputProps) => {
-  const { status, error } = getStatus();
-
-  return readonly && !getValue() ? null : readonly === 'static' && inputOnly ? (
-    <p>{getValue() ?? ''}</p>
-  ) : (
-    <Input.Root validationValence={status}>
-      {!inputOnly && <InputHeader error={error} label={label} />}
-      {readonly === 'static' ? (
-        <p>{getValue() ?? ''}</p>
-      ) : (
-        <Input.TextInput
-          type='number'
-          disabled={!!readonly}
-          placeholder={placeholder}
-          value={getValue()}
-          onChange={(event) => onValueChange(type, event.target.value)}
-          onBlur={onBlur}
-        />
-      )}
-      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
-    </Input.Root>
-  );
-};
-
-export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onValueChange, readonly }: InputProps) => {
-  const { status, error } = getStatus();
-  const checked = Boolean(getValue());
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <Input.Root validationValence={status}>
-      {!inputOnly && <InputHeader error={error} label={label} />}
-      {readonly === 'static' ? (
-        <p>{t(checked ? 'boolean input true value' : 'boolean input false value')}</p>
-      ) : (
-        <Input.Switch disabled={!!readonly} checked={checked} onCheckedChange={(value) => onValueChange(type, value)} />
-      )}
-      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
-    </Input.Root>
-  );
-};
-
-export type SelectInputOptions = InputProps & {
-  options?: Array<{ value: string | number; label?: string }>;
-};
-
-export const SelectInput = ({
-  type,
-  label,
-  inputOnly,
-  readonly,
-  placeholder,
-  options,
-  getStatus,
-  getValue,
-  onValueChange,
-}: SelectInputOptions) => {
-  const { status, error } = getStatus();
-
-  const value = getValue() as string | undefined;
-  const handleValueChange = useCallback((value: string | number) => onValueChange(type, value), [type, onValueChange]);
-
-  return readonly && !value ? null : (
-    <Input.Root validationValence={status}>
-      {!inputOnly && <InputHeader error={error} label={label} />}
-      {readonly === 'static' ? (
-        <p>{options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)}</p>
-      ) : (
-        <Select.Root value={value} onValueChange={handleValueChange}>
-          {/* TODO(burdon): Placeholder not working? */}
-          <Select.TriggerButton classNames='is-full' disabled={!!readonly} 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.Arrow />
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      )}
-      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
-    </Input.Root>
-  );
-};
-
-export const MarkdownInput = ({
-  type,
-  label,
-  inputOnly,
-  readonly,
-  placeholder,
-  getStatus,
-  getValue,
-  onValueChange,
-  onBlur,
-}: InputProps) => {
-  const { status, error } = getStatus();
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  // TODO(ZaymonFC): If we start using `Enter` for form submission, we should prevent default behavior here
-  //  since we're using a textarea element and the user needs to be able to enter new lines.
-
-  const adjustHeight = useCallback(() => {
-    const textarea = textareaRef.current;
-    if (textarea) {
-      textarea.style.blockSize = 'auto'; // For measurement.
-      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
-    }
-  }, []);
-
-  // Adjust height on initial render.
-  useEffect(() => {
-    adjustHeight();
-  }, [adjustHeight]);
-
-  // Adjust height when the content changes.
-  useEffect(() => {
-    adjustHeight();
-  }, [getValue(), adjustHeight]);
-
-  return (
-    <Input.Root validationValence={status}>
-      {!inputOnly && <InputHeader error={error} label={label} />}
-      {readonly === 'static' ? (
-        <p>{getValue() ?? ''}</p>
-      ) : (
-        <Input.TextArea
-          ref={textareaRef}
-          disabled={!!readonly}
-          placeholder={placeholder}
-          value={getValue() ?? ''}
-          classNames={'min-bs-auto max-bs-40 overflow-auto'}
-          onChange={(event) => onValueChange(type, event.target.value)}
-          onBlur={onBlur}
-          style={{ resize: 'none' }}
-          spellCheck={false}
-        />
-      )}
-      {inputOnly && <Input.Validation>{error}</Input.Validation>}
-    </Input.Root>
-  );
-};

package/src/components/Form/FormActions.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { IconButton, useTranslation } from '@dxos/react-ui';
-import { cardSpacing } from '@dxos/react-ui-stack';
-import { mx } from '@dxos/react-ui-theme';
-
-import { translationKey } from '../../translations';
-
-import { useFormContext } from './FormContext';
-
-export type FormOuterSpacing = boolean | 'blockStart-0' | 'scroll-fields';
-
-export type FormActionsProps = {
-  readonly?: boolean;
-  onCancel?: () => void;
-  outerSpacing?: FormOuterSpacing;
-};
-
-export const FormActions = ({ readonly, onCancel, outerSpacing = true }: FormActionsProps) => {
-  const { t } = useTranslation(translationKey);
-  const { canSave, handleSave } = useFormContext();
-
-  return (
-    <div
-      role='none'
-      className={mx(
-        outerSpacing === 'scroll-fields'
-          ? 'pli-cardSpacingInline mbe-cardSpacingBlock'
-          : outerSpacing
-            ? cardSpacing
-            : 'mbs-cardSpacingBlock',
-        'flex [&_button]:grow gap-1 first:mbs-0',
-      )}
-    >
-      {onCancel && !readonly && (
-        <IconButton
-          data-testid='cancel-button'
-          icon='ph--x--regular'
-          label={t('cancel button label')}
-          onClick={onCancel}
-        />
-      )}
-      {handleSave && (
-        <IconButton
-          type='submit'
-          data-testid='save-button'
-          disabled={!canSave}
-          icon='ph--check--regular'
-          label={t('save button label')}
-          onClick={handleSave}
-        />
-      )}
-    </div>
-  );
-};