diff --git a/apps/web/.storybook/preview.js b/apps/web/.storybook/preview.js index 1072facb857..4f07da45697 100644 --- a/apps/web/.storybook/preview.js +++ b/apps/web/.storybook/preview.js @@ -1,3 +1,4 @@ +import React from "react"; import { FeatureFlagDecorator, HelmetDecorator, @@ -5,11 +6,11 @@ import { ReducedMotionDecorator, RouterDecorator, ThemeDecorator, - VIEWPORTS + VIEWPORTS, } from "@gc-digital-talent/storybook-helpers"; import { richTextElements as defaultRichTextElements } from "@gc-digital-talent/i18n"; -import frCommonCompiled from "@gc-digital-talent/i18n/frCompiled.json"; +import frCommonCompiled from "@gc-digital-talent/i18n/frCompiled.json"; import frCompiled from "../src/lang/frCompiled.json"; import "../src/assets/css/hydrogen.css"; @@ -23,12 +24,18 @@ const messages = { }, }; -const getMessages = (locale) => messages[locale]; +export const globals = { + locale: "en", + locales: { + en: "English", + fr: "Français", + }, +}; export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, backgrounds: { - disable: true + disable: true, }, controls: { matchers: { @@ -36,10 +43,10 @@ export const parameters = { date: /Date$/, }, }, - intl: { - locales: ["en", "fr"], + reactIntl: { defaultLocale: "en", - getMessages, + locales: ["en", "fr"], + messages, defaultRichTextElements, }, viewport: { diff --git a/packages/forms/src/components/DateInput/DateInput.stories.tsx b/packages/forms/src/components/DateInput/DateInput.stories.tsx index 80abd1ca5fe..7f1b6ee9c1d 100644 --- a/packages/forms/src/components/DateInput/DateInput.stories.tsx +++ b/packages/forms/src/components/DateInput/DateInput.stories.tsx @@ -288,3 +288,6 @@ AsyncDefaultValue.args = { }); }, }; +AsyncDefaultValue.parameters = { + chromatic: { delay: 1500 }, +}; diff --git a/packages/storybook-helpers/decorators/ThemeDecorator.tsx b/packages/storybook-helpers/decorators/ThemeDecorator.tsx index 96064ca8bb3..2ffe0af886d 100644 --- a/packages/storybook-helpers/decorators/ThemeDecorator.tsx +++ b/packages/storybook-helpers/decorators/ThemeDecorator.tsx @@ -33,15 +33,13 @@ type ThemeSetterProps = { theme: Theme; }; const ThemeSetter = ({ theme }: ThemeSetterProps) => { - const { setTheme } = useTheme(); - - React.useEffect(() => { + const { setTheme, key, mode } = useTheme(); + if (theme.key !== key || theme.mode !== mode) { setTheme({ key: theme.key, mode: theme.mode, }); - }, [setTheme, theme.key, theme.mode]); - + } return null; }; diff --git a/packages/storybook-helpers/main.ts b/packages/storybook-helpers/main.ts index 7addce2d4af..093ee299bed 100644 --- a/packages/storybook-helpers/main.ts +++ b/packages/storybook-helpers/main.ts @@ -59,7 +59,7 @@ const main: StorybookConfig = { "@storybook/addon-links", "@storybook/addon-themes", "@storybook/addon-viewport", - "storybook-addon-intl", + "storybook-react-intl", ], framework: { name: "@storybook/react-webpack5", diff --git a/packages/storybook-helpers/package.json b/packages/storybook-helpers/package.json index 7c2ab499051..006d0d2de77 100644 --- a/packages/storybook-helpers/package.json +++ b/packages/storybook-helpers/package.json @@ -38,7 +38,7 @@ "hydrogen-webpack-plugin": "workspace:*", "react": "^18.2.0", "storybook": "^7.6.17", - "storybook-addon-intl": "^3.2.0", + "storybook-react-intl": "~2.0.10", "tsconfig": "workspace:*", "tsconfig-paths-webpack-plugin": "^4.1.0" } diff --git a/packages/ui/src/components/Pending/Pending.stories.tsx b/packages/ui/src/components/Pending/Pending.stories.tsx index 1b837286922..b45066fc2ec 100644 --- a/packages/ui/src/components/Pending/Pending.stories.tsx +++ b/packages/ui/src/components/Pending/Pending.stories.tsx @@ -36,6 +36,9 @@ export default { type: { name: "string", required: false }, }, }, + parameters: { + chromatic: { delay: 1500 }, + }, } as Meta; const TemplatePending: StoryFn = (args) => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ad40bad0e3a..43ad4eb2a3f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1089,9 +1089,9 @@ importers: storybook: specifier: ^7.6.17 version: 7.6.17 - storybook-addon-intl: - specifier: ^3.2.0 - version: 3.2.0(react-dom@18.2.0)(react-intl@6.6.2)(react@18.2.0) + storybook-react-intl: + specifier: ~2.0.10 + version: 2.0.10(@storybook/components@7.6.17)(@storybook/manager-api@7.6.17)(@storybook/preview-api@7.6.17)(@storybook/types@7.6.17)(react-dom@18.2.0)(react-intl@6.6.2)(react@18.2.0) tsconfig: specifier: workspace:* version: link:../tsconfig @@ -16118,17 +16118,50 @@ packages: resolution: {integrity: sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==} dev: true - /storybook-addon-intl@3.2.0(react-dom@18.2.0)(react-intl@6.6.2)(react@18.2.0): - resolution: {integrity: sha512-EdfKjR6rnmzP5GKYjoAB+tluNc/ffpF1qmvv8kIgF4UvyxOVHS1yx7WfiqLsx0yK1BftZ1Lp66d/plEjpOUpIA==} + /storybook-i18n@2.0.13(@storybook/components@7.6.17)(@storybook/manager-api@7.6.17)(@storybook/preview-api@7.6.17)(@storybook/types@7.6.17)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-p0VPL5QiHdeS3W9BvV7UnuTKw7Mj1HWLW67LK0EOoh5fpSQIchu7byfrUUe1RbCF1gT0gOOhdNuTSXMoVVoTDw==} peerDependencies: + '@storybook/components': ^7.0.0 + '@storybook/manager-api': ^7.0.0 + '@storybook/preview-api': ^7.0.0 + '@storybook/types': ^7.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-intl: ^6.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + dependencies: + '@storybook/components': 7.6.17(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.6.17(react-dom@18.2.0)(react@18.2.0) + '@storybook/preview-api': 7.6.17 + '@storybook/types': 7.6.17 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: true + + /storybook-react-intl@2.0.10(@storybook/components@7.6.17)(@storybook/manager-api@7.6.17)(@storybook/preview-api@7.6.17)(@storybook/types@7.6.17)(react-dom@18.2.0)(react-intl@6.6.2)(react@18.2.0): + resolution: {integrity: sha512-FtZnZaRoSmrq9Ma7ZAK3EkZUlqmDlSZj1CAyQVo0jRKKYOi2LcucnW8XcaTglN3VBv3n0p/ZiU6WrW7AvB+UZQ==} + peerDependencies: + react: '*' + react-dom: '*' + react-intl: ^5.24.0 || ^6.0.0 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true dependencies: - '@storybook/theming': 7.6.17(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) react-intl: 6.6.2(react@18.2.0)(typescript@5.4.4) + storybook-i18n: 2.0.13(@storybook/components@7.6.17)(@storybook/manager-api@7.6.17)(@storybook/preview-api@7.6.17)(@storybook/types@7.6.17)(react-dom@18.2.0)(react@18.2.0) transitivePeerDependencies: - - react-dom + - '@storybook/components' + - '@storybook/manager-api' + - '@storybook/preview-api' + - '@storybook/types' dev: true /storybook@7.6.17: