Skip to content

Commit

Permalink
fix: Fix storybook blockers (#443)
Browse files Browse the repository at this point in the history
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">
  • Loading branch information
bryphe-coder committed Mar 15, 2022
1 parent 97399f8 commit dfc353b
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 1 deletion.
14 changes: 14 additions & 0 deletions site/.storybook/preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -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].*",
Expand Down
4 changes: 3 additions & 1 deletion site/components/Workspace/Workspace.stories.tsx
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -13,5 +13,7 @@ const Template: Story<WorkspaceProps> = (args) => <Workspace {...args} />

export const Example = Template.bind({})
Example.args = {
organization: MockOrganization,
project: MockProject,
workspace: MockWorkspace,
}

0 comments on commit dfc353b

Please sign in to comment.