added storybook backgrounds, docs with MDX support, and demoed contexts

.storybook/backgrounds.js

@@ -0,0 +1,7 @@
+export const backgrounds = {
+  default: "white",
+  values: [
+    { name: "light", value: "#fefefe" },
+    { name: "dark", value: "#030303" },
+  ],
+};

.storybook/contexts.js

@@ -0,0 +1,28 @@
+// Demo a context switch for Style Components theme
+// Using @storybook/addon-contexts
+// FIXME: not yet tested, as we wait for Storybook v6.0.0 official release
+import darkTheme from "~/lib/style/darkTheme";
+import defaultTheme from "~/lib/style/defaultTheme";
+import { SCThemeProvider } from "~/src/components/providers/SCThemeProvider";
+export const contexts = [
+  {
+    title: "Theme",
+    components: [SCThemeProvider],
+    params: [
+      {
+        name: "Default theme",
+        props: { theme: defaultTheme },
+        default: true,
+      },
+      {
+        name: "Dark theme",
+        props: { theme: darkTheme },
+      },
+    ],
+    options: {
+      deep: true,
+      disable: false,
+      cancelable: false,
+    },
+  },
+];

.storybook/main.js

@@ -12,19 +12,26 @@ if (process.env.ANALYZE === "true") {
 }
 module.exports = {
   stories: [
-    "../stories/**/*.stories.@(js|ts|jsx|tsx)",
-    "../src/**/*.stories.@(js|ts|jsx|tsx)",
+    "../stories/**/*.stories.@(js|ts|jsx|tsx|mdx)",
+    "../src/**/*.stories.@(js|ts|jsx|tsx|mdx)",
+  ],
+  addons: [
+    "@storybook/addon-actions",
+    "@storybook/addon-links",
+    "@storybook/addon-docs", // it seems that MDX is enabled as a default
+    // "@storybook/addon-contexts", // TODO: waiting for v6.0.0 to be released
+    "@storybook/addon-backgrounds",
   ],
-  addons: ["@storybook/addon-actions", "@storybook/addon-links"],
   // https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/custom-webpack-config/index.md#debug-the-default-webpack-config
   webpackFinal: async (config, { configType }) => {
     // add magic imports and isomorphic imports to Storybook
     const withVulcan = extendWebpackConfig("client")(config);
 
-    // add mdx support
+    // add mdx support, in components
     // @see https://mdxjs.com/getting-started/webpack
     withVulcan.module.rules.push({
       test: /\.mdx?$/,
+      exclude: /\.stories.mdx?$/, // ignore stories themselves, that should be handled by addon-docs
       use: ["babel-loader", "@mdx-js/loader"],
     });
     // Bypass interference with Storybook doc, which already set a conflicting rule for .md import

.storybook/preview.js

@@ -1,12 +1,22 @@
 import * as React from "react";
 // Globally in your .storybook/preview.js.
-import { addDecorator } from "@storybook/react";
+import { addDecorator, addParameters } from "@storybook/react";
 // import { withInfo } from "@storybook/addon-info";
 import { MuiThemeProvider, SCThemeProvider } from "~/components/providers";
 import { I18nextProvider } from "react-i18next";
 import { i18n } from "~/lib/i18n";
 import { AppLayout } from "~/components/layout";
 
+// import { withContexts } from "@storybook/addon-contexts/react"
+// import  { contexts } from "./contexts"
+
+import { backgrounds } from "./backgrounds";
+export const parameters = {
+  // FIXME: for some reason the extension stop working when we set custom backgrounds
+  backgrounds,
+  // ...withContext(contexts)
+};
+
 // If you need to mock apollo queries
 //import { MockedProvider } from "@apollo/react-testing";
 //import mocks from "add path to your graphql mocks here"

package.json

@@ -92,6 +92,8 @@
     "@istanbuljs/nyc-config-typescript": "^1.0.1",
     "@next/bundle-analyzer": "^9.4.4",
     "@storybook/addon-actions": "^6.0.0-rc.13",
+    "@storybook/addon-backgrounds": "^6.0.0-rc.13",
+    "@storybook/addon-docs": "^6.0.0-rc.13",
     "@storybook/addon-links": "^6.0.0-rc.13",
     "@storybook/addons": "^6.0.0-rc.13",
     "@storybook/react": "^6.0.0-rc.13",

src/components/ui/stories/0_mdx-example.stories.mdx

@@ -0,0 +1,17 @@
+import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
+
+<Meta title="VNS/design-system/MDX" />
+
+# MDX
+
+With `MDX` we can define a story for any custom component right in the middle of our
+markdown documentation.
+
+<Preview>
+  <Story name="Some input">
+    <p>I am an MDX story, see me in the "Docs" tab!</p>
+    <form>
+      <input type="text" name="test" placeholder="I am some input" />
+    </form>
+  </Story>
+</Preview>