feat(theme): migrate theme context and dropdowns to local implementation

apps/acf-options-page/src/app/configs/action/editable-cell.tsx

@@ -1,6 +1,6 @@
+import { ThemeContext } from '@acf-options-page/context';
 import { getFieldNameValue } from '@acf-options-page/util/element';
 import { IAction, IUserScript } from '@dhruv-techapps/acf-common';
-import { ThemeContext } from '@dhruv-techapps/ui-context';
 import Editor from '@monaco-editor/react';
 import { ColumnDef } from '@tanstack/react-table';
 import { ChangeEvent, useContext, useEffect, useRef, useState } from 'react';

apps/acf-options-page/src/app/header.tsx

@@ -1,4 +1,4 @@
-import { ThemeNavDropdown } from '@dhruv-techapps/ui-components';
+import { ThemeNavDropdown } from '@acf-options-page/components/theme';
 import * as Sentry from '@sentry/react';
 import { useEffect, useState } from 'react';
 import { Badge, Container, Nav, NavDropdown, Navbar, Offcanvas } from 'react-bootstrap';
@@ -113,9 +113,9 @@ function Header() {
                   <small className='d-lg-none ms-2'>{t('header.settings')}</small>
                 </Nav.Link>
               </Nav.Item>
-
-              <ThemeNavDropdown />
-
+              <Nav.Item as='li' className='col-6 col-lg-auto'>
+                <ThemeNavDropdown />
+              </Nav.Item>
               <Nav.Item as='li' className='col-6 col-lg-auto'>
                 <NavDropdown title={i18n.language} id='language-nav-dropdown' align='end' className='text-uppercase fw-bolder' data-testid='switch-language'>
                   {APP_LANGUAGES.map((language) => (

apps/acf-options-page/src/components/theme/index.ts

@@ -0,0 +1,2 @@
+export * from './theme-button-dropdown';
+export * from './theme-nav-dropdown';

apps/acf-options-page/src/components/theme/theme-button-dropdown.tsx

@@ -0,0 +1,43 @@
+import { getStoredTheme, ThemeContext, tTheme } from '@acf-options-page/context';
+import { useContext, useState } from 'react';
+import { Dropdown, DropdownButton } from 'react-bootstrap';
+import { DropDirection } from 'react-bootstrap/esm/DropdownContext';
+
+interface TThemeDropdownProps {
+  drop?: DropDirection;
+}
+
+export const ThemeButtonDropdown = (props: TThemeDropdownProps) => {
+  const { drop } = props;
+  const [theme, setTheme] = useState(getStoredTheme());
+  const { updateTheme } = useContext(ThemeContext);
+
+  const onClickTheme = (theme: tTheme | null) => {
+    setTheme(theme);
+    updateTheme(theme);
+  };
+
+  const getIcon = () => {
+    if (theme === 'light') {
+      return <i className='bi bi-sun' />;
+    }
+    if (theme === 'dark') {
+      return <i className='bi bi-moon' />;
+    }
+    return <i className='bi bi-circle-half' />;
+  };
+
+  return (
+    <DropdownButton title={getIcon()} drop={drop}>
+      <Dropdown.Item active={theme === 'light'} onClick={() => onClickTheme('light')}>
+        <i className='bi bi-sun' /> Light
+      </Dropdown.Item>
+      <Dropdown.Item active={theme === 'dark'} onClick={() => onClickTheme('dark')}>
+        <i className='bi bi-moon' /> Dark
+      </Dropdown.Item>
+      <Dropdown.Item active={theme === null} onClick={() => onClickTheme(null)}>
+        <i className='bi bi-circle-half' /> Auto
+      </Dropdown.Item>
+    </DropdownButton>
+  );
+};

apps/acf-options-page/src/components/theme/theme-nav-dropdown.tsx

@@ -0,0 +1,37 @@
+import { getStoredTheme, ThemeContext, tTheme } from '@acf-options-page/context';
+import { useContext, useState } from 'react';
+import { NavDropdown } from 'react-bootstrap';
+
+export const ThemeNavDropdown = () => {
+  const [theme, setTheme] = useState(getStoredTheme());
+  const { updateTheme } = useContext(ThemeContext);
+
+  const onClickTheme = (theme: tTheme | null) => {
+    setTheme(theme);
+    updateTheme(theme);
+  };
+
+  const getIcon = () => {
+    if (theme === 'light') {
+      return <i className='bi bi-sun-fill'></i>;
+    }
+    if (theme === 'dark') {
+      return <i className='bi bi-moon-stars-fill'></i>;
+    }
+    return <i className='bi bi-circle-half'></i>;
+  };
+
+  return (
+    <NavDropdown id='nav-dropdown-dark-example' title={getIcon()} menuVariant='dark'>
+      <NavDropdown.Item onClick={() => onClickTheme('light')} active={theme === 'light'} className='d-flex align-items-center'>
+        <i className='bi bi-sun-fill me-2 opacity-50'></i> Light
+      </NavDropdown.Item>
+      <NavDropdown.Item onClick={() => onClickTheme('dark')} active={theme === 'dark'} className='d-flex align-items-center'>
+        <i className='bi bi-moon-stars-fill me-2 opacity-50 '></i> Dark
+      </NavDropdown.Item>
+      <NavDropdown.Item onClick={() => onClickTheme(null)} active={theme === null} className='d-flex align-items-center'>
+        <i className='bi bi-circle-half me-2 opacity-50 '></i> Auto
+      </NavDropdown.Item>
+    </NavDropdown>
+  );
+};

apps/acf-options-page/src/context/index.ts

@@ -0,0 +1 @@
+export * from './theme-context';

apps/acf-options-page/src/context/theme-context.tsx

@@ -0,0 +1,54 @@
+import React, { createContext, PropsWithChildren, useMemo, useState } from 'react';
+
+export type tTheme = 'light' | 'dark';
+
+export const ThemeContext = createContext({
+  theme: localStorage.getItem('theme') || 'light',
+  updateTheme: (theme: tTheme | null) => {
+    return theme;
+  }
+});
+
+export const getStoredTheme = () => localStorage.getItem('theme');
+
+const removeStoredTheme = () => localStorage.removeItem('theme');
+
+const setStoredTheme = (theme: tTheme) => localStorage.setItem('theme', theme);
+
+const getSystemPreferredTheme = (): tTheme => {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+
+const getPreferredTheme = (): tTheme => {
+  const storedTheme = getStoredTheme();
+  if (storedTheme) {
+    return storedTheme as tTheme;
+  }
+  return getSystemPreferredTheme();
+};
+
+export const ThemeProvider: React.FC<PropsWithChildren> = ({ children }) => {
+  const [theme, setTheme] = useState<tTheme>(getPreferredTheme());
+
+  const updateTheme = (theme: tTheme | null) => {
+    if (theme === null) {
+      removeStoredTheme();
+      const systemTheme = getSystemPreferredTheme();
+      setTheme(systemTheme);
+      document.documentElement.setAttribute('data-bs-theme', systemTheme);
+    } else {
+      setStoredTheme(theme);
+      setTheme(theme);
+      document.documentElement.setAttribute('data-bs-theme', theme);
+    }
+    return theme;
+  };
+
+  React.useEffect(() => {
+    document.documentElement.setAttribute('data-bs-theme', theme);
+  }, [theme]);
+
+  const value = useMemo(() => ({ theme, updateTheme }), [theme]);
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};

apps/acf-options-page/src/main.tsx

@@ -1,4 +1,4 @@
-import { ThemeProvider } from '@dhruv-techapps/ui-context';
+import { ThemeProvider } from '@acf-options-page/context';
 import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';

apps/acf-options-page/tsconfig.app.json

@@ -30,10 +30,10 @@
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
   "references": [
     {
-      "path": "../../packages/shared/discord-oauth/tsconfig.lib.json"
+      "path": "../../packages/shared/firebase-firestore/tsconfig.lib.json"
     },
     {
-      "path": "../../packages/shared/firebase-firestore/tsconfig.lib.json"
+      "path": "../../packages/shared/discord-oauth/tsconfig.lib.json"
     },
     {
       "path": "../../packages/shared/firebase-oauth/tsconfig.lib.json"
@@ -53,12 +53,6 @@
     {
       "path": "../../packages/shared/status-bar/tsconfig.lib.json"
     },
-    {
-      "path": "../../packages/ui/context/tsconfig.lib.json"
-    },
-    {
-      "path": "../../packages/ui/components/tsconfig.lib.json"
-    },
     {
       "path": "../../packages/core/common/tsconfig.lib.json"
     },

apps/acf-options-page/tsconfig.json

@@ -3,10 +3,10 @@
   "include": [],
   "references": [
     {
-      "path": "../../packages/shared/discord-oauth"
+      "path": "../../packages/shared/firebase-firestore"
     },
     {
-      "path": "../../packages/shared/firebase-firestore"
+      "path": "../../packages/shared/discord-oauth"
     },
     {
       "path": "../../packages/shared/firebase-oauth"
@@ -26,12 +26,6 @@
     {
       "path": "../../packages/shared/status-bar"
     },
-    {
-      "path": "../../packages/ui/context"
-    },
-    {
-      "path": "../../packages/ui/components"
-    },
     {
       "path": "../../packages/core/common"
     },