@jakubmazanec/ui 0.1.0-next.53120c5

package/build/utilities.js.map

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

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@jakubmazanec/ui",
+  "version": "0.1.0-next.53120c5",
+  "description": "React component library.",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:jakubmazanec/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",
+    "./styles": "./build/styles.css"
+  },
+  "files": [
+    "build",
+    "source"
+  ],
+  "scripts": {
+    "build": "del-cli build tsconfig.tsbuildinfo && esbuild \"source/**/*\" --platform=node --target=node20.8 --outdir=build --sourcemap --loader:.woff2=copy && 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": {
+    "@conform-to/react": "^1.1.5",
+    "@conform-to/zod": "^1.1.5",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@headlessui/react": "^2.1.2",
+    "@heroicons/react": "^2.1.5",
+    "@jakubmazanec/ts-utils": "3.0.4-next.53120c5",
+    "@tanstack/match-sorter-utils": "^8.19.4",
+    "@tanstack/react-table": "^8.20.5",
+    "culori": "^4.0.1",
+    "lodash": "^4.17.21",
+    "tailwind-merge": "^2.4.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@jakubmazanec/eslint-config": "3.3.2-next.53120c5",
+    "@storybook/addon-controls": "^8.3.0",
+    "@storybook/addon-essentials": "^8.3.0",
+    "@storybook/addon-interactions": "^8.3.0",
+    "@storybook/addon-links": "^8.3.0",
+    "@storybook/blocks": "^8.3.0",
+    "@storybook/preview-api": "^8.3.0",
+    "@storybook/react": "^8.3.0",
+    "@storybook/react-vite": "^8.3.0",
+    "@storybook/test": "^8.3.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/culori": "^2.1.1",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.2.63",
+    "@types/react-dom": "^18.0.0",
+    "@vitest/coverage-v8": "^1.3.1",
+    "autoprefixer": "^10.4.19",
+    "chromatic": "^11.5.6",
+    "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.3.0",
+    "tailwindcss": "^3.4.7",
+    "tsx": "^4.15.6",
+    "typedoc": "^0.26.11",
+    "typedoc-plugin-markdown": "^4.2.10",
+    "typescript": "^5.4.5",
+    "vitest": "^1.3.1"
+  },
+  "peerDependencies": {
+    "react": "18.x",
+    "react-dom": "18.x",
+    "tailwindcss": "3.x"
+  },
+  "packageManager": "npm@10.9.0",
+  "engines": {
+    "node": "^22.11.0"
+  }
+}

package/source/components/Button.tsx

