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

Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>

Author: Philzen

.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

packages/cli/src/commands/setup/i18n/templates/storybook.preview.tsx.template

@@ -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',
@@ -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])
 
@@ -41,4 +42,8 @@ const withI18n = (StoryFn: StoryFn, context: StoryContext) => {
   )
 }
 
-export const decorators = [withI18n]
+const preview: Preview = { 
+  decorators: [withI18n]
+}
+
+export default preview

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 (
-    <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

packages/cli/src/commands/setup/ui/templates/mantine.storybook.preview.tsx.template

@@ -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]
+}

packages/cli/src/lib/templates/storybook.preview.tsx.template

@@ -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 = []
+export default preview