Bump tailwindcss related packages and updated config. Fixed Storybook! (#624)

* Updated Story book to the latest one

* Updated tailwindcss related packages and config

* Fixed Storybook

* Added missed colors

* Fixed CSS for the error dialog

frontend/.storybook/main.cjs

@@ -1,32 +0,0 @@
-module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
-  framework: "@storybook/react",
-  core: {
-    builder: "@storybook/builder-vite",
-  },
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.css$/,
-      use: [
-        {
-          loader: "postcss-loader",
-          options: {
-            postcssOptions: {
-              plugins: [require("tailwindcss"), require("autoprefixer")],
-            },
-          },
-        },
-      ],
-      include: path.resolve(__dirname, "../"),
-    });
-    return config;
-  },
-  features: {
-    storyStoreV7: true,
-  },
-};

frontend/.storybook/main.ts

@@ -1,25 +1,21 @@
-// .storybook/main.ts
-
 import type { StorybookConfig } from "@storybook/react-vite";
+
 const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+
   addons: [
-    "@storybook/addon-actions",
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-styling",
-    {
-      name: "@storybook/addon-styling",
-    },
-    "@storybook/addon-mdx-gfm",
+    "@storybook/addon-docs"
   ],
   core: {},
+
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-  docs: {
-    autodocs: true,
-  },
+  features: {
+    mdx2Csf: true,
+  }
 };
+
 export default config;

frontend/.storybook/preview.cjs

@@ -1,12 +0,0 @@
-import "../src/index.css";
-import "tailwindcss/tailwind.css";
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};

frontend/.storybook/preview.js

@@ -1,12 +0,0 @@
-import "tailwindcss/tailwind.css";
-import "../src/index.css";
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};

frontend/.storybook/preview.tsx

@@ -0,0 +1,34 @@
+import "tailwindcss/tailwind.css";
+import "../src/index.css";
+
+import { BrowserRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { Preview, StoryFn } from "@storybook/react";
+
+import { AppContextProvider } from "../src/context/AppContext";
+
+const queryClient = new QueryClient();
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const decorators: Preview["decorators"] = [
+    (Story: StoryFn) => (
+        <BrowserRouter>
+          <AppContextProvider>
+            <QueryClientProvider client={queryClient}>
+              <Story />
+            </QueryClientProvider>
+          </AppContextProvider>
+        </BrowserRouter>
+    ),
+];
+
+export const tags = ["autodocs"];