From 51df16e83eda7e212a4884061e109db7711dacd7 Mon Sep 17 00:00:00 2001
From: yuri-sakharov <10849682+yuri-sakharov@users.noreply.github.com>
Date: Wed, 26 Nov 2025 08:55:42 +0200
Subject: [PATCH] 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 | 32 -
frontend/.storybook/main.ts | 22 +-
frontend/.storybook/preview.cjs | 12 -
frontend/.storybook/preview.js | 12 -
frontend/.storybook/preview.tsx | 34 +
frontend/index.html | 4 +-
frontend/package-lock.json | 8017 ++++++-----------
frontend/package.json | 25 +-
.../src/components/SelectMenu.stories.tsx | 2 +-
.../components/common/DropDown.stories.tsx | 2 +-
.../components/common/Page/Page.stories.tsx | 24 -
.../components/modal/ErrorModal.stories.tsx | 2 +-
frontend/src/components/modal/ErrorModal.tsx | 4 +-
.../src/components/modal/GlobalErrorModal.tsx | 4 +-
.../src/components/modal/Modal.stories.tsx | 2 +-
.../components/revision/RevisionResource.tsx | 2 +-
frontend/src/index.css | 181 +-
...roduction.stories.mdx => Introduction.mdx} | 0
frontend/tailwind.config.cjs | 81 +-
frontend/vite.config.ts | 11 +
frontend/yarn.lock | 2808 ++----
21 files changed, 3489 insertions(+), 7792 deletions(-)
delete mode 100644 frontend/.storybook/main.cjs
delete mode 100644 frontend/.storybook/preview.cjs
delete mode 100644 frontend/.storybook/preview.js
create mode 100644 frontend/.storybook/preview.tsx
delete mode 100644 frontend/src/components/common/Page/Page.stories.tsx
rename frontend/src/stories/{Introduction.stories.mdx => Introduction.mdx} (100%)
diff --git a/frontend/.storybook/main.cjs b/frontend/.storybook/main.cjs
deleted file mode 100644
index 0f4bd67..0000000
--- a/frontend/.storybook/main.cjs
+++ /dev/null
@@ -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,
- },
-};
diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
index c84fa33..0d913cd 100644
--- a/frontend/.storybook/main.ts
+++ b/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;
diff --git a/frontend/.storybook/preview.cjs b/frontend/.storybook/preview.cjs
deleted file mode 100644
index 67e6942..0000000
--- a/frontend/.storybook/preview.cjs
+++ /dev/null
@@ -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$/,
- },
- },
-};
diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
deleted file mode 100644
index 9fbc291..0000000
--- a/frontend/.storybook/preview.js
+++ /dev/null
@@ -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$/,
- },
- },
-};
diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
new file mode 100644
index 0000000..1f09370
--- /dev/null
+++ b/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) => (
+