docs(storybook): Theming support for stories (#1151)

.storybook/addons/withTheme.css

@@ -0,0 +1,3 @@
+.docs-story {
+    background: var(--vf-color-background-default);
+}

.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} />;
+};

.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;