@os-design/theming-tools 1.0.13 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/theming-tools",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -14,7 +14,15 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/*.stories.mdx",
+    "!**/*.example.tsx",
+    "!**/*.emotion.d.ts"
   ],
   "sideEffects": false,
   "scripts": {
@@ -35,5 +43,5 @@
     "@emotion/react": ">=11",
     "react": ">=18"
   },
-  "gitHead": "0e88d3afc41e36cee61222a039ef1aa4d08115b5"
+  "gitHead": "3d6b264027712ef81a75379fe3fde3c76c3079af"
 }

package/src/index.ts

@@ -0,0 +1,12 @@
+export { default as clr } from './utils/color';
+export { default as createThemeContext } from './utils/createThemeContext';
+export { default as createThemeOverrider } from './utils/createThemeOverrider';
+export { default as createThemeProvider } from './utils/createThemeProvider';
+export { default as createUseTheme } from './utils/createUseTheme';
+export { default as overrideTheme } from './utils/overrideTheme';
+
+export * from './utils/color';
+export * from './utils/createThemeContext';
+export * from './utils/createThemeOverrider';
+export * from './utils/createThemeProvider';
+export * from './utils/createUseTheme';

package/src/utils/color.ts

@@ -0,0 +1,18 @@
+export type HSLColor = [number, number, number];
+export type HSLAColor = [number, number, number, number];
+export type Color = HSLColor | HSLAColor;
+
+/**
+ * Converts a color to string.
+ */
+const clr = (color: Color): string => {
+  if (!Array.isArray(color)) {
+    throw new Error(
+      `The color argument must be an array, but got ${typeof color}.`
+    );
+  }
+  if (color.length === 3) return `hsl(${color[0]}, ${color[1]}%, ${color[2]}%)`;
+  return `hsla(${color[0]}, ${color[1]}%, ${color[2]}%, ${color[3]})`;
+};
+
+export default clr;

package/src/utils/createThemeContext.ts

@@ -0,0 +1,40 @@
+import React, { Context } from 'react';
+
+export interface ThemeMap<T> extends Record<string, T> {
+  light: T;
+  dark: T;
+}
+
+export interface ThemeContextProps<T, TM> {
+  /**
+   * Available themes.
+   */
+  themes: TM;
+  /**
+   * Overrides the active theme parameters.
+   */
+  overrides: Partial<T>;
+  /**
+   * The current active theme.
+   */
+  activeTheme: keyof TM;
+  /**
+   * The callback that changes the active theme.
+   */
+  setActiveTheme: (name: string) => void;
+}
+
+export type ThemeContext<T> = Context<ThemeContextProps<T, ThemeMap<T>>>;
+
+const createThemeContext = <T>(): ThemeContext<T> =>
+  React.createContext<ThemeContextProps<T, ThemeMap<T>>>({
+    themes: {
+      light: {} as T,
+      dark: {} as T,
+    },
+    overrides: {},
+    activeTheme: 'light',
+    setActiveTheme: () => undefined,
+  });
+
+export default createThemeContext;

package/src/utils/createThemeOverrider.tsx

@@ -0,0 +1,86 @@
+import {
+  ThemeProvider as EmotionThemeProvider,
+  ThemeProviderProps as EmotionThemeProviderProps,
+} from '@emotion/react';
+import React, { useMemo } from 'react';
+
+import { ThemeContext, ThemeMap } from './createThemeContext';
+import { UseTheme } from './createUseTheme';
+import overrideTheme from './overrideTheme';
+
+export interface ThemeOverriderProps<T> {
+  /**
+   * The active theme of children.
+   * @default undefined
+   */
+  activeTheme?: keyof ThemeMap<T>;
+  /**
+   * Overrides the active theme parameters.
+   * @default undefined
+   */
+  overrides?: Partial<T> | ((theme: T) => Partial<T>);
+  /**
+   * The children.
+   * @default undefined
+   */
+  children?: React.ReactNode;
+}
+
+export type ThemeOverrider<T> = React.FC<ThemeOverriderProps<T>>;
+
+function createThemeOverrider<T>(
+  TC: ThemeContext<T>,
+  useTheme: UseTheme<T>
+): ThemeOverrider<T> {
+  // eslint-disable-next-line func-names
+  return function ({ activeTheme, overrides = {}, children }) {
+    const {
+      themes,
+      theme: parentTheme,
+      overrides: parentOverrides,
+      activeTheme: parentActiveTheme,
+      setActiveTheme,
+    } = useTheme();
+
+    const localActiveTheme = activeTheme || parentActiveTheme;
+
+    // Parents overrides are ignored if the active theme was specified
+    const localOverrides = useMemo<Partial<T>>(
+      () => ({
+        ...(activeTheme ? {} : parentOverrides),
+        ...(typeof overrides === 'function'
+          ? (overrides as Function)(parentTheme)
+          : overrides),
+      }),
+      [activeTheme, parentOverrides, overrides, parentTheme]
+    );
+
+    // Make the local theme
+    const localTheme = useMemo<T>(
+      () => overrideTheme(themes[localActiveTheme], localOverrides),
+      [themes, localActiveTheme, localOverrides]
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        themes,
+        overrides: localOverrides,
+        activeTheme: localActiveTheme,
+        setActiveTheme,
+      }),
+      [localActiveTheme, localOverrides, setActiveTheme, themes]
+    );
+
+    return (
+      <TC.Provider value={contextValue}>
+        <EmotionThemeProvider
+          theme={localTheme as EmotionThemeProviderProps['theme']}
+        >
+          {children}
+        </EmotionThemeProvider>
+      </TC.Provider>
+    );
+  };
+}
+
+export default createThemeOverrider;

