Merge pull request #253 from wenfeng-xing/use-is-dark-mode

chore: add the useIsDarkMode

package.json

@@ -35,6 +35,7 @@
     "@mui/types": "^7.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.2.1",
     "@types/react": "^18.0.17",

packages/ui-kit-components/src/utils/useIsDarkMode.test.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { renderHook, RenderResult } from '@testing-library/react-hooks';
+import { createTheme, ThemeProvider, Palette } from '@mui/material';
+import UseIsDarkMode from './useIsDarkMode';
+
+describe('Test UseIsDarkMode', () => {
+  describe('Given the UseIsDarkMode hook', () => {
+    describe('When the theme is dark', () => {
+      let res: RenderResult<boolean>;
+      beforeEach(() => {
+        const theme = createTheme({
+          palette: {
+            mode: 'dark',
+          } as Palette,
+        });
+
+        const wrapper = ({ children }: { children: React.ReactElement }) => (
+          <ThemeProvider theme={theme}>{children}</ThemeProvider>
+        );
+        res = renderHook(() => UseIsDarkMode(), { wrapper }).result;
+      });
+
+      it('Then should get the true value', () => {
+        expect(res.current).toBe(true);
+      });
+    });
+
+    describe('When the theme is light', () => {
+      let res: RenderResult<boolean>;
+      beforeEach(() => {
+        const theme = createTheme({
+          palette: {
+            mode: 'light',
+          } as Palette,
+        });
+
+        const wrapper = ({ children }: { children: React.ReactElement }) => (
+          <ThemeProvider theme={theme}>{children}</ThemeProvider>
+        );
+        res = renderHook(() => UseIsDarkMode(), { wrapper }).result;
+      });
+
+      it('Then should get the false value', () => {
+        expect(res.current).toBe(false);
+      });
+    });
+  });
+});

packages/ui-kit-components/src/utils/useIsDarkMode.tsx

@@ -0,0 +1,9 @@
+import { useTheme } from '@mui/material';
+
+const UseIsDarkMode = () => {
+  const { palette } = useTheme();
+
+  return palette.mode === 'dark';
+};
+
+export default UseIsDarkMode;

yarn.lock

@@ -4483,6 +4483,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/react-hooks@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "@testing-library/react-hooks@npm:8.0.1"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    react-error-boundary: ^3.1.0
+  peerDependencies:
+    "@types/react": ^16.9.0 || ^17.0.0
+    react: ^16.9.0 || ^17.0.0
+    react-dom: ^16.9.0 || ^17.0.0
+    react-test-renderer: ^16.9.0 || ^17.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    react-dom:
+      optional: true
+    react-test-renderer:
+      optional: true
+  checksum: 7fe44352e920deb5cb1876f80d64e48615232072c9d5382f1e0284b3aab46bb1c659a040b774c45cdf084a5257b8fe463f7e08695ad8480d8a15635d4d3d1f6d
+  languageName: node
+  linkType: hard
+
 "@testing-library/react@npm:^13.4.0":
   version: 13.4.0
   resolution: "@testing-library/react@npm:13.4.0"
@@ -5229,6 +5251,7 @@ __metadata:
     "@mui/types": ^7.2.0
     "@testing-library/jest-dom": ^5.16.5
     "@testing-library/react": ^13.4.0
+    "@testing-library/react-hooks": ^8.0.1
     "@testing-library/user-event": ^14.4.3
     "@types/jest": ^29.2.1
     "@types/react": ^18.0.17
@@ -15375,6 +15398,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-error-boundary@npm:^3.1.0":
+  version: 3.1.4
+  resolution: "react-error-boundary@npm:3.1.4"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+  peerDependencies:
+    react: ">=16.13.1"
+  checksum: f36270a5d775a25c8920f854c0d91649ceea417b15b5bc51e270a959b0476647bb79abb4da3be7dd9a4597b029214e8fe43ea914a7f16fa7543c91f784977f1b
+  languageName: node
+  linkType: hard
+
 "react-inspector@npm:^5.1.0":
   version: 5.1.1
   resolution: "react-inspector@npm:5.1.1"