Skip to content

🪟 🔧 Upgrade to Storybook 7 #22056

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jan 31, 2023
Merged

🪟 🔧 Upgrade to Storybook 7 #22056

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
674c8e8
WIP Upgrade to Storybook 7
Jan 28, 2023
bada25d
Fix outstanding issues
Jan 30, 2023
6ab502b
Empty NL
Jan 30, 2023
64dcc08
Increase node memory limit
Jan 30, 2023
a757988
Merge branch 'master' into tim/storybook7
Jan 30, 2023
48a460f
Move heap size flag to gradle
Jan 30, 2023
f7cd992
Remove depth from checkout
Jan 31, 2023
7836952
Fix chromatic action
Jan 31, 2023
6915ffa
Merge branch 'master' into tim/storybook7
Jan 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 0 additions & 21 deletions airbyte-webapp/.storybook/main.js
View file
Open in desktop

This file was deleted.

12 changes: 12 additions & 0 deletions airbyte-webapp/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
framework: "@storybook/react-vite",
stories: ["../src/**/*.stories.@(ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
],
};

export default config;
9 changes: 3 additions & 6 deletions airbyte-webapp/.storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
import { addDecorator } from "@storybook/react";

import { withProviders } from "./withProvider";

import "!style-loader!css-loader!sass-loader!../public/index.css";
import "../public/index.css";
import "../src/scss/global.scss";
import "../src/globals";

addDecorator(withProviders);
import "../src/dayjs-setup";

export const parameters = {};
export const decorators = [withProviders];
13 changes: 8 additions & 5 deletions airbyte-webapp/.storybook/withProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ import { QueryClientProvider, QueryClient } from "react-query";
import { theme } from "../src/theme";
import messages from "../src/locales/en.json";
import { FeatureService } from "../src/hooks/services/Feature";
import { ConfigServiceProvider, defaultConfig } from "../src/config";
import { ConfigServiceProvider, config } from "../src/config";
import { DocumentationPanelProvider } from "../src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext";
import { ServicesProvider } from "../src/core/servicesProvider";
import { analyticsServiceContext } from "../src/hooks/services/Analytics";
import { AppMonitoringServiceProvider } from "../src/hooks/services/AppMonitoringService";
import type { AnalyticsService } from "../src/core/analytics";

const analyticsContextMock: AnalyticsService = {
Expand All @@ -38,11 +39,13 @@ export const withProviders = (getStory) => (
<MemoryRouter>
<IntlProvider messages={messages} locale={"en"}>
<ThemeProvider theme={theme}>
<ConfigServiceProvider defaultConfig={defaultConfig} providers={[]}>
<ConfigServiceProvider config={config}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ 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).

<DocumentationPanelProvider>
<FeatureService features={[]}>
{getStory()}
</FeatureService>
<AppMonitoringServiceProvider>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ This broke the ConnectorForm which I think didn't work on master anymore.

<FeatureService features={[]}>
{getStory()}
</FeatureService>
</AppMonitoringServiceProvider>
</DocumentationPanelProvider>
</ConfigServiceProvider>
</ThemeProvider>
Expand Down
Loading