@@ -0,0 +1,172 @@
+import {Button as HeadlessButton, type ButtonProps as HeadlessButtonProps} from '@headlessui/react';
+import {
+  Children,
+  cloneElement,
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  isValidElement,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {Icon} from './Icon.js';
+import {forwardRef} from './internals.js';
+import {Spinner} from './Spinner.js';
+
+export const useButtonTheme = createComponentTheme('Button', {
+  variants: {
+    variant: ['solid', 'outline', 'text', 'invisible'],
+    size: ['small', 'medium', 'large'],
+    disabled: [true, false],
+  },
+});
+
+const BUTTON_ELEMENT = 'button';
+
+export type ButtonProps<T extends ElementType> = ComponentProps<typeof useButtonTheme> &
+  Omit<ComponentPropsWithoutRef<T>, 'type'> & {
+    as?: T | undefined;
+    submit?: boolean | undefined;
+    idle?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    children?: HeadlessButtonProps['children'] | undefined; // sadly, we cannot use `T`'s children type, because Headless UI always, if `children` is function, calls it with its own render props documented here: https://headlessui.com/react/button#using-render-props
+  };
+
+export const Button = forwardRef(
+  <T extends ElementType = typeof BUTTON_ELEMENT>(
+    {
+      variant = 'solid',
+      size = 'medium',
+      disabled = false,
+      as = BUTTON_ELEMENT as T,
+      idle = true,
+      autoFocus = false,
+      submit = false,
+      className,
+      children,
+      ...rest
+    }: ButtonProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useButtonTheme({variant, size, disabled});
+
+    let props: Record<string, unknown> = {
+      as,
+      ref,
+      className: theme(disabled ? 'pointer-events-none' : null, className),
+      disabled: disabled || (submit && !idle),
+      autoFocus,
+      'data-component': 'button',
+      ...rest,
+    };
+
+    if (as === BUTTON_ELEMENT) {
+      props.type = 'button';
+    }
+
+    if (submit) {
+      props.type = 'submit';
+    }
+
+    if (typeof children === 'function') {
+      return <HeadlessButton {...props}>{children}</HeadlessButton>;
+    }
+
+    let enhancedChildren = Children.map(children, (child) => {
+      if (isValidElement(child) && (child.type === Icon || child.type === Spinner)) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+        return cloneElement<any>(child, {'data-icon': ''});
+      }
+
+      return child;
+    });
+
+    return (
+      <HeadlessButton {...props}>
+        {submit && !idle ?
+          <Spinner data-icon />
+        : null}
+        {enhancedChildren}
+      </HeadlessButton>
+    );
+  },
+);
+
+export const buttonTheme: ComponentTheme<typeof useButtonTheme> = {
+  className:
+    'rounded-2 flex items-center justify-center text-nowrap font-sans font-medium text-sm transition-colors',
+  variants: {
+    variant: {
+      solid: 'text-white bg-neutral-900 hover:bg-neutral-800',
+      outline: 'text-neutral-950 border-2 border-neutral-100 hover:border-neutral-200',
+      text: 'text-neutral-950 border-2 border-transparent hover:border-neutral-200',
+      invisible: 'cursor-default text-neutral-200 hover:text-neutral-600 select-none',
+    },
+    size: {
+      small: 'text-sm leading-6 px-2.5 h-8 min-w-8 gap-x-2',
+      medium: 'leading-6 px-2.5 h-9 min-w-9 gap-x-2',
+      large: 'text-lg leading-6 px-3 h-10 min-w-10 gap-x-2',
+    },
+    disabled: {
+      true: '',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'solid',
+      size: 'small',
+      className: 'px-3',
+    },
+    {
+      variant: 'solid',
+      size: 'medium',
+      className: 'px-3',
+    },
+    {
+      variant: 'solid',
+      size: 'large',
+      className: 'px-3.5',
+    },
+    {
+      variant: 'invisible',
+      size: 'small',
+      className: 'text-xs px-2 h-5 min-w-5',
+    },
+    {
+      variant: 'invisible',
+      size: 'medium',
+      className: 'px-2 h-6 min-w-6',
+    },
+    {
+      variant: 'invisible',
+      size: 'large',
+      className: 'px-2 h-7 min-w-7',
+    },
+    {
+      variant: 'solid',
+      disabled: true,
+      className: 'text-white bg-neutral-200 hover:bg-neutral-200',
+    },
+    {
+      variant: 'outline',
+      disabled: true,
+      className: 'text-neutral-200 hover:border-neutral-100',
+    },
+    {
+      variant: 'text',
+      disabled: true,
+      className: 'text-neutral-200 hover:border-transparent',
+    },
+    {
+      variant: 'invisible',
+      disabled: true,
+      className: 'text-neutral-200 ',
+    },
+  ],
+};

package/source/components/Card.ts

@@ -0,0 +1,46 @@
+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 useCardTheme = createComponentTheme('Card');
+
+const CARD_ELEMENT = 'div';
+
+export type CardProps<T extends ElementType> = ComponentProps<typeof useCardTheme> &
+  ComponentPropsWithoutRef<T> &
+  PropsWithChildren<{
+    as?: T | undefined;
+    className?: string;
+  }>;
+
+export const Card = forwardRef(
+  <T extends ElementType = typeof CARD_ELEMENT>(
+    {as: Component = CARD_ELEMENT as T, className, children, ...rest}: CardProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useCardTheme();
+    let props = {
+      ref,
+      className: theme(null, className),
+      'data-component': 'card',
+      ...rest,
+    };
+
+    return createElement(Component, props, children);
+  },
+);
+
+export const cardTheme: ComponentTheme<typeof useCardTheme> = {
+  className: 'rounded-2 border border-neutral-100 p-4',
+};

package/source/components/Checkbox.tsx

