@douglasneuroinformatics/libui 2.0.2 → 2.0.4

package/src/components/Form/DateField/DateField.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+
+import { toBasicISOString } from '@douglasneuroinformatics/libjs';
+import type { DateFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+
+import { DatePicker } from '../../DatePicker/DatePicker.js';
+import { Input } from '../../Input/Input.js';
+import { Label } from '../../Label/Label.js';
+import { Popover } from '../../Popover/Popover.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+import { type BaseFieldComponentProps } from '../types.js';
+
+const isValidDateString = (s: string) => /^(\d{4})-((0[1-9])|(1[0-2]))-((0[1-9])|([12])[0-9]|3[01])$/.test(s);
+
+export type DateFieldProps = Simplify<BaseFieldComponentProps<Date> & Omit<DateFormField, 'kind'>>;
+
+export const DateField = ({ error, label, name, setValue, value }: DateFieldProps) => {
+  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+
+  useEffect(() => {
+    const isSelecting = isDatePickerOpen || isInputFocused;
+    if (isSelecting) {
+      return;
+    } else if (isValidDateString(inputValue)) {
+      setValue(new Date(inputValue));
+    } else {
+      setInputValue('');
+    }
+  }, [isDatePickerOpen, isInputFocused]);
+
+  useEffect(() => {
+    setInputValue(value ? toBasicISOString(value) : '');
+  }, [value]);
+
+  return (
+    <FieldGroup>
+      <Label htmlFor={name}>{label}</Label>
+      <Popover open={isDatePickerOpen} onOpenChange={setIsDatePickerOpen}>
+        <Popover.Trigger>
+          <Input
+            autoComplete="off"
+            data-cy="date-input"
+            data-testid="date-input"
+            name={name}
+            placeholder="YYYY-MM-DD"
+            type="text"
+            value={inputValue}
+            onBlur={() => setIsInputFocused(false)}
+            onChange={(event) => setInputValue(event.target.value)}
+            onFocus={() => setIsInputFocused(true)}
+          />
+        </Popover.Trigger>
+        <Popover.Content asChild align="start" autofocus={false} className="w-auto">
+          <DatePicker
+            onSelection={(value) => {
+              setInputValue(toBasicISOString(value));
+              setIsDatePickerOpen(false);
+            }}
+          />
+        </Popover.Content>
+      </Popover>
+      <FieldGroup.Error error={error} />
+    </FieldGroup>
+  );
+};

package/src/components/Form/DynamicField.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+import type { DynamicFormField, FormDataType, PartialFormDataType } from '@douglasneuroinformatics/libui-form-types';
+import { pick } from 'lodash-es';
+
+import { StaticField } from './StaticField.js';
+
+import type { FormErrors } from './types.js';
+
+export type DynamicFieldProps<TData extends FormDataType> = {
+  errors: FormErrors<TData>;
+  field: DynamicFormField<TData>;
+  name: string;
+  setErrors: React.Dispatch<React.SetStateAction<FormErrors<TData>>>;
+  setValues: React.Dispatch<React.SetStateAction<PartialFormDataType<TData>>>;
+  values: PartialFormDataType<TData>;
+};
+
+export const DynamicField = <TData extends FormDataType>({
+  field,
+  name,
+  values,
+  ...props
+}: DynamicFieldProps<TData>) => {
+  const [dependentValues, setDependentValues] = useState(pick(values, field.deps));
+
+  const staticField = useMemo(() => {
+    return field.render(values);
+  }, [dependentValues, field.render]);
+
+  useEffect(() => {
+    for (const key of field.deps) {
+      if (dependentValues[key] !== values[key]) {
+        setDependentValues(pick(values, field.deps));
+        break;
+      }
+    }
+  }, [field.deps, values]);
+
+  if (!staticField) {
+    return null;
+  }
+
+  return <StaticField {...props} field={staticField} name={name} values={values} />;
+};

package/src/components/Form/ErrorMessage.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { CircleAlertIcon } from 'lucide-react';
+
+export const ErrorMessage: React.FC<{ error?: null | string }> = ({ error }) =>
+  error ? (
+    <div className="flex w-full items-center text-sm font-medium text-destructive">
+      <CircleAlertIcon className="mr-1" style={{ strokeWidth: '2px' }} />
+      <span>{error}</span>
+    </div>
+  ) : null;

package/src/components/Form/FieldGroup/FieldGroup.tsx

@@ -0,0 +1,10 @@
+import { ErrorMessage } from '../ErrorMessage.js';
+import { FieldGroupDescription } from './FieldGroupDescription.js';
+import { FieldGroupRoot } from './FieldGroupRoot.js';
+import { FieldGroupRow } from './FieldGroupRow.js';
+
+export const FieldGroup = Object.assign(FieldGroupRoot, {
+  Description: FieldGroupDescription,
+  Error: ErrorMessage,
+  Row: FieldGroupRow
+});

package/src/components/Form/FieldGroup/FieldGroupDescription.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { CircleHelpIcon } from 'lucide-react';
+
+import { Popover } from '../../Popover/Popover.js';
+
+export const FieldGroupDescription: React.FC<{ description?: null | string }> = ({ description }) =>
+  description ? (
+    <Popover>
+      <Popover.Trigger>
+        <CircleHelpIcon className="text-muted-foreground" />
+      </Popover.Trigger>
+      <Popover.Content className="text-sm text-muted-foreground">
+        <p>{description}</p>
+      </Popover.Content>
+    </Popover>
+  ) : null;

package/src/components/Form/FieldGroup/FieldGroupRoot.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const FieldGroupRoot: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className="flex flex-col gap-2 @container">{children}</div>
+);

