[ERP-3179] Chakra 3 Upgrade

frontend/.eslintrc.json

@@ -1,12 +1,6 @@
 {
-  "plugins": [
-    "prettier"
-  ],
-  "extends": [
-    "next",
-    "next/core-web-vitals",
-    "prettier"
-  ],
+  "plugins": ["prettier"],
+  "extends": ["next", "next/core-web-vitals", "prettier"],
   "rules": {
     "prettier/prettier": [
       "error",
@@ -35,39 +29,30 @@
     "jsx-a11y/anchor-is-valid": [
       "error",
       {
-        "components": [
-          "Link"
-        ],
-        "specialLink": [
-          "hrefLeft",
-          "hrefRight"
-        ],
-        "aspects": [
-          "invalidHref",
-          "preferButton"
-        ]
+        "components": ["Link"],
+        "specialLink": ["hrefLeft", "hrefRight"],
+        "aspects": ["invalidHref", "preferButton"]
       }
     ]
   },
   "overrides": [
     {
       "files": "**/*.+(ts|tsx)",
       "parser": "@typescript-eslint/parser",
-      "plugins": [
-        "@typescript-eslint/eslint-plugin"
-      ],
-      "extends": [
-        "plugin:@typescript-eslint/recommended",
-        "prettier"
-      ],
+      "plugins": ["@typescript-eslint/eslint-plugin"],
+      "extends": ["plugin:@typescript-eslint/recommended", "prettier"],
       "rules": {
         "@typescript-eslint/no-use-before-define": "off",
         "@typescript-eslint/explicit-function-return-type": "off",
         "@typescript-eslint/explicit-module-boundary-types": "off",
-        "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }],
+        "@typescript-eslint/no-unused-vars": [
+          "error",
+          { "ignoreRestSiblings": true }
+        ],
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-var-requires": "off",
-        "@typescript-eslint/prefer-as-const": "off"
+        "@typescript-eslint/prefer-as-const": "off",
+        "@typescript-eslint/no-empty-object-type": "off"
       }
     }
   ]

frontend/.storybook/preview.tsx

@@ -1,58 +1,45 @@
-import { FunctionComponent, PropsWithChildren, Suspense, useEffect } from "react";
 import type { Preview } from "@storybook/react";
-import { ChakraProvider, useColorMode } from "@chakra-ui/react";
-import { theme } from "../theme";
+import { ChakraProvider } from "@chakra-ui/react";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import { system } from "../theme";
+import { ColorModeProvider } from "../components/ui/color-mode";
+import { AuthProvider } from "../context/auth-context";
 
-
-interface ColorModeProps {
-  colorMode: 'light' | 'dark';
-}
-
-const ColorMode: FunctionComponent<PropsWithChildren<ColorModeProps>> = ({colorMode, children}) => {
-  const {setColorMode} = useColorMode();
-  useEffect(() => {
-    setColorMode(colorMode);
-  }, [colorMode]);
-  return children;
-}
-
-export const globalTypes = {
+const globalTypes = {
   colorMode: {
-    name: 'Chakra UI Color Mode',
-    defaultValue: 'dark',
+    name: "Chakra UI Color Mode",
+    defaultValue: "dark",
     toolbar: {
       items: [
-        {title: 'Light', value: 'light'},
-        {title: 'Dark', value: 'dark'}
+        { title: "Light", value: "light" },
+        { title: "Dark", value: "dark" },
       ],
-      dynamicTitle: true
-    }
-  }
+      dynamicTitle: true,
+    },
+  },
 };
 
 const withChakra = (Story, context) => {
   return (
-    <ChakraProvider theme={theme}>
-      <ColorMode colorMode={context.globals.colorMode}>
-        <Story/>
-      </ColorMode>
-    </ChakraProvider>
+    <AuthProvider>
+      <ChakraProvider value={system}>
+        <ColorModeProvider forcedTheme={context.globals.colorMode}>
+          <Story />
+        </ColorModeProvider>
+      </ChakraProvider>
+    </AuthProvider>
   );
 };
 
 const preview: Preview = {
   globalTypes,
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
   decorators: [
+    withThemeByClassName({
+      defaultTheme: "light",
+      themes: { light: "", dark: "dark" },
+    }),
     withChakra,
-  ]
+  ],
 };
 
 export default preview;