@jakubmazanec/ui 0.1.0-unstable.0c19abe

package/source/components/Error.tsx

@@ -0,0 +1,27 @@
+import {type PropsWithChildren} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+import {useField} from './internals.js';
+
+export const useErrorTheme = createComponentTheme('Error');
+
+export type ErrorProps = PropsWithChildren<
+  ComponentProps<typeof useErrorTheme> & {
+    className?: string;
+  }
+>;
+
+export function Error({className, children}: ErrorProps) {
+  let theme = useErrorTheme();
+  let field = useField();
+
+  if (field) {
+    return (
+      <div className={theme(null, className)}>
+        <p>{field.state.error?.message}</p>
+      </div>
+    );
+  }
+
+  return <div className={theme(null, className)}>{children}</div>;
+}

package/source/components/Field.tsx

@@ -0,0 +1,28 @@
+import {Field as HeadlessField} from '@headlessui/react';
+import {type PropsWithChildren} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+import {fieldNameContext} from './internals.js';
+
+export const useFieldTheme = createComponentTheme('Field');
+
+export type FieldProps = PropsWithChildren<
+  ComponentProps<typeof useFieldTheme> & {
+    className?: string | undefined;
+    name?: string | undefined;
+  }
+>;
+
+export function Field({name, className, children}: FieldProps) {
+  let theme = useFieldTheme();
+
+  if (name) {
+    return (
+      <fieldNameContext.Provider value={name}>
+        <HeadlessField className={theme(null, className)}>{children}</HeadlessField>
+      </fieldNameContext.Provider>
+    );
+  }
+
+  return <HeadlessField className={theme(null, className)}>{children}</HeadlessField>;
+}

package/source/components/Form.tsx

@@ -0,0 +1,30 @@
+import {type PropsWithChildren} from 'react';
+import {type UseFormReturn} from 'react-hook-form';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+import {formContext} from './internals.js';
+
+export const useFormTheme = createComponentTheme('Form');
+
+export type FormProps<D> = PropsWithChildren<
+  ComponentProps<typeof useFormTheme> & {
+    className?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    form: UseFormReturn<any>;
+    onSubmit: (data: D) => void;
+  }
+>;
+
+export function Form<D>({className, form, onSubmit, children}: FormProps<D>) {
+  let theme = useFormTheme();
+
+  let handleSubmit = form.handleSubmit(onSubmit);
+
+  return (
+    <formContext.Provider value={form}>
+      <form className={theme(null, className)} onSubmit={handleSubmit}>
+        {children}
+      </form>
+    </formContext.Provider>
+  );
+}

package/source/components/Input.tsx

