@jakubmazanec/ui 0.1.0-unstable.0c19abe

package/source/components/RadioGroupField.tsx

@@ -0,0 +1,101 @@
+/* eslint-disable react/jsx-no-bind -- needed */
+import {RadioGroup as HeadlessRadioGroup} from '@headlessui/react';
+import {type PropsWithChildren, useCallback} from 'react';
+import {Controller} from 'react-hook-form';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+import {fieldNameContext, useForm} from './internals.js';
+
+export const useRadioGroupFieldTheme = createComponentTheme('RadioGroupField', {
+  variants: {
+    disabled: [true, false],
+  },
+});
+
+export type RadioGroupFieldProps<T extends boolean | number | string> = PropsWithChildren<
+  ComponentProps<typeof useRadioGroupFieldTheme> & {
+    name?: string;
+    className?: string;
+    value?: T;
+    defaultValue?: T;
+    onChange?: ((value: T) => void) | undefined;
+  }
+>;
+
+export function RadioGroupField<T extends boolean | number | string>({
+  name,
+  className,
+  disabled = false,
+  onChange,
+  value,
+  defaultValue,
+  children,
+}: RadioGroupFieldProps<T>) {
+  let theme = useRadioGroupFieldTheme({disabled});
+  let form = useForm();
+
+  let handleChange = useCallback(
+    (value: T) => {
+      onChange?.(value);
+    },
+    [onChange],
+  );
+
+  if (name && form) {
+    return (
+      <Controller
+        name={name}
+        control={form.control}
+        render={({field}) => {
+          let handleChange = field.onChange;
+          let handleBlur = field.onBlur;
+
+          return (
+            <fieldNameContext.Provider value={name}>
+              <HeadlessRadioGroup
+                className={theme(null, className)}
+                name={name}
+                value={field.value as T}
+                defaultValue={defaultValue as T}
+                disabled={disabled}
+                onChange={handleChange}
+                onBlur={handleBlur}
+              >
+                {children}
+              </HeadlessRadioGroup>
+            </fieldNameContext.Provider>
+          );
+        }}
+      />
+    );
+  }
+
+  if (name) {
+    return (
+      <fieldNameContext.Provider value={name}>
+        <HeadlessRadioGroup
+          className={theme(null, className)}
+          name={name}
+          value={value as T}
+          defaultValue={defaultValue as T}
+          disabled={disabled}
+          onChange={handleChange}
+        >
+          {children}
+        </HeadlessRadioGroup>
+      </fieldNameContext.Provider>
+    );
+  }
+
+  return (
+    <HeadlessRadioGroup
+      className={theme(null, className)}
+      value={value as T}
+      defaultValue={defaultValue as T}
+      disabled={disabled}
+      onChange={handleChange}
+    >
+      {children}
+    </HeadlessRadioGroup>
+  );
+}

package/source/components/Spinner.tsx

