update types and imports for storybook 7.0

Author: yannbf

package.json

@@ -56,15 +56,18 @@
       "limit": "10 KB"
     }
   ],
+  "dependencies": {
+    "@storybook/csf": "next"
+  },
   "devDependencies": {
     "@auto-it/conventional-commits": "^10.31.0",
     "@auto-it/first-time-contributor": "^10.31.0",
     "@auto-it/released": "^10.31.0",
     "@size-limit/preset-small-lib": "^4.10.1",
-    "@storybook/addons": "^7.0.0-alpha.49",
-    "@storybook/react": "^7.0.0-alpha.49",
-    "@storybook/store": "^7.0.0-alpha.49",
-    "@storybook/types": "^7.0.0-alpha.49",
+    "@storybook/addons": "next",
+    "@storybook/react": "next",
+    "@storybook/store": "next",
+    "@storybook/types": "next",
     "@types/react": "17",
     "auto": "^10.31.0",
     "concurrently": "^6.0.0",
@@ -73,18 +76,14 @@
     "size-limit": "^4.10.1",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.2.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
-    "@storybook/addons": ">=6.4.0",
-    "@storybook/preview-web": ">=6.4.0",
-    "@storybook/react": ">=6.4.0",
-    "@storybook/store": ">=6.4.0",
+    "@storybook/preview-web": "next",
+    "@storybook/preview-api": "next",
+    "@storybook/react": "next",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
-  "resolutions": {
-    "**/typescript": "^4.2.3"
-  },
   "publishConfig": {
     "access": "public"
   },
@@ -99,8 +98,5 @@
       "first-time-contributor",
       "released"
     ]
-  },
-  "dependencies": {
-    "@storybook/csf": "next"
   }
 }

src/index.ts

@@ -1,6 +1,5 @@
-import { defaultDecorateStory, combineParameters } from '@storybook/store';
-import { addons, applyHooks, HooksContext, mockChannel } from '@storybook/addons';
-import type { Meta, ReactFramework } from '@storybook/react';
+import { defaultDecorateStory, combineParameters, addons, applyHooks, HooksContext, mockChannel } from '@storybook/preview-api';
+import type { Meta, ReactRenderer, Args } from '@storybook/react';
 import type { StoryContext } from '@storybook/types';
 import { isExportStory } from '@storybook/csf';
 
@@ -62,7 +61,7 @@ export function setGlobalConfig(config: GlobalConfig) {
  * @param meta - e.g. (import Meta from './Button.stories')
  * @param [globalConfig] - e.g. (import * as globalConfig from '../.storybook/preview') this can be applied automatically if you use `setGlobalConfig` in your setup files.
  */
-export function composeStory<GenericArgs>(
+export function composeStory<GenericArgs extends Args>(
   story: TestingStory<GenericArgs>,
   meta: Meta<GenericArgs | any>,
   globalConfig: GlobalConfig = globalStorybookConfig
@@ -82,15 +81,14 @@ export function composeStory<GenericArgs>(
   }
 
   const renderFn = typeof story === 'function' ? story : story.render ?? meta.render ?? globalRender;
-  const finalStoryFn = (context: StoryContext<ReactFramework, GenericArgs>) => {
+  const finalStoryFn = (context: StoryContext<ReactRenderer, GenericArgs>) => {
     const { passArgsFirst = true } = context.parameters;
     if (!passArgsFirst) {
       throw new Error(
         'composeStory does not support legacy style stories (with passArgsFirst = false).'
       );
     }
 
-    // @ts-expect-error (just trying to get this to build)
     return renderFn(context.args, context);
   };
 
@@ -100,7 +98,7 @@ export function composeStory<GenericArgs>(
     ...(globalConfig.decorators || []),
   ];
 
-  const decorated = decorateStory<ReactFramework>(
+  const decorated = decorateStory<ReactRenderer>(
     finalStoryFn as any,
     combinedDecorators as any
   );
@@ -141,7 +139,7 @@ export function composeStory<GenericArgs>(
     viewMode: 'story',
     originalStoryFn: renderFn,
     hooks: new HooksContext(),
-  } as StoryContext<ReactFramework, GenericArgs>;
+  } as StoryContext<ReactRenderer, GenericArgs>;
 
   const composedStory = (extraArgs: Partial<GenericArgs>) => {
     return decorated({

src/types.ts

@@ -1,24 +1,23 @@
-import type { BaseStoryFn as OriginalBaseStoryFn } from '@storybook/addons';
-import type { BaseAnnotations, Store_WebProjectAnnotations, StoryContext, Args } from '@storybook/types';
-import type { StoryFn as OriginalStoryFn, StoryObj, Meta, ReactFramework } from '@storybook/react';
+import type { Addon_BaseStoryFn as OriginalBaseStoryFn, BaseAnnotations, ProjectAnnotations, StoryContext, Args } from '@storybook/types';
+import type { StoryFn as OriginalStoryFn, StoryObj, Meta, ReactRenderer } from '@storybook/react';
 import type { ReactElement } from 'react';
 
 type StoryFnReactReturnType = ReactElement<unknown>;
 
-export type BaseStoryFn<Args> = OriginalBaseStoryFn<Args, StoryFnReactReturnType> & BaseAnnotations<Args, StoryFnReactReturnType>;
+export type BaseStoryFn<Args> = OriginalBaseStoryFn<Args, StoryFnReactReturnType> & BaseAnnotations<ReactRenderer, Args>;
 /**
  * Object representing the preview.ts module
  *
  * Used in storybook testing utilities.
  * @see [Unit testing with Storybook](https://storybook.js.org/docs/react/workflows/unit-testing)
  */
-export type GlobalConfig = Store_WebProjectAnnotations<ReactFramework>;
+export type GlobalConfig = ProjectAnnotations<ReactRenderer>;
 
 export type TestingStory<T = Args> = StoryFn<T> | StoryObj<T>;
 
 export type StoryFile = { default: Meta<any>, __esModule?: boolean }
 
-export type TestingStoryPlayContext<T = Args> = Partial<StoryContext<ReactFramework, T>> & Pick<StoryContext, 'canvasElement'>
+export type TestingStoryPlayContext<T = Args> = Partial<StoryContext<ReactRenderer, T>> & Pick<StoryContext, 'canvasElement'>
 
 export type TestingStoryPlayFn<TArgs = Args> = (context: TestingStoryPlayContext<TArgs>) => Promise<void> | void;
 

src/utils.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import type { FunctionComponent } from 'react';
-import type { Story } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 import type { TestingStory } from './types';
 
-export const globalRender: Story = (args, { parameters }) => {
+export const globalRender: StoryFn = (args, { parameters }) => {
   if (!parameters.component) {
     throw new Error(`
       Could not render story due to missing 'component' property in Meta.