package/src/utils/createThemeProvider.tsx

@@ -0,0 +1,91 @@
+import {
+  ThemeProvider as EmotionThemeProvider,
+  ThemeProviderProps as EmotionThemeProviderProps,
+} from '@emotion/react';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { ThemeContext, ThemeMap } from './createThemeContext';
+
+export interface ThemeProviderProps<T> {
+  /**
+   * Available themes.
+   * @default undefined
+   */
+  themes?: ThemeMap<T>;
+  /**
+   * The theme used by default.
+   * @default light
+   */
+  initialTheme?: 'light' | 'dark' | string;
+  /**
+   * The key in the local storage where the active theme is saved.
+   * @default theme
+   */
+  storageKey?: string;
+  /**
+   * The children.
+   * @default undefined
+   */
+  children?: React.ReactNode;
+}
+
+export type ThemeProvider<T> = React.FC<ThemeProviderProps<T>>;
+
+export interface LocalStorage {
+  getItem: (key: string) => string | null | Promise<string | null>;
+  setItem: (key: string, value: string) => void | Promise<void>;
+}
+
+function createThemeProvider<T>(
+  TC: ThemeContext<T>,
+  defaultThemes: ThemeMap<T>,
+  localStorage: LocalStorage = {
+    getItem: () => null,
+    setItem: () => {},
+  }
+): ThemeProvider<T> {
+  // eslint-disable-next-line func-names
+  return function ({
+    themes = defaultThemes,
+    initialTheme = 'light',
+    storageKey = 'theme',
+    children,
+  }) {
+    const [activeTheme, setActiveTheme] = useState(
+      themes[initialTheme] ? initialTheme : 'light'
+    );
+
+    useEffect(() => {
+      const getSavedTheme = async () => {
+        const saved = await localStorage.getItem(storageKey);
+        if (saved && themes[saved]) setActiveTheme(saved);
+      };
+      getSavedTheme();
+    }, [storageKey, themes]);
+
+    const contextValue = useMemo(
+      () => ({
+        themes,
+        overrides: {},
+        activeTheme,
+        setActiveTheme: (name) => {
+          setActiveTheme(name);
+          localStorage.setItem(storageKey, name);
+        },
+      }),
+      [activeTheme, storageKey, themes]
+    );
+
+    return (
+      <TC.Provider value={contextValue}>
+        <EmotionThemeProvider
+          theme={themes[activeTheme] as EmotionThemeProviderProps['theme']}
+        >
+          {children}
+        </EmotionThemeProvider>
+      </TC.Provider>
+    );
+  };
+}
+
+export default createThemeProvider;

package/src/utils/createUseTheme.ts

@@ -0,0 +1,32 @@
+import { useContext } from 'react';
+import {
+  ThemeContext,
+  ThemeContextProps,
+  ThemeMap,
+} from './createThemeContext';
+import overrideTheme from './overrideTheme';
+
+interface UseThemeRes<T> extends ThemeContextProps<T, ThemeMap<T>> {
+  /**
+   * The object of the active theme.
+   */
+  theme: T;
+}
+
+export type UseTheme<T> = () => UseThemeRes<T>;
+
+function createUseTheme<T>(TC: ThemeContext<T>): UseTheme<T> {
+  return (): UseThemeRes<T> => {
+    const context = useContext(TC);
+
+    return {
+      ...context,
+      theme: overrideTheme(
+        context.themes[context.activeTheme],
+        context.overrides
+      ),
+    };
+  };
+}
+
+export default createUseTheme;

package/src/utils/overrideTheme.ts

@@ -0,0 +1,16 @@
+const overrideTheme = <T>(theme1: T, theme2: Partial<T>): T => {
+  const res = {};
+
+  [theme1, theme2].forEach((theme) => {
+    const props = Object.keys(theme);
+    props.forEach((prop) => {
+      const descriptor = Object.getOwnPropertyDescriptor(theme, prop);
+      if (!descriptor) return;
+      Object.defineProperty(res, prop, descriptor);
+    });
+  });
+
+  return res as T;
+};
+
+export default overrideTheme;