@@ -0,0 +1,46 @@
+import React, {type FC} from 'react';
+import {twMerge} from 'tailwind-merge';
+
+export interface SpinnerProps extends React.ComponentProps<'svg'> {
+  className?: string;
+  size?: 'small' | 'medium' | 'large';
+}
+
+export const Spinner: FC<SpinnerProps> = ({size = 'medium', className}) => {
+  let sizeClasses = 'w-8 h-8';
+
+  if (size === 'small') {
+    sizeClasses = 'w-4 h-4';
+  } else if (size === 'large') {
+    sizeClasses = 'w-12 h-12';
+  }
+
+  return (
+    <div
+      role="status"
+      className={twMerge(
+        'inline-flex items-center justify-center fill-black text-gray-200',
+        className,
+      )}
+    >
+      <svg
+        aria-hidden="true"
+        className={`${sizeClasses} animate-spin`}
+        viewBox="0 0 101 101"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
+        />
+      </svg>
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+};
+
+export const MemoizedSpinner = React.memo(Spinner);

package/source/components/Table.tsx

@@ -0,0 +1,31 @@
+import {type PropsWithChildren} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+
+export const useTableTheme = createComponentTheme('Table', {
+  elements: ['root', 'table'],
+});
+
+export type TableProps = PropsWithChildren<
+  ComponentProps<typeof useTableTheme> & {
+    gridTemplateColumns: string;
+    className?: string;
+  }
+>;
+
+export function Table({gridTemplateColumns, className, children}: TableProps) {
+  let theme = useTableTheme();
+
+  return (
+    <div className={theme.root(null, className)}>
+      <div
+        className={theme.table(null, className)}
+        style={{
+          gridTemplateColumns,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/source/components/TableCell.tsx

@@ -0,0 +1,17 @@
+import {type PropsWithChildren} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+
+export const useTableCellTheme = createComponentTheme('TableCell');
+
+export type TableCellProps = PropsWithChildren<
+  ComponentProps<typeof useTableCellTheme> & {
+    className?: string;
+  }
+>;
+
+export function TableCell({className, children}: TableCellProps) {
+  let theme = useTableCellTheme();
+
+  return <div className={theme(null, className)}>{children}</div>;
+}

package/source/components/TableHeader.tsx

@@ -0,0 +1,19 @@
+import {type PropsWithChildren} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+
+export const useTableHeaderTheme = createComponentTheme('TableHeader');
+
+export type TableHeaderProps = PropsWithChildren<
+  ComponentProps<typeof useTableHeaderTheme> & {
+    className?: string;
+  }
+>;
+
+export function TableHeader({className, children}: TableHeaderProps) {
+  // let theme = useTableHeaderTheme();
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment -- false positive
+  return <>{children}</>;
+  // return <div className={theme(null, className)}>{children}</div>;
+}

package/source/components/TableHeaderCell.tsx

@@ -0,0 +1,17 @@
+import {type PropsWithChildren} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+
+export const useTableHeaderCellTheme = createComponentTheme('TableHeaderCell');
+
+export type TableHeaderCellProps = PropsWithChildren<
+  ComponentProps<typeof useTableHeaderCellTheme> & {
+    className?: string;
+  }
+>;
+
+export function TableHeaderCell({className, children}: TableHeaderCellProps) {
+  let theme = useTableHeaderCellTheme();
+
+  return <div className={theme(null, className)}>{children}</div>;
+}

package/source/components/TableRow.tsx

@@ -0,0 +1,17 @@
+import {type PropsWithChildren} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+
+export const useTableRowTheme = createComponentTheme('TableRow');
+
+export type TableRowProps = PropsWithChildren<
+  ComponentProps<typeof useTableRowTheme> & {
+    className?: string;
+  }
+>;
+
+export function TableRow({className, children}: TableRowProps) {
+  let theme = useTableRowTheme();
+
+  return <div className={theme(null, className)}>{children}</div>;
+}

package/source/components/Textarea.tsx

@@ -0,0 +1,142 @@
+import {Textarea as HeadlessTextarea} from '@headlessui/react';
+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 useTextareaTheme = createComponentTheme('Textarea', {
+  variants: {
+    disabled: [true, false],
+  },
+  elements: ['root', 'input', 'icon'],
+});
+
+export type TextareaProps = ComponentProps<typeof useTextareaTheme> & {
+  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;
+};
+
+export const Textarea = forwardRef(
+  <T extends ElementType = 'textarea'>(
+    {
+      type = 'text',
+      name,
+      value,
+      className,
+      disabled = false,
+      icon: Icon,
+      onChange,
+      onBlur,
+      placeholder,
+    }: TextareaProps,
+    ref: Ref<T>,
+  ) => {
+    let theme = useTextareaTheme({disabled});
+    let form = useForm();
+    let fieldName = useFieldName();
+
+    let handleChange = useCallback(
+      (event: ChangeEvent<HTMLTextAreaElement>) => {
+        onChange?.(event.target.value);
+      },
+      [onChange],
+    );
+
+    let handleBlur = useCallback(
+      (event: FocusEvent<HTMLTextAreaElement>) => {
+        onBlur?.(event.target.value);
+      },
+      [onBlur],
+    );
+
+    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,
+    };
+
+    if (Icon) {
+      rootProps['data-headlessui-icon'] = '';
+      inputProps['data-headlessui-icon'] = '';
+    }
+
+    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}>
+          <HeadlessTextarea {...inputProps} />
+          {Icon ?
+            <Icon className={theme.icon('absolute')} />
+          : null}
+        </span>
+      );
+    }
+
+    return (
+      <span {...rootProps}>
+        <HeadlessTextarea
+          name={name ?? ''}
+          value={String(value ?? '')}
+          placeholder={placeholder}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          {...inputProps}
+        />
+        {Icon ?
+          <Icon className={theme.icon('absolute')} />
+        : null}
+      </span>
+    );
+  },
+);

package/source/components/internals/fieldNameContext.ts

@@ -0,0 +1,3 @@
+import {createContext} from 'react';
+
+export const fieldNameContext = createContext<string | undefined>(undefined);

package/source/components/internals/formContext.ts

@@ -0,0 +1,4 @@
+import {createContext} from 'react';
+import {type UseFormReturn} from 'react-hook-form';
+
+export const formContext = createContext<UseFormReturn | undefined>(undefined);

package/source/components/internals/useField.ts

@@ -0,0 +1,19 @@
+import {type Control, useController} from 'react-hook-form';
+
+import {useFieldName} from './useFieldName.js';
+import {useForm} from './useForm.js';
+
+export function useField() {
+  let name = useFieldName();
+  let form = useForm();
+  let {field, fieldState} = useController({
+    name: name ?? '',
+    control: form?.control as Control, // TODO: `useControllel` doesn't accept `undefined` and cannot be called conditionally :(
+  });
+
+  if (!name || !form) {
+    return undefined;
+  }
+
+  return {name, props: field, state: fieldState, form};
+}

package/source/components/internals/useFieldName.ts

@@ -0,0 +1,7 @@
+import {useContext} from 'react';
+
+import {fieldNameContext} from './fieldNameContext.js';
+
+export function useFieldName() {
+  return useContext(fieldNameContext);
+}

package/source/components/internals/useForm.ts

@@ -0,0 +1,7 @@
+import {useContext} from 'react';
+
+import {formContext} from './formContext.js';
+
+export function useForm() {
+  return useContext(formContext);
+}

package/source/components/internals.ts

@@ -0,0 +1,5 @@
+export * from './internals/fieldNameContext.js';
+export * from './internals/formContext.js';
+export * from './internals/useField.js';
+export * from './internals/useFieldName.js';
+export * from './internals/useForm.js';

package/source/components.ts

@@ -0,0 +1,32 @@
+export * from './components/Button.js';
+export * from './components/Card.js';
+export * from './components/Checkbox.js';
+export * from './components/CheckboxField.js';
+export * from './components/Combobox.js';
+export * from './components/ConfirmDialog.js';
+export * from './components/Dialog.js';
+export * from './components/DialogPanel.js';
+export * from './components/DialogTitle.js';
+export * from './components/Error.js';
+export * from './components/Field.js';
+export * from './components/Form.js';
+export * from './components/Input.js';
+export * from './components/Label.js';
+export * from './components/Listbox.js';
+export * from './components/Menu.js';
+export * from './components/MenuButton.js';
+export * from './components/MenuItem.js';
+export * from './components/MenuItems.js';
+export * from './components/Popover.js';
+export * from './components/PopoverButton.js';
+export * from './components/PopoverPanel.js';
+export * from './components/Radio.js';
+export * from './components/RadioField.js';
+export * from './components/RadioGroupField.js';
+export * from './components/Spinner.js';
+export * from './components/Table.js';
+export * from './components/TableCell.js';
+export * from './components/TableHeader.js';
+export * from './components/TableHeaderCell.js';
+export * from './components/TableRow.js';
+export * from './components/Textarea.js';

package/source/development/createTailwindConfig.ts

@@ -0,0 +1,153 @@
+import {type Config as TailwindConfig} from 'tailwindcss';
+// TODO: fix this when Tailwind CSS v4 is released
+// @ts-expect-error -- Tailwind CSS v3 is missing `exports` field in the package.json file, and it won't be added
+import tailwindPlugin from 'tailwindcss/plugin';
+import type TailwindPlugin from 'tailwindcss/plugin.d.ts';
+
+import {DEFAULT_STOP, type DEFAULT_STOPS} from './internals/constants.js';
+import {createPalette} from './internals/createPalette.js';
+import {resolveModule} from './internals/resolveModule.js';
+
+const PREFIX = 'ui';
+
+let plugin = tailwindPlugin as typeof TailwindPlugin;
+
+export type CreateTailwindConfigOptions = {
+  content?: string[] | undefined;
+  colors?: Record<
+    string,
+    | string
+    | {
+        swatches: Array<{hex: string; stop: (typeof DEFAULT_STOPS)[number]}>;
+        hueShift?: number;
+        saturationShift?: number;
+      }
+    | {hex: string; hueShift?: number; saturationShift?: number}
+  >;
+};
+
+export function createTailwindConfig({
+  content = ['./{.storybook,app,source,stories}/**/*.{js,jsx,ts,tsx,mdx}'],
+  colors,
+}: CreateTailwindConfigOptions = {}): TailwindConfig {
+  let themeColors = {
+    transparent: 'transparent',
+    current: 'currentColor',
+    white: '#fff',
+    black: '#000',
+  };
+
+  for (let [name, color] of Object.entries(colors ?? {})) {
+    if (typeof color === 'string') {
+      themeColors = {
+        ...themeColors,
+        ...createPalette({
+          name,
+          swatches: [
+            {
+              hex: color,
+              stop: DEFAULT_STOP,
+            },
+          ],
+          hueShift: 0,
+          saturationShift: 0,
+        }),
+      };
+    } else if ('swatches' in color) {
+      themeColors = {
+        ...themeColors,
+        ...createPalette({
+          name,
+          swatches: color.swatches,
+          hueShift: color.hueShift ?? 0,
+          saturationShift: color.saturationShift ?? 0,
+        }),
+      };
+    } else if ('hex' in color) {
+      themeColors = {
+        ...themeColors,
+        ...createPalette({
+          name,
+          swatches: [{hex: color.hex, stop: DEFAULT_STOP}],
+          hueShift: color.hueShift ?? 0,
+          saturationShift: color.saturationShift ?? 0,
+        }),
+      };
+    }
+  }
+
+  let resolvedContent = [];
+
+  for (let contentPath of content) {
+    if (contentPath.startsWith('.') || contentPath.startsWith('/')) {
+      resolvedContent.push(contentPath);
+    } else if (typeof document !== 'undefined') {
+      resolvedContent.push(`${resolveModule(contentPath)}/**`);
+    }
+  }
+
+  return {
+    content: resolvedContent,
+    theme: {
+      colors: themeColors,
+      extend: {
+        spacing: {
+          13: '3.25rem',
+          15: '3.75',
+          17: '4.25rem',
+          18: '4.5rem',
+          19: '4.75rem',
+          21: '5.25rem',
+          22: '5.5rem',
+          23: '5.75rem',
+          25: '6.25rem',
+          26: '6.5rem',
+          27: '6.75rem',
+          29: '6.25rem',
+          30: '7.5rem',
+          34: '8.5rem',
+          38: '9.5rem',
+          40: '10rem',
+        },
+        fontFamily: {
+          sans: [
+            'InterVariable',
+            'ui-sans-serif',
+            'system-ui',
+            'sans-serif',
+            '"Apple Color Emoji"',
+            '"Segoe UI Emoji"',
+            '"Segoe UI Symbol"',
+            '"Noto Color Emoji"',
+          ],
+        },
+      },
+    },
+    future: {
+      hoverOnlyWhenSupported: true,
+    },
+    plugins: [
+      plugin(({addVariant}) => {
+        for (let state of ['open', 'checked', 'selected', 'active', 'disabled']) {
+          addVariant(`${PREFIX}-${state}`, [
+            `&[data-headlessui-state~="${state}"]`,
+            `:where([data-headlessui-state~="${state}"]) &`,
+          ]);
+
+          addVariant(`${PREFIX}-not-${state}`, [
+            `&[data-headlessui-state]:not([data-headlessui-state~="${state}"])`,
+            `:where([data-headlessui-state]:not([data-headlessui-state~="${state}"])) &:not([data-headlessui-state])`,
+          ]);
+        }
+
+        addVariant(`${PREFIX}-focus-visible`, ':where([data-headlessui-focus-visible]) &:focus');
+        addVariant(
+          `${PREFIX}-not-focus-visible`,
+          '&:focus:where(:not([data-headlessui-focus-visible] &))',
+        );
+      }),
+    ],
+  };
+}
+
+// plugins based on https://github.com/tailwindlabs/headlessui/tree/626a253dcf09589e2a2fbbfd0c279120153394cc/packages/@headlessui-tailwindcss (see https://github.com/tailwindlabs/headlessui/blob/626a253dcf09589e2a2fbbfd0c279120153394cc/packages/%40headlessui-tailwindcss/LICENSE for license)