@@ -0,0 +1,125 @@
+import {
+  Checkbox as HeadlessCheckbox,
+  type CheckboxProps as HeadlessCheckboxProps,
+} from '@headlessui/react';
+import {type ComponentPropsWithoutRef, type ElementType, type Ref, useCallback} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {Icon} from './Icon.js';
+import {forwardRef, useFormId} from './internals.js';
+import {useField} from './useField.js';
+import {useFieldName} from './useFieldName.js';
+
+export const useCheckboxTheme = createComponentTheme('Checkbox', {
+  variants: {
+    disabled: [true, false],
+  },
+  elements: ['root', 'icon'],
+});
+
+const CHECKBOX_ELEMENT = 'span';
+
+export type CheckboxProps<T extends ElementType> = ComponentProps<typeof useCheckboxTheme> &
+  Omit<ComponentPropsWithoutRef<T>, 'onChange'> & {
+    as?: T | undefined;
+    checked?: boolean | undefined;
+    indeterminate?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    name?: string;
+    className?: string;
+    onChange?: ((checked: boolean) => void) | undefined;
+  };
+
+export const Checkbox = forwardRef(
+  <T extends ElementType = typeof CHECKBOX_ELEMENT>(
+    {
+      disabled = false,
+      as = CHECKBOX_ELEMENT as T,
+      checked,
+      indeterminate,
+      autoFocus,
+      name,
+      className,
+      onChange,
+      ...rest
+    }: CheckboxProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useCheckboxTheme({disabled});
+    let fieldName = useFieldName();
+    let field = useField();
+    let formId = useFormId();
+
+    let handleChange = useCallback(() => {
+      onChange?.(!checked);
+    }, [checked, onChange]);
+
+    if (field || fieldName) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+      let props: HeadlessCheckboxProps<any> = {
+        as,
+        ref,
+        form: formId,
+        name: field?.name ?? fieldName,
+        indeterminate,
+        autoFocus,
+        className: theme.root('relative', className),
+        'data-component': 'checkbox',
+        ...rest,
+      };
+
+      return (
+        <HeadlessCheckbox {...props}>
+          <span className={theme.icon()}>
+            <Icon name="Check" />
+          </span>
+        </HeadlessCheckbox>
+      );
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessCheckboxProps<any> = {
+      as,
+      ref,
+      checked: Boolean(checked),
+      name,
+      indeterminate,
+      autoFocus,
+      className: theme.root('relative', className),
+      'data-component': 'checkbox',
+      onChange: handleChange,
+      ...rest,
+    };
+
+    return (
+      <HeadlessCheckbox {...props}>
+        <span className={theme.icon()}>
+          <Icon name="Check" />
+        </span>
+      </HeadlessCheckbox>
+    );
+  },
+);
+
+export const checkboxTheme: ComponentTheme<typeof useCheckboxTheme> = {
+  classNames: {
+    root: 'group/checkbox inline-block size-5 cursor-pointer',
+    icon: 'flex justify-content justify-item size-5 *:rounded-2 *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/checkbox:*:bg-neutral-950 group-data-[checked]/checkbox:*:border-neutral-950 group-data-[checked]/checkbox:*:text-white',
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: 'cursor-not-allowed',
+        icon: '*:hover:text-transparent *:border-neutral-50 *:hover:border-neutral-50 group-data-[checked]/checkbox:*:bg-neutral-100 group-data-[checked]/checkbox:*:border-neutral-100 group-data-[checked]/checkbox:*:text-white',
+      },
+      false: {
+        root: '',
+        icon: '',
+      },
+    },
+  },
+};

package/source/components/CheckboxField.tsx

@@ -0,0 +1,61 @@
+import {type FieldMetadata, type FieldName} from '@conform-to/react';
+import {Field as HeadlessField} from '@headlessui/react';
+import {type PropsWithChildren} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {fieldContext, fieldNameContext} from './internals.js';
+
+export const useCheckboxFieldTheme = createComponentTheme('CheckboxField');
+
+export type CheckboxFieldProps = PropsWithChildren<
+  ComponentProps<typeof useCheckboxFieldTheme> &
+    (
+      | {
+          className?: string | undefined;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+          field?: FieldMetadata<any, any> | undefined;
+          name?: undefined;
+        }
+      | {
+          className?: string | undefined;
+          field?: undefined;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+          name?: FieldName<any, any> | string | undefined;
+        }
+    )
+>;
+
+export function CheckboxField({field, name, className, children}: CheckboxFieldProps) {
+  let theme = useCheckboxFieldTheme();
+
+  if (field) {
+    return (
+      <fieldContext.Provider value={field}>
+        <HeadlessField className={theme(null, className)} data-component="checkbox-field">
+          {children}
+        </HeadlessField>
+      </fieldContext.Provider>
+    );
+  }
+
+  if (name) {
+    return (
+      <fieldNameContext.Provider value={name}>
+        <HeadlessField className={theme(null, className)} data-component="checkbox-field">
+          {children}
+        </HeadlessField>
+      </fieldNameContext.Provider>
+    );
+  }
+
+  return <HeadlessField className={theme(null, className)}>{children}</HeadlessField>;
+}
+
+export const checkboxFieldTheme: ComponentTheme<typeof useCheckboxFieldTheme> = {
+  className:
+    'grid grid-cols-[theme(spacing.5)_1fr] gap-x-2 gap-y-1 [&>[data-component=description]]:col-start-2',
+};