Merge branch 'next' into update-story-globals-docs

* next: (27 commits)
  apply fix for #28883
  fixes
  apply linting to scripts
  update snapshots
  cleanup
  remove duplicate comment
  more fixes
  jsdoc linting fixes
  misc fixes
  remove invalid syntax
  remove duplicate comment
  remove duplicate comment
  remove duplicate comment
  remove duplicate comment
  remove duplicate comment
  move comment
  move comment
  remove redundant comment
  fix linting of jsdoc comments example blocks
  fix snapshots
  ...

code/.storybook/preview.tsx

@@ -16,7 +16,7 @@ import {
 
 import { DocsContext } from '@storybook/blocks';
 import { global } from '@storybook/global';
-import type { Decorator, ReactRenderer } from '@storybook/react';
+import type { Decorator, Loader, ReactRenderer } from '@storybook/react';
 
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 
@@ -95,7 +95,6 @@ const StackContainer = ({ children, layout }) => (
       height: '100%',
       display: 'flex',
       flexDirection: 'column',
-      // margin: layout === 'fullscreen' ? 0 : '-1rem',
     }}
   >
     <style dangerouslySetInnerHTML={{ __html: 'html, body, #storybook-root { height: 100%; }' }} />
@@ -124,15 +123,21 @@ const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRendere
 const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel;
 export const loaders = [
   /**
-   * This loader adds a DocsContext to the story, which is required for the most Blocks to work.
-   * A story will specify which stories they need in the index with:
+   * This loader adds a DocsContext to the story, which is required for the most Blocks to work. A
+   * story will specify which stories they need in the index with:
+   *
+   * ```ts
    * parameters: {
-   *  relativeCsfPaths: ['../stories/MyStory.stories.tsx'], // relative to the story
+   *   relativeCsfPaths: ['../stories/MyStory.stories.tsx'], // relative to the story
    * }
+   * ```
+   *
    * The DocsContext will then be added via the decorator below.
    */
   async ({ parameters: { relativeCsfPaths, attached = true } }) => {
-    if (!relativeCsfPaths) return {};
+    if (!relativeCsfPaths) {
+      return {};
+    }
     const csfFiles = await Promise.all(
       (relativeCsfPaths as string[]).map(async (blocksRelativePath) => {
         const projectRelativePath = `./lib/blocks/src/${blocksRelativePath.replace(
@@ -185,7 +190,8 @@ export const decorators = [
       <Story />
     ),
   /**
-   * This decorator renders the stories side-by-side, stacked or default based on the theme switcher in the toolbar
+   * This decorator renders the stories side-by-side, stacked or default based on the theme switcher
+   * in the toolbar
    */
   (StoryFn, { globals, playFunction, args, storyGlobals, parameters }) => {
     let theme = globals.sb_theme;
@@ -267,9 +273,9 @@ export const decorators = [
     }
   },
   /**
-   * This decorator shows the current state of the arg named in the
-   * parameters.withRawArg property, by updating the arg in the onChange function
-   * this also means that the arg will sync with the control panel
+   * This decorator shows the current state of the arg named in the parameters.withRawArg property,
+   * by updating the arg in the onChange function this also means that the arg will sync with the
+   * control panel
    *
    * If parameters.withRawArg is not set, this decorator will do nothing
    */

code/addons/a11y/src/a11yRunner.ts

@@ -15,10 +15,7 @@ let activeStoryId: string | undefined;
 
 const defaultParameters = { config: {}, options: {} };
 
-/**
- * Handle A11yContext events.
- * Because the event are sent without manual check, we split calls
- */
+/** Handle A11yContext events. Because the event are sent without manual check, we split calls */
 const handleRequest = async (storyId: string, input: A11yParameters | null) => {
   if (!input?.manual) {
     await run(storyId, input ?? defaultParameters);

code/addons/a11y/src/components/A11yContext.tsx

@@ -105,7 +105,9 @@ export const A11yContextProvider: React.FC<React.PropsWithChildren<A11yContextPr
     }
   }, [active, handleClearHighlights, emit, storyEntry]);
 
-  if (!active) return null;
+  if (!active) {
+    return null;
+  }
 
   return (
     <A11yContext.Provider

code/addons/actions/src/addArgsHelpers.ts

@@ -11,8 +11,8 @@ const isInInitialArgs = (name: string, initialArgs: Args) =>
   typeof initialArgs[name] === 'undefined' && !(name in initialArgs);
 
 /**
- * Automatically add action args for argTypes whose name
- * matches a regex, such as `^on.*` for react-style `onClick` etc.
+ * Automatically add action args for argTypes whose name matches a regex, such as `^on.*` for
+ * react-style `onClick` etc.
  */
 
 export const inferActionsFromArgTypesRegex: ArgsEnhancer<Renderer> = (context) => {
@@ -39,9 +39,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer<Renderer> = (context) =
   }, {} as Args);
 };
 
-/**
- * Add action args for list of strings.
- */
+/** Add action args for list of strings. */
 export const addActionsFromArgTypes: ArgsEnhancer<Renderer> = (context) => {
   const {
     initialArgs,

code/addons/actions/src/components/ActionLogger/index.tsx

@@ -48,7 +48,11 @@ export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => {
 
   useEffect(() => {
     // Scroll to bottom, when the action panel was already scrolled down
-    if (wasAtBottom) wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+
+    // Scroll to bottom, when the action panel was already scrolled down
+    if (wasAtBottom) {
+      wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+    }
   }, [wasAtBottom, actions.length]);
 
   return (

code/addons/actions/src/loaders.ts

@@ -12,7 +12,10 @@ const logActionsWhenMockCalled: LoaderFunction = (context) => {
   const {
     parameters: { actions },
   } = context;
-  if (actions?.disable) return;
+
+  if (actions?.disable) {
+    return;
+  }
 
   if (
     !subscribed &&
@@ -22,7 +25,10 @@ const logActionsWhenMockCalled: LoaderFunction = (context) => {
     const onMockCall = global.__STORYBOOK_TEST_ON_MOCK_CALL__ as typeof onMockCallType;
     onMockCall((mock, args) => {
       const name = mock.getMockName();
-      if (name === 'spy') return;
+
+      if (name === 'spy') {
+        return;
+      }
 
       // TODO: Make this a configurable API in 8.2
       if (

code/addons/actions/src/runtime/action.ts

@@ -14,7 +14,10 @@ import { config } from './configureActions';
 type SyntheticEvent = any; // import('react').SyntheticEvent;
 const findProto = (obj: unknown, callback: (proto: any) => boolean): Function | null => {
   const proto = Object.getPrototypeOf(obj);
-  if (!proto || callback(proto)) return proto;
+
+  if (!proto || callback(proto)) {
+    return proto;
+  }
   return findProto(proto, callback);
 };
 const isReactSyntheticEvent = (e: unknown): e is SyntheticEvent =>

code/addons/controls/src/ControlsPanel.tsx

@@ -61,16 +61,21 @@ export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) =>
   // If the story is prepared, then show the args table
   // and reset the loading states
   useEffect(() => {
-    if (previewInitialized) setIsLoading(false);
+    if (previewInitialized) {
+      setIsLoading(false);
+    }
   }, [previewInitialized]);
 
   const hasControls = Object.values(rows).some((arg) => arg?.control);
 
   const withPresetColors = Object.entries(rows).reduce((acc, [key, arg]) => {
     const control = arg?.control;
-    if (typeof control !== 'object' || control?.type !== 'color' || control?.presetColors)
+
+    if (typeof control !== 'object' || control?.type !== 'color' || control?.presetColors) {
       acc[key] = arg;
-    else acc[key] = { ...arg, control: { ...control, presetColors } };
+    } else {
+      acc[key] = { ...arg, control: { ...control, presetColors } };
+    }
     return acc;
   }, {} as ArgTypes);
 

code/addons/controls/src/SaveStory.tsx

@@ -105,7 +105,9 @@ export const SaveStory = ({ saveStory, createStory, resetArgs }: SaveStoryProps)
   const [errorMessage, setErrorMessage] = React.useState(null);
 
   const onSaveStory = async () => {
-    if (saving) return;
+    if (saving) {
+      return;
+    }
     setSaving(true);
     await saveStory().catch(() => {});
     setSaving(false);
@@ -125,7 +127,10 @@ export const SaveStory = ({ saveStory, createStory, resetArgs }: SaveStoryProps)
   };
   const onSubmitForm = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    if (saving) return;
+
+    if (saving) {
+      return;
+    }
     try {
       setErrorMessage(null);
       setSaving(true);

code/addons/controls/src/manager.tsx

@@ -41,7 +41,9 @@ function Title() {
 
 const stringifyArgs = (args: Record<string, any>) =>
   JSON.stringify(args, (_, value) => {
-    if (typeof value === 'function') return '__sb_empty_function_arg__';
+    if (typeof value === 'function') {
+      return '__sb_empty_function_arg__';
+    }
     return value;
   });
 
@@ -50,7 +52,10 @@ addons.register(ADDON_ID, (api) => {
 
   const saveStory = async () => {
     const data = api.getCurrentStoryData();
-    if (data.type !== 'story') throw new Error('Not a story');
+
+    if (data.type !== 'story') {
+      throw new Error('Not a story');
+    }
 
     try {
       const response = await experimental_requestResponse<
@@ -60,7 +65,9 @@ addons.register(ADDON_ID, (api) => {
         // Only send updated args
         args: stringifyArgs(
           Object.entries(data.args || {}).reduce<Args>((acc, [key, value]) => {
-            if (!deepEqual(value, data.initialArgs?.[key])) acc[key] = value;
+            if (!deepEqual(value, data.initialArgs?.[key])) {
+              acc[key] = value;
+            }
             return acc;
           }, {})
         ),
@@ -98,7 +105,10 @@ addons.register(ADDON_ID, (api) => {
 
   const createStory = async (name: string) => {
     const data = api.getCurrentStoryData();
-    if (data.type !== 'story') throw new Error('Not a story');
+
+    if (data.type !== 'story') {
+      throw new Error('Not a story');
+    }
 
     const response = await experimental_requestResponse<
       SaveStoryRequestPayload,
@@ -146,9 +156,14 @@ addons.register(ADDON_ID, (api) => {
   });
 
   channel.on(SAVE_STORY_RESPONSE, (data: ResponseData<SaveStoryResponsePayload>) => {
-    if (!data.success) return;
+    if (!data.success) {
+      return;
+    }
     const story = api.getCurrentStoryData();
-    if (story.type !== 'story') return;
+
+    if (story.type !== 'story') {
+      return;
+    }
 
     api.resetStoryArgs(story);
     if (data.payload.newStoryId) {

code/addons/docs/src/plugins/mdx-plugin.ts

@@ -28,7 +28,9 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
     name: 'storybook:mdx-plugin',
     enforce: 'pre',
     async transform(src, id) {
-      if (!filter(id)) return undefined;
+      if (!filter(id)) {
+        return undefined;
+      }
 
       const mdxLoaderOptions: CompileOptions = await presets.apply('mdxLoaderOptions', {
         ...mdxPluginOptions,

code/addons/docs/src/preset.ts

@@ -11,9 +11,8 @@ import rehypeSlug from 'rehype-slug';
 import type { CompileOptions } from './compiler';
 
 /**
- * Get the resolvedReact preset, which points either to
- * the user's react dependencies or the react dependencies shipped with addon-docs
- * if the user has not installed react explicitly.
+ * Get the resolvedReact preset, which points either to the user's react dependencies or the react
+ * dependencies shipped with addon-docs if the user has not installed react explicitly.
  */
 const getResolvedReact = async (options: Options) => {
   const resolvedReact = (await options.presets.apply('resolvedReact', {})) as any;
@@ -66,10 +65,13 @@ async function webpack(
 
   let alias;
 
-  /** Add aliases for `@storybook/addon-docs` & `@storybook/blocks`
-   * These must be singletons to avoid multiple instances of react & emotion being loaded, both would cause the components to fail to render.
+  /**
+   * Add aliases for `@storybook/addon-docs` & `@storybook/blocks` These must be singletons to avoid
+   * multiple instances of react & emotion being loaded, both would cause the components to fail to
+   * render.
    *
-   * In the future the `@storybook/theming` and `@storybook/components` can be removed, as they should be singletons in the future due to the peerDependency on `storybook` package.
+   * In the future the `@storybook/theming` and `@storybook/components` can be removed, as they
+   * should be singletons in the future due to the peerDependency on `storybook` package.
    */
   const cliPath = dirname(require.resolve('storybook/package.json'));
   const themingPath = join(cliPath, 'core', 'theming', 'index.js');
@@ -193,10 +195,14 @@ export const viteFinal = async (config: any, options: Options) => {
           ...(isAbsolute(reactDom) && { 'react-dom/server': `${reactDom}/server.browser.js` }),
           'react-dom': reactDom,
           '@mdx-js/react': mdx,
-          /** Add aliases for `@storybook/addon-docs` & `@storybook/blocks`
-           * These must be singletons to avoid multiple instances of react & emotion being loaded, both would cause the components to fail to render.
+          /**
+           * Add aliases for `@storybook/addon-docs` & `@storybook/blocks` These must be singletons
+           * to avoid multiple instances of react & emotion being loaded, both would cause the
+           * components to fail to render.
            *
-           * In the future the `@storybook/theming` and `@storybook/components` can be removed, as they should be singletons in the future due to the peerDependency on `storybook` package.
+           * In the future the `@storybook/theming` and `@storybook/components` can be removed, as
+           * they should be singletons in the future due to the peerDependency on `storybook`
+           * package.
            */
           '@storybook/theming/create': themingCreatePath,
           '@storybook/theming': themingPath,
@@ -224,11 +230,10 @@ const webpackX = webpack as any;
 const docsX = docs as any;
 
 /**
- * If the user has not installed react explicitly in their project,
- * the resolvedReact preset will not be set.
- * We then set it here in addon-docs to use addon-docs's react version that always exists.
- * This is just a fallback that never overrides the existing preset,
- * but ensures that there is always a resolved react.
+ * If the user has not installed react explicitly in their project, the resolvedReact preset will
+ * not be set. We then set it here in addon-docs to use addon-docs's react version that always
+ * exists. This is just a fallback that never overrides the existing preset, but ensures that there
+ * is always a resolved react.
  */
 export const resolvedReact = async (existing: any) => ({
   react: existing?.react ?? dirname(require.resolve('react/package.json')),

code/addons/docs/template/stories/docs2/resolved-react.stories.ts

@@ -5,15 +5,18 @@ import * as ReactDomServer from 'react-dom/server';
 import { expect, within } from '@storybook/test';
 
 /**
- * This component is used to display the resolved version of React and its related packages.
- * As long as `@storybook/addon-docs` is installed, `react` and `react-dom` should be available to import from and should resolve to the same version.
+ * This component is used to display the resolved version of React and its related packages. As long
+ * as `@storybook/addon-docs` is installed, `react` and `react-dom` should be available to import
+ * from and should resolve to the same version.
  *
  * The autodocs here ensures that it also works in the generated documentation.
  *
  * - See the [MDX docs](/docs/addons-docs-docs2-resolvedreact--mdx) for how it resolves in MDX.
- * - See the [Story](/story/addons-docs-docs2-resolvedreact--story) for how it resolves in the actual story.
+ * - See the [Story](/story/addons-docs-docs2-resolvedreact--story) for how it resolves in the actual
+ *   story.
  *
- * **Note: There appears to be a bug in the _production_ build of `react-dom`, where it reports version `18.2.0-next-9e3b772b8-20220608` while in fact version `18.2.0` is installed.**
+ * **Note: There appears to be a bug in the _production_ build of `react-dom`, where it reports
+ * version `18.2.0-next-9e3b772b8-20220608` while in fact version `18.2.0` is installed.**
  */
 export default {
   title: 'Docs2/ResolvedReact',

code/addons/docs/template/stories/docspage/basic.stories.ts

@@ -8,24 +8,18 @@ export default {
   parameters: { chromatic: { disable: true } },
 };
 
-/**
- * A basic button
- */
+/** A basic button */
 export const Basic = {
   args: { label: 'Basic' },
 };
 
-/**
- * Won't show up in DocsPage
- */
+/** Won't show up in DocsPage */
 export const Disabled = {
   args: { label: 'Disabled in DocsPage' },
   parameters: { docs: { disable: true } },
 };
 
-/**
- * Another button, just to show multiple stories
- */
+/** Another button, just to show multiple stories */
 export const Another = {
   args: { label: 'Another' },
   parameters: {