Add MUI theme to Storybook

Now using alpha storybook for emotion 11 support, which is required for MUI

See mui/material-ui#24282 and storybookjs/storybook#17000

apps/dev/.storybook/main.js → apps/dev/.storybook/main.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   stories: [
     "../stories/**/*.stories.mdx",
     "../stories/**/*.stories.@(js|jsx|ts|tsx)",

apps/dev/.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
+        rel="stylesheet"
+/>

apps/dev/.storybook/preview.tsx

@@ -0,0 +1,21 @@
+import "../styles/globals.css";
+import { theme } from "../src/theme";
+import { MuiProvider } from "../src/theme/MuiProvider";
+
+export const decorators = [
+  (Story: any) => (
+    <MuiProvider theme={theme}>
+      <Story />
+    </MuiProvider>
+  ),
+];
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

apps/dev/.storybook/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "jsx": "preserve"
+  }
+}

apps/dev/package.json

@@ -4,13 +4,13 @@
   "private": true,
   "scripts": {
     "build": "next build",
-    "build-storybook": "build-storybook -s ./public",
+    "build-storybook": "cross-env TS_NODE_PROJECT=.storybook/tsconfig.json build-storybook -s ./public",
     "dev": "next dev",
     "fix:eslint": "eslint --ext .js,.ts,.tsx --fix ./src/",
     "lint:eslint": "eslint --ext .js,.ts,.tsx ./src/",
     "lint:tsc": "tsc --noEmit",
     "start": "next start",
-    "storybook": "start-storybook -p 6006  -s ./public"
+    "storybook": "cross-env TS_NODE_PROJECT=.storybook/tsconfig.json start-storybook -p 6006  -s ./public"
   },
   "resolutions": {
     "node-fetch": "^2.6.7",
@@ -28,13 +28,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.4",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-interactions": "^6.4.19",
-    "@storybook/addon-links": "^6.4.19",
-    "@storybook/builder-webpack5": "^6.4.19",
-    "@storybook/manager-webpack5": "^6.4.19",
-    "@storybook/react": "^6.4.19",
+    "@storybook/addon-actions": "6.5.0-alpha.47",
+    "@storybook/addon-essentials": "6.5.0-alpha.47",
+    "@storybook/addon-interactions": "6.5.0-alpha.47",
+    "@storybook/addon-links": "6.5.0-alpha.47",
+    "@storybook/builder-webpack5": "6.5.0-alpha.47",
+    "@storybook/manager-webpack5": "6.5.0-alpha.47",
+    "@storybook/react": "6.5.0-alpha.47",
     "@storybook/testing-library": "^0.0.9",
     "@types/node": "16.7.6",
     "@types/react": "17.0.38",

apps/dev/src/pages/_app.page.tsx

@@ -1,30 +1,19 @@
-import { CacheProvider, EmotionCache } from "@emotion/react";
-import { ThemeProvider } from "@mui/material";
-import CssBaseline from "@mui/material/CssBaseline";
+import { EmotionCache } from "@emotion/react";
 import type { AppProps } from "next/app";
 import { VFC } from "react";
 import "../../styles/globals.css";
 import { theme } from "../theme";
-import { createEmotionCache } from "../util/createEmotionCache";
-
-const clientSideEmotionCache = createEmotionCache();
+import { MuiProvider } from "../theme/MuiProvider";
 
 type MyAppProps = {
   emotionCache?: EmotionCache;
 } & AppProps;
 
-const MyApp: VFC<MyAppProps> = ({
-  Component,
-  pageProps,
-  emotionCache = clientSideEmotionCache,
-}) => {
+const MyApp: VFC<MyAppProps> = ({ Component, pageProps, emotionCache }) => {
   return (
-    <CacheProvider value={emotionCache}>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <Component {...pageProps} />
-      </ThemeProvider>
-    </CacheProvider>
+    <MuiProvider emotionCache={emotionCache} theme={theme}>
+      <Component {...pageProps} />
+    </MuiProvider>
   );
 };
 

apps/dev/src/theme/MuiProvider.tsx

@@ -0,0 +1,22 @@
+import { CacheProvider, EmotionCache } from "@emotion/react";
+import { ThemeProvider } from "@mui/material";
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProviderProps } from "@mui/material/styles/ThemeProvider";
+import { FC } from "react";
+import { createEmotionCache } from "../util/createEmotionCache";
+
+const clientSideEmotionCache = createEmotionCache();
+
+export const MuiProvider: FC<{
+  emotionCache?: EmotionCache;
+  theme: ThemeProviderProps["theme"];
+}> = ({ children, theme, emotionCache = clientSideEmotionCache }) => {
+  return (
+    <CacheProvider value={emotionCache}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </CacheProvider>
+  );
+};