🪟 🔧 Upgrade to Storybook 7 #22056
🪟 🔧 Upgrade to Storybook 7 #22056
Conversation
| @@ -38,11 +39,13 @@ export const withProviders = (getStory) => ( | |||
| <MemoryRouter> | |||
| <IntlProvider messages={messages} locale={"en"}> | |||
| <ThemeProvider theme={theme}> | |||
| <ConfigServiceProvider defaultConfig={defaultConfig} providers={[]}> | |||
| <ConfigServiceProvider config={config}> | |||
There was a problem hiding this comment.
ℹ️ This is kinda "funny" that this worked beforehand. So it seems that Storybook never did typecheck those files, until Storybook 7 (or use using a main.ts instead of main.js).
| @@ -154,7 +152,7 @@ | |||
| "orval": "^6.11.0-alpha.10", | |||
| "prettier": "^2.6.2", | |||
| "react-select-event": "^5.5.0", | |||
| "storybook-addon-mock": "^2.4.1", | |||
There was a problem hiding this comment.
ℹ️ This isn't compatible with Storybook 7 anymore. I've checked the only place it was used ConnectorForm and it seems this endpoint is no longer called during storybook (I assume this was resolved due to some refactoring we did in this form), so we no longer need to mock any data in storybook.
| @@ -7,7 +7,7 @@ import { loadDatadog } from "utils/datadog"; | |||
| import { loadOsano } from "utils/dataPrivacy"; | |||
| import { loadSentry } from "utils/sentry"; | |||
|
|
|||
| import "./globals"; | |||
| import "./dayjs-setup"; | |||
There was a problem hiding this comment.
ℹ️ This is required, due to some missmatch in require paths, we can't have this file named be globals in src directly 🤷 No one knows exactly why the pathes are missmatched, but this is the easiest workaround for now.
| } as ComponentMeta<typeof ConnectorForm>; | ||
|
|
||
| const Template: ComponentStory<typeof ConnectorForm> = (args) => { | ||
| const Template: ComponentStory<typeof ConnectorForm> = (args: React.ComponentProps<typeof ConnectorForm>) => { |
There was a problem hiding this comment.
ℹ️ Given those files are typechecked now, this is now needed.
| <FeatureService features={[]}> | ||
| {getStory()} | ||
| </FeatureService> | ||
| <AppMonitoringServiceProvider> |
There was a problem hiding this comment.
ℹ️ This broke the ConnectorForm which I think didn't work on master anymore.
| @@ -71,6 +71,10 @@ task buildStorybook(type: NpmTask) { | |||
| inputs.dir 'src' | |||
|
|
|||
| outputs.dir 'build/storybook' | |||
|
|
|||
| environment = [ | |||
| 'NODE_OPTIONS': '--max_old_space_size=4096' | |||
There was a problem hiding this comment.
ℹ️ It seems storybooks compile process with Vite requires more memory. I saw CI failing with an heap out of memory error on this, so giving it more space here.
Airbyte Code Coverage
|
What
This upgraded Storybook to the new Storybook 7 Beta. Since we're currently blocked on the switch to
pnpmon Storybook, I already updated now during the Beta phase. This also now makes sure to use Vite for building storybook instead of webpack.Please regard the inline comments for additional details.