fix: move storybook theme provider out of themeprovider.tsx

Author: 0xhckr

.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { StorybookThemeProvider } from "../src/components/ThemeProvider";
+import { StorybookThemeProvider } from "../src/stories/ThemeUtility";
 import type { Preview } from "@storybook/react";
 import {
   ThemeDefaultBackground,

src/components/ThemeProvider.tsx

@@ -62,20 +62,6 @@ export const ThemeProvider = (props: {
   );
 };
 
-export const StorybookThemeProvider = (props: {
-  children: React.ReactNode;
-  theme?: PartialDeep<Theme>;
-}) => {
-  const { children, theme: providedTheme } = props;
-  const darkMode = useDarkMode(false);
-  const theme = providedTheme ?? defaultTheme;
-  return (
-    <StyledThemeProvider theme={darkMode.value ? theme.dark : theme.light}>
-      {children}
-    </StyledThemeProvider>
-  );
-};
-
 export const getThemeValue = (key: keyof Palette) => {
   try {
     const darkMode = useDarkMode(false);

src/stories/ThemeUtility.tsx

@@ -1,6 +1,23 @@
 import React from "react";
 import useDarkMode from "use-dark-mode";
 import styled from "styled-components";
+import { PartialDeep } from "type-fest";
+import { ThemeProvider as StyledThemeProvider } from "styled-components";
+import { defaultTheme, Theme } from "../components/ThemeProvider";
+
+export const StorybookThemeProvider = (props: {
+  children: React.ReactNode;
+  theme?: PartialDeep<Theme>;
+}) => {
+  const { children, theme: providedTheme } = props;
+  const darkMode = useDarkMode(false);
+  const theme = providedTheme ?? defaultTheme;
+  return (
+    <StyledThemeProvider theme={darkMode.value ? theme.dark : theme.light}>
+      {children}
+    </StyledThemeProvider>
+  );
+};
 
 export const ToggleThemeButton = () => {
   const { value, toggle } = useDarkMode(false);