@douglasneuroinformatics/libui 2.0.2 → 2.0.4

package/src/components/Form/ScalarField.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import type {
+  BooleanFormField,
+  DateFormField,
+  NumberFormField,
+  ScalarFieldValue,
+  SetFormField,
+  StringFormField
+} from '@douglasneuroinformatics/libui-form-types';
+
+import { BooleanField, type BooleanFieldProps } from './BooleanField/BooleanField.js';
+import { DateField, type DateFieldProps } from './DateField/DateField.js';
+import { NumberField, type NumberFieldProps } from './NumberField/NumberField.js';
+import { SetField, type SetFieldProps } from './SetField/SetField.js';
+import { StringField, type StringFieldProps } from './StringField/StringField.js';
+
+import type { BaseFieldComponentProps } from './types.js';
+
+export type ScalarFieldProps = BaseFieldComponentProps<ScalarFieldValue> & {
+  field: BooleanFormField | DateFormField | NumberFormField | SetFormField | StringFormField;
+};
+
+export const ScalarField = ({ field, ...props }: ScalarFieldProps) => {
+  switch (field.kind) {
+    case 'string':
+      return <StringField {...field} {...(props as StringFieldProps)} />;
+    case 'number':
+      return <NumberField {...field} {...(props as NumberFieldProps)} />;
+    case 'date':
+      return <DateField {...field} {...(props as DateFieldProps)} />;
+    case 'boolean':
+      return <BooleanField {...field} {...(props as BooleanFieldProps)} />;
+    case 'set':
+      return <SetField {...field} {...(props as SetFieldProps)} />;
+    default:
+      throw new Error(`Unexpected value for kind: ${Reflect.get(field, 'kind') satisfies never}`);
+  }
+};

package/src/components/Form/SetField/SetField.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+
+import type { SetFormField } from '@douglasneuroinformatics/libui-form-types';
+import { match } from 'ts-pattern';
+import type { Simplify } from 'type-fest';
+
+import { SetFieldListbox } from './SetFieldListbox.js';
+import { SetFieldSelect } from './SetFieldSelect.js';
+
+import type { BaseFieldComponentProps } from '../types.js';
+
+export type SetFieldProps<T extends string = string> = Simplify<BaseFieldComponentProps<Set<T>> & SetFormField<Set<T>>>;
+
+export const SetField = <T extends string = string>(props: SetFieldProps<T>) => {
+  useEffect(() => {
+    if (!props.value) {
+      props.setValue(new Set([]));
+    }
+  }, [props.value]);
+
+  const handleCheckedChange = (option: T, isChecked: boolean) => {
+    if (isChecked) {
+      const updatedValue = new Set<T>(props.value);
+      updatedValue.delete(option);
+      props.setValue(updatedValue);
+    } else {
+      const updatedValue = new Set<T>(props.value);
+      updatedValue.add(option);
+      props.setValue(updatedValue);
+    }
+  };
+
+  return match(props)
+    .with({ variant: 'select' }, (props) => <SetFieldSelect onCheckedChange={handleCheckedChange} {...props} />)
+    .with({ variant: 'listbox' }, (props) => <SetFieldListbox onCheckedChange={handleCheckedChange} {...props} />)
+    .exhaustive();
+};

package/src/components/Form/SetField/SetFieldListbox.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { Checkbox } from '../../Checkbox/Checkbox.js';
+import { Label } from '../../Label/Label.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+
+import type { SetFieldProps } from './SetField.js';
+
+export type SetFieldListboxProps<T extends string = string> = SetFieldProps<T> & {
+  onCheckedChange: (option: T, isChecked: boolean) => void;
+};
+
+export const SetFieldListbox = <T extends string = string>({
+  description,
+  error,
+  label,
+  name,
+  onCheckedChange,
+  options,
+  value
+}: SetFieldListboxProps<T>) => {
+  return (
+    <FieldGroup>
+      <FieldGroup.Row>
+        <Label>{label}</Label>
+        <FieldGroup.Description description={description} />
+      </FieldGroup.Row>
+      {Object.keys(options).map((option) => (
+        <div className="flex items-center gap-2" key={option}>
+          <Checkbox
+            checked={value?.has(option as T) ?? false}
+            id={`${name}-${option}`}
+            onCheckedChange={(checked) => {
+              onCheckedChange(option as T, !checked);
+            }}
+          />
+          <Label className="font-normal" htmlFor={`${name}-${option}`}>
+            {options[option as T]}
+          </Label>
+        </div>
+      ))}
+      <FieldGroup.Error error={error} />
+    </FieldGroup>
+  );
+};