@@ -0,0 +1,176 @@
+import {Input as HeadlessInput} from '@headlessui/react';
+import {XMarkIcon} from '@heroicons/react/16/solid';
+import {
+  type ChangeEvent,
+  type ComponentType,
+  type ElementType,
+  type FocusEvent,
+  forwardRef,
+  type Ref,
+  useCallback,
+} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+import {useFieldName, useForm} from './internals.js';
+
+export const useInputTheme = createComponentTheme('Input', {
+  variants: {
+    disabled: [true, false],
+  },
+  elements: ['root', 'input', 'icon', 'clearButton'],
+});
+
+export type InputProps = ComponentProps<typeof useInputTheme> & {
+  type?: 'number' | 'text' | undefined;
+  name?: string | undefined;
+  value?: number | string | undefined;
+  className?: string | undefined;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  icon?: ComponentType<any> | undefined;
+  onChange?: ((value: string) => void) | undefined;
+  onBlur?: ((value: string) => void) | undefined;
+  placeholder?: string | undefined;
+  showClearButton?: boolean | undefined;
+};
+
+export const Input = forwardRef(
+  <T extends ElementType = 'input'>(
+    {
+      type = 'text',
+      name,
+      value,
+      className,
+      disabled = false,
+      icon: Icon,
+      onChange,
+      onBlur,
+      placeholder,
+      showClearButton = false,
+    }: InputProps,
+    ref: Ref<T>,
+  ) => {
+    let theme = useInputTheme({disabled});
+    let form = useForm();
+    let fieldName = useFieldName();
+
+    let handleChange = useCallback(
+      (event: ChangeEvent<HTMLInputElement>) => {
+        onChange?.(event.target.value);
+      },
+      [onChange],
+    );
+
+    let handleBlur = useCallback(
+      (event: FocusEvent<HTMLInputElement>) => {
+        onBlur?.(event.target.value);
+      },
+      [onBlur],
+    );
+
+    let handleClear = useCallback(() => {
+      if (fieldName && form && !name) {
+        form.setValue(fieldName, '');
+      } else {
+        onChange?.('');
+      }
+    }, [fieldName, form, name, onChange]);
+
+    let rootProps: Record<string, unknown> = {
+      className: theme.root('relative', className),
+      type,
+      disabled,
+    };
+
+    let inputProps: Record<string, unknown> = {
+      className: theme.input(null, className),
+      type,
+      disabled,
+      placeholder,
+      ref,
+    };
+
+    let iconProps: Record<string, unknown> = {
+      className: theme.icon('absolute'),
+    };
+
+    let clearButtonProps: Record<string, unknown> = {
+      className: theme.clearButton('absolute'),
+    };
+
+    if (Icon) {
+      rootProps['data-headlessui-icon'] = '';
+      inputProps['data-headlessui-icon'] = '';
+      iconProps['data-headlessui-icon'] = '';
+      clearButtonProps['data-headlessui-icon'] = '';
+    }
+
+    if (showClearButton) {
+      rootProps['data-headlessui-clear-button'] = '';
+      inputProps['data-headlessui-clear-button'] = '';
+      iconProps['data-headlessui-clear-button'] = '';
+      clearButtonProps['data-headlessui-clear-button'] = '';
+    }
+
+    if (fieldName && form && !name) {
+      if (ref) {
+        let register = form.register(fieldName, {
+          valueAsNumber: type === 'number',
+        });
+
+        inputProps = {
+          ...inputProps,
+          ...register,
+        };
+        inputProps.ref = (instance: unknown) => {
+          if (typeof ref === 'function') {
+            throw new TypeError("Ref can't be a function!");
+          }
+
+          // @ts-expect-error -- we need to assign, and it actually works
+          // eslint-disable-next-line no-param-reassign -- needed
+          ref.current = instance;
+
+          register.ref(instance);
+        };
+      } else {
+        inputProps = {
+          ...inputProps,
+          ...form.register(fieldName, {
+            valueAsNumber: type === 'number',
+          }),
+        };
+      }
+
+      return (
+        <span {...rootProps}>
+          <HeadlessInput {...inputProps} />
+          {Icon ?
+            <Icon {...iconProps} />
+          : null}
+          {showClearButton ?
+            <XMarkIcon {...clearButtonProps} onClick={handleClear} />
+          : null}
+        </span>
+      );
+    }
+
+    return (
+      <span {...rootProps}>
+        <HeadlessInput
+          name={name ?? ''}
+          value={String(value ?? '')}
+          placeholder={placeholder}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          {...inputProps}
+        />
+        {Icon ?
+          <Icon {...iconProps} />
+        : null}
+        {showClearButton ?
+          <XMarkIcon {...clearButtonProps} onClick={handleClear} />
+        : null}
+      </span>
+    );
+  },
+);

package/source/components/Label.tsx

@@ -0,0 +1,18 @@
+import {Label as HeadlessLabel} from '@headlessui/react';
+import {type PropsWithChildren} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+
+export const useLabelTheme = createComponentTheme('Label');
+
+export type LabelProps = PropsWithChildren<
+  ComponentProps<typeof useLabelTheme> & {
+    className?: string;
+  }
+>;
+
+export function Label({className, children}: LabelProps) {
+  let theme = useLabelTheme();
+
+  return <HeadlessLabel className={theme(null, className)}>{children}</HeadlessLabel>;
+}

