chore: update storybook config to use TS (#19343)

BrunoQuaresma · web-flow · commit 1d1a16ea0178 · 2025-08-14T17:05:16.000-06:00
diff --git a/site/.storybook/preview.tsx b/site/.storybook/preview.tsx
@@ -1,21 +1,3 @@
-// @ts-check
-/**
- * @file Defines the main configuration file for all of our Storybook tests.
- * This file must be a JSX/JS file, but we can at least add some type safety via
- * the ts-check directive.
- * @see {@link https://storybook.js.org/docs/configure#configure-story-rendering}
- *
- * @typedef {import("react").ReactElement} ReactElement
- * @typedef {import("react").PropsWithChildren} PropsWithChildren
- * @typedef {import("react").FC<PropsWithChildren>} FC
- *
- * @typedef {import("@storybook/react-vite").StoryContext} StoryContext
- * @typedef {import("@storybook/react-vite").Preview} Preview
- *
- * @typedef {(Story: FC, Context: StoryContext) => React.JSX.Element} Decorator A
- * Storybook decorator function used to inject baseline data dependencies into
- * our React components during testing.
- */
 import "../src/index.css";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import CssBaseline from "@mui/material/CssBaseline";
@@ -31,15 +13,12 @@ import { HelmetProvider } from "react-helmet-async";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { withRouter } from "storybook-addon-remix-react-router";
 import "theme/globalFonts";
+import type { Decorator, Loader, Parameters } from "@storybook/react-vite";
 import themes from "../src/theme";
 
 DecoratorHelpers.initializeThemeState(Object.keys(themes), "dark");
 
-/** @type {readonly Decorator[]} */
-export const decorators = [withRouter, withQuery, withHelmet, withTheme];
-
-/** @type {Preview["parameters"]} */
-export const parameters = {
+export const parameters: Parameters = {
 	options: {
 		storySort: {
 			method: "alphabetical",
@@ -83,33 +62,15 @@ export const parameters = {
 	},
 };
 
-/**
- * There's a mismatch on the React Helmet return type that causes issues when
- * mounting the component in JS files only. Have to do type assertion, which is
- * especially ugly in JSDoc
- */
-const SafeHelmetProvider = /** @type {FC} */ (
-	/** @type {unknown} */ (HelmetProvider)
-);
-
-/** @type {Decorator} */
-function withHelmet(Story) {
+const withHelmet: Decorator = (Story) => {
 	return (
-		<SafeHelmetProvider>
+		<HelmetProvider>
 			<Story />
-		</SafeHelmetProvider>
+		</HelmetProvider>
 	);
-}
-
-/**
- * This JSX file isn't part of the main project, so it doesn't get to use the
- * ambient types defined in `storybook.d.ts` to provide extra type-safety.
- * Extracting main key to avoid typos.
- */
-const queryParametersKey = "queries";
+};
 
-/** @type {Decorator} */
-function withQuery(Story, { parameters }) {
+const withQuery: Decorator = (Story, { parameters }) => {
 	const queryClient = new QueryClient({
 		defaultOptions: {
 			queries: {
@@ -119,8 +80,8 @@ function withQuery(Story, { parameters }) {
 		},
 	});
 
-	if (parameters[queryParametersKey]) {
-		for (const query of parameters[queryParametersKey]) {
+	if (parameters.queries) {
+		for (const query of parameters.queries) {
 			queryClient.setQueryData(query.key, query.data);
 		}
 	}
@@ -130,10 +91,9 @@ function withQuery(Story, { parameters }) {
 			<Story />
 		</QueryClientProvider>
 	);
-}
+};
 
-/** @type {Decorator} */
-function withTheme(Story, context) {
+const withTheme: Decorator = (Story, context) => {
 	const selectedTheme = DecoratorHelpers.pluckThemeFromContext(context);
 	const { themeOverride } = DecoratorHelpers.useThemeParameters();
 	const selected = themeOverride || selectedTheme || "dark";
@@ -156,12 +116,20 @@ function withTheme(Story, context) {
 			</StyledEngineProvider>
 		</StrictMode>
 	);
-}
+};
+
+export const decorators: Decorator[] = [
+	withRouter,
+	withQuery,
+	withHelmet,
+	withTheme,
+];
 
 // Try to fix storybook rendering fonts inconsistently
 // https://www.chromatic.com/docs/font-loading/#solution-c-check-fonts-have-loaded-in-a-loader
 const fontLoader = async () => ({
 	fonts: await document.fonts.ready,
 });
 
-export const loaders = isChromatic() && document.fonts ? [fontLoader] : [];
+export const loaders: Loader[] =
+	isChromatic() && document.fonts ? [fontLoader] : [];
diff --git a/site/package.json b/site/package.json
@@ -126,13 +126,13 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.2.0",
-		"@chromatic-com/storybook": "4.0.1",
+		"@chromatic-com/storybook": "4.1.0",
 		"@octokit/types": "12.3.0",
 		"@playwright/test": "1.47.0",
-		"@storybook/addon-docs": "9.0.17",
-		"@storybook/addon-links": "9.0.17",
-		"@storybook/addon-themes": "9.0.17",
-		"@storybook/react-vite": "9.0.17",
+		"@storybook/addon-docs": "9.1.2",
+		"@storybook/addon-links": "9.1.2",
+		"@storybook/addon-themes": "9.1.2",
+		"@storybook/react-vite": "9.1.2",
 		"@swc/core": "1.3.38",
 		"@swc/jest": "0.2.37",
 		"@tailwindcss/typography": "0.5.16",
@@ -177,7 +177,7 @@
 		"rollup-plugin-visualizer": "5.14.0",
 		"rxjs": "7.8.1",
 		"ssh2": "1.16.0",
-		"storybook": "9.0.17",
+		"storybook": "9.1.2",
 		"storybook-addon-remix-react-router": "5.0.0",
 		"tailwindcss": "3.4.17",
 		"ts-proto": "1.164.0",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