package/src/components/Form/SetField/SetFieldSelect.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { Badge } from '../../Badge/Badge.js';
+import { DropdownButton } from '../../DropdownButton/DropdownButton.js';
+import { DropdownMenu } from '../../DropdownMenu/DropdownMenu.js';
+import { Label } from '../../Label/Label.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+
+import type { SetFieldProps } from './SetField.js';
+
+export type SetFieldSelectProps<T extends string = string> = SetFieldProps<T> & {
+  onCheckedChange: (option: T, isChecked: boolean) => void;
+};
+
+export const SetFieldSelect = <T extends string = string>({
+  description,
+  error,
+  label,
+  onCheckedChange,
+  options,
+  value
+}: SetFieldSelectProps<T>) => {
+  return value ? (
+    <FieldGroup>
+      <FieldGroup.Row>
+        <Label>{label}</Label>
+        <FieldGroup.Description description={description} />
+      </FieldGroup.Row>
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild className="w-full">
+          <DropdownButton>
+            {value.size ? (
+              <div className="flex items-center gap-2">
+                {Array.from(value).map((option) => (
+                  <Badge className="font-normal" key={option} variant="outline">
+                    {options[option]}
+                  </Badge>
+                ))}
+              </div>
+            ) : null}
+          </DropdownButton>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content widthFull align="start">
+          {Object.keys(options).map((option) => {
+            const checked = value.has(option as T);
+            return (
+              <DropdownMenu.CheckboxItem
+                checked={checked}
+                key={option}
+                onSelect={(event) => {
+                  event.preventDefault();
+                  onCheckedChange(option as T, value.has(option as T));
+                }}
+              >
+                {options[option as T]}
+              </DropdownMenu.CheckboxItem>
+            );
+          })}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+      <FieldGroup.Error error={error} />
+    </FieldGroup>
+  ) : null;
+};

package/src/components/Form/StaticField.tsx

@@ -0,0 +1,83 @@
+import React, { useCallback } from 'react';
+
+import type {
+  FormDataType,
+  FormFieldValue,
+  NumberRecordFieldValue,
+  NumberRecordFormField,
+  PartialFormDataType,
+  RecordArrayFieldValue,
+  RecordArrayFormField,
+  ScalarFieldValue
+} from '@douglasneuroinformatics/libui-form-types';
+import { match } from 'ts-pattern';
+
+import { NumberRecordField } from './NumberRecordField.js';
+import { RecordArrayField } from './RecordArrayField.js';
+import { ScalarField, type ScalarFieldProps } from './ScalarField.js';
+
+import type { FieldError, FormErrors } from './types.js';
+
+export type StaticFieldProps<TData extends FormDataType> = {
+  errors: FormErrors<TData>;
+  field: NumberRecordFormField | RecordArrayFormField | ScalarFieldProps['field'];
+  name: string;
+  setErrors: React.Dispatch<React.SetStateAction<FormErrors<TData>>>;
+  setValues: React.Dispatch<React.SetStateAction<PartialFormDataType<TData>>>;
+  values: PartialFormDataType<TData>;
+};
+
+export const StaticField = <TData extends FormDataType>({
+  errors,
+  field,
+  name,
+  setErrors,
+  setValues,
+  values
+}: StaticFieldProps<TData>) => {
+  const setError = useCallback(
+    <TValue extends FormFieldValue>(error: FieldError<TValue>) => {
+      return setErrors((prevErrors) => ({ ...prevErrors, [name]: error }));
+    },
+    [setErrors]
+  );
+
+  const setValue = useCallback(
+    <TValue extends FormFieldValue>(value: TValue) => {
+      return setValues((prevValues) => ({ ...prevValues, [name]: value }));
+    },
+    [setValues]
+  );
+
+  return match(field)
+    .with({ kind: 'record-array' }, (field) => (
+      <RecordArrayField
+        {...field}
+        error={errors[name] as { [key: string]: string }[]}
+        name={name}
+        setError={setError}
+        setValue={setValue}
+        value={values[name] as RecordArrayFieldValue}
+      />
+    ))
+    .with({ kind: 'number-record' }, (field) => (
+      <NumberRecordField
+        {...field}
+        error={errors[name] as { [key: string]: string }}
+        name={name}
+        setError={setError}
+        setValue={setValue}
+        value={values[name] as NumberRecordFieldValue}
+      />
+    ))
+    .otherwise((field) => (
+      <ScalarField
+        error={errors[name] as string}
+        field={field}
+        name={name}
+        setError={setError}
+        setValue={setValue}
+        value={values[name] as ScalarFieldValue}
+      />
+    ));
+};