package/src/components/Form/FieldGroup/FieldGroupRow.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const FieldGroupRow: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className="relative flex items-center gap-2">{children}</div>
+);

package/src/components/Form/FieldsComponent.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import type { FormDataType, FormFields, PartialFormDataType } from '@douglasneuroinformatics/libui-form-types';
+
+import { DynamicField } from './DynamicField.js';
+import { StaticField } from './StaticField.js';
+
+import type { FormErrors } from './types.js';
+
+export type FieldsComponentProps<T extends FormDataType> = {
+  errors: FormErrors<T>;
+  fields: FormFields<T>;
+  setErrors: React.Dispatch<React.SetStateAction<FormErrors<T>>>;
+  setValues: React.Dispatch<React.SetStateAction<PartialFormDataType<T>>>;
+  values: PartialFormDataType<T>;
+};
+
+/** Renders an object containing key value pairs, where the value is a FormField of some kind */
+export const FieldsComponent = <T extends FormDataType>({ fields, ...props }: FieldsComponentProps<T>) => {
+  return Object.keys(fields).map((name) => {
+    const field = fields[name];
+    if (field.kind === 'dynamic') {
+      return <DynamicField {...props} field={field} key={name} name={name} />;
+    }
+    return <StaticField {...props} field={field} key={name} name={name} />;
+  });
+};

