Merge pull request #19650 from storybookjs/norbert/sb-803-resolve-add…

…on-actions-deprecations

move the actions decorator into it's own entrypoint

MIGRATION.md

@@ -3,6 +3,7 @@
 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
   - [Alpha release notes](#alpha-release-notes)
   - [7.0 breaking changes](#70-breaking-changes)
+    - [removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator)
     - [register.js removed](#registerjs-removed)
     - [Change of root html IDs](#change-of-root-html-ids)
     - [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
@@ -39,6 +40,7 @@
     - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
   - [7.0 Deprecations](#70-deprecations)
     - [`Story` type deprecated](#story-type-deprecated)
+    - [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated)
 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
   - [Vue 3 upgrade](#vue-3-upgrade)
   - [React18 new root API](#react18-new-root-api)
@@ -251,6 +253,32 @@ In the meantime, these migration notes are the best available documentation on t
 
 ### 7.0 breaking changes
 
+#### removed auto injection of @storybook/addon-actions decorator
+
+The `withActions` decorator is no longer automatically added to stories. This is because it is really only used in the html renderer, for all other renderers it's redundant.
+If you are using the html renderer and use the `handles` parameter, you'll need to manually add the `withActions` decorator:
+
+```diff
+import globalThis from 'global';
++import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  component: globalThis.Components.Button,
+  args: {
+    label: 'Click Me!',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+export const Basic = {
+  parameters: {
+    handles: [{ click: 'clicked', contextmenu: 'right clicked' }],
+  },
++  decorators: [withActions],
+};
+```
+
 #### register.js removed
 
 In SB 6.x and earlier, addons exported a `register.js` entry point by convention, and users would import this in `.storybook/manager.js`. This was [deprecated in SB 6.5](#deprecated-registerjs)

code/addons/actions/package.json

@@ -27,6 +27,11 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
+    "./decorator": {
+      "require": "./dist/decorator.js",
+      "import": "./dist/decorator.mjs",
+      "types": "./dist/decorator.d.ts"
+    },
     "./manager": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
@@ -73,7 +78,6 @@
     "react-inspector": "^6.0.0",
     "telejson": "^6.0.8",
     "ts-dedent": "^2.0.0",
-    "util-deprecate": "^1.0.2",
     "uuid-browser": "^3.1.0"
   },
   "devDependencies": {
@@ -98,6 +102,7 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
+      "./src/decorator.ts",
       "./src/manager.tsx",
       "./src/preview.ts"
     ]

code/addons/actions/src/addArgs.ts

@@ -1,3 +1,7 @@
+import type { ArgsEnhancer } from '@storybook/types';
 import { addActionsFromArgTypes, inferActionsFromArgTypesRegex } from './addArgsHelpers';
 
-export const argsEnhancers = [addActionsFromArgTypes, inferActionsFromArgTypesRegex];
+export const argsEnhancers: ArgsEnhancer[] = [
+  addActionsFromArgTypes,
+  inferActionsFromArgTypesRegex,
+];

code/addons/actions/src/decorator.ts

@@ -0,0 +1,65 @@
+import global from 'global';
+import { useEffect, makeDecorator } from '@storybook/addons';
+import { actions } from './runtime/actions';
+
+import { PARAM_KEY } from './constants';
+
+const { document, Element } = global;
+
+const delegateEventSplitter = /^(\S+)\s*(.*)$/;
+
+const isIE = Element != null && !Element.prototype.matches;
+const matchesMethod = isIE ? 'msMatchesSelector' : 'matches';
+
+const hasMatchInAncestry = (element: any, selector: any): boolean => {
+  if (element[matchesMethod](selector)) {
+    return true;
+  }
+  const parent = element.parentElement;
+  if (!parent) {
+    return false;
+  }
+  return hasMatchInAncestry(parent, selector);
+};
+
+const createHandlers = (actionsFn: (...arg: any[]) => object, ...handles: any[]) => {
+  const actionsObject = actionsFn(...handles);
+  return Object.entries(actionsObject).map(([key, action]) => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const [_, eventName, selector] = key.match(delegateEventSplitter) || [];
+    return {
+      eventName,
+      handler: (e: { target: any }) => {
+        if (!selector || hasMatchInAncestry(e.target, selector)) {
+          action(e);
+        }
+      },
+    };
+  });
+};
+
+const applyEventHandlers = (actionsFn: any, ...handles: any[]) => {
+  const root = document && document.getElementById('storybook-root');
+  useEffect(() => {
+    if (root != null) {
+      const handlers = createHandlers(actionsFn, ...handles);
+      handlers.forEach(({ eventName, handler }) => root.addEventListener(eventName, handler));
+      return () =>
+        handlers.forEach(({ eventName, handler }) => root.removeEventListener(eventName, handler));
+    }
+    return undefined;
+  }, [root, actionsFn, handles]);
+};
+
+export const withActions = makeDecorator({
+  name: 'withActions',
+  parameterName: PARAM_KEY,
+  skipIfNoParametersOrOptions: true,
+  wrapper: (getStory, context, { parameters }) => {
+    if (parameters?.handles) {
+      applyEventHandlers(actions, ...parameters.handles);
+    }
+
+    return getStory(context);
+  },
+});

code/addons/actions/src/preview.ts

@@ -1,2 +1 @@
-export * from './addDecorator';
 export * from './addArgs';

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

@@ -1,5 +1,3 @@
 export * from './action';
 export * from './actions';
 export * from './configureActions';
-export * from './decorateAction';
-export * from './withActions';

code/addons/actions/template/stories/parameters.stories.ts

@@ -1,4 +1,5 @@
 import globalThis from 'global';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
   component: globalThis.Components.Button,
@@ -14,4 +15,5 @@ export const Basic = {
   parameters: {
     handles: [{ click: 'clicked', contextmenu: 'right clicked' }],
   },
+  decorators: [withActions],
 };

code/yarn.lock

@@ -5428,7 +5428,6 @@ __metadata:
     telejson: ^6.0.8
     ts-dedent: ^2.0.0
     typescript: ~4.6.3
-    util-deprecate: ^1.0.2
     uuid-browser: ^3.1.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0

docs/snippets/common/button-story-action-event-handle.js.mdx

@@ -2,6 +2,7 @@
 // Button.stories.js|jsx|ts|tsx
 
 import { Button } from './Button';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
   /* 👇 The title prop is optional.
@@ -15,5 +16,6 @@ export default {
       handles: ['mouseover', 'click .btn'],
     },
   },
+  decorators: [withActions]
 };
 ```

docs/snippets/common/button-story-action-event-handle.mdx.mdx

@@ -2,6 +2,7 @@
 <!-- Button.stories.mdx -->
 
 import { Meta } from '@storybook/addon-docs';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 import { Button } from './Button';
 
@@ -12,5 +13,6 @@ import { Button } from './Button';
       handles: ['mouseover', 'click .btn'],
     },
   }} 
-  component={Button}/>
+  component={Button}
+  decorators={[withActions]}/>
 ```