Merge pull request #5819 from storybooks/5781-warn-mid-decorators

ADD warning for decorators added "mid-kind"

examples/angular-cli/src/stories/component-with-di/di.component.stories.ts

@@ -9,10 +9,15 @@ storiesOf('Custom|Dependencies', module)
       title: 'Component dependencies',
     },
   }))
-  .addDecorator(withKnobs)
+  .add(
-  .add('inputs and inject dependencies with knobs', () => ({
+    'inputs and inject dependencies with knobs',
+    () => ({
       component: DiComponent,
       props: {
         title: text('title', 'Component dependencies'),
       },
-  }));
+    }),
+    {
+      decorators: [withKnobs],
+    }
+  );

examples/angular-cli/src/stories/custom-pipes.stories.ts

@@ -19,10 +19,15 @@ storiesOf('Custom|Pipes', module)
       field: 'foobar',
     },
   }))
-  .addDecorator(withKnobs)
+  .add(
-  .add('With Knobs', () => ({
+    'With Knobs',
+    () => ({
       component: NameComponent,
       props: {
         field: text('field', 'foobar'),
       },
-  }));
+    }),
+    {
+      decorators: [withKnobs],
+    }
+  );

examples/angular-cli/src/stories/custom-providers.stories.ts

@@ -19,8 +19,9 @@ storiesOf('Custom|Providers', module)
       name: 'Static name',
     },
   }))
-  .addDecorator(withKnobs)
+  .add(
-  .add('With knobs', () => {
+    'With knobs',
+    () => {
       const name = text('name', 'Dynamic knob');
 
       return {
@@ -29,4 +30,8 @@ storiesOf('Custom|Providers', module)
           name,
         },
       };
-  });
+    },
+    {
+      decorators: [withKnobs],
+    }
+  );

examples/angular-cli/src/stories/custom-styles.stories.ts

@@ -24,8 +24,9 @@ storiesOf('Custom|Style', module)
     `,
     ],
   }))
-  .addDecorator(withKnobs)
+  .add(
-  .add('With Knobs', () => ({
+    'With Knobs',
+    () => ({
       template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
       props: {
         text: text('text', 'Button with custom styles'),
@@ -39,4 +40,8 @@ storiesOf('Custom|Style', module)
       }
     `,
       ],
-  }));
+    }),
+    {
+      decorators: [withKnobs],
+    }
+  );

lib/client-api/src/client_api.js

@@ -134,6 +134,7 @@ export default class ClientApi {
 
     const localDecorators = [];
     let localParameters = {};
+    let hasAdded = false;
     const api = {
       kind,
     };
@@ -148,6 +149,7 @@ export default class ClientApi {
     });
 
     api.add = (storyName, storyFn, parameters) => {
+      hasAdded = true;
       const { _globalParameters, _globalDecorators } = this;
       const id = toId(kind, storyName);
 
@@ -215,6 +217,12 @@ export default class ClientApi {
     };
 
     api.addDecorator = decorator => {
+      if (hasAdded) {
+        console.warn(`You have added a decorator to the kind '${kind}' after a story has already been added.
+In Storybook 4 this applied the decorator only to subsequent stories. In Storybook 5+ it applies to all stories.
+This is probably not what you intended. Read more here: https://github.com/storybooks/storybook/blob/master/MIGRATION.md`);
+      }
+
       localDecorators.push(decorator);
       return api;
     };