chore: adjust storybook config

Author: bartstc

.storybook/preview.ts

@@ -1,7 +1,7 @@
-import { ChakraProvider, theme } from "@chakra-ui/react";
 import { initialize, mswLoader } from "msw-storybook-addon";
 import { createElement } from "react";
 
+import { DesignProvider } from "@/app/design/DesignProvider";
 import { getUserHandler } from "@/test-lib/handlers/get-user-handler";
 import { withAuth } from "@/test-lib/storybook/with-auth";
 import { withI18Next } from "@/test-lib/storybook/with-i18next";
@@ -38,7 +38,7 @@ initialize(
 
 export const decorators = [
   // eslint-disable-next-line react/no-children-prop, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-explicit-any
-  (story: any) => createElement(ChakraProvider, { children: story(), theme }),
+  (story: any) => createElement(DesignProvider, { children: story() }),
   withI18Next,
   withReactQuery,
   withAuth,

src/app/Providers.tsx

@@ -3,7 +3,6 @@ import type { ReactNode } from "react";
 
 import { DesignProvider } from "@/app/design/DesignProvider";
 import { AuthProvider } from "@/features/auth/application/AuthProvider";
-import { Toaster } from "@/lib/components/Toast/Toaster";
 import { queryClient } from "@/lib/query";
 
 interface IProps {
@@ -15,7 +14,6 @@ const Providers = ({ children }: IProps) => {
     <QueryClientProvider client={queryClient}>
       <DesignProvider>
         <AuthProvider>{children}</AuthProvider>
-        <Toaster />
       </DesignProvider>
     </QueryClientProvider>
   );

src/app/design/DesignProvider.tsx

@@ -1,6 +1,7 @@
 import { ChakraProvider } from "@chakra-ui/react";
 import type { ReactNode } from "react";
 
+import { Toaster } from "@/lib/components/Toast/Toaster";
 import { system } from "@/lib/theme/theme";
 
 import { ColorModeProvider } from "./ColorModeProvider";
@@ -13,7 +14,10 @@ interface ProviderProps extends Pick<ColorModeProviderProps, "forcedTheme"> {
 export function DesignProvider({ children, ...props }: ProviderProps) {
   return (
     <ChakraProvider value={system}>
-      <ColorModeProvider {...props}>{children}</ColorModeProvider>
+      <ColorModeProvider {...props}>
+        <Toaster />
+        {children}
+      </ColorModeProvider>
     </ChakraProvider>
   );
 }