package/src/components/Form/StringField/StringField.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { match } from 'ts-pattern';
+
+import { StringFieldInput, type StringFieldInputProps } from './StringFieldInput.js';
+import { StringFieldPassword, type StringFieldPasswordProps } from './StringFieldPassword.js';
+import { StringFieldRadio, type StringFieldRadioProps } from './StringFieldRadio.js';
+import { StringFieldSelect } from './StringFieldSelect.js';
+import { StringFieldTextArea, type StringFieldTextAreaProps } from './StringFieldTextArea.js';
+
+export type StringFieldProps =
+  | StringFieldInputProps
+  | StringFieldPasswordProps
+  | StringFieldRadioProps
+  | StringFieldTextAreaProps;
+
+export const StringField = (props: StringFieldProps) => {
+  return match(props)
+    .with({ variant: 'textarea' }, (props) => <StringFieldTextArea {...props} />)
+    .with({ variant: 'password' }, (props) => <StringFieldPassword {...props} />)
+    .with({ variant: 'input' }, (props) => <StringFieldInput {...props} />)
+    .with({ variant: 'select' }, (props) => <StringFieldSelect {...props} />)
+    .with({ variant: 'radio' }, (props) => <StringFieldRadio {...props} />)
+    .exhaustive();
+};

package/src/components/Form/StringField/StringFieldInput.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
+
+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 StringFieldInputProps = BaseFieldComponentProps<string> & StringFormField;
+
+export const StringFieldInput = ({ description, error, label, name, setValue, value }: StringFieldInputProps) => {
+  return (
+    <FieldGroup>
+      <FieldGroup.Row>
+        <Label>{label}</Label>
+        <FieldGroup.Description description={description} />
+      </FieldGroup.Row>
+      <Input name={name} type="text" value={value ?? ''} onChange={(event) => setValue(event.target.value)} />
+      <FieldGroup.Error error={error} />
+    </FieldGroup>
+  );
+};

package/src/components/Form/StringField/StringFieldPassword.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+
+import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
+import { EyeIcon, EyeOffIcon } from 'lucide-react';
+
+import { cn } from '../../../utils.js';
+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 StringFieldPasswordProps = BaseFieldComponentProps<string> & StringFormField;
+
+export const StringFieldPassword = ({ description, error, label, name, setValue, value }: StringFieldPasswordProps) => {
+  const [show, setShow] = useState(false);
+  return (
+    <FieldGroup>
+      <FieldGroup.Row>
+        <Label>{label}</Label>
+        <FieldGroup.Description description={description} />
+      </FieldGroup.Row>
+      <FieldGroup.Row>
+        <Input
+          name={name}
+          type={show ? 'text' : 'password'}
+          value={value ?? ''}
+          onChange={(event) => setValue(event.target.value)}
+        />
+        <button
+          className="absolute right-0 flex h-full w-8 items-center justify-center text-muted-foreground"
+          type="button"
+          onClick={() => setShow(!show)}
+        >
+          <EyeIcon className={cn('absolute transition-all', show ? '-rotate-90 scale-0' : 'rotate-0 scale-100')} />
+          <EyeOffIcon className={cn('absolute transition-all', !show ? 'rotate-90 scale-0' : 'rotate-0 scale-100')} />
+        </button>
+      </FieldGroup.Row>
+      <FieldGroup.Error error={error} />
+    </FieldGroup>
+  );
+};

