From c590edb69570d1e2943c06152f90cc0bfe20c801 Mon Sep 17 00:00:00 2001
From: G r e y <grey@coder.com>
Date: Wed, 13 Apr 2022 01:28:32 +0000
Subject: [PATCH 1/2] chore: fix storybook fonts

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
---
 site/.storybook/main.js    |  2 +-
 site/.storybook/preview.js | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/site/.storybook/main.js b/site/.storybook/main.js
index de93a2695ebba..f75ae06547f0a 100644
--- 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
index 7eec57aa517cf..cdf4f599a1b56 100644
--- 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()
 

From ca556a863fc26b17a5018cd6d6f3eef98aedbb01 Mon Sep 17 00:00:00 2001
From: G r e y <grey@coder.com>
Date: Wed, 13 Apr 2022 02:16:17 +0000
Subject: [PATCH 2/2] fixup! chore: fix storybook fonts

---
 site/.storybook/main.js    |  2 +-
 site/.storybook/preview.js | 18 +++++++-----------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/site/.storybook/main.js b/site/.storybook/main.js
index f75ae06547f0a..de93a2695ebba 100644
--- 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", "@react-theming/storybook-addon"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
 
   // 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
index cdf4f599a1b56..e35b6903f9fd0 100644
--- a/site/.storybook/preview.js
+++ b/site/.storybook/preview.js
@@ -1,5 +1,4 @@
-import { CssBaseline } from "@material-ui/core"
-import { createMuiTheme } from "@material-ui/core/styles"
+import CssBaseline from "@material-ui/core/CssBaseline"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
 import { withThemes } from "@react-theming/storybook-addon"
 import { createMemoryHistory } from "history"
@@ -8,15 +7,12 @@ import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
 import { dark, light } from "../src/theme"
 import "../src/theme/global-fonts"
 
-const providerFn = ({ theme, children }) => {
-  const muiTheme = createMuiTheme(theme)
-  return (
-    <ThemeProvider theme={muiTheme}>
-      <CssBaseline />
-      {children}
-    </ThemeProvider>
-  )
-}
+const providerFn = ({ children, theme }) => (
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    {children}
+  </ThemeProvider>
+)
 
 addDecorator(withThemes(null, [light, dark], { providerFn }))