refactor: fix storybook types

packages/lsd-react/.storybook/preview.tsx

@@ -1,52 +1,51 @@
-import { DecoratorFunction, Parameters } from '@storybook/addons'
-import { ArgTypes } from '@storybook/react'
+import type { Preview } from '@storybook/react'
 import { THEME_TYPOGRAPHY_FONT_CATEGORIES } from '../src/components/Theme/constants'
 import { storybookThemes } from './themes'
-import { GlobalTypes } from './types'
 import { withTheme } from './withTheme.decorator'
 
-export const parameters: Parameters = {
-  ...storybookThemes.parameters,
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+const preview: Preview = {
+  parameters: {
+    ...storybookThemes.parameters,
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
     },
-  },
-  viewport: {
-    viewports: {
-      ...Object.fromEntries(
-        Object.entries(storybookThemes.defaultTheme.breakpoints).map(
-          ([key, { width }]) => [
-            key,
-            {
-              name: key,
-              styles: {
-                width: (width > 0 ? width : 360) + 'px',
-                height: 'auto',
-                minHeight: 400,
+    viewport: {
+      viewports: {
+        ...Object.fromEntries(
+          Object.entries(storybookThemes.defaultTheme.breakpoints).map(
+            ([key, { width }]) => [
+              key,
+              {
+                name: key,
+                styles: {
+                  width: (width > 0 ? width : 360) + 'px',
+                  height: 'auto',
+                  minHeight: 400,
+                },
               },
-            },
-          ],
+            ],
+          ),
         ),
-      ),
+      },
     },
   },
+  decorators: [withTheme],
+  argTypes: {
+    genericFontFamily: {
+      type: {
+        name: 'enum',
+        value: THEME_TYPOGRAPHY_FONT_CATEGORIES,
+      },
+      defaultValue: 'inherit',
+    },
+  },
+  globalTypes: {
+    ...storybookThemes.globalTypes,
+  },
 }
 
-export const decorators: DecoratorFunction[] = [withTheme]
-
-export const argTypes: ArgTypes = {
-  genericFontFamily: {
-    type: {
-      name: 'enum',
-      value: THEME_TYPOGRAPHY_FONT_CATEGORIES,
-    },
-    defaultValue: 'inherit',
-  },
-}
-
-export const globalTypes: GlobalTypes = {
-  ...storybookThemes.globalTypes,
-}
+export default preview

packages/lsd-react/.storybook/themes.ts

@@ -1,8 +1,7 @@
-import { Parameters } from '@storybook/addons'
-import { StoryContext } from '@storybook/react'
-import { createTheme, CreateThemeProps, defaultThemes } from '../src'
+import { Parameters, StoryContext } from '@storybook/react'
+import { GlobalTypes } from '@storybook/types'
+import { CreateThemeProps, createTheme, defaultThemes } from '../src'
 import { THEME_TYPOGRAPHY_FONT_CATEGORIES } from '../src/components/Theme/constants'
-import { GlobalTypes } from './types'
 
 const themeProps: CreateThemeProps = {
   typography: {},

packages/lsd-react/.storybook/types.ts

@@ -1,4 +0,0 @@
-import { ToolbarArgType } from '@storybook/addon-toolbars/dist/ts3.9/types'
-import { ArgTypes } from '@storybook/react'
-
-export type GlobalTypes = ArgTypes<Partial<ToolbarArgType>>

packages/lsd-react/.storybook/withTheme.decorator.tsx

@@ -1,9 +1,10 @@
-import { DecoratorFunction, useGlobals } from '@storybook/addons'
+import { useGlobals } from '@storybook/manager-api'
+import { Decorator } from '@storybook/react'
 import React, { useEffect } from 'react'
 import { ThemeProvider } from '../src'
 import { storybookThemes } from './themes'
 
-export const withTheme: DecoratorFunction = (Story, context) => {
+export const withTheme: Decorator = (Story, context) => {
   const StoryComponent = Story as any as React.ComponentType
 
   const theme = storybookThemes.getTheme(context)