From 82f0d890f41d5c4b1863faee50d47a40bacbfbc5 Mon Sep 17 00:00:00 2001
From: Mykola Ptushchuk <mykola.ptushchuk@whykingz.com>
Date: Wed, 30 Oct 2024 12:20:09 +0200
Subject: [PATCH] docs(storybook): Theming support for stories (#1151)

---
 .storybook/addons/withTheme.css |  3 ++
 .storybook/addons/withTheme.jsx | 49 +++++++++++++++++++++++++++++++++
 .storybook/preview.js           |  8 ++++++
 3 files changed, 60 insertions(+)
 create mode 100644 .storybook/addons/withTheme.css
 create mode 100644 .storybook/addons/withTheme.jsx

diff --git a/.storybook/addons/withTheme.css b/.storybook/addons/withTheme.css
new file mode 100644
index 000000000..d9a6bd82a
--- /dev/null
+++ b/.storybook/addons/withTheme.css
@@ -0,0 +1,3 @@
+.docs-story {
+    background: var(--vf-color-background-default);
+}
diff --git a/.storybook/addons/withTheme.jsx b/.storybook/addons/withTheme.jsx
new file mode 100644
index 000000000..c5b0a406f
--- /dev/null
+++ b/.storybook/addons/withTheme.jsx
@@ -0,0 +1,49 @@
+import React, { useEffect, useRef } from "react";
+
+import "./withTheme.css";
+
+const THEMES = [
+  {
+    value: "is-light",
+    title: "Theme: Light",
+  },
+  {
+    value: "is-dark",
+    title: "Theme: Dark",
+  },
+  {
+    value: "is-paper",
+    title: "Theme: Paper",
+  },
+];
+
+export const themeType = {
+  theme: {
+    name: "Theme",
+    description: "Global theme for components",
+    defaultValue: THEMES[0].value,
+    toolbar: {
+      items: THEMES,
+      showName: true,
+      dynamicTitle: true,
+    },
+  },
+};
+
+export const WithThemeProvider = (Story, context) => {
+  const theme = context.globals.theme;
+  const themeRef = useRef(null);
+
+  useEffect(() => {
+    if (themeRef.current !== theme) {
+      if (themeRef.current) {
+        document.body.classList.remove(themeRef.current);
+      }
+
+      document.body.classList.add(theme);
+      themeRef.current = theme;
+    }
+  }, [theme]);
+
+  return <Story {...context} />;
+};
diff --git a/.storybook/preview.js b/.storybook/preview.js
index c65f45d78..cf4ca618e 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,8 +1,16 @@
 import { themes } from "@storybook/theming";
 import "vanilla-framework/scss/build.scss";
+import { themeType, WithThemeProvider } from "./addons/withTheme";
 
 export const parameters = {
   docs: {
     theme: themes.vanillaish,
   },
+  backgrounds: {
+    disable: true,
+  },
 };
+
+export const decorators = [WithThemeProvider];
+
+export const globalTypes = themeType;