Merge pull request #28886 from storybookjs/norbert/linting-part3

Linting: Jsdoc & Bracket style consistency

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: {