@jakubmazanec/ui 0.1.0-unstable.0c19abe

package/build/theme/internals.d.ts

@@ -0,0 +1,18 @@
+export * from './internals/booleanToString.js';
+export * from './internals/ClassName.js';
+export * from './internals/ComponentProps.js';
+export * from './internals/ComponentTheme.js';
+export * from './internals/ComponentThemeCompoundVariants.js';
+export * from './internals/ComponentThemeDefinition.js';
+export * from './internals/ComponentThemeDefinitionElements.js';
+export * from './internals/ComponentThemeDefinitionVariants.js';
+export * from './internals/ComponentThemeProps.js';
+export * from './internals/ComponentThemeVariants.js';
+export * from './internals/createComponentTheme.js';
+export * from './internals/createUseComponentThemeReturn.js';
+export * from './internals/cx.js';
+export * from './internals/pickPropertyIfExists.js';
+export * from './internals/themeContext.js';
+export * from './internals/UseComponentTheme.js';
+export * from './internals/UseComponentThemeReturn.js';
+export * from './internals/useTheme.js';

package/build/theme/internals.js

@@ -0,0 +1,20 @@
+"use strict";
+export * from "./internals/booleanToString.js";
+export * from "./internals/ClassName.js";
+export * from "./internals/ComponentProps.js";
+export * from "./internals/ComponentTheme.js";
+export * from "./internals/ComponentThemeCompoundVariants.js";
+export * from "./internals/ComponentThemeDefinition.js";
+export * from "./internals/ComponentThemeDefinitionElements.js";
+export * from "./internals/ComponentThemeDefinitionVariants.js";
+export * from "./internals/ComponentThemeProps.js";
+export * from "./internals/ComponentThemeVariants.js";
+export * from "./internals/createComponentTheme.js";
+export * from "./internals/createUseComponentThemeReturn.js";
+export * from "./internals/cx.js";
+export * from "./internals/pickPropertyIfExists.js";
+export * from "./internals/themeContext.js";
+export * from "./internals/UseComponentTheme.js";
+export * from "./internals/UseComponentThemeReturn.js";
+export * from "./internals/useTheme.js";
+//# sourceMappingURL=internals.js.map

package/build/theme/internals.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/theme/internals.ts"],
+  "sourcesContent": ["export * from './internals/booleanToString.js';\nexport * from './internals/ClassName.js';\nexport * from './internals/ComponentProps.js';\nexport * from './internals/ComponentTheme.js';\nexport * from './internals/ComponentThemeCompoundVariants.js';\nexport * from './internals/ComponentThemeDefinition.js';\nexport * from './internals/ComponentThemeDefinitionElements.js';\nexport * from './internals/ComponentThemeDefinitionVariants.js';\nexport * from './internals/ComponentThemeProps.js';\nexport * from './internals/ComponentThemeVariants.js';\nexport * from './internals/createComponentTheme.js';\nexport * from './internals/createUseComponentThemeReturn.js';\nexport * from './internals/cx.js';\nexport * from './internals/pickPropertyIfExists.js';\nexport * from './internals/themeContext.js';\nexport * from './internals/UseComponentTheme.js';\nexport * from './internals/UseComponentThemeReturn.js';\nexport * from './internals/useTheme.js';\n"],
+  "mappings": ";AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": []
+}

package/build/theme.d.ts

@@ -0,0 +1,3 @@
+export * from './theme/defaultTheme.js';
+export * from './theme/Theme.js';
+export * from './theme/ThemeProvider.js';

package/build/theme.js

@@ -0,0 +1,5 @@
+"use strict";
+export * from "./theme/defaultTheme.js";
+export * from "./theme/Theme.js";
+export * from "./theme/ThemeProvider.js";
+//# sourceMappingURL=theme.js.map

