@jakubmazanec/ui 0.1.0-next.070f0f6

package/source/components/Combobox.tsx

@@ -0,0 +1,298 @@
+// TODO: fix somehow
+/* eslint-disable complexity -- TODO */
+import {
+  Combobox as HeadlessCombobox,
+  ComboboxButton as HeadlessComboboxButton,
+  ComboboxInput as HeadlessComboboxInput,
+  ComboboxOptions as HeadlessComboboxOptions,
+  type ComboboxProps as HeadlessComboboxProps,
+} from '@headlessui/react';
+import {ChevronDownIcon} from '@heroicons/react/24/outline';
+import {
+  type ChangeEvent,
+  Children,
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  Fragment,
+  type PropsWithChildren,
+  type Ref,
+  useCallback,
+  useState,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {ComboboxOption} from './ComboboxOption.js';
+import {Icon} from './Icon.js';
+import {forwardRef, useFormId} from './internals.js';
+import {useField} from './useField.js';
+import {useFieldName} from './useFieldName.js';
+
+export const useComboboxTheme = createComponentTheme('Combobox', {
+  variants: {disabled: [true, false], invalid: [true, false]},
+  elements: ['root', 'input', 'icon', 'options'],
+});
+
+const COMBOBOX_ELEMENT = Fragment;
+
+export type ComboboxItem<V> = {
+  value: V;
+  label: string;
+};
+
+export type ComboboxProps<
+  T extends ElementType,
+  V extends boolean | number | string,
+> = PropsWithChildren<
+  ComponentProps<typeof useComboboxTheme> &
+    ComponentPropsWithoutRef<T> &
+    (
+      | {
+          as?: T | undefined;
+          value?: V | undefined;
+          defaultValue?: V | undefined;
+          multiple?: false | undefined;
+          items?: Array<ComboboxItem<V>> | undefined;
+          placeholder?: string;
+          immediate?: boolean | undefined;
+          virtual?: boolean | undefined;
+          customValue?: boolean | undefined;
+          name?: string | undefined;
+          className?: string;
+          onChange?: (selectedValue: V | undefined) => void;
+        }
+      | {
+          as?: T | undefined;
+          value?: V[] | undefined;
+          defaultValue?: V[] | undefined;
+          multiple: true;
+          items?: Array<ComboboxItem<V>> | undefined;
+          placeholder?: string;
+          immediate?: boolean | undefined;
+          virtual?: boolean | undefined;
+          customValue?: boolean | undefined;
+          name?: string | undefined;
+          className?: string;
+          onChange?: (selectedValue: V[] | undefined) => void;
+        }
+    )
+>;
+
+export const Combobox = forwardRef(
+  <T extends ElementType = typeof COMBOBOX_ELEMENT, V extends boolean | number | string = string>(
+    {
+      disabled = false,
+      invalid = false,
+      as = COMBOBOX_ELEMENT as unknown as T,
+      value,
+      defaultValue,
+      multiple,
+      items,
+      placeholder,
+      immediate = true,
+      virtual = false,
+      customValue = false,
+      name,
+      className,
+      onChange,
+      children,
+      ...rest
+    }: ComboboxProps<T, V>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useComboboxTheme({disabled, invalid});
+    let formId = useFormId();
+    let field = useField();
+    let fieldName = useFieldName();
+    let [query, setQuery] = useState('');
+
+    let handleChange = useCallback(
+      (selectedValue: V | null) => {
+        if (selectedValue) {
+          onChange?.(selectedValue as V & V[]);
+        }
+
+        if (selectedValue === null) {
+          onChange?.(undefined);
+        }
+      },
+      [onChange],
+    );
+
+    let displayValue = useCallback(
+      (option: string) => {
+        if (items) {
+          let selectedItem = items.find((item) => item.value === option);
+
+          if (selectedItem) {
+            return selectedItem.label;
+          }
+        }
+
+        return option;
+      },
+      [items],
+    );
+
+    let handleQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+      setQuery(event.target.value);
+    }, []);
+
+    if (virtual && !items) {
+      throw new Error('Combobox requires `items` prop in virtual scrolling mode!');
+    }
+
+    if (virtual && customValue) {
+      throw new Error("Combobox doesn't support `customValue` prop in virtual scrolling mode!");
+    }
+
+    if (items && children) {
+      throw new Error('Combobox accepts only either `items` prop, or children!');
+    }
+
+    let filteredItems =
+      query ?
+        items?.filter((item) =>
+          `${item.label as number | string}`
+            .toLowerCase()
+            .replace(/\s+/g, '')
+            .includes(query.toLowerCase().replace(/\s+/g, '')),
+        )
+      : items;
+    let filteredChildren =
+      query ?
+        Children.toArray(children).filter((child) => {
+          if (
+            typeof child === 'object' &&
+            'props' in child &&
+            typeof child.props === 'object' &&
+            typeof (child.props as {children?: unknown[] | string}).children === 'string' &&
+            (child.props as {children: string}).children
+              .toLowerCase()
+              .replace(/\s+/g, '')
+              .includes(query.toLowerCase().replace(/\s+/g, ''))
+          ) {
+            return true;
+          }
+
+          return false;
+        })
+      : children;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessComboboxProps<any, any, any> = {
+      as,
+      ref,
+      name: field?.name ?? fieldName ?? name,
+      value: value ?? null,
+      defaultValue,
+      multiple,
+      disabled,
+      immediate,
+      form: formId,
+      onChange: handleChange,
+      ...rest,
+    };
+
+    if (virtual) {
+      props.virtual = {
+        options: filteredItems?.map((item) => item.value) ?? [],
+      };
+    }
+
+    return (
+      <HeadlessCombobox {...props}>
+        <div className={theme.root('relative', className)} data-component="combobox">
+          <HeadlessComboboxInput
+            className={theme.input(null, className)}
+            size={1} // so the input default width without styling is small
+            displayValue={displayValue}
+            onChange={handleQueryChange}
+          />
+          <HeadlessComboboxButton className={theme.icon('absolute')}>
+            <Icon>
+              <ChevronDownIcon />
+            </Icon>
+          </HeadlessComboboxButton>
+        </div>
+
+        {virtual && filteredItems ?
+          <HeadlessComboboxOptions className={theme.options()} anchor="bottom start">
+            {({option}: {option: V}) => (
+              <ComboboxOption value={option}>
+                {items?.find((item) => item.value === option)?.label}
+              </ComboboxOption>
+            )}
+          </HeadlessComboboxOptions>
+        : null}
+
+        {!virtual && filteredItems ?
+          <HeadlessComboboxOptions className={theme.options()} anchor="bottom start">
+            {customValue && query.length ?
+              <ComboboxOption key={query} value={query}>
+                {query}
+              </ComboboxOption>
+            : null}
+            {filteredItems.map((item) => (
+              <ComboboxOption key={String(item.value)} value={item.value}>
+                {item.label}
+              </ComboboxOption>
+            ))}
+          </HeadlessComboboxOptions>
+        : null}
+
+        {!filteredItems && Array.isArray(filteredChildren) ?
+          <HeadlessComboboxOptions className={theme.options()} anchor="bottom start">
+            {customValue && query.length ?
+              <ComboboxOption value={query}>{query}</ComboboxOption>
+            : null}
+            {filteredChildren}
+          </HeadlessComboboxOptions>
+        : null}
+      </HeadlessCombobox>
+    );
+  },
+);
+
+export const comboboxTheme: ComponentTheme<typeof useComboboxTheme> = {
+  classNames: {
+    root: 'w-full min-w-32',
+    input:
+      'flex w-full items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm',
+    icon: 'text-neutral-500 size-5 top-2 right-2 cursor-pointer',
+    options:
+      'flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left w-[var(--input-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',
+        input: '',
+        icon: 'text-neutral-200',
+        options: 'border-neutral-100',
+      },
+      false: {
+        root: '',
+        input: '',
+        icon: '',
+        options: '',
+      },
+    },
+    invalid: {
+      true: {
+        root: '',
+        input: '',
+        icon: '',
+        options: '',
+      },
+      false: {
+        root: '',
+        input: '',
+        icon: '',
+        options: '',
+      },
+    },
+  },
+};

