Updated mds dependencies (#1192)

Signed-off-by: Benjamin Perez <[email protected]>

.storybook/main.js

@@ -28,4 +28,7 @@ module.exports = {
     options: {},
   },
   docs: {},
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
 };

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -14,57 +14,57 @@
   },
   "types": "dist/mds.d.ts",
   "dependencies": {
-    "@storybook/test": "^8.2.4",
+    "@storybook/test": "^8.5.8",
     "@types/styled-components": "^5.1.34",
-    "@uiw/react-textarea-code-editor": "^3.0.2",
-    "detect-gpu": "^5.0.39",
-    "luxon": "^3.4.4",
-    "react-calendar": "^5.0.0",
-    "react-virtualized": "^9.22.5",
+    "@uiw/react-textarea-code-editor": "^3.1.0",
+    "detect-gpu": "^5.0.70",
+    "luxon": "^3.5.0",
+    "react-calendar": "^5.1.0",
+    "react-virtualized": "^9.22.6",
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.9",
-    "@babel/preset-env": "^7.24.8",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
-    "@chromatic-com/storybook": "^1.6.1",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@babel/core": "^7.26.9",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@chromatic-com/storybook": "^1.9.0",
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.1",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-actions": "^8.2.4",
-    "@storybook/addon-essentials": "^8.2.4",
-    "@storybook/addon-interactions": "^8.2.4",
-    "@storybook/addon-links": "^8.2.4",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/react": "^8.2.4",
-    "@storybook/react-webpack5": "^8.2.4",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^14.2.1",
-    "@types/jest": "^29.5.11",
+    "@storybook/addon-actions": "^8.5.8",
+    "@storybook/addon-essentials": "^8.5.8",
+    "@storybook/addon-interactions": "^8.5.8",
+    "@storybook/addon-links": "^8.5.8",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+    "@storybook/react": "^8.5.8",
+    "@storybook/react-webpack5": "^8.5.8",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^14.3.1",
+    "@types/jest": "^29.5.14",
     "@types/luxon": "^3.4.2",
-    "@types/react": "^18.3.3",
-    "@types/react-virtualized": "^9.21.30",
-    "babel-loader": "^9.1.3",
-    "jest": "^29.6.4",
-    "jest-environment-jsdom": "^29.6.4",
+    "@types/react": "^18.3.18",
+    "@types/react-virtualized": "^9.22.2",
+    "babel-loader": "^9.2.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lodash": "^4.17.21",
-    "prettier": "^3.3.3",
+    "prettier": "^3.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "remark-gfm": "^4.0.0",
-    "rollup": "^2.79.1",
+    "remark-gfm": "^4.0.1",
+    "rollup": "^2.79.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^4.2.3",
-    "rollup-plugin-import-css": "^3.4.0",
+    "rollup-plugin-import-css": "^3.5.8",
     "rollup-plugin-import-file": "^1.0.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
-    "storybook": "^8.2.4",
-    "storybook-dark-mode": "4.0.1",
-    "ts-jest": "^29.2.3",
-    "tslib": "^2.6.3",
+    "storybook": "^8.5.8",
+    "storybook-dark-mode": "4.0.2",
+    "ts-jest": "^29.2.6",
+    "tslib": "^2.8.1",
     "typescript": "^5.5.3"
   },
-  "packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
+  "packageManager": "yarn@4.4.0"
 }

src/utils/StoryThemeProvider.tsx

@@ -14,17 +14,30 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React from "react";
-import { useDarkMode } from "storybook-dark-mode";
+import React, { useEffect, useState } from "react";
+import { addons } from "@storybook/preview-api";
+import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
 
 import ThemeHandler from "../components/ThemeHandler/ThemeHandler";
 
 interface IStoryThemeProvider {
   children: React.ReactNode;
 }
 
+const channel = addons.getChannel();
+
 const StoryThemeProvider = ({ children }: IStoryThemeProvider) => {
-  return <ThemeHandler darkMode={useDarkMode()}>{children}</ThemeHandler>;
+  const [isDark, setIsDark] = useState<boolean>(false);
+
+  useEffect(() => {
+    channel.on(DARK_MODE_EVENT_NAME, setIsDark);
+  }, []);
+
+  return (
+      <ThemeHandler darkMode={isDark}>
+        {children}
+      </ThemeHandler>
+  );
 };
 
 export default StoryThemeProvider;