@@ -4,15 +4,16 @@ import CssBaseline from "@mui/material/CssBaseline";
44import {
55ThemeProvider as MuiThemeProvider ,
66StyledEngineProvider ,
7- // biome-ignore lint/style/noRestrictedImports: we extend the MUI theme
87} from "@mui/material/styles" ;
98import { DecoratorHelpers } from "@storybook/addon-themes" ;
109import isChromatic from "chromatic/isChromatic" ;
1110import { StrictMode } from "react" ;
12- import { HelmetProvider } from "react-helmet-async" ;
11+ import { Helmet , HelmetProvider } from "react-helmet-async" ;
1312import { QueryClient , QueryClientProvider } from "react-query" ;
1413import { withRouter } from "storybook-addon-remix-react-router" ;
1514import "theme/globalFonts" ;
15+ //@ts -expect-error -- This is throwing an error because of the ?url at then end of the import. It is a Vite feature to import the URL of an asset.
16+ import interWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url" ;
1617import type { Decorator , Loader , Parameters } from "@storybook/react-vite" ;
1718import themes from "../src/theme" ;
1819
@@ -65,6 +66,15 @@ export const parameters: Parameters = {
6566const withHelmet :Decorator = ( Story ) => {
6667return (
6768< HelmetProvider >
69+ < Helmet >
70+ < link
71+ rel = "preload"
72+ as = "font"
73+ type = "font/woff2"
74+ href = { interWoff2 }
75+ crossOrigin = "anonymous"
76+ />
77+ </ Helmet >
6878< Story />
6979</ HelmetProvider >
7080) ;
@@ -95,8 +105,8 @@ const withQuery: Decorator = (Story, { parameters }) => {
95105
96106const withTheme :Decorator = ( Story , context ) => {
97107const selectedTheme = DecoratorHelpers . pluckThemeFromContext ( context ) ;
98- const { themeOverride } = DecoratorHelpers . useThemeParameters ( ) ;
99- const selected = themeOverride || selectedTheme || "dark" ;
108+ const themeParameters = DecoratorHelpers . useThemeParameters ( ) ;
109+ const selected = themeParameters ?. themeOverride || selectedTheme || "dark" ;
100110
101111// Ensure the correct theme is applied to Tailwind CSS classes by adding the
102112// theme to the HTML class list. This approach is necessary because Tailwind