package/source/components/ComboboxOption.tsx

@@ -0,0 +1,95 @@
+import {
+  ComboboxOption as HeadlessComboboxOption,
+  type ComboboxOptionProps as HeadlessComboboxOptionProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {Icon} from './Icon.js';
+import {forwardRef} from './internals.js';
+
+export const useComboboxOptionTheme = createComponentTheme('ComboboxOption', {
+  variants: {disabled: [true, false]},
+  elements: ['root', 'icon'],
+});
+
+const LISTBOX_OPTION_ELEMENT = 'div';
+
+export type ComboboxOptionProps<
+  T extends ElementType,
+  V extends boolean | number | string,
+> = PropsWithChildren<
+  ComponentProps<typeof useComboboxOptionTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      value: V;
+      className?: string;
+    }
+>;
+
+export const ComboboxOption = forwardRef(
+  <
+    T extends ElementType = typeof LISTBOX_OPTION_ELEMENT,
+    V extends boolean | number | string = string,
+  >(
+    {
+      disabled = false,
+      as = LISTBOX_OPTION_ELEMENT as T,
+      value,
+      className,
+      children,
+      ...rest
+    }: ComboboxOptionProps<T, V>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useComboboxOptionTheme({disabled});
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessComboboxOptionProps<any, any> = {
+      as,
+      ref,
+      value,
+      disabled,
+      className: theme.root('cursor-pointer', className),
+      'data-component': 'combobox-option',
+      ...rest,
+    };
+
+    return (
+      <HeadlessComboboxOption {...props}>
+        <span className={theme.icon('absolute')}>
+          <Icon name="Check" />
+        </span>
+        {children}
+      </HeadlessComboboxOption>
+    );
+  },
+);
+
+export const comboboxOptionTheme: ComponentTheme<typeof useComboboxOptionTheme> = {
+  classNames: {
+    root: 'relative group/option p-1 pr-6 rounded-1 hover:bg-neutral-50 data-[active]:bg-neutral-50 text-sm transition-colors',
+    icon: 'hidden group-data-[selected]/option:block right-1 top-1 text-neutral-500',
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: 'text-neutral-200 cursor-not-allowed',
+        icon: 'text-neutral-200',
+      },
+      false: {
+        root: '',
+        icon: '',
+      },
+    },
+  },
+};

package/source/components/Container.ts

@@ -0,0 +1,84 @@
+import {
+  type ComponentPropsWithoutRef,
+  createElement,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {forwardRef} from './internals.js';
+
+export const useContainerTheme = createComponentTheme('Container', {
+  variants: {
+    spacing: ['extra-small', 'small', 'medium', 'large'],
+    direction: ['row', 'column'],
+    justify: ['normal', 'center', 'spaced'],
+    align: ['normal', 'center'],
+  },
+});
+
+const TEXT_ELEMENT = 'div';
+
+export type ContainerProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useContainerTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const Container = forwardRef(
+  <T extends ElementType = typeof TEXT_ELEMENT>(
+    {
+      spacing = 'medium',
+      direction = 'row',
+      justify = 'normal',
+      align = 'normal',
+      as: Component = TEXT_ELEMENT as T,
+      className,
+      children,
+      ...rest
+    }: ContainerProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useContainerTheme({spacing, direction, justify, align});
+    let props = {
+      ref,
+      className: theme(null, className),
+      'data-component': 'container',
+      ...rest,
+    };
+
+    return createElement(Component, props, children);
+  },
+);
+
+export const containerTheme: ComponentTheme<typeof useContainerTheme> = {
+  className: 'flex',
+  variants: {
+    spacing: {
+      'extra-small': 'gap-1',
+      small: 'gap-2',
+      medium: 'gap-4',
+      large: 'gap-6',
+    },
+    direction: {
+      row: '',
+      column: 'flex-col',
+    },
+    justify: {
+      normal: '',
+      center: 'justify-center',
+      spaced: 'justify-between',
+    },
+    align: {
+      normal: '',
+      center: 'items-center',
+    },
+  },
+};

package/source/components/Description.tsx

@@ -0,0 +1,52 @@
+import {
+  Description as HeadlessDescription,
+  type DescriptionProps as HeadlessDescriptionProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {filterProps, forwardRef} from './internals.js';
+
+export const useDescriptionTheme = createComponentTheme('Description');
+
+const DESCRIPTION_ELEMENT = 'p';
+
+export type DescriptionProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useDescriptionTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string | undefined;
+    }
+>;
+
+export const Description = forwardRef(
+  <T extends ElementType = typeof DESCRIPTION_ELEMENT>(
+    {as = DESCRIPTION_ELEMENT as T, className, children, ...rest}: DescriptionProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useDescriptionTheme();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessDescriptionProps<any> = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      'data-component': 'description',
+      ...rest,
+    });
+
+    return <HeadlessDescription {...props}>{children}</HeadlessDescription>;
+  },
+);
+
+export const descriptionTheme: ComponentTheme<typeof useDescriptionTheme> = {
+  className: 'font-sans text-sm',
+};

