From 0679dee1e2cdfab601134dcc4bead6f3398b9b45 Mon Sep 17 00:00:00 2001 From: Philzen Date: Thu, 5 Dec 2024 10:55:19 +0100 Subject: [PATCH 01/10] Improve typing, add doc links & remove redundant JSDoc - Migrate v6-style export to Storybook 7 default export (as per https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#default-export-in-previewjs) - Remove redundant JS-style type import - add typing for preview config object - add doc link for globalTypes config --- .../lib/templates/storybook.preview.tsx.template | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/cli/src/lib/templates/storybook.preview.tsx.template b/packages/cli/src/lib/templates/storybook.preview.tsx.template index 042497ff6196..64178bbf8f37 100644 --- a/packages/cli/src/lib/templates/storybook.preview.tsx.template +++ b/packages/cli/src/lib/templates/storybook.preview.tsx.template @@ -1,18 +1,19 @@ import * as React from 'react' import type { GlobalTypes } from '@storybook/csf' -import type { StoryFn, StoryContext } from '@storybook/react' +import type { Preview, StoryFn, StoryContext } from '@storybook/react' -/** @type { import("@storybook/csf").GlobalTypes } */ +/** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#global-types-and-the-toolbar-annotation | Global types and the toolbar annotation} */ export const globalTypes: GlobalTypes = {} /** * An example, no-op storybook decorator. Use a function like this to create decorators. - * @param { import("@storybook/react").StoryFn} StoryFn - * @param { import("@storybook/react").StoryContext} context -*/ + * @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator} + */ const _exampleDecorator = (StoryFn: StoryFn, _context: StoryContext) => { return } -export const decorators = [] +const preview: Preview = {} + +export default preview From 06b68938dbb7dd15555202e121d41bfa83feff92 Mon Sep 17 00:00:00 2001 From: Philzen Date: Thu, 5 Dec 2024 14:03:09 +0100 Subject: [PATCH 02/10] Shorten exampleDecorator and add empty decorators array to default export --- .../src/lib/templates/storybook.preview.tsx.template | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/cli/src/lib/templates/storybook.preview.tsx.template b/packages/cli/src/lib/templates/storybook.preview.tsx.template index 64178bbf8f37..9ee2bb89ab3f 100644 --- a/packages/cli/src/lib/templates/storybook.preview.tsx.template +++ b/packages/cli/src/lib/templates/storybook.preview.tsx.template @@ -10,10 +10,12 @@ export const globalTypes: GlobalTypes = {} * An example, no-op storybook decorator. Use a function like this to create decorators. * @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator} */ -const _exampleDecorator = (StoryFn: StoryFn, _context: StoryContext) => { - return -} +const _exampleDecorator = (StoryFn: StoryFn, _context: StoryContext) => ( + +) -const preview: Preview = {} +const preview: Preview = { + decorators: [], +} export default preview From e0e5c68eed805f842a0cc4aca29d92d580925afd Mon Sep 17 00:00:00 2001 From: Philzen Date: Thu, 5 Dec 2024 14:42:20 +0100 Subject: [PATCH 03/10] Improve storybook.preview.tsx.template and migrate to Storybook 7 style - Migrate v6-style export to Storybook 7 default export (as per https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#default-export-in-previewjs) - Remove redundant JS-style type import - add typing for preview config object - add doc link for globalTypes config --- .../i18n/templates/storybook.preview.tsx.template | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/cli/src/commands/setup/i18n/templates/storybook.preview.tsx.template b/packages/cli/src/commands/setup/i18n/templates/storybook.preview.tsx.template index a481f82c015a..acda683181ed 100644 --- a/packages/cli/src/commands/setup/i18n/templates/storybook.preview.tsx.template +++ b/packages/cli/src/commands/setup/i18n/templates/storybook.preview.tsx.template @@ -1,10 +1,10 @@ import * as React from 'react' import { I18nextProvider } from 'react-i18next' import type { GlobalTypes } from '@storybook/csf' -import type { StoryFn, StoryContext } from '@storybook/react' +import type { Preview, StoryFn, StoryContext } from '@storybook/react' import i18n from 'web/src/i18n' -/** @type { import("@storybook/csf").GlobalTypes } */ +/** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#global-types-and-the-toolbar-annotation | Global types and the toolbar annotation} */ export const globalTypes: GlobalTypes = { locale: { name: 'Locale', @@ -25,8 +25,8 @@ export const globalTypes: GlobalTypes = { * https://github.com/storybookjs/addon-kit/blob/main/src/withGlobals.ts * Unfortunately that will make eslint complain, so we have to disable it when * using a hook below - * @param { import("@storybook/react").StoryFn} StoryFn - * @param { import("@storybook/react").StoryContext} context + * + * @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator} */ const withI18n = (StoryFn: StoryFn, context: StoryContext) => { // eslint-disable-next-line react-hooks/rules-of-hooks @@ -41,4 +41,9 @@ const withI18n = (StoryFn: StoryFn, context: StoryContext) => { ) } -export const decorators = [withI18n] +const preview: Preview = +{ + decorators: [withI18n] +} + +export default preview From 66b2e84a214e3ff87073bffb56c55fe7f004dc92 Mon Sep 17 00:00:00 2001 From: Philzen Date: Thu, 5 Dec 2024 14:50:06 +0100 Subject: [PATCH 04/10] Improve mantine.storybook.preview.tsx.template and migrate to Storybook 7 style - Migrate v6-style export to Storybook 7 default export (as per https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#default-export-in-previewjs) - Remove redundant JS-style type import - add typing for preview config object - add doc link for decorator config --- .../templates/mantine.storybook.preview.tsx.template | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/cli/src/commands/setup/ui/templates/mantine.storybook.preview.tsx.template b/packages/cli/src/commands/setup/ui/templates/mantine.storybook.preview.tsx.template index 08c50d47856e..fdb787976f95 100644 --- a/packages/cli/src/commands/setup/ui/templates/mantine.storybook.preview.tsx.template +++ b/packages/cli/src/commands/setup/ui/templates/mantine.storybook.preview.tsx.template @@ -1,14 +1,12 @@ import * as React from 'react' import { MantineProvider } from '@mantine/core' -import type { StoryFn } from '@storybook/react' +import type { Preview, StoryFn } from '@storybook/react' import theme from 'config/mantine.config' import '@mantine/core/styles.css' -/** - * @param { import("@storybook/react").StoryFn} StoryFn - */ +/** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator} */ const withMantine = (StoryFn: StoryFn) => { return ( @@ -17,4 +15,6 @@ const withMantine = (StoryFn: StoryFn) => { ) } -export const decorators = [withMantine] +const preview: Preview = { + decorators: [withMantine] +} From 718c84f736908f7272f186aeda655eb0108bbe4f Mon Sep 17 00:00:00 2001 From: Philzen Date: Thu, 5 Dec 2024 14:53:54 +0100 Subject: [PATCH 05/10] Improve chakra.storybook.preview.tsx.template and migrate to Storybook 7 style - Migrate v6-style export to Storybook 7 default export (as per https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#default-export-in-previewjs) - Remove redundant JS-style type import - add typing for preview config object - add doc link for decorators config - shorten decorators component --- .../chakra.storybook.preview.tsx.template | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/cli/src/commands/setup/ui/templates/chakra.storybook.preview.tsx.template b/packages/cli/src/commands/setup/ui/templates/chakra.storybook.preview.tsx.template index 627ffd2f02fc..16d7757db076 100644 --- a/packages/cli/src/commands/setup/ui/templates/chakra.storybook.preview.tsx.template +++ b/packages/cli/src/commands/setup/ui/templates/chakra.storybook.preview.tsx.template @@ -1,20 +1,20 @@ import * as React from 'react' import { ChakraProvider, extendTheme } from '@chakra-ui/react' -import type { StoryFn } from '@storybook/react' +import type { Preview, StoryFn } from '@storybook/react' import theme from 'config/chakra.config' const extendedTheme = extendTheme(theme) -/** - * @param { import("@storybook/react").StoryFn} StoryFn - */ -const withChakra = (StoryFn: StoryFn) => { - return ( - - - - ) +/** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator} */ +const withChakra = (Story: StoryFn) => ( + + + +) + +const preview: Preview = { + decorators: [withChakra] } -export const decorators = [withChakra] +export default preview From 108a1b09f009591f0f753547a17319fd0ba1ebbb Mon Sep 17 00:00:00 2001 From: Philzen Date: Thu, 5 Dec 2024 14:55:28 +0100 Subject: [PATCH 06/10] Shorten withMantine decorator component declartion with implicit return --- .../templates/mantine.storybook.preview.tsx.template | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/cli/src/commands/setup/ui/templates/mantine.storybook.preview.tsx.template b/packages/cli/src/commands/setup/ui/templates/mantine.storybook.preview.tsx.template index fdb787976f95..b42dc9816253 100644 --- a/packages/cli/src/commands/setup/ui/templates/mantine.storybook.preview.tsx.template +++ b/packages/cli/src/commands/setup/ui/templates/mantine.storybook.preview.tsx.template @@ -7,13 +7,11 @@ import theme from 'config/mantine.config' import '@mantine/core/styles.css' /** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator} */ -const withMantine = (StoryFn: StoryFn) => { - return ( - - - - ) -} +const withMantine = (Story: StoryFn) => ( + + + +) const preview: Preview = { decorators: [withMantine] From dfaf9009c3a2d1599bf3da31e8750575f6aa4f9e Mon Sep 17 00:00:00 2001 From: Philzen Date: Thu, 5 Dec 2024 15:02:47 +0100 Subject: [PATCH 07/10] Fix formatting and remove redundant React prefix --- .../setup/i18n/templates/storybook.preview.tsx.template | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/cli/src/commands/setup/i18n/templates/storybook.preview.tsx.template b/packages/cli/src/commands/setup/i18n/templates/storybook.preview.tsx.template index acda683181ed..e8fff16489e1 100644 --- a/packages/cli/src/commands/setup/i18n/templates/storybook.preview.tsx.template +++ b/packages/cli/src/commands/setup/i18n/templates/storybook.preview.tsx.template @@ -30,7 +30,7 @@ export const globalTypes: GlobalTypes = { */ const withI18n = (StoryFn: StoryFn, context: StoryContext) => { // eslint-disable-next-line react-hooks/rules-of-hooks - React.useEffect(() => { + useEffect(() => { i18n.changeLanguage(context.globals.locale) }, [context.globals.locale]) @@ -41,8 +41,7 @@ const withI18n = (StoryFn: StoryFn, context: StoryContext) => { ) } -const preview: Preview = -{ +const preview: Preview = { decorators: [withI18n] } From f3db4370072d9b103c38e1acce0537c550bb3fcd Mon Sep 17 00:00:00 2001 From: Philzen Date: Fri, 6 Dec 2024 18:46:06 +0100 Subject: [PATCH 08/10] Ensure generated file adheres to eslint config Was otherwise violating (import/order) rule: - `react-i18next` import should occur after type import of `@storybook/react` - There should be at least one empty line between import groups --- .../setup/i18n/templates/storybook.preview.tsx.template | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/cli/src/commands/setup/i18n/templates/storybook.preview.tsx.template b/packages/cli/src/commands/setup/i18n/templates/storybook.preview.tsx.template index e8fff16489e1..8c1f6f1ea6a9 100644 --- a/packages/cli/src/commands/setup/i18n/templates/storybook.preview.tsx.template +++ b/packages/cli/src/commands/setup/i18n/templates/storybook.preview.tsx.template @@ -1,7 +1,8 @@ import * as React from 'react' -import { I18nextProvider } from 'react-i18next' + import type { GlobalTypes } from '@storybook/csf' -import type { Preview, StoryFn, StoryContext } from '@storybook/react' +import type { Preview, StoryContext, StoryFn } from '@storybook/react' +import { I18nextProvider } from 'react-i18next' import i18n from 'web/src/i18n' /** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#global-types-and-the-toolbar-annotation | Global types and the toolbar annotation} */ From 4f9973eadc0354b34b036b1f069b586a8607e018 Mon Sep 17 00:00:00 2001 From: Philzen Date: Fri, 6 Dec 2024 18:48:47 +0100 Subject: [PATCH 09/10] Ensure imports are sorted in generated file --- packages/cli/src/lib/templates/storybook.preview.tsx.template | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cli/src/lib/templates/storybook.preview.tsx.template b/packages/cli/src/lib/templates/storybook.preview.tsx.template index 9ee2bb89ab3f..7c747474e644 100644 --- a/packages/cli/src/lib/templates/storybook.preview.tsx.template +++ b/packages/cli/src/lib/templates/storybook.preview.tsx.template @@ -1,7 +1,7 @@ import * as React from 'react' import type { GlobalTypes } from '@storybook/csf' -import type { Preview, StoryFn, StoryContext } from '@storybook/react' +import type { Preview, StoryContext, StoryFn } from '@storybook/react' /** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#global-types-and-the-toolbar-annotation | Global types and the toolbar annotation} */ export const globalTypes: GlobalTypes = {} From cb45574f2cd3fb19a197e18038005583975ccb7d Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Sun, 8 Dec 2024 11:28:37 +0100 Subject: [PATCH 10/10] changeset --- .changesets/11745.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 .changesets/11745.md diff --git a/.changesets/11745.md b/.changesets/11745.md new file mode 100644 index 000000000000..017d81bf705f --- /dev/null +++ b/.changesets/11745.md @@ -0,0 +1,4 @@ +- [Storybook] Improve typing, add doc links & remove redundant JSDoc in preview.tsx (#11745) by @Philzen + +Better types for storybook preview config +Better IntelliSense hints for storybook