storybook upgrade

.storybook/main.ts

@@ -0,0 +1,19 @@
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  framework: '@storybook/react-webpack5',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other Storybook addons
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    'storybook-addon-material-ui',
+    "@storybook/addon-mdx-gfm"
+  ],
+};
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,54 @@
+import {muiTheme} from "storybook-addon-material-ui";
+import MackenziesMindTheme from "../src/theme/DigitalResumeTheme";
+import {QueryClient, QueryClientProvider} from "react-query";
+import {BrowserRouter} from "react-router-dom";
+//
+// export const parameters = {
+//     actions: {argTypesRegex: "^on[A-Z].*"},
+//     controls: {
+//         matchers: {
+//             color: /(background|color)$/i,
+//             date: /Date$/,
+//         },
+//     },
+// }
+//
+const mockedQueryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            retry: false,
+        },
+    },
+});
+//
+// export const decorators = [
+//     (Story) => (
+//         <QueryClientProvider client={mockedQueryClient}>
+//             <BrowserRouter>
+//             <Story/>
+//             </BrowserRouter>
+//         </QueryClientProvider>),
+//     muiTheme([MackenziesMindTheme]),
+// ];
+
+
+import React from 'react';
+
+import { Preview } from '@storybook/react';
+import {MuiThemeProvider} from "@material-ui/core";
+import DigitalResumeTheme from "../src/theme/DigitalResumeTheme";
+
+const preview: Preview = {
+    decorators: [
+        (Story) => (
+            <QueryClientProvider client={mockedQueryClient}>
+                <BrowserRouter>
+                   <MuiThemeProvider theme={DigitalResumeTheme}><Story/></MuiThemeProvider>
+                </BrowserRouter>
+            </QueryClientProvider>
+        ),
+
+    ],
+};
+
+export default preview;