package/source/components/Dialog.tsx

@@ -0,0 +1,85 @@
+import {
+  Dialog as HeadlessDialog,
+  DialogBackdrop as HeadlessDialogBackdrop,
+  type DialogProps as HeadlessDialogProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+  useCallback,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {filterProps, forwardRef} from './internals.js';
+
+export const useDialogTheme = createComponentTheme('Dialog', {
+  elements: ['root', 'backdrop'],
+});
+
+const DIALOG_ELEMENT = 'div';
+
+export type DialogProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useDialogTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      open: boolean;
+      static?: boolean | undefined;
+      autoFocus?: boolean | undefined;
+      className?: string;
+      onClose?: () => void;
+    }
+>;
+
+export const Dialog = forwardRef(
+  <T extends ElementType = typeof DIALOG_ELEMENT>(
+    {
+      as = DIALOG_ELEMENT as T,
+      open,
+      static: isStatic,
+      autoFocus,
+      className,
+      onClose,
+      children,
+      ...rest
+    }: DialogProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useDialogTheme();
+
+    let handleClose = useCallback(() => {
+      onClose?.();
+    }, [onClose]);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessDialogProps<any> = filterProps({
+      as,
+      ref,
+      open,
+      static: isStatic,
+      transition: true,
+      onClose: handleClose,
+      'data-component': 'dialog',
+      ...rest,
+    });
+
+    return (
+      <HeadlessDialog {...props}>
+        <HeadlessDialogBackdrop transition className={theme.backdrop('fixed inset-0')} />
+        <div className={theme.root('fixed inset-0', className)}>{children}</div>
+      </HeadlessDialog>
+    );
+  },
+);
+
+export const dialogTheme: ComponentTheme<typeof useDialogTheme> = {
+  classNames: {
+    root: 'flex w-screen items-center justify-center p-4 z-30',
+    backdrop: 'bg-black/30 z-30',
+  },
+};

package/source/components/DialogPanel.tsx

@@ -0,0 +1,54 @@
+import {
+  DialogPanel as HeadlessDialogPanel,
+  type DialogPanelProps as HeadlessDialogPanelProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {filterProps, forwardRef} from './internals.js';
+
+export const useDialogPanelTheme = createComponentTheme('DialogPanel');
+
+const DIALOG_PANEL_ELEMENT = 'div';
+
+export type DialogPanelProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useDialogPanelTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const DialogPanel = forwardRef(
+  <T extends ElementType = typeof DIALOG_PANEL_ELEMENT>(
+    {as = DIALOG_PANEL_ELEMENT as T, className, children, ...rest}: DialogPanelProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useDialogPanelTheme();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessDialogPanelProps<any> = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      transition: true,
+      'data-component': 'dialog-panel',
+      ...rest,
+    });
+
+    return <HeadlessDialogPanel {...props}>{children}</HeadlessDialogPanel>;
+  },
+);
+
+export const dialogPanelTheme: ComponentTheme<typeof useDialogPanelTheme> = {
+  className:
+    'shadow-1 relative flex w-full min-w-[300px] max-w-[900px] flex-col gap-y-6 rounded-4 bg-white p-6 max-h-[calc(100vh-3rem)] overflow-hidden overflow-y-auto',
+};