uikit-react-public 0.25.5 → 0.26.1

package/lib/theme/__tests__/useTheme.test.tsx

@@ -0,0 +1,92 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import defaultTheme from '../original/defaultTheme';
+import lightTheme from '../light/lightTheme';
+import { ThemeContextProvider, ThemeConsumer, themes } from '../useTheme';
+import type { ThemeType } from '../original/defaultTheme';
+
+const ThemeProbe = () => (
+  <ThemeConsumer>
+    {({ theme, setTheme }) => (
+      <>
+        <span data-testid='bg-default'>{theme.colour.bg.default}</span>
+        <button
+          data-testid='set-default'
+          onClick={() => setTheme(defaultTheme)}
+        >
+          set-default
+        </button>
+      </>
+    )}
+  </ThemeConsumer>
+);
+
+describe('useTheme', () => {
+  test('uses default theme when no theme prop is provided', () => {
+    render(
+      <ThemeContextProvider>
+        <ThemeProbe />
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('bg-default').textContent).toBe(
+      defaultTheme.colour.bg.default
+    );
+  });
+
+  test('uses named theme when theme prop is provided', () => {
+    render(
+      <ThemeContextProvider theme='light'>
+        <ThemeProbe />
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('bg-default').textContent).toBe(
+      lightTheme.colour.bg.default
+    );
+  });
+
+  test('uses custom theme object when provided through theme prop', () => {
+    const customTheme: ThemeType = {
+      ...defaultTheme,
+      colour: {
+        ...defaultTheme.colour,
+        bg: {
+          ...defaultTheme.colour.bg,
+          default: '#123456',
+        },
+      },
+    };
+
+    render(
+      <ThemeContextProvider theme={customTheme}>
+        <ThemeProbe />
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('bg-default').textContent).toBe('#123456');
+  });
+
+  test('ThemeConsumer exposes setTheme and updates the current theme', () => {
+    render(
+      <ThemeContextProvider theme='light'>
+        <ThemeProbe />
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('bg-default').textContent).toBe(
+      lightTheme.colour.bg.default
+    );
+
+    fireEvent.click(screen.getByTestId('set-default'));
+
+    expect(screen.getByTestId('bg-default').textContent).toBe(
+      defaultTheme.colour.bg.default
+    );
+  });
+
+  test('exports named themes map', () => {
+    expect(themes.default).toBe(defaultTheme);
+    expect(themes.light).toBe(lightTheme);
+  });
+});

package/lib/theme/index.ts

@@ -5,6 +5,13 @@ export type {
   DisplayColoursType,
   BlackAndWhiteColoursType,
 } from './original/defaultTheme';
-export { default as useTheme, ThemeContextProvider } from './useTheme';
+export {
+  default as useTheme,
+  ThemeContextProvider,
+  ThemeContextConsumer,
+  ThemeConsumer,
+  themes,
+} from './useTheme';
+export type { ThemeName } from './useTheme';
 export { uikitFontUrls, uikitFonts } from './fonts';
 export type { FontSource, FontStyle } from './fonts';

package/lib/theme/useTheme.tsx

@@ -2,9 +2,30 @@ import { createContext, useState, useContext, ReactNode } from 'react';
 import { Global, css } from '@emotion/react';
 import { ThemeType } from './original/defaultTheme';
 import theme from './original/defaultTheme';
+import lightTheme from './light/lightTheme';
 import { uikitFontUrls } from './fonts';
 
-const useThemeState = (initialTheme: ThemeType = theme as ThemeType) =>
+export const themes = {
+  default: theme as ThemeType,
+  light: lightTheme as ThemeType,
+  // dark: darkTheme as ThemeType, // does not exist yet
+} as const;
+
+export type ThemeName = keyof typeof themes;
+
+const resolveTheme = (themeNameOrValue?: ThemeType | ThemeName): ThemeType => {
+  if (!themeNameOrValue) {
+    return themes.default;
+  }
+
+  if (typeof themeNameOrValue === 'string') {
+    return themes[themeNameOrValue] ?? themes.default;
+  }
+
+  return themeNameOrValue;
+};
+
+const useThemeState = (initialTheme: ThemeType = themes.default) =>
   useState(initialTheme);
 
 const ThemeContext = createContext<ReturnType<typeof useThemeState> | null>(
@@ -72,9 +93,12 @@ const fontFaces = css`
 
 export const ThemeContextProvider: React.FC<{
   children: ReactNode;
+  theme?: ThemeType | ThemeName;
   initialTheme?: ThemeType;
-}> = ({ children, initialTheme }) => (
-  <ThemeContext.Provider value={useThemeState(initialTheme)}>
+}> = ({ children, theme, initialTheme }) => (
+  <ThemeContext.Provider
+    value={useThemeState(initialTheme ?? resolveTheme(theme))}
+  >
     <Global styles={fontFaces} />
     {children}
   </ThemeContext.Provider>
@@ -88,4 +112,18 @@ const useTheme = () => {
   return value;
 };
 
+export const ThemeContextConsumer: React.FC<{
+  children: (themeState: ReturnType<typeof useTheme>) => ReactNode;
+}> = ({ children }) => <>{children(useTheme())}</>;
+
+export const ThemeConsumer: React.FC<{
+  children: (context: {
+    theme: ThemeType;
+    setTheme: (theme: ThemeType) => void;
+  }) => ReactNode;
+}> = ({ children }) => {
+  const [activeTheme, setTheme] = useTheme();
+  return <>{children({ theme: activeTheme, setTheme })}</>;
+};
+
 export default useTheme;

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.25.5",
+  "version": "0.26.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -55,7 +55,7 @@
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.22.0",
-    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.4",
     "@storybook/addon-links": "^8.6.4",
     "@storybook/addon-onboarding": "^8.6.4",
@@ -73,7 +73,7 @@
     "@typescript-eslint/parser": "^8.26.1",
     "@vitejs/plugin-basic-ssl": "^2.0.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "3.0.9",
+    "@vitest/coverage-v8": "^4.1.8",
     "eslint": "^9.22.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-ft-flow": "^3.0.11",
@@ -97,7 +97,7 @@
     "typescript-eslint": "^8.26.1",
     "vite": "^6.2.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.0.8",
+    "vitest": "^4.1.8",
     "wouter": "^3.6.0"
   }
 }