chore: fix storybook fonts

greyscaled · greyscaled · commit c590edb69570 · 2022-04-13T01:28:32.000Z
Summary: Configures storybook with MUI themes as according to their documentation. We were previously not aligned with their example. See: https://storybook.js.org/addons/@react-theming/storybook-addon Details: - declare the themeing add-on in .storybook/main.js addons - configure a providerFn for MUI with CssBaseline. We were previously missing the CssBaseline implementation, causing the inconsistency. Impact: Resolves inconsistency between Storybook and production. I had tested the Tabpanel in production vs Storybook. In storybook, the font had fallen back to Times New Roman, whereas in production it had fallen back to Inter. This was because of CssBaseline being configured as a child of ThemeProvider. Resolves: #914
diff --git a/site/.storybook/main.js b/site/.storybook/main.js
@@ -14,7 +14,7 @@ module.exports = {
   // addons are official and community plugins to extend Storybook.
   //
   // SEE: https://storybook.js.org/addons
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@react-theming/storybook-addon"],
 
   // Storybook uses babel under the hood, while we currently use ts-loader.
   // Sometimes, you may encounter an error in a Storybook that contains syntax
diff --git a/site/.storybook/preview.js b/site/.storybook/preview.js
@@ -1,3 +1,5 @@
+import { CssBaseline } from "@material-ui/core"
+import { createMuiTheme } from "@material-ui/core/styles"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
 import { withThemes } from "@react-theming/storybook-addon"
 import { createMemoryHistory } from "history"
@@ -6,7 +8,17 @@ import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
 import { dark, light } from "../src/theme"
 import "../src/theme/global-fonts"
 
-addDecorator(withThemes(ThemeProvider, [light, dark]))
+const providerFn = ({ theme, children }) => {
+  const muiTheme = createMuiTheme(theme)
+  return (
+    <ThemeProvider theme={muiTheme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  )
+}
+
+addDecorator(withThemes(null, [light, dark], { providerFn }))
 
 const history = createMemoryHistory()
 
