Merge pull request #25585 from storybookjs/valentin/remove-pass-args-…

…first

Parameters: Remove passArgsFirst flag

code/lib/preview-api/README-store.md

@@ -51,18 +51,12 @@ Changing the args cause the story to be re-rendered with the new set of args.
 
 ### Using args in a story
 
-By default (starting in 6.0) the args will be passed to the story as first argument and the context as second:
+By default the args will be passed to the story as first argument and the context as second:
 
 ```js
 const YourStory = ({ x, y } /*, context*/) => /* render your story using `x` and `y` */
 ```
 
-If you set the `parameters.options.passArgsFirst` option on a story to false, args are passed to a story in the context, preserving the pre-6.0 story API; like parameters, they are available as `context.args`.
-
-```js
-const YourStory = ({ args: { x, y }}) => /* render your story using `x` and `y` */
-```
-
 ### Arg types and values
 
 Arg types are used by the docs addon to populate the props table and are documented there. They are controlled by `argTypes` and can (sometimes) be automatically inferred from type information about the story or the component rendered by the story.

code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts

@@ -107,16 +107,6 @@ describe('prepareStory', () => {
       expect(parameters).toEqual({ __isArgsStory: true });
     });
 
-    it('does not set `__isArgsStory` if `passArgsFirst` is disabled', () => {
-      const { parameters } = prepareStory(
-        { id, name, parameters: { passArgsFirst: false }, moduleExport },
-        { id, title },
-        { render }
-      );
-
-      expect(parameters).toEqual({ passArgsFirst: false, __isArgsStory: false });
-    });
-
     it('does not set `__isArgsStory` if `render` does not take args', () => {
       const { parameters } = prepareStory(
         { id, name, moduleExport },
@@ -417,30 +407,6 @@ describe('prepareStory', () => {
         expect.objectContaining({ args: { one: 'mapped', two: 2, three: 3 } })
       );
     });
-
-    it('passes args as the first argument to the story if `parameters.passArgsFirst` is true', () => {
-      const renderMock = vi.fn();
-      const firstStory = prepareStory(
-        { id, name, args: { a: 1 }, parameters: { passArgsFirst: true }, moduleExport },
-        { id, title },
-        { render: renderMock }
-      );
-
-      firstStory.undecoratedStoryFn({ args: firstStory.initialArgs, ...firstStory } as any);
-      expect(renderMock).toHaveBeenCalledWith(
-        { a: 1 },
-        expect.objectContaining({ args: { a: 1 } })
-      );
-
-      const secondStory = prepareStory(
-        { id, name, args: { a: 1 }, parameters: { passArgsFirst: false }, moduleExport },
-        { id, title },
-        { render: renderMock }
-      );
-
-      secondStory.undecoratedStoryFn({ args: secondStory.initialArgs, ...secondStory } as any);
-      expect(renderMock).toHaveBeenCalledWith(expect.objectContaining({ args: { a: 1 } }));
-    });
   });
 
   describe('storyFn', () => {

code/lib/preview-api/src/modules/store/csf/prepareStory.ts

@@ -4,7 +4,6 @@ import { global } from '@storybook/global';
 import type {
   Args,
   ArgsStoryFn,
-  LegacyStoryFn,
   ModuleExport,
   NormalizedComponentAnnotations,
   NormalizedProjectAnnotations,
@@ -69,12 +68,8 @@ export function prepareStory<TRenderer extends Renderer>(
     return updatedContext;
   };
 
-  const undecoratedStoryFn: LegacyStoryFn<TRenderer> = (context: StoryContext<TRenderer>) => {
-    const { passArgsFirst: renderTimePassArgsFirst = true } = context.parameters;
-    return renderTimePassArgsFirst
-      ? (render as ArgsStoryFn<TRenderer>)(context.args, context)
-      : (render as LegacyStoryFn<TRenderer>)(context);
-  };
+  const undecoratedStoryFn = (context: StoryContext<TRenderer>) =>
+    (render as ArgsStoryFn<TRenderer>)(context.args, context);
 
   // Currently it is only possible to set these globally
   const { applyDecorators = defaultDecorateStory, runStep } = projectAnnotations;
@@ -171,9 +166,7 @@ function preparePartialAnnotations<TRenderer extends Renderer>(
       componentAnnotations.render ||
       projectAnnotations.render;
 
-    const { passArgsFirst = true } = parameters;
-
-    parameters.__isArgsStory = passArgsFirst && render && render.length > 0;
+    parameters.__isArgsStory = render && render.length > 0;
   }
 
   // Pull out args[X] into initialArgs for argTypes enhancers

docs/essentials/toolbars-and-globals.md

@@ -182,29 +182,6 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
 
 <!-- prettier-ignore-end -->
 
-<Callout variant="info" icon="💡">
-
-In Storybook 6.0, if you set the global option `passArgsFirst: false` for backward compatibility, the story context is passed as the first argument:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'react/my-component-story-use-globaltype-backwards-compat.js.mdx',
-    'vue/my-component-story-use-globaltype-backwards-compat.js.mdx',
-    'angular/my-component-story-use-globaltype-backwards-compat.ts.mdx',
-    'svelte/my-component-story-use-globaltype-backwards-compat.js.mdx',
-    'svelte/my-component-story-use-globaltype-backwards-compat.ts.mdx',
-    'web-components/my-component-story-use-globaltype-backwards-compat.js.mdx',
-    'web-components/my-component-story-use-globaltype-backwards-compat.ts.mdx',
-    'solid/my-component-story-use-globaltype-backwards-compat.js.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-</Callout>
-
 ## Consuming globals from within an addon
 
 If you're working on a Storybook addon and need to retrieve globals, you can do so. The `@storybook/manager-api` package provides a hook for this scenario. You can use the [`useGlobals()`](../addons/addons-api.md#useglobals) hook to retrieve any globals you want.

docs/writing-stories/args.md

@@ -277,28 +277,3 @@ If you are [writing an addon](../addons/writing-addons.md) that wants to read or
 <!-- prettier-ignore-end -->
 
 </details>
-
-<details>
-<summary>parameters.passArgsFirst</summary>
-
-In Storybook 6+, we pass the args as the first argument to the story function. The second argument is the “context”, which includes story parameters, globals, argTypes, and other information.
-
-In Storybook 5 and before we passed the context as the first argument. If you’d like to revert to that functionality set the `parameters.passArgsFirst` parameter in [`.storybook/preview.js`](../configure/index.md#configure-story-rendering):
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-preview-parameters-old-format.js.mdx',
-    'common/storybook-preview-parameters-old-format.ts.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-<Callout variant="info" icon="💡">
-
-Note that `args` is still available as a key in the context.
-
-</Callout>
-</details>