package/src/components/Form/Form.tsx

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+
+import type {
+  FormContent,
+  FormDataType,
+  FormFields,
+  PartialFormDataType,
+  PartialNullableFormDataType
+} from '@douglasneuroinformatics/libui-form-types';
+import { set } from 'lodash-es';
+import { useTranslation } from 'react-i18next';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+
+import { Button } from '../Button/Button.js';
+import { Heading } from '../Heading/Heading.js';
+import { ErrorMessage } from './ErrorMessage.js';
+import { FieldsComponent } from './FieldsComponent.js';
+import { getInitialValues } from './utils.js';
+
+import type { FormErrors } from './types.js';
+
+type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.infer<TSchema> = z.infer<TSchema>> = {
+  [key: `data-${string}`]: unknown;
+  className?: string;
+  content: FormContent<TData>;
+  id?: string;
+  initialValues?: PartialNullableFormDataType<TData>;
+  onError?: (error: z.ZodError<TData>) => void;
+  onSubmit: (data: TData) => void;
+  resetBtn?: boolean;
+  submitBtnLabel?: string;
+  validationSchema: z.ZodType<TData>;
+};
+
+const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.infer<TSchema> = z.infer<TSchema>>({
+  className,
+  content,
+  id,
+  initialValues,
+  onError,
+  onSubmit,
+  resetBtn,
+  submitBtnLabel,
+  validationSchema,
+  ...props
+}: FormProps<TSchema, TData>) => {
+  const { t } = useTranslation('libui');
+  const [rootError, setRootError] = useState<null | string>(null);
+  const [errors, setErrors] = useState<FormErrors<TData>>({});
+  const [values, setValues] = useState<PartialFormDataType<TData>>(
+    initialValues ? getInitialValues(initialValues) : {}
+  );
+
+  const handleError = (error: z.ZodError<TData>) => {
+    const fieldErrors: FormErrors<TData> = {};
+    const rootErrors: string[] = [];
+    for (const issue of error.issues) {
+      if (issue.path.length > 0) {
+        set(fieldErrors, issue.path, issue.message);
+      } else {
+        rootErrors.push(issue.message);
+      }
+    }
+    setRootError(rootErrors.join('\n'));
+    setErrors(fieldErrors);
+    if (onError) {
+      onError(error);
+    }
+  };
+
+  const reset = () => {
+    setRootError(null);
+    setErrors({});
+    setValues({});
+  };
+
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (event) => {
+    event.preventDefault();
+    const result = validationSchema.safeParse(values);
+    if (result.success) {
+      reset();
+      onSubmit(result.data);
+    } else {
+      console.error(result.error.issues);
+      handleError(result.error);
+    }
+  };
+
+  const isGrouped = Array.isArray(content);
+
+  return (
+    <form
+      autoComplete="off"
+      className={twMerge('w-full', isGrouped ? 'space-y-8 divide-y' : 'space-y-6', className)}
+      id={id}
+      onSubmit={handleSubmit}
+      {...props}
+    >
+      {isGrouped ? (
+        content.map((fieldGroup, i) => {
+          return (
+            <div className="space-y-6 [&:not(:first-child)]:pt-8" key={i}>
+              <div className="space-y-1">
+                <Heading variant="h4">{fieldGroup.title}</Heading>
+                {fieldGroup.description && (
+                  <p className="text-sm italic leading-tight text-muted-foreground">{fieldGroup.description}</p>
+                )}
+              </div>
+              <FieldsComponent
+                errors={errors}
+                fields={fieldGroup.fields as FormFields<TData>}
+                setErrors={setErrors}
+                setValues={setValues}
+                values={values}
+              />
+            </div>
+          );
+        })
+      ) : (
+        <FieldsComponent errors={errors} fields={content} setErrors={setErrors} setValues={setValues} values={values} />
+      )}
+      <div className="flex w-full gap-3">
+        {/** Note - aria-label is used for testing in downstream packages */}
+        <Button
+          aria-label="Submit Button"
+          className="block w-full"
+          data-cy="submit-form"
+          type="submit"
+          variant="primary"
+        >
+          {submitBtnLabel ?? t('form.submit')}
+        </Button>
+        {resetBtn && (
+          <Button aria-label="Reset Button" className="block w-full" type="button" variant="secondary" onClick={reset}>
+            {t('form.reset')}
+          </Button>
+        )}
+      </div>
+      {rootError && <ErrorMessage error={rootError} />}
+    </form>
+  );
+};
+
+export { Form, type FormProps };

package/src/components/Form/NumberField/NumberField.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { match } from 'ts-pattern';
+
+import { NumberFieldInput, type NumberFieldInputProps } from './NumberFieldInput.js';
+import { NumberFieldRadio, type NumberFieldRadioProps } from './NumberFieldRadio.js';
+import { NumberFieldSlider, type NumberFieldSliderProps } from './NumberFieldSlider.js';
+
+export type NumberFieldProps = NumberFieldInputProps | NumberFieldRadioProps | NumberFieldSliderProps;
+
+export const NumberField = (props: NumberFieldProps) => {
+  return match(props)
+    .with({ variant: 'input' }, (props) => <NumberFieldInput {...props} />)
+    .with({ variant: 'slider' }, (props) => <NumberFieldSlider {...props} />)
+    .with({ variant: 'radio' }, (props) => <NumberFieldRadio {...props} />)
+    .exhaustive();
+};

