deprecate setGlobalConfig in favor of setProjectAnnotations

Author: yannbf

README.md

@@ -59,10 +59,10 @@ If you have global decorators/parameters/etc and want them applied to your stori
 
 ```tsx
 // setupFile.js <-- this will run before the tests in jest.
-import { setGlobalConfig } from '@storybook/testing-react';
+import { setProjectAnnotations } from '@storybook/testing-react';
 import * as globalStorybookConfig from './.storybook/preview'; // path of your preview.js file
 
-setGlobalConfig(globalStorybookConfig);
+setProjectAnnotations(globalStorybookConfig);
 ```
 
 For the setup file to be picked up, you need to pass it as an option to jest in your test command:

example/.storybook/preview.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import type { DecoratorFn } from '@storybook/react';
+import type { Decorator } from '@storybook/react';
 import { ThemeProvider, convert, themes } from '@storybook/theming';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' }
 }
 
-export const decorators: DecoratorFn[] = [
+export const decorators: Decorator[] = [
   (StoryFn, { globals: { locale } }) => (
     <>
       <div>Locale: {locale}</div>

example/setup.ts

@@ -1,4 +1,4 @@
-import { setGlobalConfig } from '../dist/index';
+import { setProjectAnnotations } from '../dist/index';
 import * as globalStorybookConfig from './.storybook/preview';
 
-setGlobalConfig(globalStorybookConfig);
+setProjectAnnotations(globalStorybookConfig);

package.json

@@ -82,6 +82,7 @@
     "@storybook/preview-web": "next",
     "@storybook/preview-api": "next",
     "@storybook/react": "next",
+    "@storybook/client-logger": "next",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {

src/index.ts

@@ -1,15 +1,16 @@
-import { defaultDecorateStory, combineParameters, addons, applyHooks, HooksContext, mockChannel } from '@storybook/preview-api';
+import { defaultDecorateStory, combineParameters, addons, applyHooks, HooksContext, mockChannel, composeConfigs } from '@storybook/preview-api';
 import type { ReactRenderer, Args } from '@storybook/react';
-import type { ComponentAnnotations, Store_CSFExports, StoryContext } from '@storybook/types';
+import type { ComponentAnnotations, ProjectAnnotations, Store_CSFExports, StoryContext } from '@storybook/types';
 import { isExportStory } from '@storybook/csf';
+import { deprecate } from '@storybook/client-logger';
 
-import type { GlobalConfig, StoriesWithPartialProps, TestingStory, TestingStoryPlayContext } from './types';
+import type { StoriesWithPartialProps, TestingStory, TestingStoryPlayContext } from './types';
 import { getStoryName, globalRender, isInvalidStory, objectEntries } from './utils';
 
 // Some addons use the channel api to communicate between manager/preview, and this is a client only feature, therefore we must mock it.
 addons.setChannel(mockChannel());
 
-let globalStorybookConfig = {};
+let GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = {};
 
 const decorateStory = applyHooks(defaultDecorateStory);
 
@@ -23,16 +24,29 @@ const isValidStoryExport = (storyName: string, nonStoryExportsConfig = {}) =>
  * Example:
  *```jsx
  * // setup.js (for jest)
- * import { setGlobalConfig } from '@storybook/testing-react';
- * import * as globalStorybookConfig from './.storybook/preview';
+ * import { setProjectAnnotations } from '@storybook/testing-react';
+ * import * as projectAnnotations from './.storybook/preview';
  *
- * setGlobalConfig(globalStorybookConfig);
+ * setProjectAnnotations(projectAnnotations);
  *```
  *
- * @param config - e.g. (import * as globalConfig from '../.storybook/preview')
+ * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
  */
-export function setGlobalConfig(config: GlobalConfig) {
-  globalStorybookConfig = config;
+ export function setProjectAnnotations(
+  projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]
+) {
+  const annotations = Array.isArray(projectAnnotations) ? projectAnnotations : [projectAnnotations];
+  GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = composeConfigs(annotations);
+}
+
+/**
+ * @deprecated Use setProjectAnnotations instead
+ */
+export function setGlobalConfig(
+  projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]
+) {
+  deprecate(`[@storybook/testing-react] setGlobalConfig is deprecated. Use setProjectAnnotations instead.`);
+  setProjectAnnotations(projectAnnotations);
 }
 
 /**
@@ -64,7 +78,7 @@ export function setGlobalConfig(config: GlobalConfig) {
 export function composeStory<GenericArgs extends Args>(
   story: TestingStory<GenericArgs>,
   meta: ComponentAnnotations<ReactRenderer>,
-  globalConfig: GlobalConfig = globalStorybookConfig
+  globalConfig: ProjectAnnotations<ReactRenderer> = GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS
 ) {
 
   if (isInvalidStory(story)) {
@@ -190,7 +204,7 @@ export function composeStory<GenericArgs extends Args>(
  * @param storiesImport - e.g. (import * as stories 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 composeStories<TModule extends Store_CSFExports<ReactRenderer>>(storiesImport: TModule, globalConfig?: GlobalConfig) {
+export function composeStories<TModule extends Store_CSFExports<ReactRenderer>>(storiesImport: TModule, globalConfig?: ProjectAnnotations<ReactRenderer>) {
   const { default: meta, __esModule, __namedExportsOrder, ...stories } = storiesImport;
 
   // This function should take this as input:

src/types.ts

@@ -2,22 +2,13 @@ import type {
   AnnotatedStoryFn,
   Args,
   PlayFunction, PlayFunctionContext,
-  ProjectAnnotations,
   StoryAnnotations,
 } from '@storybook/types';
 import type { ReactRenderer } from '@storybook/react';
 
-/**
- * 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 = ProjectAnnotations<ReactRenderer>;
-
-export type TestingStory<T = Args> = StoryAnnotations<ReactRenderer, T>;
+export type TestingStory<TArgs = Args> = StoryAnnotations<ReactRenderer, TArgs>;
 
-export type TestingStoryPlayContext<T = Args> = Partial<PlayFunctionContext<ReactRenderer, T>> & Pick<PlayFunctionContext, 'canvasElement'>
+export type TestingStoryPlayContext<TArgs = Args> = Partial<PlayFunctionContext<ReactRenderer, TArgs>> & Pick<PlayFunctionContext, 'canvasElement'>
 
 export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactRenderer, TArgs> & { play: PlayFunction<ReactRenderer, TArgs> }