From dfc353b1fd924adfa5012c22a3542b787f473686 Mon Sep 17 00:00:00 2001
From: Bryan <bryan@coder.com>
Date: Tue, 15 Mar 2022 11:29:32 -0700
Subject: [PATCH] fix: Fix storybook blockers (#443)

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">
---
 site/.storybook/preview.js                      | 14 ++++++++++++++
 site/components/Workspace/Workspace.stories.tsx |  4 +++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/site/.storybook/preview.js b/site/.storybook/preview.js
index 9572bef122..eba3d0d74d 100644
--- 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
index 4e03c3b456..db3ab80384 100644
--- 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,
 }