@jakubmazanec/ui 0.1.0-unstable.0c19abe

package/source/theme/defaultTheme.ts

@@ -0,0 +1,370 @@
+import {type Theme} from './Theme.js';
+
+export const defaultTheme: Theme = {
+  Button: {
+    className: 'rounded flex items-center justify-center text-nowrap font-sans',
+    variants: {
+      type: {
+        solid: 'bg-blue-500 text-white hover:bg-blue-600',
+        outline: 'border border-blue-500 text-blue-500 hover:bg-blue-50',
+        text: 'border border-transparent hover:border hover:border-blue-500 text-blue-500',
+        icon: 'border border-transparent hover:border hover:border-blue-500',
+      },
+      size: {
+        small: 'text-xs leading-6 px-2 py-0.5 h-7 gap-x-1.5',
+        medium: 'text-sm leading-6 px-3 py-1 h-8 gap-x-1.5',
+        large: 'text-base leading-6 px-4 py-2 h-10 gap-x-1.5',
+      },
+      disabled: {
+        true: '',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      {
+        type: 'outline',
+        size: 'small',
+        className: 'px-[0.4375rem] py-[0.0625rem]',
+      },
+      {
+        type: 'outline',
+        size: 'medium',
+        className: 'px-[0.6875rem] py-[0.1875rem]',
+      },
+      {
+        type: 'outline',
+        size: 'large',
+        className: 'px-[0.9375rem] py-[0.4375rem]',
+      },
+      {
+        type: 'text',
+        size: 'small',
+        className: 'px-[0.0625rem] py-[0.0625rem]',
+      },
+      {
+        type: 'text',
+        size: 'medium',
+        className: 'px-[0.1875rem] py-[0.1875rem]',
+      },
+      {
+        type: 'text',
+        size: 'large',
+        className: 'px-[0.4375rem] py-[0.4375rem]',
+      },
+      {
+        type: 'icon',
+        size: 'small',
+        className: 'px-[0.0625rem] py-[0.0625rem]',
+      },
+      {
+        type: 'icon',
+        size: 'medium',
+        className: 'px-[0.1875rem] py-[0.1875rem]',
+      },
+      {
+        type: 'icon',
+        size: 'large',
+        className: 'px-[0.4375rem] py-[0.4375rem]',
+      },
+      {
+        type: 'solid',
+        disabled: true,
+        className: 'bg-gray-200 text-white',
+      },
+      {
+        type: 'outline',
+        disabled: true,
+        className: 'border-gray-200 text-gray-200',
+      },
+      {
+        type: 'text',
+        disabled: true,
+        className: 'hover:border-transparent text-gray-200',
+      },
+      {
+        type: 'icon',
+        disabled: true,
+        className: 'hover:border-transparent text-gray-200',
+      },
+    ],
+  },
+
+  Checkbox: {
+    classNames: {
+      root: 'flex items-center text-gray-95',
+      checked:
+        'mr-2 flex hidden h-5 w-5 items-center justify-center rounded bg-blue-500 text-white group-data-[checked]:flex',
+      unchecked:
+        'mr-2 flex h-5 w-5 items-center justify-center rounded border border-gray-200 bg-white group-data-[checked]:hidden',
+      icon: 'h-4 w-4',
+    },
+    variants: {
+      disabled: {
+        true: {
+          root: 'text-gray-200',
+          checked: 'bg-gray-500 opacity-50',
+          unchecked: 'border-gray-100',
+          icon: '',
+        },
+        false: {
+          root: '',
+          checked: '',
+          unchecked: '',
+          icon: '',
+        },
+      },
+    },
+  },
+
+  Radio: {
+    classNames: {
+      root: 'flex items-center text-gray-95',
+      checked:
+        'mr-2 flex hidden h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-white group-data-[checked]:flex',
+      unchecked:
+        'mr-2 flex h-5 w-5 items-center justify-center rounded-full border border-gray-200 bg-white group-data-[checked]:hidden',
+      icon: 'h-[9px] w-[9px]',
+    },
+    variants: {
+      disabled: {
+        true: {
+          root: 'text-gray-200',
+          checked: 'bg-gray-500',
+          unchecked: 'border-gray-100',
+          icon: '',
+        },
+        false: {
+          root: '',
+          checked: '',
+          unchecked: '',
+          icon: '',
+        },
+      },
+    },
+  },
+
+  Listbox: {
+    classNames: {
+      root: 'flex w-full items-center justify-between rounded border border-solid border-gray-200 bg-white text-sm leading-6 px-[0.4375rem] py-[0.1875rem] h-7 text-gray-950',
+      label: '',
+      icon: 'h-6 w-6 text-gray-400',
+      panel:
+        'shadow absolute left-0 right-0 top-full z-10 m-0 mt-1 list-none rounded-lg border border-solid border-gray-200 bg-white p-0 text-left',
+      items: 'max-h-40 overflow-hidden overflow-y-scroll',
+      item: 'px-[0.4375rem] py-[0.1875rem] text-sm hover:bg-gray-50 ui-selected:bg-gray-100 ui-active:bg-gray-50',
+    },
+    variants: {
+      disabled: {
+        true: {
+          root: 'border-gray-100 text-gray-200 cursor-not-allowed',
+          label: '',
+          icon: 'text-gray-200',
+          panel: 'border-gray-100',
+          items: '',
+          item: 'text-gray-200 cursor-not-allowed',
+        },
+        false: {
+          root: '',
+          label: '',
+          icon: '',
+          panel: '',
+          items: '',
+          item: '',
+        },
+      },
+    },
+  },
+
+  Combobox: {
+    classNames: {
+      root: 'flex w-full items-center justify-between rounded border border-solid border-gray-200 bg-white text-sm leading-6 px-[0.4375rem] py-[0.1875rem] h-7 text-gray-950',
+      label: '',
+      icon: 'h-6 w-6 text-gray-400',
+      panel:
+        'shadow absolute left-0 right-0 top-full z-10 m-0 mt-1 list-none rounded-lg border border-solid border-gray-200 bg-white p-0 text-left',
+      items: 'max-h-32 overflow-hidden overflow-y-scroll',
+      item: 'px-[0.4375rem] py-[0.1875rem] text-sm hover:bg-gray-50 ui-selected:bg-gray-100 ui-active:bg-gray-50',
+      input:
+        'flex w-[calc(100%-1rem)] items-center justify-between rounded border border-solid border-gray-200 bg-white text-sm leading-6 px-[0.4375rem] py-[0.1875rem] h-7 text-gray-950 focus-visible:outline-none m-2',
+    },
+    variants: {
+      disabled: {
+        true: {
+          root: 'border-gray-100 text-gray-200 cursor-not-allowed',
+          label: '',
+          icon: 'text-gray-200',
+          panel: '',
+          items: 'border-gray-100',
+          item: 'text-gray-200 cursor-not-allowed',
+          input: '',
+        },
+        false: {
+          root: '',
+          label: '',
+          icon: '',
+          panel: '',
+          items: '',
+          item: '',
+          input: '',
+        },
+      },
+    },
+  },
+
+  Input: {
+    classNames: {
+      root: 'flex w-full items-center rounded border border-gray-200 text-sm leading-6 px-[0.4375rem] py-[0.1875rem] h-7 text-gray-950 bg-white',
+      input:
+        'p-0 focus-visible:outline-none w-full data-[headlessui-icon]:pl-6 data-[headlessui-clear-button]:pr-4',
+      icon: 'w-6 h-6 left-0.5 top-0.5 text-gray-200',
+      clearButton: 'text-gray-500 w-4 h-4 right-1 cursor-pointer',
+    },
+    variants: {
+      disabled: {
+        true: {
+          root: 'border-gray-100 text-gray-200 cursor-not-allowed',
+          input: '',
+          icon: '',
+          clearButton: '',
+        },
+        false: {
+          root: '',
+          input: '',
+          icon: '',
+          clearButton: '',
+        },
+      },
+    },
+  },
+
+  Textarea: {
+    classNames: {
+      root: 'flex w-full items-center rounded border border-gray-200 text-sm leading-6 px-[0.4375rem] py-[0.1875rem] text-gray-950 bg-white',
+      input: 'p-0 focus-visible:outline-none w-full data-[headlessui-icon]:pl-6',
+      icon: 'w-6 h-6 left-0.5 top-0.5 text-gray-200',
+    },
+    variants: {
+      disabled: {
+        true: {
+          root: 'border-gray-100 text-gray-200 cursor-not-allowed',
+          input: '',
+          icon: '',
+        },
+        false: {
+          root: '',
+          input: '',
+          icon: '',
+        },
+      },
+    },
+  },
+
+  Form: {
+    className: 'flex flex-col gap-y-4',
+  },
+
+  Field: {
+    className: '',
+  },
+
+  Label: {
+    className: 'cursor-pointer',
+  },
+
+  CheckboxField: {
+    className: 'flex',
+  },
+
+  RadioField: {
+    className: 'flex',
+  },
+
+  RadioGroupField: {
+    className: '',
+    variants: {
+      disabled: {
+        true: '',
+        false: '',
+      },
+    },
+  },
+
+  Error: {
+    className: 'flex text-danger-500',
+  },
+
+  Dialog: {
+    classNames: {
+      root: 'flex w-screen items-center justify-center p-4 z-30',
+      backdrop: 'bg-black/30 z-30',
+    },
+  },
+
+  DialogPanel: {
+    className:
+      'shadow-1 relative flex w-full min-w-[300px] max-w-[900px] flex-col gap-y-4 rounded-xl bg-white p-6 max-h-[calc(100vh-3rem)] overflow-hidden overflow-y-auto',
+  },
+
+  DialogTitle: {
+    className: 'text-xl font-bold',
+  },
+
+  ConfirmDialog: {
+    classNames: {
+      root: 'flex w-screen items-center justify-center p-4 z-30',
+      backdrop: 'bg-black/30 z-30',
+    },
+  },
+
+  Popover: {
+    className: '',
+  },
+
+  PopoverButton: {
+    className: 'focus-visible:outline-none',
+  },
+
+  PopoverPanel: {
+    className:
+      'rounded bg-white border p-2 border-gray-200 absolute z-10 left-0 top-[calc(100%+0.25rem)]',
+  },
+
+  Menu: {
+    className: '',
+  },
+
+  MenuButton: {
+    className: '',
+  },
+
+  MenuItems: {
+    className: '',
+  },
+
+  MenuItem: {
+    className: '',
+  },
+
+  Table: {
+    classNames: {
+      root: '',
+      table: 'grid',
+    },
+  },
+
+  TableHeader: {
+    className: '',
+  },
+
+  TableHeaderCell: {
+    className: 'flex items-center p-1 text-xs font-bold bg-white z-20',
+  },
+
+  TableRow: {
+    className: '',
+  },
+
+  TableCell: {
+    className: 'flex items-center p-[2px] text-xs',
+  },
+};

package/source/theme/internals/ClassName.ts

@@ -0,0 +1 @@
+export type ClassName = ClassName[] | string | 0 | false | null | undefined;

package/source/theme/internals/ComponentProps.ts

@@ -0,0 +1,13 @@
+import {type Writable} from '@jakubmazanec/ts-utils';
+
+import {type ComponentThemeDefinition} from './ComponentThemeDefinition.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+import {type ComponentThemeProps} from './ComponentThemeProps.js';
+
+// extracts props for component that uses created useTheme hook
+export type ComponentProps<U extends {themeDefinition: ComponentThemeDefinition | undefined}> =
+  U['themeDefinition'] extends ComponentThemeDefinition ?
+    U['themeDefinition']['variants'] extends ComponentThemeDefinitionVariants ?
+      Partial<Writable<ComponentThemeProps<U['themeDefinition']>>>
+    : NonNullable<unknown>
+  : NonNullable<unknown>;

package/source/theme/internals/ComponentTheme.ts

@@ -0,0 +1,33 @@
+import {type ClassName} from './ClassName.js';
+import {type ComponentThemeCompoundVariants} from './ComponentThemeCompoundVariants.js';
+import {type ComponentThemeDefinition} from './ComponentThemeDefinition.js';
+import {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+import {type ComponentThemeVariants} from './ComponentThemeVariants.js';
+
+export type ComponentTheme<D extends ComponentThemeDefinition | undefined> =
+  D extends ComponentThemeDefinition ?
+    D['elements'] extends ComponentThemeDefinitionElements ?
+      D['variants'] extends ComponentThemeDefinitionVariants ?
+        {
+          classNames?: {
+            [K in D['elements'][number]]: ClassName;
+          };
+          variants: ComponentThemeVariants<D['variants'], D['elements']>;
+          compoundVariants?: ComponentThemeCompoundVariants<D['variants'], D['elements']>;
+        }
+      : {
+          classNames: {
+            [K in D['elements'][number]]: ClassName;
+          };
+        }
+    : D['variants'] extends ComponentThemeDefinitionVariants ?
+      {
+        className?: ClassName;
+        variants: ComponentThemeVariants<D['variants'], undefined>;
+        compoundVariants?: ComponentThemeCompoundVariants<D['variants'], undefined>;
+      }
+    : {className: ClassName}
+  : {
+      className: ClassName;
+    };

package/source/theme/internals/ComponentThemeCompoundVariants.ts

@@ -0,0 +1,20 @@
+import {type ClassName} from './ClassName.js';
+import {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+
+export type ComponentThemeCompoundVariants<
+  V extends ComponentThemeDefinitionVariants,
+  E extends ComponentThemeDefinitionElements | undefined,
+> = Array<
+  (E extends ComponentThemeDefinitionElements ?
+    {
+      classNames: {
+        [K in E[number]]: ClassName;
+      };
+    }
+  : {
+      className: ClassName;
+    }) & {
+    [K in keyof V]?: Array<V[K][number]> | V[K][number];
+  }
+>;

package/source/theme/internals/ComponentThemeDefinition.ts

@@ -0,0 +1,7 @@
+import {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+
+export type ComponentThemeDefinition = {
+  variants?: ComponentThemeDefinitionVariants;
+  elements?: ComponentThemeDefinitionElements;
+};

package/source/theme/internals/ComponentThemeDefinitionElements.ts

@@ -0,0 +1 @@
+export type ComponentThemeDefinitionElements = string[];

package/source/theme/internals/ComponentThemeDefinitionVariants.ts

@@ -0,0 +1,3 @@
+export type ComponentThemeDefinitionVariants = {
+  [key: string]: string[] | [true, false];
+};

package/source/theme/internals/ComponentThemeProps.ts

@@ -0,0 +1,11 @@
+import {type ComponentThemeDefinition} from './ComponentThemeDefinition.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+
+export type ComponentThemeProps<D extends ComponentThemeDefinition | undefined> =
+  D extends ComponentThemeDefinition ?
+    D['variants'] extends ComponentThemeDefinitionVariants ?
+      {
+        [J in keyof D['variants']]: D['variants'][J][number];
+      }
+    : NonNullable<unknown>
+  : NonNullable<unknown>;

package/source/theme/internals/ComponentThemeVariants.ts

@@ -0,0 +1,24 @@
+import {type ClassName} from './ClassName.js';
+import {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+
+export type ComponentThemeVariants<
+  V extends ComponentThemeDefinitionVariants,
+  E extends ComponentThemeDefinitionElements | undefined,
+> = {
+  [J in keyof V]: V[J] extends string[] ?
+    {
+      [K in V[J][number]]: E extends ComponentThemeDefinitionElements ?
+        {
+          [L in E[number]]: ClassName;
+        }
+      : ClassName;
+    }
+  : {
+      [K in 'false' | 'true']: E extends ComponentThemeDefinitionElements ?
+        {
+          [L in E[number]]: ClassName;
+        }
+      : ClassName;
+    };
+};

package/source/theme/internals/UseComponentTheme.ts

@@ -0,0 +1,22 @@
+import {type ComponentThemeDefinition} from './ComponentThemeDefinition.js';
+import {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+import {type ComponentThemeProps} from './ComponentThemeProps.js';
+import {type UseComponentThemeReturn} from './UseComponentThemeReturn.js';
+
+export type UseComponentTheme<N extends string, D extends ComponentThemeDefinition | undefined> =
+  D extends ComponentThemeDefinition ?
+    D['variants'] extends ComponentThemeDefinitionVariants ?
+      D['elements'] extends ComponentThemeDefinitionElements ?
+        ((themeProps: ComponentThemeProps<D>) => UseComponentThemeReturn<D>) & {
+          componentThemeName: N;
+          themeDefinition: D;
+        }
+      : ((themeProps: ComponentThemeProps<D>) => UseComponentThemeReturn<D>) & {
+          componentThemeName: N;
+          themeDefinition: D;
+        }
+    : D['elements'] extends ComponentThemeDefinitionElements ?
+      (() => UseComponentThemeReturn<D>) & {componentThemeName: N; themeDefinition: D}
+    : (() => UseComponentThemeReturn<D>) & {componentThemeName: N; themeDefinition: D}
+  : (() => UseComponentThemeReturn<D>) & {componentThemeName: N; themeDefinition: D};

package/source/theme/internals/UseComponentThemeReturn.ts

@@ -0,0 +1,15 @@
+import {type ClassName} from './ClassName.js';
+import {type ComponentThemeDefinition} from './ComponentThemeDefinition.js';
+import {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';
+
+export type UseComponentThemeReturn<D extends ComponentThemeDefinition | undefined> =
+  D extends ComponentThemeDefinition ?
+    D['elements'] extends ComponentThemeDefinitionElements ?
+      {
+        [K in D['elements'][number]]: (
+          baseClassName?: ClassName,
+          overrideClassName?: ClassName,
+        ) => string;
+      }
+    : (baseClassName?: ClassName, overrideClassName?: ClassName) => string
+  : (baseClassName?: ClassName, overrideClassName?: ClassName) => string;

package/source/theme/internals/booleanToString.ts

@@ -0,0 +1,6 @@
+export function booleanToString<T>(value: T): T extends boolean ? string : T {
+  return (
+    typeof value === 'boolean' ? `${value}`
+    : value === 0 ? '0'
+    : value) as T extends boolean ? string : T;
+}

package/source/theme/internals/createComponentTheme.ts

@@ -0,0 +1,67 @@
+import {useContext} from 'react';
+
+import {type Theme} from '../Theme.js';
+import {type ClassName} from './ClassName.js';
+import {type ComponentTheme} from './ComponentTheme.js';
+import {type ComponentThemeDefinition} from './ComponentThemeDefinition.js';
+import {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+import {type ComponentThemeProps} from './ComponentThemeProps.js';
+import {createUseComponentThemeReturn} from './createUseComponentThemeReturn.js';
+import {themeContext} from './themeContext.js';
+import {type UseComponentTheme} from './UseComponentTheme.js';
+
+export function createComponentTheme<
+  const N extends string,
+  const D extends ComponentThemeDefinition | undefined = undefined,
+>(themeName: N, themeDefinition?: NonNullable<D>): UseComponentTheme<N, D> {
+  let useComponentTheme = (themeProps?: ComponentThemeProps<D>) => {
+    let theme = useContext(themeContext);
+
+    if (!theme) {
+      throw new Error('No theme was found!');
+    }
+
+    let componentTheme = theme[themeName as keyof Theme] as unknown as
+      | ComponentTheme<{
+          variants: ComponentThemeDefinitionVariants;
+          elements: ComponentThemeDefinitionElements;
+        }>
+      | ComponentTheme<{variants: ComponentThemeDefinitionVariants}>
+      | undefined;
+
+    if (!componentTheme) {
+      throw new Error(`Theme for component "${themeName}" wasn't found!`);
+    }
+
+    let hasElements = Boolean(themeDefinition?.elements);
+
+    if (!hasElements) {
+      return createUseComponentThemeReturn(
+        componentTheme as
+          | ComponentTheme<{variants: ComponentThemeDefinitionVariants}>
+          | ComponentTheme<undefined>,
+        themeProps,
+      );
+    }
+
+    let getClassNames: Record<string, (...args: ClassName[]) => string> = {};
+
+    for (let element of themeDefinition?.elements ?? []) {
+      getClassNames[element] = createUseComponentThemeReturn(
+        componentTheme as
+          | ComponentTheme<{variants: ComponentThemeDefinitionVariants}>
+          | ComponentTheme<undefined>,
+        themeProps,
+        element,
+      );
+    }
+
+    return getClassNames;
+  };
+
+  (useComponentTheme as UseComponentTheme<N, D>).themeDefinition = themeDefinition;
+  (useComponentTheme as UseComponentTheme<N, D>).componentThemeName = themeName;
+
+  return useComponentTheme as UseComponentTheme<N, D>;
+}