Merge pull request #19553 from storybookjs/deprecate/remaining-lib-cli

final few deprecations removal in a batch

code/addons/backgrounds/src/preview.tsx

@@ -1,9 +1,10 @@
 import { withBackground } from './decorators/withBackground';
 import { withGrid } from './decorators/withGrid';
+import { PARAM_KEY } from './constants';
 
 export const decorators = [withGrid, withBackground];
 export const parameters = {
-  backgrounds: {
+  [PARAM_KEY]: {
     grid: {
       cellSize: 20,
       opacity: 0.5,
@@ -15,3 +16,7 @@ export const parameters = {
     ],
   },
 };
+
+export const globals = {
+  [PARAM_KEY]: null as any,
+};

code/addons/storyshots/storyshots-core/stories/storyshot.configFunc.test.js

@@ -1,6 +1,8 @@
 import path from 'path';
 import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter } from '../src';
 
+/* deprecated and will be removed in Storybook 8.0 */
+
 class AnotherStories2SnapsConverter extends Stories2SnapsConverter {
   getSnapshotFileName(context) {
     const { fileName, kind, name } = context;
@@ -36,9 +38,13 @@ initStoryshots({
   integrityOptions: { cwd: __dirname },
   stories2snapsConverter: new AnotherStories2SnapsConverter({ snapshotExtension: '.boo' }),
   config: ({ configure }) =>
-    configure(() => {
-      // eslint-disable-next-line global-require
-      require('./exported_metadata/Extra.stories.jsx');
-    }, module),
+    configure(
+      () => {
+        // eslint-disable-next-line global-require
+        require('./exported_metadata/Extra.stories.jsx');
+      },
+      module,
+      false
+    ),
   test: multiSnapshotWithOptions(),
 });

code/lib/cli/templates/react-native/template-csf/storybook/index.js

@@ -10,9 +10,13 @@ import './rn-addons';
 addDecorator(withKnobs);
 
 // import stories
-configure(() => {
-  require('./stories');
-}, module);
+configure(
+  () => {
+    require('./stories');
+  },
+  module,
+  false
+);
 
 // Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
 // To find allowed options for getStorybookUI

code/lib/core-client/src/preview/start.test.ts

@@ -13,7 +13,8 @@ import { WebView } from '@storybook/preview-web/dist/cjs/WebView';
 import { ModuleExports, Path, setGlobalRender } from '@storybook/client-api';
 import global from 'global';
 
-import { start } from './start';
+import { start as realStart } from './start';
+import { Loadable } from './types';
 
 jest.mock('@storybook/preview-web/dist/cjs/WebView');
 jest.spyOn(WebView.prototype, 'prepareForDocs').mockReturnValue('docs-root');
@@ -56,6 +57,21 @@ beforeEach(() => {
   emitter.removeAllListeners();
 });
 
+const start: typeof realStart = (...args) => {
+  const result = realStart(...args);
+
+  const configure: typeof result['configure'] = (
+    framework: string,
+    loadable: Loadable,
+    m?: NodeModule,
+    disableBackwardCompatibility = false
+  ) => result.configure(framework, loadable, m, disableBackwardCompatibility);
+
+  return {
+    ...result,
+    configure,
+  };
+};
 afterEach(() => {
   // I'm not sure why this is required (it seems just afterEach is required really)
   mockChannel.emit.mockClear();

code/lib/core-client/src/preview/start.ts

@@ -1,5 +1,4 @@
 import global from 'global';
-import deprecate from 'util-deprecate';
 import { ClientApi } from '@storybook/client-api';
 import { PreviewWeb } from '@storybook/preview-web';
 import type { AnyFramework, ArgsStoryFn } from '@storybook/csf';
@@ -13,13 +12,6 @@ import { executeLoadableForChanges } from './executeLoadable';
 
 const { window: globalWindow, FEATURES } = global;
 
-const configureDeprecationWarning = deprecate(
-  () => {},
-  `\`configure()\` is deprecated and will be removed in Storybook 7.0. 
-Please use the \`stories\` field of \`main.js\` to load stories.
-Read more at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-configure`
-);
-
 const removedApi = (name: string) => () => {
   throw new Error(`@storybook/client-api:${name} was removed in storyStoreV7.`);
 };
@@ -101,10 +93,10 @@ export function start<TFramework extends AnyFramework>(
       framework: string,
       loadable: Loadable,
       m?: NodeModule,
-      showDeprecationWarning = true
+      disableBackwardCompatibility = true
     ) {
-      if (showDeprecationWarning) {
-        configureDeprecationWarning();
+      if (disableBackwardCompatibility) {
+        throw new Error('unexpected configure() call');
       }
 
       clientApi.addParameters({ framework });

code/lib/core-common/src/utils/validate-configuration-files.ts

@@ -1,70 +1,20 @@
 import { dedent } from 'ts-dedent';
-import deprecate from 'util-deprecate';
 import glob from 'glob';
 import path from 'path';
 
 import { boost } from './interpret-files';
 
-const warnLegacyConfigurationFiles = deprecate(
-  () => {},
-  dedent`
-    Configuration files such as "config", "presets" and "addons" are deprecated and will be removed in Storybook 7.0.
-    Read more about it in the migration guide: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#to-mainjs-configuration
-  `
-);
-
-const errorMixingConfigFiles = (first: string, second: string, configDir: string) => {
-  const firstPath = path.resolve(configDir, first);
-  const secondPath = path.resolve(configDir, second);
-  throw new Error(dedent`
-    You have mixing configuration files:
-    ${firstPath}
-    ${secondPath}
-    "${first}" and "${second}" cannot coexist.
-    Please check the documentation for migration steps: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#to-mainjs-configuration
-  `);
-};
-
 export function validateConfigurationFiles(configDir: string) {
   const extensionsPattern = `{${Array.from(boost).join(',')}}`;
   const exists = (file: string) =>
     !!glob.sync(path.resolve(configDir, `${file}${extensionsPattern}`)).length;
 
   const main = exists('main');
-  const config = exists('config');
 
-  if (!main && !config) {
+  if (!main) {
     throw new Error(dedent`
       No configuration files have been found in your configDir (${path.resolve(configDir)}).
       Storybook needs either a "main" or "config" file.
     `);
   }
-
-  if (main && config) {
-    throw new Error(dedent`
-      You have both a "main" and a "config". Please remove the "config" file from your configDir (${path.resolve(
-        configDir,
-        'config'
-      )})`);
-  }
-
-  const presets = exists('presets');
-  if (main && presets) {
-    errorMixingConfigFiles('main', 'presets', configDir);
-  }
-
-  const preview = exists('preview');
-  if (preview && config) {
-    errorMixingConfigFiles('preview', 'config', configDir);
-  }
-
-  const addons = exists('addons');
-  const manager = exists('manager');
-  if (manager && addons) {
-    errorMixingConfigFiles('manager', 'addons', configDir);
-  }
-
-  if (presets || config || addons) {
-    warnLegacyConfigurationFiles();
-  }
 }

code/lib/core-server/src/presets/common-preset.ts

@@ -1,7 +1,7 @@
 import fs from 'fs-extra';
-import deprecate from 'util-deprecate';
+import { deprecate } from '@storybook/node-logger';
 import {
-  CLIOptions,
+  type CLIOptions,
   getPreviewBodyTemplate,
   getPreviewHeadTemplate,
   getPreviewMainTemplate,
@@ -16,9 +16,6 @@ import type {
 } from '@storybook/core-common';
 import { loadCsf } from '@storybook/csf-tools';
 
-const warnConfigField = deprecate(() => {},
-`You (or an addon) are using the 'config' preset field. This has been replaced by 'previewAnnotations' and will be removed in 8.0`);
-
 export const babel = async (_: unknown, options: Options) => {
   const { presets } = options;
 
@@ -91,7 +88,11 @@ export const core = async (existing: CoreConfig, options: Options): Promise<Core
 export const previewAnnotations = async (base: any, options: Options) => {
   const config = await options.presets.apply('config', [], options);
 
-  if (config.length > 0) warnConfigField();
+  if (config.length > 0) {
+    deprecate(
+      `You (or an addon) are using the 'config' preset field. This has been replaced by 'previewAnnotations' and will be removed in 8.0`
+    );
+  }
 
   return [...config, ...base];
 };

code/lib/preview-web/src/PreviewWeb.test.ts

@@ -753,38 +753,38 @@ describe('PreviewWeb', () => {
       document.location.search = '?id=component-one--a';
       await createAndRenderPreview();
 
-      emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
+      emitter.emit(UPDATE_GLOBALS, { globals: { a: 'c' } });
 
       await waitForEvents([GLOBALS_UPDATED]);
       expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, {
-        globals: { a: 'b', foo: 'bar' },
+        globals: { a: 'c' },
         initialGlobals: { a: 'b' },
       });
     });
 
-    it('sets new globals on the store', async () => {
+    it('doet not allow new globals on the store', async () => {
       document.location.search = '?id=component-one--a';
       const preview = await createAndRenderPreview();
 
       emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
 
-      expect(preview.storyStore.globals!.get()).toEqual({ a: 'b', foo: 'bar' });
+      expect(preview.storyStore.globals!.get()).toEqual({ a: 'b' });
     });
 
-    it('passes new globals in context to renderToDOM', async () => {
+    it('passes globals in context to renderToDOM', async () => {
       document.location.search = '?id=component-one--a';
       const preview = await createAndRenderPreview();
 
       mockChannel.emit.mockClear();
       projectAnnotations.renderToDOM.mockClear();
-      emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
+      emitter.emit(UPDATE_GLOBALS, { globals: { a: 'd' } });
       await waitForRender();
 
       expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
         expect.objectContaining({
           forceRemount: false,
           storyContext: expect.objectContaining({
-            globals: { a: 'b', foo: 'bar' },
+            globals: { a: 'd' },
           }),
         }),
         'story-element'
@@ -796,7 +796,7 @@ describe('PreviewWeb', () => {
       await createAndRenderPreview();
 
       mockChannel.emit.mockClear();
-      emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
+      emitter.emit(UPDATE_GLOBALS, { globals: { a: 'c' } });
       await waitForRender();
 
       expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
@@ -810,7 +810,7 @@ describe('PreviewWeb', () => {
 
         mockChannel.emit.mockClear();
         docsRenderer.render.mockClear();
-        emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
+        emitter.emit(UPDATE_GLOBALS, { globals: { a: 'd' } });
         await waitForEvents([GLOBALS_UPDATED]);
 
         expect(docsRenderer.render).toHaveBeenCalled();

code/lib/store/src/GlobalsStore.test.ts

@@ -1,6 +1,12 @@
 import { expect } from '@jest/globals';
 import { GlobalsStore } from './GlobalsStore';
 
+jest.mock('@storybook/client-logger', () => ({
+  logger: {
+    warn: jest.fn(),
+  },
+}));
+
 describe('GlobalsStore', () => {
   it('is initialized to the value in globals', () => {
     const store = new GlobalsStore({
@@ -48,14 +54,13 @@ describe('GlobalsStore', () => {
 
       store.update({ baz: 'bing' });
       expect(store.get()).toEqual({ foo: 'bar', baz: 'bing' });
-
-      // NOTE: this is currently allowed but deprecated.
-      store.update({ random: 'value' });
-      expect(store.get()).toEqual({ foo: 'bar', baz: 'bing', random: 'value' });
     });
 
     it('does not merge objects', () => {
-      const store = new GlobalsStore({ globals: {}, globalTypes: {} });
+      const store = new GlobalsStore({
+        globals: { obj: { foo: 'old' } },
+        globalTypes: { baz: {} },
+      });
 
       store.update({ obj: { foo: 'bar' } });
       expect(store.get()).toEqual({ obj: { foo: 'bar' } });
@@ -116,6 +121,8 @@ describe('GlobalsStore', () => {
         const store = new GlobalsStore({
           globals: {
             arg1: 'arg1',
+            arg2: 'arg2',
+            arg3: 'arg3',
           },
           globalTypes: {
             arg2: { defaultValue: 'arg2' },
@@ -149,6 +156,8 @@ describe('GlobalsStore', () => {
         const store = new GlobalsStore({
           globals: {
             arg1: 'arg1',
+            arg2: 'arg1',
+            arg3: 'arg1',
             arg4: 'arg4',
           },
           globalTypes: {

code/lib/store/src/GlobalsStore.ts

@@ -1,18 +1,9 @@
-import deprecate from 'util-deprecate';
-import { dedent } from 'ts-dedent';
 import type { Globals, GlobalTypes } from '@storybook/csf';
+import { logger } from '@storybook/client-logger';
 
 import { deepDiff, DEEPLY_EQUAL } from './args';
 import { getValuesFromArgTypes } from './csf/getValuesFromArgTypes';
 
-const setUndeclaredWarning = deprecate(
-  () => {},
-  dedent`
-    Setting a global value that is undeclared (i.e. not in the user's initial set of globals
-    or globalTypes) is deprecated and will have no effect in 7.0.
-  `
-);
-
 export class GlobalsStore {
   // We use ! here because TS doesn't analyse the .set() function to see if it actually get set
   allowedGlobalNames!: Set<string>;
@@ -47,7 +38,13 @@ export class GlobalsStore {
 
   filterAllowedGlobals(globals: Globals) {
     return Object.entries(globals).reduce((acc, [key, value]) => {
-      if (this.allowedGlobalNames.has(key)) acc[key] = value;
+      if (this.allowedGlobalNames.has(key)) {
+        acc[key] = value;
+      } else {
+        logger.warn(
+          `Attempted to set a global (${key}) that is not defined in initial globals or globalTypes`
+        );
+      }
       return acc;
     }, {} as Globals);
   }
@@ -64,12 +61,6 @@ export class GlobalsStore {
   }
 
   update(newGlobals: Globals) {
-    Object.keys(newGlobals).forEach((key) => {
-      if (!this.allowedGlobalNames.has(key)) {
-        setUndeclaredWarning();
-      }
-    });
-
-    this.globals = { ...this.globals, ...newGlobals };
+    this.globals = { ...this.globals, ...this.filterAllowedGlobals(newGlobals) };
   }
 }

code/renderers/svelte/src/docs/sourceDecorator.ts

@@ -115,7 +115,7 @@ export function generateSvelteSource(
 /**
  * Check if the story component is a wrapper to the real component.
  *
- * A component can be annoted with @wrapper to indicate that
+ * A component can be annotated with @wrapper to indicate that
  * it's just a wrapper for the real tested component. If it's the case
  * then the code generated references the real component, not the wrapper.
  *

code/ui/blocks/src/blocks/DocsStory.tsx

@@ -1,6 +1,4 @@
 import React, { FC } from 'react';
-import deprecate from 'util-deprecate';
-import { dedent } from 'ts-dedent';
 import { Subheading } from './Subheading';
 import { DocsStoryProps } from './types';
 import { Anchor } from './Anchor';
@@ -8,15 +6,6 @@ import { Description } from './Description';
 import { Story } from './Story';
 import { Canvas } from './Canvas';
 
-const warnStoryDescription = deprecate(
-  () => {},
-  dedent`
-    Deprecated parameter: docs.storyDescription => docs.description.story
-      
-    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#docs-description-parameter
-  `
-);
-
 export const DocsStory: FC<DocsStoryProps> = ({
   id,
   name,
@@ -28,10 +17,6 @@ export const DocsStory: FC<DocsStoryProps> = ({
   const { docs } = parameters;
   if (expanded && docs) {
     description = docs.description?.story;
-    if (!description) {
-      description = docs.storyDescription;
-      if (description) warnStoryDescription();
-    }
   }
 
   const subheading = expanded && name;

code/ui/blocks/src/blocks/Props.tsx

@@ -1,19 +0,0 @@
-import React, { ComponentProps } from 'react';
-import deprecate from 'util-deprecate';
-import { dedent } from 'ts-dedent';
-import { ArgsTable } from './ArgsTable';
-import { PRIMARY_STORY } from './types';
-
-export const Props = deprecate(
-  (props: ComponentProps<typeof ArgsTable>) => <ArgsTable {...props} />,
-  dedent`
-    Props doc block has been renamed to ArgsTable.
-
-    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#previewprops-renamed
-  `
-);
-
-// @ts-expect-error (Converted from ts-ignore)
-Props.defaultProps = {
-  of: PRIMARY_STORY,
-};

code/ui/blocks/src/blocks/index.ts

@@ -14,7 +14,6 @@ export * from './external/ExternalDocsContainer';
 export * from './Heading';
 export * from './Meta';
 export * from './Primary';
-export * from './Props';
 export * from './Source';
 export * from './SourceContainer';
 export * from './Stories';

code/ui/blocks/src/components/ArgsTable/ArgRow.stories.tsx

@@ -159,7 +159,7 @@ export const Radio = {
       description: 'someEnum description',
       control: {
         type: 'radio',
-        options: ['a', 'b', 'c'],
+        argType: { options: ['a', 'b', 'c'] },
       },
     },
   },

code/ui/blocks/src/controls/options/Options.stories.tsx

@@ -19,7 +19,8 @@ const rawOptionsHelper = (options, type, isMulti, initial) => {
     <>
       <OptionsControl
         name="options"
-        options={options}
+        labels={{}}
+        argType={{ options }}
         value={value}
         type={type}
         onChange={(newVal) => setValue(newVal)}

code/ui/blocks/src/controls/options/Options.tsx

@@ -1,6 +1,4 @@
 import React, { FC } from 'react';
-import { dedent } from 'ts-dedent';
-import { deprecate } from '@storybook/client-logger';
 
 import { CheckboxControl } from './Checkbox';
 import { RadioControl } from './Radio';
@@ -39,22 +37,14 @@ const Controls = {
 
 export type OptionsProps = ControlProps<OptionsSelection> & OptionsConfig;
 export const OptionsControl: FC<OptionsProps> = (props) => {
-  const { type = 'select', options, labels, argType } = props;
+  const { type = 'select', labels, argType } = props;
   const normalized = {
     ...props,
-    options: normalizeOptions(options || argType.options, labels),
+    options: argType ? normalizeOptions(argType.options, labels) : {},
     isInline: type.includes('inline'),
     isMulti: type.includes('multi'),
   };
 
-  if (options) {
-    deprecate(dedent`
-      'control.options' is deprecated and will be removed in Storybook 7.0. Define 'options' directly on the argType instead, and use 'control.labels' for custom labels.
-
-      More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-controloptions
-    `);
-  }
-
   const Control = Controls[type];
   if (Control) {
     return <Control {...normalized} />;

code/ui/blocks/src/controls/types.ts

@@ -52,7 +52,6 @@ export type OptionsControlType =
 
 export interface OptionsConfig {
   labels: Record<any, string>;
-  options: Options;
   type: OptionsControlType;
 }