package/source/components/Listbox.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable react/jsx-no-bind -- needed */
+import {Listbox as HeadlessListbox} from '@headlessui/react';
+import {ChevronDownIcon} from '@heroicons/react/24/outline';
+import {useCallback} from 'react';
+import {Controller} from 'react-hook-form';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+import {useFieldName, useForm} from './internals.js';
+
+export const useListboxTheme = createComponentTheme('Listbox', {
+  variants: {disabled: [true, false]},
+  elements: ['root', 'label', 'icon', 'panel', 'items', 'item'],
+});
+
+type ListboxItem<T> = {
+  value: T;
+  label: string;
+};
+
+export type ListboxProps<T> = ComponentProps<typeof useListboxTheme> & {
+  placeholder?: string;
+  value?: T | undefined;
+  items: Array<ListboxItem<T>>;
+  onChange?: (selectedValue: T) => void;
+  className?: string;
+};
+
+export function Listbox<T>({
+  items,
+  placeholder,
+  onChange,
+  value,
+  disabled = false,
+  className,
+}: ListboxProps<T>) {
+  let theme = useListboxTheme({disabled});
+  let form = useForm();
+  let fieldName = useFieldName();
+
+  const handleChange = useCallback(
+    (selectedValue: T) => {
+      onChange?.(selectedValue);
+    },
+    [onChange],
+  );
+
+  if (fieldName && form) {
+    return (
+      <Controller
+        name={fieldName}
+        control={form.control}
+        render={({field}) => {
+          let selectedItem = items.find((item) => item.value === field.value);
+          let handleChange = field.onChange;
+
+          return (
+            <HeadlessListbox disabled={disabled} value={field.value as T} onChange={handleChange}>
+              <div className="relative">
+                <HeadlessListbox.Button className={theme.root(null, className)}>
+                  <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>
+                    {selectedItem?.label ?? placeholder ?? null}
+                  </span>
+                  <ChevronDownIcon className={theme.icon()} />
+                </HeadlessListbox.Button>
+                <HeadlessListbox.Options className={theme.panel()}>
+                  <div className={theme.items()}>
+                    {items.map((item) => (
+                      <HeadlessListbox.Option
+                        key={item.label}
+                        value={item.value}
+                        className={theme.item('cursor-pointer')}
+                      >
+                        {item.label}
+                      </HeadlessListbox.Option>
+                    ))}
+                  </div>
+                </HeadlessListbox.Options>
+              </div>
+            </HeadlessListbox>
+          );
+        }}
+      />
+    );
+  }
+
+  let selectedItem = items.find((item) => item.value === value);
+
+  return (
+    <HeadlessListbox disabled={disabled} value={value} onChange={handleChange}>
+      <div className="relative">
+        <HeadlessListbox.Button className={theme.root(null, className)}>
+          <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>
+            {selectedItem?.label ?? placeholder ?? null}
+          </span>
+          <ChevronDownIcon className={theme.icon()} />
+        </HeadlessListbox.Button>
+        <HeadlessListbox.Options className={theme.panel()}>
+          <div className={theme.items()}>
+            {items.map((item) => (
+              <HeadlessListbox.Option
+                key={item.label}
+                value={item.value}
+                className={theme.item('cursor-pointer')}
+              >
+                {item.label}
+              </HeadlessListbox.Option>
+            ))}
+          </div>
+        </HeadlessListbox.Options>
+      </div>
+    </HeadlessListbox>
+  );
+}

package/source/components/Menu.tsx

@@ -0,0 +1,19 @@
+import {Menu as HeadlessMenu} from '@headlessui/react';
+import {type PropsWithChildren} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+
+export const useMenuTheme = createComponentTheme('Menu');
+
+export type MenuProps = PropsWithChildren<
+  ComponentProps<typeof useMenuTheme> & {
+    className?: string;
+  }
+>;
+
+export function Menu({className, children}: MenuProps) {
+  let theme = useMenuTheme();
+
+  // @ts-expect-error - `className` should exist on the `MenuItem` from Headless UI, and it actually works; search for more info
+  return <HeadlessMenu className={theme(null, className)}>{children}</HeadlessMenu>;
+}