package/src/components/Form/NumberField/NumberFieldInput.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+
+import { Input } from '../../Input/Input.js';
+import { Label } from '../../Label/Label.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+
+import type { BaseFieldComponentProps } from '../types.js';
+
+export type NumberFieldInputProps = Simplify<
+  BaseFieldComponentProps<number> & Extract<NumberFormField, { variant: 'input' }>
+>;
+
+export const NumberFieldInput = ({
+  description,
+  error,
+  label,
+  max,
+  min,
+  name,
+  setValue,
+  value
+}: NumberFieldInputProps) => {
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    const newValue = parseFloat(event.target.value);
+    if (Number.isNaN(newValue)) {
+      setValue(undefined);
+    } else if (newValue >= (min ?? -Infinity) && newValue <= (max ?? Infinity)) {
+      setValue(newValue);
+    }
+  };
+  return (
+    <FieldGroup>
+      <FieldGroup.Row>
+        <Label>{label}</Label>
+        <FieldGroup.Description description={description} />
+      </FieldGroup.Row>
+      <Input max={max} min={min} name={name} type="text" value={value ?? ''} onChange={handleChange} />
+      <FieldGroup.Error error={error} />
+    </FieldGroup>
+  );
+};

package/src/components/Form/NumberField/NumberFieldRadio.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+
+import { cn } from '../../../utils.js';
+import { Label } from '../../Label/Label.js';
+import { RadioGroup } from '../../RadioGroup/RadioGroup.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+
+import type { BaseFieldComponentProps } from '../types.js';
+
+export type NumberFieldRadioProps = Simplify<
+  BaseFieldComponentProps<number> & Extract<NumberFormField, { variant: 'radio' }>
+>;
+
+export const NumberFieldRadio = ({
+  description,
+  error,
+  label,
+  name,
+  options,
+  setValue,
+  value
+}: NumberFieldRadioProps) => {
+  const optionsCount = Object.keys(options).length;
+
+  return (
+    <FieldGroup>
+      <FieldGroup.Row>
+        <Label>{label}</Label>
+        <FieldGroup.Description description={description} />
+      </FieldGroup.Row>
+      <RadioGroup
+        className={cn(
+          'flex',
+          optionsCount > 5 ? 'flex-col' : 'flex-col @3xl:flex-row @3xl:items-center @3xl:justify-between'
+        )}
+        name={name}
+        value={value?.toString() ?? ''}
+        onValueChange={(value) => setValue(parseInt(value))}
+      >
+        {Object.keys(options)
+          .map((val) => parseInt(val))
+          .toSorted((a, b) => a - b)
+          .map((key) => (
+            <div className="flex items-center gap-2" key={key}>
+              <RadioGroup.Item id={`${name}-${key}`} value={key.toString()} />
+              <Label className="font-normal" htmlFor={`${name}-${key}`}>
+                {options[key]}
+              </Label>
+            </div>
+          ))}
+      </RadioGroup>
+      <FieldGroup.Error error={error} />
+    </FieldGroup>
+  );
+};

package/src/components/Form/NumberField/NumberFieldSlider.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+
+import { Label } from '../../Label/Label.js';
+import { Slider } from '../../Slider/Slider.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+
+import type { BaseFieldComponentProps } from '../types.js';
+
+export type NumberFieldSliderProps = Simplify<
+  BaseFieldComponentProps<number> & Extract<NumberFormField, { variant: 'slider' }>
+>;
+
+export const NumberFieldSlider = ({
+  description,
+  error,
+  label,
+  max,
+  min,
+  name,
+  setValue,
+  value
+}: NumberFieldSliderProps) => {
+  return (
+    <FieldGroup>
+      <FieldGroup.Row>
+        <Label>{label}</Label>
+        <FieldGroup.Description description={description} />
+      </FieldGroup.Row>
+      <FieldGroup.Row>
+        <Slider max={max} min={min} name={name} value={[value ?? 0]} onValueChange={([value]) => setValue(value)} />
+        <span className="flex h-full w-8 items-center justify-center text-sm text-muted-foreground">
+          {value ?? 'NA'}
+        </span>
+      </FieldGroup.Row>
+      <FieldGroup.Error error={error} />
+    </FieldGroup>
+  );
+};