package/build/theme.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../source/theme.ts"],
+  "sourcesContent": ["export * from './theme/defaultTheme.js';\nexport * from './theme/Theme.js';\nexport * from './theme/ThemeProvider.js';\n"],
+  "mappings": ";AAAA,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@jakubmazanec/ui",
+  "version": "0.1.0-unstable.0c19abe",
+  "description": "React component library.",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:jakubmazanec/js-tools.git",
+    "directory": "packages/ui"
+  },
+  "license": "LGPL-3.0-only",
+  "author": "Jakub Mazanec <jakub@mazanec.dev>",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": "./build/main.js",
+    "./package.json": "./package.json",
+    "./development": "./build/development.js"
+  },
+  "files": [
+    "build",
+    "source"
+  ],
+  "scripts": {
+    "build": "del-cli build tsconfig.tsbuildinfo && esbuild \"source/**/*\" --platform=node --target=node20.8 --outdir=build --sourcemap --loader:.woff2=file && tsc && storybook build",
+    "clean": "del-cli coverage build *.tsbuildinfo",
+    "develop": "concurrently \"esbuild \"source/**/*\" --platform=node --target=node20.8 --outdir=build --sourcemap --watch\" \"tsc --watch\" \"storybook dev -p 6006 --no-open\"",
+    "document": "del-cli docs && typedoc --options typedoc.config.cjs",
+    "format": "prettier . --write --ignore-unknown",
+    "lint": "eslint .",
+    "print-colors": "tsx tools/print-colors.ts",
+    "test": "del-cli coverage && vitest run --coverage --passWithNoTests",
+    "typecheck": "tsc --project tsconfig.typecheck.json"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.0.4",
+    "@heroicons/react": "^2.1.3",
+    "@jakubmazanec/ts-utils": "^3.0.1",
+    "culori": "^4.0.1",
+    "lodash": "^4.17.21",
+    "react-hook-form": "^7.51.5",
+    "tailwind-merge": "^2.3.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
+    "@jakubmazanec/eslint-config": "^3.2.0",
+    "@storybook/addon-controls": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/preview-api": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-vite": "^8.1.10",
+    "@storybook/test": "^8.1.10",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/culori": "^2.1.0",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^20.8.5",
+    "@types/react": "^18.2.63",
+    "@types/react-dom": "^18.0.0",
+    "@vitest/coverage-v8": "^1.3.1",
+    "autoprefixer": "^10.4.19",
+    "chromatic": "^11.5.4",
+    "concurrently": "^8.2.2",
+    "del-cli": "^5.1.0",
+    "esbuild": "^0.21.4",
+    "eslint": "^8.56.0",
+    "happy-dom": "^13.0.0",
+    "prettier": "^3.3.0",
+    "prettier-plugin-packagejson": "^2.5.0",
+    "prettier-plugin-tailwindcss": "^0.6.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^8.1.10",
+    "tailwindcss": "^3.4.4",
+    "tsx": "^4.15.6",
+    "typedoc": "^0.25.13",
+    "typedoc-plugin-markdown": "^4.0.3",
+    "typescript": "^5.4.5",
+    "vitest": "^1.3.1"
+  },
+  "peerDependencies": {
+    "react": "18.x",
+    "react-dom": "18.x",
+    "tailwindcss": "3.x"
+  },
+  "packageManager": "npm@10.1.0",
+  "engines": {
+    "node": "^20.8.0"
+  }
+}

package/source/components/Button.ts

@@ -0,0 +1,74 @@
+import {Button as HeadlessButton} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  createElement,
+  type ElementType,
+  forwardRef,
+  type PropsWithChildren,
+  type Ref,
+  useCallback,
+} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+import {useForm} from './internals.js';
+
+export const useButtonTheme = createComponentTheme('Button', {
+  variants: {
+    type: ['solid', 'outline', 'text', 'icon'],
+    size: ['small', 'medium', 'large'],
+    disabled: [true, false],
+  },
+});
+
+export type ButtonProps<T extends ElementType> = ComponentProps<typeof useButtonTheme> &
+  ComponentPropsWithoutRef<T> & {
+    className?: string | undefined;
+    submit?: boolean | undefined;
+    as?: T | undefined;
+    onClick?: (() => void) | undefined;
+    'aria-label'?: string | undefined;
+  };
+
+export const Button = forwardRef(
+  <T extends ElementType = 'button'>(
+    {
+      as,
+      className,
+      type = 'solid',
+      size = 'medium',
+      disabled = false,
+      submit = false,
+      children,
+      onClick,
+      ...rest
+    }: PropsWithChildren<ButtonProps<T>>,
+    ref: Ref<T>,
+  ) => {
+    let theme = useButtonTheme({type, size, disabled});
+    let form = useForm();
+
+    let handleClick = useCallback(() => {
+      onClick?.();
+    }, [onClick]);
+
+    let props: Record<string, unknown> = {
+      className: theme(null, className),
+      onClick: handleClick,
+      disabled,
+      ...rest,
+      ref,
+    };
+
+    let element = as ?? 'button';
+
+    if (element === 'button') {
+      props.type = 'button';
+    }
+
+    if (form && submit) {
+      props.type = 'submit';
+    }
+
+    return createElement(HeadlessButton, props, children);
+  },
+);