package/source/components/MenuButton.tsx

@@ -0,0 +1,18 @@
+import {MenuButton as HeadlessMenuButton} from '@headlessui/react';
+import {type PropsWithChildren} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+
+export const useMenuButtonTheme = createComponentTheme('MenuButton');
+
+export type MenuButtonProps = PropsWithChildren<
+  ComponentProps<typeof useMenuButtonTheme> & {
+    className?: string;
+  }
+>;
+
+export function MenuButton({className, children}: MenuButtonProps) {
+  let theme = useMenuButtonTheme();
+
+  return <HeadlessMenuButton className={theme(null, className)}>{children}</HeadlessMenuButton>;
+}

package/source/components/MenuItem.tsx

@@ -0,0 +1,19 @@
+import {MenuItem as HeadlessMenuItem} from '@headlessui/react';
+import {type PropsWithChildren} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+
+export const useMenuItemTheme = createComponentTheme('MenuItem');
+
+export type MenuItemProps = PropsWithChildren<
+  ComponentProps<typeof useMenuItemTheme> & {
+    className?: string;
+  }
+>;
+
+export function MenuItem({className, children}: MenuItemProps) {
+  let theme = useMenuItemTheme();
+
+  // @ts-expect-error - `className` should exist on the `MenuItem` from Headless UI, and it actually works; search for more info
+  return <HeadlessMenuItem className={theme(null, className)}>{children}</HeadlessMenuItem>;
+}

package/source/components/MenuItems.tsx

@@ -0,0 +1,18 @@
+import {MenuItems as HeadlessMenuItems} from '@headlessui/react';
+import {type PropsWithChildren} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+
+export const useMenuItemsTheme = createComponentTheme('MenuItems');
+
+export type MenuItemsProps = PropsWithChildren<
+  ComponentProps<typeof useMenuItemsTheme> & {
+    className?: string;
+  }
+>;
+
+export function MenuItems({className, children}: MenuItemsProps) {
+  let theme = useMenuItemsTheme();
+
+  return <HeadlessMenuItems className={theme(null, className)}>{children}</HeadlessMenuItems>;
+}

package/source/components/Popover.tsx

@@ -0,0 +1,18 @@
+import {Popover as HeadlessPopover} from '@headlessui/react';
+import {type PropsWithChildren} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+
+export const usePopoverTheme = createComponentTheme('Popover');
+
+export type PopoverProps = PropsWithChildren<
+  ComponentProps<typeof usePopoverTheme> & {
+    className?: string;
+  }
+>;
+
+export function Popover({className, children}: PopoverProps) {
+  let theme = usePopoverTheme();
+
+  return <HeadlessPopover className={theme('relative', className)}>{children}</HeadlessPopover>;
+}

package/source/components/PopoverButton.tsx

@@ -0,0 +1,45 @@
+import {Popover as HeadlessPopover} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  forwardRef,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+
+export const usePopoverButtonTheme = createComponentTheme('PopoverButton');
+
+export type PopoverButtonProps<T extends ElementType> = ComponentPropsWithoutRef<T> &
+  ComponentProps<typeof usePopoverButtonTheme> & {
+    className?: string;
+    as?: T | undefined;
+    onPointerEnter?: () => void;
+    onPointerLeave?: () => void;
+  };
+
+export const PopoverButton = forwardRef(
+  <T extends ElementType = 'button'>(
+    {
+      className,
+      as,
+      children,
+      onPointerEnter,
+      onPointerLeave,
+    }: PropsWithChildren<PopoverButtonProps<T>>,
+    ref: Ref<T>,
+  ) => {
+    let theme = usePopoverButtonTheme();
+
+    let props: Record<string, unknown> = {
+      className: theme(null, className),
+      as: as ?? 'button',
+      ref,
+      onPointerEnter,
+      onPointerLeave,
+    };
+
+    return <HeadlessPopover.Button {...props}>{children}</HeadlessPopover.Button>;
+  },
+);

