Halt interactions in storybook inspector

thefrontside · Mar 21, 2022 · 347226b · 347226b
1 parent 5173d46
commit 347226b
Show file tree

Hide file tree

Showing 8 changed files with 864 additions and 742 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -33,7 +33,7 @@
     "prepack:commonjs": "tsc --project ./tsconfig.build.json --outdir dist/cjs --module commonjs"
   },
   "dependencies": {
-    "@effection/core": "2.2.0",
+    "@effection/core": "^2.2.0",
     "@interactors/globals": "1.0.0-rc1.1",
     "@testing-library/dom": "^8.5.0",
     "@testing-library/user-event": "^13.2.1",

diff --git a/packages/globals/package.json b/packages/globals/package.json
@@ -39,6 +39,6 @@
     "yarn": "1.22.11"
   },
   "dependencies": {
-    "@effection/core": "2.2.0"
+    "@effection/core": "^2.2.0"
   }
 }
diff --git a/packages/material-ui/.storybook/main.js b/packages/material-ui/.storybook/main.js
@@ -3,4 +3,5 @@ module.exports = {
   addons: ["@storybook/addon-postcss", "@storybook/addon-essentials"],
   features: { previewCsfV3: true },
   core: { builder: "webpack5" },
+  typescript: { reactDocgen: false },
 };
diff --git a/packages/material-ui/.storybook/preview.tsx b/packages/material-ui/.storybook/preview.tsx
@@ -0,0 +1,40 @@
+import { instrument } from "@storybook/instrumenter";
+import { addInteractionWrapper, globals, setInteractorScope } from "@interactors/globals";
+
+// NOTE: Dummy call to initialize instrumenter. See: https://github.com/storybookjs/storybook/blob/next/lib/instrumenter/src/instrumenter.ts#L512
+instrument({});
+
+let isRoot = true;
+
+addInteractionWrapper((interaction, next) => {
+  if (!isRoot) {
+    return next;
+  }
+  return async () => {
+    const cancel = (event) => {
+      if (!event.newPhase || event.newPhase == "aborted" || event.newPhase == "errored") {
+        __STORYBOOK_ADDONS_CHANNEL__.off("forceRemount", cancel);
+        __STORYBOOK_ADDONS_CHANNEL__.off("storyRenderPhaseChanged", cancel);
+        interaction.catchHalt();
+        interaction.halt();
+        isRoot = true;
+      }
+    };
+    __STORYBOOK_ADDONS_CHANNEL__.on("forceRemount", cancel);
+    __STORYBOOK_ADDONS_CHANNEL__.on("storyRenderPhaseChanged", cancel);
+    try {
+      return await global.window.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__.track(
+        interaction.options.code(),
+        next,
+        [],
+        {
+          intercept: () => !(isRoot = false),
+        }
+      );
+    } finally {
+      isRoot = true;
+      __STORYBOOK_ADDONS_CHANNEL__.off("forceRemount", cancel);
+      __STORYBOOK_ADDONS_CHANNEL__.off("storyRenderPhaseChanged", cancel);
+    }
+  };
+});
diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
@@ -43,12 +43,13 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/pickers": "^3.3.10",
     "@material-ui/styles": "^4.11.4",
-    "@storybook/addon-docs": "6.4.0-alpha.30",
-    "@storybook/addon-essentials": "6.4.0-alpha.30",
+    "@storybook/addon-docs": "6.4.19",
+    "@storybook/addon-essentials": "6.4.19",
+    "@storybook/addon-interactions": "^6.4.19",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "6.4.0-alpha.30",
-    "@storybook/manager-webpack5": "6.4.0-alpha.30",
-    "@storybook/react": "6.4.0-alpha.30",
+    "@storybook/builder-webpack5": "6.4.19",
+    "@storybook/manager-webpack5": "6.4.19",
+    "@storybook/react": "6.4.19",
     "@testing-library/react": "^12.0.0",
     "@types/react": "^17.0.19",
     "bigtest": "^0.16.0",
@@ -64,6 +65,7 @@
     "webpack": "^5.53.0"
   },
   "dependencies": {
+    "effection": "^2.0.4",
     "@interactors/html": "1.0.0-rc1.2"
   }
 }
diff --git a/packages/material-ui/src/checkbox.ts b/packages/material-ui/src/checkbox.ts
@@ -18,7 +18,7 @@ const CheckboxInteractor = BaseCheckbox.extend("MUICheckbox")
     },
   })
   .actions({
-    click: ({ perform }) =>
+    click: async ({ perform }) =>
       perform((element) => {
         element.focus();
         click(element);

diff --git a/packages/material-ui/stories/interactors.stories.tsx b/packages/material-ui/stories/interactors.stories.tsx
@@ -151,17 +151,17 @@ export const Checkbox: ComponentStory<typeof CheckboxLabels> = {
   render: () => <CheckboxLabels />,
   async play(): Promise<void> {
     await CheckboxInteractor("Secondary").click();
-    await delay(500);
+    // await delay(500);
     await CheckboxInteractor("Primary").click();
-    await delay(500);
+    // await delay(500);
     await CheckboxInteractor("Uncontrolled").click();
-    await delay(500);
+    // await delay(500);
     await CheckboxInteractor("Indeterminate").click();
-    await delay(500);
+    // await delay(500);
     await CheckboxInteractor("Custom color").click();
-    await delay(500);
+    // await delay(500);
     await CheckboxInteractor("Custom icon").click();
-    await delay(500);
+    // await delay(500);
     await CheckboxInteractor("Custom size").click();
   },
   parameters: {