package/source/components/Card.tsx

@@ -0,0 +1,10 @@
+import {type PropsWithChildren} from 'react';
+import {twMerge} from 'tailwind-merge';
+
+export type CardProps = {
+  className?: string;
+};
+
+export function Card({className, children}: PropsWithChildren<CardProps>) {
+  return <div className={twMerge('rounded border border-gray-100 p-4', className)}>{children}</div>;
+}

package/source/components/Checkbox.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable react/jsx-no-bind -- needed */
+import {Checkbox as HeadlessCheckbox} from '@headlessui/react';
+import {CheckIcon} from '@heroicons/react/16/solid';
+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 useCheckboxTheme = createComponentTheme('Checkbox', {
+  variants: {
+    disabled: [true, false],
+  },
+  elements: ['root', 'checked', 'unchecked', 'icon'],
+});
+
+export type CheckboxProps = ComponentProps<typeof useCheckboxTheme> & {
+  name?: string;
+  className?: string;
+  value?: boolean;
+  onChange?: ((value: boolean) => void) | undefined;
+};
+
+export function Checkbox({name, className, disabled = false, onChange, value}: CheckboxProps) {
+  let theme = useCheckboxTheme({disabled});
+  let form = useForm();
+  let fieldName = useFieldName();
+
+  let handleChange = useCallback(() => {
+    onChange?.(!value);
+  }, [onChange, value]);
+
+  if (fieldName && form) {
+    return (
+      <Controller
+        name={fieldName}
+        control={form.control}
+        render={({field}) => {
+          let handleChange = field.onChange;
+          let handleBlur = field.onBlur;
+
+          return (
+            <HeadlessCheckbox
+              className={theme.root('group relative', className)}
+              name={fieldName}
+              checked={Boolean(field.value)}
+              onChange={handleChange}
+              onBlur={handleBlur}
+            >
+              <div className={theme.checked()}>
+                <CheckIcon className={theme.icon()} />
+              </div>
+              <div className={theme.unchecked()} />
+            </HeadlessCheckbox>
+          );
+        }}
+      />
+    );
+  }
+
+  // TODO: what to do with name being undefined?
+  return (
+    <HeadlessCheckbox
+      className={theme.root('group relative', className)}
+      name={name ?? ''}
+      checked={Boolean(value)}
+      onChange={handleChange}
+    >
+      <div className={theme.checked()}>
+        <CheckIcon className={theme.icon()} />
+      </div>
+      <div className={theme.unchecked()} />
+    </HeadlessCheckbox>
+  );
+}