package/src/components/Form/NumberRecordField.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+
+import type {
+  NumberRecordFieldValue,
+  NumberRecordFormField,
+  RequiredFieldValue
+} from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+
+import { Heading } from '../Heading/Heading.js';
+import { NumberField } from './NumberField/NumberField.js';
+
+import type { BaseFieldComponentProps } from './types.js';
+
+export type NumberRecordFieldProps<T extends NumberRecordFieldValue = NumberRecordFieldValue> = Simplify<
+  BaseFieldComponentProps<NumberRecordFieldValue> & NumberRecordFormField<RequiredFieldValue<T>>
+>;
+
+export const NumberRecordField = <T extends NumberRecordFieldValue = NumberRecordFieldValue>({
+  error: recordError,
+  items,
+  label,
+  options,
+  setError: setRecordError,
+  setValue: setRecordValue,
+  value: recordValue
+}: NumberRecordFieldProps<T>) => {
+  useEffect(() => {
+    setRecordValue({});
+  }, [options]);
+
+  if (!recordValue) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4">
+      <Heading variant="h5">{label}</Heading>
+      <div className="space-y-6">
+        {Object.keys(items).map((name) => {
+          const item = items[name];
+          return (
+            <NumberField
+              error={recordError?.[name]}
+              key={name}
+              kind="number"
+              name={name}
+              options={options}
+              setError={(error) => setRecordError({ ...recordError, [name]: error })}
+              setValue={(value) => setRecordValue({ ...recordValue, [name]: value })}
+              value={recordValue?.[name]}
+              variant="radio"
+              {...item}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/components/Form/RecordArrayField.tsx

@@ -0,0 +1,99 @@
+import React, { memo, useEffect } from 'react';
+
+import type { RecordArrayFieldValue, RecordArrayFormField } from '@douglasneuroinformatics/libui-form-types';
+import { MinusCircleIcon, PlusCircleIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import type { Simplify } from 'type-fest';
+
+import { Button } from '../Button/Button.js';
+import { Heading } from '../Heading/Heading.js';
+import { Label } from '../Label/Label.js';
+import { ScalarField } from './ScalarField.js';
+
+import type { BaseFieldComponentProps } from './types.js';
+
+export type RecordArrayFieldProps = Simplify<BaseFieldComponentProps<RecordArrayFieldValue> & RecordArrayFormField>;
+
+export const RecordArrayField = memo(function RecordArrayField({
+  error: arrayError,
+  fieldset,
+  label,
+  setError: setArrayError,
+  setValue: setArrayValue,
+  value: arrayValue
+}: RecordArrayFieldProps) {
+  const { t } = useTranslation('libui');
+
+  const createNewRecord = () => Object.fromEntries(Object.keys(fieldset).map((fieldName) => [fieldName, undefined]));
+
+  useEffect(() => {
+    setArrayValue([createNewRecord()]);
+  }, [fieldset]);
+
+  if (!arrayValue) {
+    return null;
+  }
+
+  // Creates a new object with all values mapped to null and appends it to the previous arrayValue
+  const appendField = () => {
+    setArrayValue([...arrayValue, createNewRecord()]);
+  };
+
+  const removeField = () => {
+    if (arrayValue.length > 1) {
+      setArrayValue(arrayValue.slice(0, arrayValue.length - 1));
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <Heading variant="h5">{label}</Heading>
+      <div className="space-y-6">
+        {arrayValue.map((fields, i) => (
+          <div className="space-y-4" key={i}>
+            <Label className="font-semibold italic">{label + ' ' + (i + 1)}</Label>
+            {Object.keys(fields).map((name) => {
+              const field = fieldset[name];
+              const fieldProps = field?.kind === 'dynamic' ? field.render(fields) : field;
+              if (!fieldProps) {
+                return null;
+              }
+              return (
+                <ScalarField
+                  error={arrayError?.[i]?.[name]}
+                  field={fieldProps}
+                  key={name}
+                  name={name}
+                  setError={(error) => {
+                    const newArrayError = arrayError ? [...arrayError] : [];
+                    if (!newArrayError[i]) {
+                      newArrayError[i] = {};
+                    }
+                    newArrayError[i][name] = error;
+                    setArrayError(newArrayError);
+                  }}
+                  setValue={(value) => {
+                    const newArrayValue = [...arrayValue];
+                    newArrayValue[i][name] = value;
+                    setArrayValue(newArrayValue);
+                  }}
+                  value={arrayValue?.[i]?.[name]}
+                />
+              );
+            })}
+          </div>
+        ))}
+      </div>
+      <div className="flex gap-3">
+        <Button type="button" variant="outline" onClick={appendField}>
+          {t('form.append')}
+          <PlusCircleIcon className="ml-2" />
+        </Button>
+        <Button type="button" variant="outline" onClick={removeField}>
+          {t('form.remove')}
+          <MinusCircleIcon className="ml-2" />
+        </Button>
+      </div>
+    </div>
+  );
+});