@jakubmazanec/ui 0.1.0-unstable.0c19abe

package/source/theme/internals/createUseComponentThemeReturn.ts

@@ -0,0 +1,87 @@
+/* eslint-disable unicorn/consistent-destructuring -- destructuring leads to messy code because of complicated types */
+import {booleanToString} from './booleanToString.js';
+import {type ClassName} from './ClassName.js';
+import {type ComponentTheme} from './ComponentTheme.js';
+import {type ComponentThemeDefinitionElements} from './ComponentThemeDefinitionElements.js';
+import {type ComponentThemeDefinitionVariants} from './ComponentThemeDefinitionVariants.js';
+import {type ComponentThemeProps} from './ComponentThemeProps.js';
+import {cx} from './cx.js';
+import {pickPropertyIfExists} from './pickPropertyIfExists.js';
+
+export function createUseComponentThemeReturn(
+  componentTheme:
+    | ComponentTheme<{
+        variants: ComponentThemeDefinitionVariants;
+        elements: ComponentThemeDefinitionElements;
+      }>
+    | ComponentTheme<{elements: ComponentThemeDefinitionElements}>
+    | ComponentTheme<{variants: ComponentThemeDefinitionVariants}>
+    | ComponentTheme<undefined>,
+  themeProps?:
+    | ComponentThemeProps<{variants: ComponentThemeDefinitionVariants}>
+    | ComponentThemeProps<undefined>,
+  elementName?: string,
+) {
+  if (!themeProps || !('variants' in componentTheme)) {
+    return (baseClassName: ClassName, overrideClassName: ClassName) =>
+      cx(
+        baseClassName,
+        'classNames' in componentTheme ?
+          pickPropertyIfExists(componentTheme.classNames, elementName)
+        : 'className' in componentTheme ? componentTheme.className
+        : undefined,
+        overrideClassName,
+      );
+  }
+
+  let {variants, compoundVariants} = componentTheme;
+  let getVariantClassNames = Object.keys(variants).map((variant) => {
+    let variantProp = themeProps[variant as keyof typeof themeProps] as boolean | string;
+    let variantKey = booleanToString(variantProp);
+
+    return pickPropertyIfExists(variants[variant]?.[variantKey as 'false' | 'true'], elementName);
+  });
+  let getCompoundVariantClassNames: ClassName[] = [];
+
+  if (compoundVariants) {
+    for (let compoundVariant of compoundVariants) {
+      let {className, classNames, ...rest} = compoundVariant;
+      let matchesAllSelectors = true;
+
+      for (let [cvKey, cvSelector] of Object.entries(rest)) {
+        let selector = themeProps[cvKey as keyof typeof themeProps];
+
+        if (Array.isArray(cvSelector)) {
+          if (!cvSelector.includes(selector as string)) {
+            matchesAllSelectors = false;
+
+            break;
+          }
+        } else if (selector !== cvSelector) {
+          matchesAllSelectors = false;
+
+          break;
+        }
+      }
+
+      if (matchesAllSelectors) {
+        getCompoundVariantClassNames.push(
+          ('classNames' in compoundVariant ?
+            pickPropertyIfExists(classNames as Record<string, ClassName>, elementName)
+          : className) as ClassName,
+        );
+      }
+    }
+  }
+
+  return (baseClassName: ClassName, overrideClassName: ClassName) =>
+    cx(
+      baseClassName,
+      'classNames' in componentTheme ? pickPropertyIfExists(componentTheme.classNames, elementName)
+      : 'className' in componentTheme ? componentTheme.className
+      : undefined,
+      getVariantClassNames,
+      getCompoundVariantClassNames,
+      overrideClassName,
+    );
+}

package/source/theme/internals/cx.ts

@@ -0,0 +1,10 @@
+// import {type ClassValue, clsx} from 'clsx';
+import {twMerge} from 'tailwind-merge';
+
+import {type ClassName} from './ClassName.js';
+
+// TODO: is the merging done correctly? write some tests
+export function cx(...inputs: ClassName[] /*ClassValue[]*/) {
+  // return twMerge(clsx(inputs));
+  return twMerge(...inputs);
+}

package/source/theme/internals/pickPropertyIfExists.ts

@@ -0,0 +1,24 @@
+import {type ClassName} from './ClassName.js';
+
+type PickPropertyIfExistsReturn<
+  T extends ClassName | Record<string, ClassName> | undefined,
+  U extends string | undefined,
+> =
+  U extends undefined ? T
+  : T extends Record<string, ClassName> ? null
+  : ClassName;
+
+export function pickPropertyIfExists<
+  T extends ClassName | Record<string, ClassName> | undefined,
+  U extends string | undefined,
+>(object: T, property?: U): PickPropertyIfExistsReturn<T, U> {
+  if (!property) {
+    return object as PickPropertyIfExistsReturn<T, U>;
+  }
+
+  if (Array.isArray(object) || !object || typeof object === 'string') {
+    return null as PickPropertyIfExistsReturn<T, U>;
+  }
+
+  return object[property] as PickPropertyIfExistsReturn<T, U>;
+}

package/source/theme/internals/themeContext.ts

@@ -0,0 +1,5 @@
+import {createContext} from 'react';
+
+import {type Theme} from '../Theme.js';
+
+export const themeContext = createContext<Theme | undefined>(undefined);

package/source/theme/internals/useTheme.ts

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

package/source/theme/internals.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/source/theme.ts

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