Skip to content

Commit 1d1a16e

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: update storybook config to use TS (#19343)
1 parent ac40c4b commit 1d1a16e

File tree

3 files changed

+138
-146
lines changed

3 files changed

+138
-146
lines changed

‎site/.storybook/preview.jsx renamed to ‎site/.storybook/preview.tsx

Lines changed: 21 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,3 @@
1-
// @ts-check
2-
/**
3-
* @file Defines the main configuration file for all of our Storybook tests.
4-
* This file must be a JSX/JS file, but we can at least add some type safety via
5-
* the ts-check directive.
6-
* @see {@link https://storybook.js.org/docs/configure#configure-story-rendering}
7-
*
8-
* @typedef {import("react").ReactElement} ReactElement
9-
* @typedef {import("react").PropsWithChildren} PropsWithChildren
10-
* @typedef {import("react").FC<PropsWithChildren>} FC
11-
*
12-
* @typedef {import("@storybook/react-vite").StoryContext} StoryContext
13-
* @typedef {import("@storybook/react-vite").Preview} Preview
14-
*
15-
* @typedef {(Story: FC, Context: StoryContext) => React.JSX.Element} Decorator A
16-
* Storybook decorator function used to inject baseline data dependencies into
17-
* our React components during testing.
18-
*/
191
import "../src/index.css";
202
import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
213
import CssBaseline from "@mui/material/CssBaseline";
@@ -31,15 +13,12 @@ import { HelmetProvider } from "react-helmet-async";
3113
import { QueryClient, QueryClientProvider } from "react-query";
3214
import { withRouter } from "storybook-addon-remix-react-router";
3315
import "theme/globalFonts";
16+
import type { Decorator, Loader, Parameters } from "@storybook/react-vite";
3417
import themes from "../src/theme";
3518

3619
DecoratorHelpers.initializeThemeState(Object.keys(themes), "dark");
3720

38-
/** @type {readonly Decorator[]} */
39-
export const decorators = [withRouter, withQuery, withHelmet, withTheme];
40-
41-
/** @type {Preview["parameters"]} */
42-
export const parameters = {
21+
export const parameters: Parameters = {
4322
options: {
4423
storySort: {
4524
method: "alphabetical",
@@ -83,33 +62,15 @@ export const parameters = {
8362
},
8463
};
8564

86-
/**
87-
* There's a mismatch on the React Helmet return type that causes issues when
88-
* mounting the component in JS files only. Have to do type assertion, which is
89-
* especially ugly in JSDoc
90-
*/
91-
const SafeHelmetProvider = /** @type {FC} */ (
92-
/** @type {unknown} */ (HelmetProvider)
93-
);
94-
95-
/** @type {Decorator} */
96-
function withHelmet(Story) {
65+
const withHelmet: Decorator = (Story) => {
9766
return (
98-
<SafeHelmetProvider>
67+
<HelmetProvider>
9968
<Story />
100-
</SafeHelmetProvider>
69+
</HelmetProvider>
10170
);
102-
}
103-
104-
/**
105-
* This JSX file isn't part of the main project, so it doesn't get to use the
106-
* ambient types defined in `storybook.d.ts` to provide extra type-safety.
107-
* Extracting main key to avoid typos.
108-
*/
109-
const queryParametersKey = "queries";
71+
};
11072

111-
/** @type {Decorator} */
112-
function withQuery(Story, { parameters }) {
73+
const withQuery: Decorator = (Story, { parameters }) => {
11374
const queryClient = new QueryClient({
11475
defaultOptions: {
11576
queries: {
@@ -119,8 +80,8 @@ function withQuery(Story, { parameters }) {
11980
},
12081
});
12182

122-
if (parameters[queryParametersKey]) {
123-
for (const query of parameters[queryParametersKey]) {
83+
if (parameters.queries) {
84+
for (const query of parameters.queries) {
12485
queryClient.setQueryData(query.key, query.data);
12586
}
12687
}
@@ -130,10 +91,9 @@ function withQuery(Story, { parameters }) {
13091
<Story />
13192
</QueryClientProvider>
13293
);
133-
}
94+
};
13495

135-
/** @type {Decorator} */
136-
function withTheme(Story, context) {
96+
const withTheme: Decorator = (Story, context) => {
13797
const selectedTheme = DecoratorHelpers.pluckThemeFromContext(context);
13898
const { themeOverride } = DecoratorHelpers.useThemeParameters();
13999
const selected = themeOverride || selectedTheme || "dark";
@@ -156,12 +116,20 @@ function withTheme(Story, context) {
156116
</StyledEngineProvider>
157117
</StrictMode>
158118
);
159-
}
119+
};
120+
121+
export const decorators: Decorator[] = [
122+
withRouter,
123+
withQuery,
124+
withHelmet,
125+
withTheme,
126+
];
160127

161128
// Try to fix storybook rendering fonts inconsistently
162129
// https://www.chromatic.com/docs/font-loading/#solution-c-check-fonts-have-loaded-in-a-loader
163130
const fontLoader = async () => ({
164131
fonts: await document.fonts.ready,
165132
});
166133

167-
export const loaders = isChromatic() && document.fonts ? [fontLoader] : [];
134+
export const loaders: Loader[] =
135+
isChromatic() && document.fonts ? [fontLoader] : [];

‎site/package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -126,13 +126,13 @@
126126
},
127127
"devDependencies": {
128128
"@biomejs/biome": "2.2.0",
129-
"@chromatic-com/storybook": "4.0.1",
129+
"@chromatic-com/storybook": "4.1.0",
130130
"@octokit/types": "12.3.0",
131131
"@playwright/test": "1.47.0",
132-
"@storybook/addon-docs": "9.0.17",
133-
"@storybook/addon-links": "9.0.17",
134-
"@storybook/addon-themes": "9.0.17",
135-
"@storybook/react-vite": "9.0.17",
132+
"@storybook/addon-docs": "9.1.2",
133+
"@storybook/addon-links": "9.1.2",
134+
"@storybook/addon-themes": "9.1.2",
135+
"@storybook/react-vite": "9.1.2",
136136
"@swc/core": "1.3.38",
137137
"@swc/jest": "0.2.37",
138138
"@tailwindcss/typography": "0.5.16",
@@ -177,7 +177,7 @@
177177
"rollup-plugin-visualizer": "5.14.0",
178178
"rxjs": "7.8.1",
179179
"ssh2": "1.16.0",
180-
"storybook": "9.0.17",
180+
"storybook": "9.1.2",
181181
"storybook-addon-remix-react-router": "5.0.0",
182182
"tailwindcss": "3.4.17",
183183
"ts-proto": "1.164.0",

0 commit comments

Comments
 (0)