package/src/components/Form/StringField/StringFieldRadio.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+
+import { BaseRadioField } from '../BaseRadioField.js';
+
+import type { BaseFieldComponentProps } from '../types.js';
+
+export type StringFieldRadioProps<T extends string = string> = Simplify<
+  BaseFieldComponentProps<T> & Extract<StringFormField<T>, { options: object }>
+>;
+
+export const StringFieldRadio = <T extends string = string>(props: StringFieldRadioProps<T>) => {
+  return <BaseRadioField {...props} />;
+};

package/src/components/Form/StringField/StringFieldSelect.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+
+import { Label } from '../../Label/Label.js';
+import { Select } from '../../Select/Select.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+import { type BaseFieldComponentProps } from '../types.js';
+
+export type StringFieldSelectProps<T extends string = string> = Simplify<
+  BaseFieldComponentProps<T> & Extract<StringFormField<T>, { options: object }>
+>;
+
+export const StringFieldSelect = <T extends string = string>({
+  description,
+  error,
+  label,
+  name,
+  options,
+  setValue,
+  value
+}: StringFieldSelectProps<T>) => {
+  return (
+    <FieldGroup>
+      <FieldGroup.Row>
+        <Label>{label}</Label>
+        <FieldGroup.Description description={description} />
+      </FieldGroup.Row>
+      <Select name={name} value={value ?? ''} onValueChange={(value: T) => setValue(value)}>
+        <Select.Trigger data-cy={`${name}-select-trigger`} data-testid={`${name}-select-trigger`}>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content data-cy={`${name}-select-content`} data-testid={`${name}-select-content`}>
+          {Object.keys(options).map((option) => (
+            <Select.Item key={option} value={option}>
+              {options[option as T]}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select>
+      <FieldGroup.Error error={error} />
+    </FieldGroup>
+  );
+};

package/src/components/Form/StringField/StringFieldTextArea.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
+
+import { Label } from '../../Label/Label.js';
+import { TextArea } from '../../TextArea/TextArea.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+
+import type { BaseFieldComponentProps } from '../types.js';
+
+export type StringFieldTextAreaProps = BaseFieldComponentProps<string> & StringFormField;
+
+export const StringFieldTextArea = ({ description, error, label, name, setValue, value }: StringFieldTextAreaProps) => {
+  return (
+    <FieldGroup>
+      <FieldGroup.Row>
+        <Label>{label}</Label>
+        <FieldGroup.Description description={description} />
+      </FieldGroup.Row>
+      <TextArea name={name} rows={5} value={value ?? ''} onChange={(event) => setValue(event.target.value)} />
+      <FieldGroup.Error error={error} />
+    </FieldGroup>
+  );
+};

package/src/components/Form/types.ts

@@ -0,0 +1,26 @@
+import type { FormDataType, FormFieldValue, ScalarFieldValue } from '@douglasneuroinformatics/libui-form-types';
+
+export type FieldError<T extends FormFieldValue> =
+  T extends NonNullable<infer TValue>
+    ? TValue extends NonNullable<ScalarFieldValue>
+      ? string
+      : TValue extends { [key: string]: unknown }
+        ? { [key: string]: string }
+        : TValue extends { [key: string]: unknown }[]
+          ? { [key: string]: string }[]
+          : never
+    : never;
+
+/** Common props for all field components */
+export type BaseFieldComponentProps<TValue extends FormFieldValue = FormFieldValue> = {
+  error?: FieldError<TValue>;
+  name: string;
+  setError: (error: FieldError<TValue>) => void;
+  setValue: (value: TValue | undefined) => void;
+  value: TValue | undefined;
+};
+
+/** An object mapping field names to error messages, if applicable */
+export type FormErrors<TData extends FormDataType = FormDataType> = {
+  [K in keyof TData]?: FieldError<TData[K]>;
+};

package/src/components/Form/utils.ts

@@ -0,0 +1,53 @@
+import type {
+  FormContent,
+  FormDataType,
+  FormFields,
+  PartialFormDataType,
+  PartialNullableFormDataType,
+  StaticFormFields,
+  UnknownFormField
+} from '@douglasneuroinformatics/libui-form-types';
+
+export function getInitialValues<T extends FormDataType>(values: PartialNullableFormDataType<T>) {
+  const initialValues: { [key: string]: unknown } = {};
+  for (const key in values) {
+    const value = values[key];
+    if (value === null || value === undefined) {
+      continue;
+    } else if (Array.isArray(value)) {
+      initialValues[key] = value.map(getInitialValues);
+    } else {
+      initialValues[key] = value;
+    }
+  }
+  return initialValues as PartialFormDataType<T>;
+}
+
+/** Extract a flat array of form fields from the content. This function assumes there are no duplicate keys in groups  */
+export function getFormFields<T extends FormDataType>(content: FormContent<T>): FormFields<T> {
+  if (!Array.isArray(content)) {
+    return content;
+  }
+  return content.reduce((prev, current) => ({ ...prev, ...current.fields }), content[0].fields) as FormFields<T>;
+}
+
+/**
+ * Given a set of data, resolve static content for form fields. Null values
+ * will be removed.
+ */
+export function resolveStaticFormFields<T extends FormDataType>(content: FormContent<T>, data: PartialFormDataType<T>) {
+  const staticFormFields: Partial<StaticFormFields<T>> = {};
+  const formFields = getFormFields(content);
+  for (const fieldName in formFields) {
+    const field: UnknownFormField<T, typeof fieldName> = formFields[fieldName];
+    if (field.kind === 'dynamic') {
+      const resolvedField = field.render(data);
+      if (resolvedField) {
+        staticFormFields[fieldName] = resolvedField;
+      }
+    } else {
+      staticFormFields[fieldName] = field;
+    }
+  }
+  return staticFormFields;
+}

package/src/components/Heading/Heading.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export type HeadingProps = {
+  children: string;
+  className?: string;
+  variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
+};
+
+export const Heading = ({ children, className, variant }: HeadingProps) => {
+  switch (variant) {
+    case 'h1':
+      return <h1 className={cn('text-3xl font-bold tracking-tight', className)}>{children}</h1>;
+    case 'h2':
+      return <h2 className={cn('text-2xl font-semibold tracking-tight', className)}>{children}</h2>;
+    case 'h3':
+      return <h3 className={cn('text-xl font-semibold tracking-tight', className)}>{children}</h3>;
+    case 'h4':
+      return <h4 className={cn('text-lg font-semibold tracking-tight', className)}>{children}</h4>;
+    case 'h5':
+      return <h4 className={cn('text-base font-semibold tracking-tight', className)}>{children}</h4>;
+    default:
+      throw new Error(`Unhandled heading variant: ${variant satisfies never}`);
+  }
+};

package/src/components/HoverCard/HoverCard.tsx

@@ -0,0 +1,8 @@
+import { Root, Trigger } from '@radix-ui/react-hover-card';
+
+import { HoverCardContent } from './HoverCardContent.js';
+
+export const HoverCard = Object.assign(Root.bind(null), {
+  Content: HoverCardContent,
+  Trigger
+});

package/src/components/HoverCard/HoverCardContent.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { Content } from '@radix-ui/react-hover-card';
+
+import { cn } from '../../utils.js';
+
+export const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof Content>,
+  React.ComponentPropsWithoutRef<typeof Content>
+>(function HoverCardContent({ align = 'center', className, sideOffset = 4, ...props }, ref) {
+  return (
+    <Content
+      align={align}
+      className={cn(
+        'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      ref={ref}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
+});

package/src/components/Input/Input.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input({ className, type, ...props }, ref) {
+  return (
+    <input
+      autoComplete="off"
+      className={cn(
+        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      data-testid="input"
+      ref={ref}
+      type={type}
+      {...props}
+    />
+  );
+});

package/src/components/Label/Label.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { type VariantProps, cva } from 'class-variance-authority';
+
+import { cn } from '../../utils.js';
+
+export const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+export const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(function Label({ className, ...props }, ref) {
+  return <LabelPrimitive.Root className={cn(labelVariants(), className)} ref={ref} {...props} />;
+});