package/source/components/PopoverPanel.tsx

@@ -0,0 +1,37 @@
+import {
+  Popover as HeadlessPopover,
+  type PopoverPanelProps as HeadlessPopoverPanelProps,
+} from '@headlessui/react';
+import {type ReactElement, type ReactNode} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+
+export const usePopoverPanelTheme = createComponentTheme('PopoverPanel');
+
+export type PopoverPanelProps = ComponentProps<typeof usePopoverPanelTheme> & {
+  anchor?: HeadlessPopoverPanelProps['anchor'] | undefined;
+  className?: string | undefined;
+  children: ReactNode | ((renderProps: {close: () => void}) => ReactElement) | undefined;
+  static?: boolean | undefined;
+};
+
+export function PopoverPanel({
+  static: isStatic = false,
+  anchor,
+  className,
+  children,
+}: PopoverPanelProps) {
+  let theme = usePopoverPanelTheme();
+
+  // this is done this way because Headless UI's Popover doesn't accept `undefined` for `anchor` with `exactOptionalProperties: true`
+  let props: Record<string, unknown> = {
+    className: theme(null, className),
+    anchor,
+  };
+
+  if (isStatic) {
+    props.static = true;
+  }
+
+  return <HeadlessPopover.Panel {...props}>{children}</HeadlessPopover.Panel>;
+}

package/source/components/Radio.tsx

@@ -0,0 +1,46 @@
+import {Radio as HeadlessRadio} from '@headlessui/react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+
+export const useRadioTheme = createComponentTheme('Radio', {
+  variants: {
+    disabled: [true, false],
+  },
+  elements: ['root', 'checked', 'unchecked', 'icon'],
+});
+
+export type RadioProps<T extends boolean | number | string> = ComponentProps<
+  typeof useRadioTheme
+> & {
+  name?: string;
+  className?: string;
+  value: T;
+};
+
+export function Radio<T extends boolean | number | string>({
+  name, // TODO: use it somehow
+  className,
+  disabled = false,
+  value,
+}: RadioProps<T>) {
+  let theme = useRadioTheme({disabled});
+
+  return (
+    <HeadlessRadio className={theme.root('group relative', className)} value={value}>
+      <div className={theme.checked()}>
+        <svg
+          className={theme.icon()}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 25.334 25.334"
+          xmlSpace="preserve"
+        >
+          <path
+            d="M25.334,12.667c0,6.996-5.672,12.667-12.668,12.667C5.672,25.334,0,19.663,0,12.667S5.672,0,12.666,0 C19.662,0,25.334,5.671,25.334,12.667z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div className={theme.unchecked()} />
+    </HeadlessRadio>
+  );
+}

package/source/components/RadioField.tsx

@@ -0,0 +1,34 @@
+import {Field as HeadlessField} from '@headlessui/react';
+import {type PropsWithChildren} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+// import {fieldNameContext} from './fieldNameContext.js';
+// import {useForm} from './useForm.js';
+
+export const useRadioFieldTheme = createComponentTheme('RadioField');
+
+export type RadioFieldProps = PropsWithChildren<
+  ComponentProps<typeof useRadioFieldTheme> & {
+    className?: string;
+    // name?: string | undefined;
+  }
+>;
+
+export function RadioField({/*name,*/ className, children}: RadioFieldProps) {
+  let theme = useRadioFieldTheme();
+  // let form = useForm();
+
+  // if (form && name) {
+  //   return (
+  //     <form.Field name={name} validators={validators}>
+  //       {(field) => (
+  //         <fieldNameContext.Provider value={field.name}>
+  //           <HeadlessField className={theme(null, className)}>{children}</HeadlessField>
+  //         </fieldNameContext.Provider>
+  //       )}
+  //     </form.Field>
+  //   );
+  // }
+
+  return <HeadlessField className={theme(null, className)}>{children}</HeadlessField>;
+}