Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Storybook] Improve typing, add doc links & remove redundant JSDoc in preview.tsx #11745

Merged
merged 10 commits into from
Dec 8, 2024
4 changes: 4 additions & 0 deletions .changesets/11745.md
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
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, StoryContext, StoryFn } from '@storybook/react'
import { I18nextProvider } from 'react-i18next'
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',
Expand All @@ -25,12 +26,12 @@ 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
React.useEffect(() => {
useEffect(() => {
i18n.changeLanguage(context.globals.locale)
}, [context.globals.locale])

Expand All @@ -41,4 +42,8 @@ const withI18n = (StoryFn: StoryFn, context: StoryContext) => {
)
}

export const decorators = [withI18n]
const preview: Preview = {
decorators: [withI18n]
}

export default preview
Original file line number Diff line number Diff line change
@@ -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 (
<ChakraProvider theme={extendedTheme}>
<StoryFn />
</ChakraProvider>
)
/** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator} */
const withChakra = (Story: StoryFn) => (
<ChakraProvider theme={extendedTheme}>
<Story />
</ChakraProvider>
)

const preview: Preview = {
decorators: [withChakra]
}

export const decorators = [withChakra]
export default preview
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
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
*/
const withMantine = (StoryFn: StoryFn) => {
return (
<MantineProvider theme={theme}>
<StoryFn />
</MantineProvider>
)
}
/** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator} */
const withMantine = (Story: StoryFn) => (
<MantineProvider theme={theme}>
<Story />
</MantineProvider>
)

export const decorators = [withMantine]
const preview: Preview = {
decorators: [withMantine]
}
19 changes: 11 additions & 8 deletions packages/cli/src/lib/templates/storybook.preview.tsx.template
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
import * as React from 'react'

import type { GlobalTypes } from '@storybook/csf'
import type { StoryFn, StoryContext } from '@storybook/react'
import type { Preview, StoryContext, StoryFn } 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
*/
const _exampleDecorator = (StoryFn: StoryFn, _context: StoryContext) => {
return <StoryFn />
* @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator}
*/
const _exampleDecorator = (StoryFn: StoryFn, _context: StoryContext) => (
<StoryFn />
)

const preview: Preview = {
decorators: [],
}

export const decorators = []
Philzen marked this conversation as resolved.
Show resolved Hide resolved
export default preview
Loading