package/source/components/CheckboxField.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 useCheckboxFieldTheme = createComponentTheme('CheckboxField');
+
+export type CheckboxFieldProps = PropsWithChildren<
+  ComponentProps<typeof useCheckboxFieldTheme> & {
+    className?: string | undefined;
+    name?: string | undefined;
+  }
+>;
+
+export function CheckboxField({name, className, children}: CheckboxFieldProps) {
+  let theme = useCheckboxFieldTheme();
+
+  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/Combobox.tsx

@@ -0,0 +1,160 @@
+/* eslint-disable react/jsx-no-bind -- needed */
+import {Combobox as HeadlessCombobox} from '@headlessui/react';
+import {ChevronDownIcon} from '@heroicons/react/24/outline';
+import {useCallback, useState} from 'react';
+import {Controller} from 'react-hook-form';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+import {useFieldName, useForm} from './internals.js';
+
+export const useComboboxTheme = createComponentTheme('Combobox', {
+  variants: {disabled: [true, false]},
+  elements: ['root', 'label', 'icon', 'panel', 'items', 'item', 'input'],
+});
+
+type ComboboxItem<T> = {
+  value: T;
+  label: string;
+};
+
+export type ComboboxProps<T> = ComponentProps<typeof useComboboxTheme> & {
+  placeholder?: string;
+  value?: T | undefined;
+  items: Array<ComboboxItem<T>>;
+  onChange?: (selectedValue: T) => void;
+  className?: string;
+};
+
+export function Combobox<T>({
+  items,
+  placeholder,
+  onChange,
+  value,
+  disabled = false,
+  className,
+}: ComboboxProps<T>) {
+  let theme = useComboboxTheme({disabled});
+  let form = useForm();
+  let fieldName = useFieldName();
+  const [query, setQuery] = useState('');
+
+  const handleChange = useCallback(
+    (selectedValue: ComboboxItem<T>) => {
+      onChange?.(selectedValue.value);
+    },
+    [onChange],
+  );
+
+  if (fieldName && form) {
+    return (
+      <Controller
+        name={fieldName}
+        control={form.control}
+        render={({field}) => {
+          let selectedItem = items.find((item) => item.value === field.value);
+          let filteredItems =
+            query ?
+              items.filter((item) =>
+                item.label
+                  .toLowerCase()
+                  .replace(/\s+/g, '')
+                  .includes(query.toLowerCase().replace(/\s+/g, '')),
+              )
+            : items;
+
+          // TODO: `HeadlessCombobox.Button` sets its `tabindex` to `-1`, and is not thus focusable; fidn the way to fix it, setting `tabindex` or `tabIndex` doesn't work.
+          return (
+            <HeadlessCombobox
+              disabled={disabled}
+              value={(selectedItem ?? {}) as ComboboxItem<T>}
+              by="value"
+              onChange={(item) => {
+                if (item) {
+                  field.onChange(item.value);
+                }
+              }}
+            >
+              <div className="relative">
+                <HeadlessCombobox.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()} />
+                </HeadlessCombobox.Button>
+
+                <HeadlessCombobox.Options className={theme.panel()} modal={false}>
+                  <HeadlessCombobox.Input
+                    className={theme.input(null, className)}
+                    onChange={(event) => setQuery(event.target.value)}
+                  />
+                  <div className={theme.items()}>
+                    {filteredItems.length ?
+                      filteredItems.map((item) => (
+                        <HeadlessCombobox.Option
+                          key={String(item.value)}
+                          value={item}
+                          className={theme.item('cursor-pointer')}
+                        >
+                          {item.label}
+                        </HeadlessCombobox.Option>
+                      ))
+                    : <span className={theme.item('cursor-pointer')}>―</span>}
+                  </div>
+                </HeadlessCombobox.Options>
+              </div>
+            </HeadlessCombobox>
+          );
+        }}
+      />
+    );
+  }
+
+  let selectedItem = items.find((item) => item.value === value);
+  let filteredItems =
+    query ?
+      items.filter((item) =>
+        item.label
+          .toLowerCase()
+          .replace(/\s+/g, '')
+          .includes(query.toLowerCase().replace(/\s+/g, '')),
+      )
+    : items;
+
+  return (
+    <HeadlessCombobox
+      disabled={disabled}
+      value={(selectedItem ?? {}) as ComboboxItem<T>}
+      by="value"
+      onChange={handleChange}
+    >
+      <div className="relative">
+        <HeadlessCombobox.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()} />
+        </HeadlessCombobox.Button>
+
+        <HeadlessCombobox.Options className={theme.panel()} modal={false}>
+          <HeadlessCombobox.Input
+            className={theme.input(null, className)}
+            onChange={(event) => setQuery(event.target.value)}
+          />
+          <div className={theme.items()}>
+            {filteredItems.length ?
+              filteredItems.map((item) => (
+                <HeadlessCombobox.Option
+                  key={String(item.value)}
+                  value={item}
+                  className={theme.item('cursor-pointer')}
+                >
+                  {item.label}
+                </HeadlessCombobox.Option>
+              ))
+            : <span className={theme.item('cursor-pointer')}>―</span>}
+          </div>
+        </HeadlessCombobox.Options>
+      </div>
+    </HeadlessCombobox>
+  );
+}

package/source/components/ConfirmDialog.tsx

@@ -0,0 +1,67 @@
+import {Dialog as HeadlessDialog} from '@headlessui/react';
+import {type PropsWithChildren} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+import {Button} from './Button.js';
+import {DialogPanel} from './DialogPanel.js';
+import {DialogTitle} from './DialogTitle.js';
+
+export const useConfirmDialogTheme = createComponentTheme('ConfirmDialog', {
+  elements: ['root', 'backdrop'],
+});
+
+export type ConfirmDialogProps = PropsWithChildren<
+  ComponentProps<typeof useConfirmDialogTheme> & {
+    open: boolean;
+    className?: string;
+    onClose: () => void;
+    onConfirm: () => void;
+    title?: string;
+    confirmMessage?: string;
+    enableBackdropClick?: boolean;
+    cancelText?: string;
+    confirmText?: string;
+  }
+>;
+
+export function ConfirmDialog({
+  open,
+  className,
+  onClose,
+  onConfirm,
+  confirmMessage,
+  title,
+  enableBackdropClick,
+  cancelText = 'Cancel',
+  confirmText = 'Confirm',
+}: ConfirmDialogProps) {
+  let theme = useConfirmDialogTheme();
+
+  const handleBackdropClick = () => {
+    if (enableBackdropClick) {
+      onClose();
+    }
+  };
+
+  return (
+    <HeadlessDialog open={open} onClose={handleBackdropClick}>
+      <div className={theme.backdrop('fixed inset-0')} aria-hidden="true" />
+      <div className={theme.root('fixed inset-0', className)}>
+        <DialogPanel className="max-w-[500px]">
+          {title ?
+            <DialogTitle className="font-normal">{title}</DialogTitle>
+          : null}
+          {confirmMessage ?
+            <div>{confirmMessage}</div>
+          : null}
+          <div className="flex justify-end gap-4">
+            <Button type="outline" onClick={onClose}>
+              {cancelText}
+            </Button>
+            <Button onClick={onConfirm}>{confirmText}</Button>
+          </div>
+        </DialogPanel>
+      </div>
+    </HeadlessDialog>
+  );
+}

package/source/components/Dialog.tsx

@@ -0,0 +1,34 @@
+import {Dialog as HeadlessDialog} from '@headlessui/react';
+import {type PropsWithChildren, useCallback} from 'react';
+
+import {type ComponentProps, createComponentTheme} from '../theme/internals.js';
+
+export const useDialogTheme = createComponentTheme('Dialog', {
+  elements: ['root', 'backdrop'],
+});
+
+export type DialogProps = PropsWithChildren<
+  ComponentProps<typeof useDialogTheme> & {
+    open: boolean;
+    className?: string;
+    onClose: () => void;
+    enableBackdropClick?: boolean;
+  }
+>;
+
+export function Dialog({open, className, onClose, children, enableBackdropClick}: DialogProps) {
+  let theme = useDialogTheme();
+
+  let handleBackdropClick = useCallback(() => {
+    if (enableBackdropClick) {
+      onClose();
+    }
+  }, [enableBackdropClick, onClose]);
+
+  return (
+    <HeadlessDialog open={open} onClose={handleBackdropClick}>
+      <div className={theme.backdrop('fixed inset-0')} aria-hidden="true" />
+      <div className={theme.root('fixed inset-0', className)}>{children}</div>
+    </HeadlessDialog>
+  );
+}

package/source/components/DialogPanel.tsx

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

package/source/components/DialogTitle.tsx

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