fix: Fix storybook blockers (coder#443)

bryphe-coder · web-flow · commit dfc353b1fd92 · 2022-03-15T11:29:32.000-07:00
I was just testing `storybook` out on `main`, and saw some of the components had errors: <img width="1564" alt="image" src="https://user-images.githubusercontent.com/88213859/158444846-773420f5-261a-4853-abe1-66521ed19901.png"> There were two problems: - The `<Workspace />` component had new arguments, that don't seem to be validated by `yarn storybook:build` - The top-level `react-router-dom` is not available in storybook. After fixing these, all the storybook components work: <img width="1304" alt="image" src="https://user-images.githubusercontent.com/88213859/158445124-eec51500-967d-4e24-823f-c21f6ea63ba1.png">
diff --git a/site/.storybook/preview.js b/site/.storybook/preview.js
@@ -2,9 +2,23 @@ import ThemeProvider from "@material-ui/styles/ThemeProvider"
 import { withThemes } from "@react-theming/storybook-addon"
 import { light, dark } from "../theme"
 import { addDecorator } from "node_modules/@storybook/react"
+import { createMemoryHistory } from "history"
+import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
 
 addDecorator(withThemes(ThemeProvider, [light, dark]))
 
+const history = createMemoryHistory()
+
+const routerDecorator = (Story) => {
+  return (
+    <HistoryRouter history={history}>
+      <Story />
+    </HistoryRouter>
+  )
+}
+
+addDecorator(routerDecorator)
+
 export const parameters = {
   actions: {
     argTypesRegex: "^on[A-Z].*",
diff --git a/site/components/Workspace/Workspace.stories.tsx b/site/components/Workspace/Workspace.stories.tsx
@@ -1,7 +1,7 @@
 import { Story } from "@storybook/react"
 import React from "react"
 import { Workspace, WorkspaceProps } from "./Workspace"
-import { MockWorkspace } from "../../test_helpers"
+import { MockOrganization, MockProject, MockWorkspace } from "../../test_helpers"
 
 export default {
   title: "Workspace",
@@ -13,5 +13,7 @@ const Template: Story<WorkspaceProps> = (args) => <Workspace {...args} />
 
 export const Example = Template.bind({})
 Example.args = {
+  organization: MockOrganization,
+  project: MockProject,
   workspace: MockWorkspace,
 }
