Merge pull request #16791 from storybookjs/16756-argTypes-storiesOf

Core: Allow args/argTypes/component to be set via parameters for storiesOf back-compat
storybookjs · Nov 26, 2021 · 68c4086 · 68c4086
2 parents 0a03181 + 465a4be
commit 68c4086
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 2 deletions.
diff --git a/lib/client-api/src/ClientApi.ts b/lib/client-api/src/ClientApi.ts
@@ -316,7 +316,7 @@ export class ClientApi<TFramework extends AnyFramework> {
         );
       }
 
-      const { decorators, loaders, ...storyParameters } = parameters;
+      const { decorators, loaders, component, args, argTypes, ...storyParameters } = parameters;
 
       // eslint-disable-next-line no-underscore-dangle
       const storyId = parameters.__id || toId(kind, storyName);
@@ -328,6 +328,9 @@ export class ClientApi<TFramework extends AnyFramework> {
         parameters: { fileName, __id: storyId, ...storyParameters },
         decorators,
         loaders,
+        args,
+        argTypes,
+        component,
         render: storyFn,
       };
       counter += 1;
@@ -358,12 +361,15 @@ Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.m
       return api;
     };
 
-    api.addParameters = (parameters: Parameters) => {
+    api.addParameters = ({ component, args, argTypes, ...parameters }: Parameters) => {
       if (hasAdded)
         throw new Error(`You cannot add parameters after the first story for a kind.
 Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#can-no-longer-add-decoratorsparameters-after-stories`);
 
       meta.parameters = combineParameters(meta.parameters, parameters);
+      if (component) meta.component = component;
+      if (args) meta.args = { ...meta.args, ...args };
+      if (argTypes) meta.argTypes = { ...meta.argTypes, ...argTypes };
       return api;
     };
 

diff --git a/lib/core-client/src/preview/start.test.ts b/lib/core-client/src/preview/start.test.ts
@@ -322,6 +322,43 @@ describe('start', () => {
       );
     });
 
+    it('allows setting compomnent/args/argTypes via a parameter', async () => {
+      const render = jest.fn(({ storyFn }) => storyFn());
+
+      const { configure, clientApi } = start(render);
+
+      const component = {};
+      configure('test', () => {
+        clientApi
+          .storiesOf('Component A', { id: 'file1' } as NodeModule)
+          .addParameters({
+            component,
+            args: { a: 'a' },
+            argTypes: { a: { type: 'string' } },
+          })
+          .add('default', jest.fn(), {
+            args: { b: 'b' },
+            argTypes: { b: { type: 'string' } },
+          });
+      });
+
+      await waitForRender();
+
+      expect(render).toHaveBeenCalledWith(
+        expect.objectContaining({
+          storyContext: expect.objectContaining({
+            component,
+            args: { a: 'a', b: 'b' },
+            argTypes: {
+              a: { name: 'a', type: { name: 'string' } },
+              b: { name: 'b', type: { name: 'string' } },
+            },
+          }),
+        }),
+        undefined
+      );
+    });
+
     it('supports forceRerender()', async () => {
       const render = jest.fn(({ storyFn }) => storyFn());