fix(docs): remove the theme provider (#2137)

.changeset/late-lamps-poke.md

@@ -0,0 +1,5 @@
+---
+"@kadena/react-ui": minor
+---
+
+Added a hook to toggle and keep theme state, removing the necessity of a theme provider context

packages/apps/docs/src/components/Layout/components/DocsLogo/DocsLogo.tsx

@@ -1,27 +1,16 @@
-import { useTheme } from 'next-themes';
+import type { ITheme } from '@kadena/react-ui';
+import { Themes, useTheme } from '@kadena/react-ui';
 import type { ComponentPropsWithRef, FC } from 'react';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 interface IProps extends ComponentPropsWithRef<'svg'> {
-  overwriteTheme?: 'light' | 'dark';
+  overwriteTheme?: ITheme;
 }
 
 export const DocsLogo: FC<IProps> = ({ overwriteTheme, ...props }) => {
-  const { theme } = useTheme() ?? 'dark';
-  const [innerTheme, setInnerTheme] = useState<string | undefined>(
-    overwriteTheme,
-  );
-
-  //fixes the logo color when the theme is loaded
-  useEffect(() => {
-    if (overwriteTheme) {
-      setInnerTheme(overwriteTheme);
-    } else {
-      setInnerTheme(theme);
-    }
-  }, [theme, overwriteTheme]);
+  const { theme } = useTheme({ overwriteTheme });
 
-  if (innerTheme === 'dark') {
+  if (theme === Themes.dark) {
     return (
       <svg
         width="216"

packages/apps/docs/src/components/Layout/components/Header/Header.tsx

@@ -7,6 +7,7 @@ import {
   NavHeaderLink,
   NavHeaderLinkList,
   Stack,
+  Themes,
 } from '@kadena/react-ui';
 import classNames from 'classnames';
 import Link from 'next/link';
@@ -44,7 +45,7 @@ export const Header: FC<IProps> = ({ menuItems, layout = 'full' }) => {
       <NavHeader
         logo={
           <Link href="/" aria-label="Go to the home page">
-            <DocsLogo overwriteTheme="dark" height={32} />
+            <DocsLogo overwriteTheme={Themes.dark} height={32} />
           </Link>
         }
         activeHref={pathname}

packages/apps/docs/src/components/Layout/components/Header/ThemeToggle.tsx

@@ -1,32 +1,32 @@
 import { EVENT_NAMES, analyticsEvent } from '@/utils/analytics';
 import { MonoContrast } from '@kadena/react-icons';
-import { NavHeaderButton } from '@kadena/react-ui';
+import { NavHeaderButton, Themes, useTheme } from '@kadena/react-ui';
 import classNames from 'classnames';
-import { useTheme } from 'next-themes';
 import type { FC } from 'react';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { baseIcon, reversedIcon, socialsClass } from './styles.css';
 
 export const ThemeToggle: FC = () => {
   const [isMounted, setIsMounted] = useState<boolean>(false);
   const [isRotated, rotateIcon] = useState<boolean>(false);
-
   const { theme, setTheme } = useTheme();
 
   useEffect(() => {
     setIsMounted(true);
   }, []);
 
-  const toggleTheme = (): void => {
-    const newTheme = theme === 'dark' ? 'light' : 'dark';
-    console.log(isRotated);
-
+  useEffect(() => {
     rotateIcon(!isRotated);
+  }, [theme, rotateIcon]);
+
+  const toggleTheme = useCallback((): void => {
+    const newTheme = theme === Themes.dark ? Themes.light : Themes.dark;
+
     setTheme(newTheme);
     analyticsEvent(EVENT_NAMES['click:change_theme'], {
       theme: newTheme,
     });
-  };
+  }, [setTheme, theme]);
 
   if (!isMounted) return null;
 

packages/apps/docs/src/components/Markdown/Heading/styles.css.ts

@@ -30,6 +30,7 @@ export const headerClass = style([
     display: 'flex',
     alignItems: 'center',
     marginBlockStart: 'xl',
+    color: 'text.base.default',
   }),
   {
     selectors: {

packages/apps/docs/src/pages/_app.tsx

@@ -11,9 +11,7 @@ import { MenuProvider } from '@/hooks/useMenu/MenuProvider';
 import { getLayout } from '@/utils/getLayout';
 import type { IPageMeta, IPageProps } from '@kadena/docs-tools';
 import { RouterProvider } from '@kadena/react-ui';
-import { darkThemeClass } from '@kadena/react-ui/styles';
 import { MDXProvider } from '@mdx-js/react';
-import { ThemeProvider } from 'next-themes';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -107,25 +105,15 @@ export const MyApp = ({
         <link rel="apple-touch-icon" href="/assets/favicons/icon@192.png?1" />
       </Head>
       <MDXProvider components={markDownComponents}>
-        <ThemeProvider
-          attribute="class"
-          enableSystem={true}
-          defaultTheme="light"
-          value={{
-            light: 'light',
-            dark: darkThemeClass,
-          }}
-        >
-          <RouterProvider navigate={router.push}>
-            <MenuProvider>
-              <Header menuItems={props.headerMenuItems} />
-              <CookieConsent />
-              <Layout {...props}>
-                <Component {...props} />
-              </Layout>
-            </MenuProvider>
-          </RouterProvider>
-        </ThemeProvider>
+        <RouterProvider navigate={router.push}>
+          <MenuProvider>
+            <Header menuItems={props.headerMenuItems} />
+            <CookieConsent />
+            <Layout {...props}>
+              <Component {...props} />
+            </Layout>
+          </MenuProvider>
+        </RouterProvider>
       </MDXProvider>
       <Analytics />
     </>

packages/libs/react-ui/package.json

@@ -125,6 +125,7 @@
     "@storybook/react-webpack5": "^8.0.5",
     "@storybook/theming": "^8.0.5",
     "@testing-library/react": "~14.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "~14.5.1",
     "@types/lodash.get": "^4.4.9",
     "@types/lodash.mapvalues": "^4.6.7",

packages/libs/react-ui/src/index.ts

@@ -128,3 +128,7 @@ export type {
 
 // re-exports from 'react-aria'
 export { RouterProvider } from 'react-aria';
+
+export { useTheme } from './utils';
+export { Themes } from './utils/useTheme/utils/constants';
+export type { ITheme } from './utils/useTheme/utils/constants';

packages/libs/react-ui/src/utils/__tests__/useTheme.test.ts

@@ -0,0 +1,103 @@
+import { renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useTheme } from '../useTheme';
+import { Themes, storageKey } from '../useTheme/utils/constants';
+
+const mocks = vi.hoisted(() => {
+  return {
+    getSystemTheme: vi.fn(),
+  };
+});
+describe('useTheme', () => {
+  beforeEach(() => {
+    vi.mock('../useTheme/utils/getSystemTheme', () => ({
+      getSystemTheme: mocks.getSystemTheme,
+    }));
+  });
+
+  afterEach(() => {
+    window.localStorage.removeItem(storageKey);
+    vi.resetAllMocks();
+  });
+
+  it('should set the state of the system (dark) when there is no localstorage set', () => {
+    mocks.getSystemTheme.mockReturnValue(Themes.dark);
+    const { result } = renderHook(() => useTheme());
+    expect(result.current.theme).toEqual(Themes.dark);
+  });
+
+  it('should set the state of the system (light) when there is no localstorage set', () => {
+    mocks.getSystemTheme.mockReturnValue(Themes.light);
+    const { result } = renderHook(() => useTheme());
+    expect(result.current.theme).toEqual(Themes.light);
+  });
+
+  it('should set the state of the localstorage value (light), if available', () => {
+    window.localStorage.setItem(storageKey, Themes.light);
+
+    const { result } = renderHook(() => useTheme());
+    expect(result.current.theme).toEqual(Themes.light);
+  });
+
+  it('should set the state of the localstorage value (light), if available', () => {
+    window.localStorage.setItem(storageKey, Themes.dark);
+
+    const { result } = renderHook(() => useTheme());
+    expect(result.current.theme).toEqual(Themes.dark);
+  });
+
+  it('should lock the theme when it is given as a prop (dark)', () => {
+    window.localStorage.setItem(storageKey, Themes.light);
+
+    expect(localStorage.getItem(storageKey)).toEqual(Themes.light);
+
+    const { result } = renderHook(() => useTheme({ lockedTheme: Themes.dark }));
+    expect(result.current.theme).toEqual(Themes.dark);
+    expect(localStorage.getItem(storageKey)).toEqual(Themes.dark);
+  });
+
+  it('should overwrite the theme when given as prop', () => {
+    window.localStorage.setItem(storageKey, Themes.light);
+
+    const { result } = renderHook(() => useTheme());
+
+    expect(result.current.theme).toEqual(Themes.light);
+
+    const { result: result2 } = renderHook(() =>
+      useTheme({ overwriteTheme: Themes.dark }),
+    );
+
+    expect(result2.current.theme).toEqual(Themes.dark);
+  });
+  it('should overwrite the theme when given as prop and the overwrite is set as well', () => {
+    expect(localStorage.getItem(storageKey)).toEqual(null);
+
+    const { result } = renderHook(() =>
+      useTheme({ overwriteTheme: Themes.light, lockedTheme: Themes.dark }),
+    );
+
+    expect(localStorage.getItem(storageKey)).toEqual(Themes.dark);
+    expect(result.current.theme).toEqual(Themes.light);
+  });
+  it('should switch state when the setTheme is called', () => {
+    window.localStorage.setItem(storageKey, Themes.light);
+    const { result, rerender } = renderHook(() => useTheme());
+    expect(result.current.theme).toEqual(Themes.light);
+
+    result.current.setTheme(Themes.dark);
+    rerender();
+    expect(result.current.theme).toEqual(Themes.dark);
+  });
+
+  it('should switch state when the setTheme is called, but the overwrite should still hold', () => {
+    window.localStorage.setItem(storageKey, Themes.light);
+    const { result, rerender } = renderHook(() =>
+      useTheme({ overwriteTheme: Themes.light }),
+    );
+    expect(result.current.theme).toEqual(Themes.light);
+
+    result.current.setTheme(Themes.dark);
+    rerender();
+    expect(result.current.theme).toEqual(Themes.light);
+  });
+});

packages/libs/react-ui/src/utils/index.ts

@@ -5,3 +5,4 @@ export * from './object';
 export * from './testId';
 export * from './useAsyncFn';
 export * from './useMountedState';
+export * from './useTheme';