creevey 0.9.0-non-webpack.2.fix-capture-element → 0.9.0

package/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package/CHANGELOG.md

@@ -1,3 +1,54 @@
+# [0.9.0-beta.5](https://github.com/wKich/creevey/compare/v0.9.0-beta.4...v0.9.0-beta.5) (2023-04-14)
+
+# [0.9.0-beta.4](https://github.com/wKich/creevey/compare/v0.9.0-beta.3...v0.9.0-beta.4) (2023-03-24)
+
+# [0.9.0-beta.3](https://github.com/wKich/creevey/compare/v0.8.0...v0.9.0-beta.3) (2023-03-24)
+
+### Features
+
+- hybrid stories provider ([89d9c73](https://github.com/wKich/creevey/commit/89d9c7357369dffb320ea06fe158b4113f57034c))
+
+## [0.8.1](https://github.com/wKich/creevey/compare/v0.8.1-beta.1...v0.8.1) (2023-05-29)
+
+## [0.8.1-beta.1](https://github.com/wKich/creevey/compare/v0.8.1-beta.0...v0.8.1-beta.1) (2023-05-05)
+
+### Bug Fixes
+
+- **providers:** set creevey port for all providers ([79e8aae](https://github.com/wKich/creevey/commit/79e8aae629d79260f93a93057486bab659801a46))
+
+## [0.8.1-beta.0](https://github.com/wKich/creevey/compare/v0.8.0...v0.8.1-beta.0) (2023-04-11)
+
+### Bug Fixes
+
+- **addon:** make bundlers to load esm version of addon ([f2937ca](https://github.com/wKich/creevey/commit/f2937caccca158e68c8be45d0882ec9b62eb05b2))
+
+# [0.8.0](https://github.com/wKich/creevey/compare/v0.8.0-beta.1...v0.8.0) (2023-03-07)
+
+### Bug Fixes
+
+- drop support of SkipOption on root skip level ([31be1bf](https://github.com/wKich/creevey/commit/31be1bf4d67f464ea6790e6e218ca75674366711))
+
+# [0.8.0-beta.1](https://github.com/wKich/creevey/compare/v0.8.0-beta.0...v0.8.0-beta.1) (2023-01-18)
+
+### Bug Fixes
+
+- **addon:** restore IE11 support ([94f452f](https://github.com/wKich/creevey/commit/94f452fff4225e974c9efdff21f982d5155de4f8))
+- allow setting timeouts via capabilities ([72de9e5](https://github.com/wKich/creevey/commit/72de9e50b818587309f665c782637ae43c3e4864))
+- infinite UI loading ([4f7b47d](https://github.com/wKich/creevey/commit/4f7b47db3ff1274217b044ce608e34d22148fe32))
+- **addon:** restore and move ie11 support to separate addon ([3ba2cc7](https://github.com/wKich/creevey/commit/3ba2cc7fde281037406f1705c0abc616c576e641))
+- browser-node regexp parameters transfering ([737670e](https://github.com/wKich/creevey/commit/737670e18aa5d0ce416fe12b765406116b453e31))
+- correct call of the test fn ([98c03ad](https://github.com/wKich/creevey/commit/98c03ad1700486bfd75170f4517970717250f6d8))
+- handle null from selectStory ([1895602](https://github.com/wKich/creevey/commit/1895602143b3236ab195e11fcfa162df2a01af03))
+- ie11 support ([523e35b](https://github.com/wKich/creevey/commit/523e35b6950d978ca3aaa77dd4f072a835053687))
+- move addon to the separate entry point ([f3fc59f](https://github.com/wKich/creevey/commit/f3fc59f980a56f87f882507c3a0367ed6a356d33))
+- prevent importing browser-specific code to node ([37706ef](https://github.com/wKich/creevey/commit/37706efbb49dd5bd1d6ec06821fac52480a0e132))
+- **selenium-webdriver:** bump [@types](https://github.com/types) package version ([ca4b369](https://github.com/wKich/creevey/commit/ca4b369046e2c56e0548f5cbb6f98c17b0125228))
+
+### Features
+
+- 🎸 add support `play()` story method ([318ac62](https://github.com/wKich/creevey/commit/318ac628cb14fb0de7a89c088ae241df520df1e7))
+- drop support for storybook < 6.4 ([fb8c0f5](https://github.com/wKich/creevey/commit/fb8c0f5158ab7c0495949eaa61ba52049c3d66cf))
+
 # [0.8.0-beta.0](https://github.com/wKich/creevey/compare/v0.7.39...v0.8.0-beta.0) (2022-03-17)
 
 ### Bug Fixes

package/README.md

@@ -1,4 +1,4 @@
-# 📸+👦🏼 [Creevey](https://harrypotter.fandom.com/wiki/Colin_Creevey)
+[<img width="274" alt="Creevey" src="https://user-images.githubusercontent.com/4607770/220418756-89cf4f54-ccb7-4086-a74c-a044ea1d2a61.png">](https://harrypotter.fandom.com/wiki/Colin_Creevey)
 
 **IMPORTANT** _Looking for any help with maintaining_
 
@@ -40,6 +40,7 @@ It named after [Colin Creevey](https://harrypotter.fandom.com/wiki/Colin_Creevey
 ## Pre-requisites
 
 - Make sure you have installed [Docker](https://www.docker.com/products/docker-desktop). But if you going to use your own separate Selenium Grid, you don't need `Docker`.
+- Supported Storybook versions: `^6.4.0`.
 
 ## How to start
 
@@ -75,7 +76,7 @@ And that's it.
 
 **NOTE:** In first run you may noticed, that all your tests are failing, it because you don't have source screenshot images yet. If you think, that all images are acceptable, you may approve them all in one command `yarn creevey --update`.
 
-**NOTE:** Creevey captures screenshot of the `#root` element and sometimes you need to capture a whole browser viewport. To achieve this you could define `captureElement` Creevey parameter for story or kind. Or you may pass any different css selector.
+**NOTE:** Creevey captures screenshot of the `#storybook-root` element and sometimes you need to capture a whole browser viewport. To achieve this you could define `captureElement` Creevey parameter for story or kind. Or you may pass any different css selector.
 
 ```tsx
 // stories/MyModal.stories.tsx
@@ -141,7 +142,7 @@ This cause to flaky screenshots. Possible solutions:
 
 Because tests defined in story parameters and `selenium-webdriver` depends on nodejs builtin packages. Storybook may fail to build browser bundle. To avoid import use these workarounds:
 
-- `.findElement(By.css('#root'))` -> `.findElement({ css: '#root' })`
+- `.findElement(By.css('#storybook-root'))` -> `.findElement({ css: '#storybook-root' })`
 - `.sendKeys(Keys.ENTER)` -> `.sendKeys(this.keys.ENTER)`
 
 ## Used by

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import './creevey.js';

package/dist/cli.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./creevey.js");
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";;;AAEA,wBAAsB"}

package/dist/client/addon/components/Addon.d.ts

@@ -0,0 +1,8 @@
+import { CreeveyController } from '../controller.js';
+interface AddonProps {
+    active?: boolean;
+    browser: string;
+    controller: CreeveyController;
+}
+export declare const Addon: ({ active, browser, controller }: AddonProps) => JSX.Element | null;
+export {};

package/dist/client/addon/components/Addon.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Addon = void 0;
+const react_1 = __importStar(require("react"));
+const components_1 = require("@storybook/components");
+const Panel_js_1 = require("./Panel.js");
+const Addon = ({ active, browser, controller }) => {
+    const [tests, setTests] = (0, react_1.useState)([]);
+    const [selectedTestId, setSelectedTestId] = (0, react_1.useState)(controller.selectedTestId);
+    (0, react_1.useEffect)(() => {
+        if (active) {
+            controller.setActiveBrowser(browser);
+            const browserTests = controller.getTestsByStoryIdAndBrowser(controller.activeBrowser);
+            setTests(browserTests);
+        }
+    }, [active, browser, controller]);
+    (0, react_1.useEffect)(() => {
+        const unsubscribe = controller.onChangeTest((testId) => {
+            setSelectedTestId(testId);
+            const status = controller.getTestsByStoryIdAndBrowser(controller.activeBrowser);
+            setTests(status);
+        });
+        return unsubscribe;
+    }, [controller]);
+    (0, react_1.useEffect)(() => {
+        const unsubscribe = controller.onUpdateStatus(() => {
+            setTests(controller.getTestsByStoryIdAndBrowser(controller.activeBrowser));
+        });
+        return unsubscribe;
+    }, [controller, browser]);
+    return active ? (tests.length ? (react_1.default.createElement(Panel_js_1.Panel, { tests: tests, selectedTestId: selectedTestId, onChangeTest: controller.setSelectedTestId, onImageApprove: controller.onImageApprove })) : (react_1.default.createElement(components_1.Placeholder, null, "No test results"))) : null;
+};
+exports.Addon = Addon;
+//# sourceMappingURL=Addon.js.map

package/dist/client/addon/components/Addon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Addon.js","sourceRoot":"","sources":["../../../../src/client/addon/components/Addon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,sDAAoD;AAEpD,yCAAmC;AAQ5B,MAAM,KAAK,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAc,EAAsB,EAAE;IACvF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAa,EAAE,CAAC,CAAC;IAEnD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IAEhF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,CAAC;YACX,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;YACrC,MAAM,YAAY,GAAG,UAAU,CAAC,2BAA2B,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;YACtF,QAAQ,CAAC,YAAY,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAElC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC,MAAM,EAAE,EAAE;YACrD,iBAAiB,CAAC,MAAM,CAAC,CAAC;YAC1B,MAAM,MAAM,GAAG,UAAU,CAAC,2BAA2B,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;YAChF,QAAQ,CAAC,MAAM,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;QACH,OAAO,WAAW,CAAC;IACrB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,UAAU,CAAC,cAAc,CAAC,GAAG,EAAE;YACjD,QAAQ,CAAC,UAAU,CAAC,2BAA2B,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC;QAC7E,CAAC,CAAC,CAAC;QACH,OAAO,WAAW,CAAC;IACrB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAE1B,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACb,8BAAC,gBAAK,IACJ,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,UAAU,CAAC,iBAAiB,EAC1C,cAAc,EAAE,UAAU,CAAC,cAAc,GACzC,CACH,CAAC,CAAC,CAAC,CACF,8BAAC,wBAAW,0BAA8B,CAC3C,CACF,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAzCW,QAAA,KAAK,SAyChB"}

package/{lib/types → dist}/client/addon/components/Icons.d.ts

@@ -1,7 +1,7 @@
-interface IconProps {
-    width?: number;
-    height?: number;
-}
-export declare const NextIcon: ({ width, height }: IconProps) => JSX.Element;
-export declare const ForwardIcon: ({ width, height }: IconProps) => JSX.Element;
-export {};
+interface IconProps {
+    width?: number;
+    height?: number;
+}
+export declare const NextIcon: ({ width, height }: IconProps) => JSX.Element;
+export declare const ForwardIcon: ({ width, height }: IconProps) => JSX.Element;
+export {};

package/dist/client/addon/components/Icons.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ForwardIcon = exports.NextIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const NextIcon = ({ width, height }) => {
+    return (react_1.default.createElement("svg", { version: "1.1", width: width, height: height, viewBox: "0 0 306 306" },
+        react_1.default.createElement("path", { d: "M0,306l216.75-153L0,0V306z M255,0v306h51V0H255z", fill: "currentColor" })));
+};
+exports.NextIcon = NextIcon;
+const ForwardIcon = ({ width, height }) => {
+    return (react_1.default.createElement("svg", { version: "1.1", width: width, height: height, viewBox: "0 0 512 512" },
+        react_1.default.createElement("path", { fill: "currentColor", d: "M460.9,246.8l-209-164.2c-7.8-6.1-19.2-0.6-19.2,9.2v328.4c0,9.8,11.4,15.3,19.2,9.2l209-164.2c5.1-4,6-11.4,2-16.5\n\t\tC462.4,248,461.7,247.3,460.9,246.8L460.9,246.8z M228.2,246.8L19.2,82.5C11.4,76.4,0,82,0,91.8v328.4c0,9.8,11.4,15.3,19.2,9.2\n\t\tl209-164.2c3-2.3,4.5-5.8,4.5-9.2C232.7,252.6,231.2,249.1,228.2,246.8z M507.3,64h-37.2c-2.5,0-4.7,2-4.7,4.4v375.3\n\t\tc0,2.4,2.1,4.4,4.7,4.4h37.2c2.5,0,4.7-2,4.7-4.4V68.4C512,66,509.9,64,507.3,64z" })));
+};
+exports.ForwardIcon = ForwardIcon;
+//# sourceMappingURL=Icons.js.map

package/dist/client/addon/components/Icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.js","sourceRoot":"","sources":["../../../../src/client/addon/components/Icons.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAOnB,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAa,EAAe,EAAE;IACpE,OAAO,CACL,uCAAK,OAAO,EAAC,KAAK,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,aAAa;QACpE,wCAAM,CAAC,EAAC,iDAAiD,EAAC,IAAI,EAAC,cAAc,GAAG,CAC5E,CACP,CAAC;AACJ,CAAC,CAAC;AANW,QAAA,QAAQ,YAMnB;AAEK,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAa,EAAe,EAAE;IACvE,OAAO,CACL,uCAAK,OAAO,EAAC,KAAK,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,aAAa;QACpE,wCACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,4bAGuE,GACzE,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,WAAW,eAYtB"}

package/{lib/types → dist}/client/addon/components/Panel.d.ts

@@ -1,9 +1,9 @@
-import { TestData } from '../../../types';
-interface PanelProps {
-    tests: TestData[];
-    selectedTestId: string;
-    onChangeTest: (testId: string) => void;
-    onImageApprove: (id: string, retry: number, image: string) => void;
-}
-export declare const Panel: ({ tests, selectedTestId, onChangeTest, onImageApprove }: PanelProps) => JSX.Element;
-export {};
+import { TestData } from '../../../types.js';
+interface PanelProps {
+    tests: TestData[];
+    selectedTestId: string;
+    onChangeTest: (testId: string) => void;
+    onImageApprove: (id: string, retry: number, image: string) => void;
+}
+export declare const Panel: ({ tests, selectedTestId, onChangeTest, onImageApprove }: PanelProps) => JSX.Element;
+export {};

package/dist/client/addon/components/Panel.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Panel = void 0;
+const react_1 = __importDefault(require("react"));
+const components_1 = require("@storybook/components");
+const theming_1 = require("@storybook/theming");
+const ResultsPage_js_1 = require("../../shared/components/ResultsPage.js");
+const helpers_js_1 = require("../../shared/helpers.js");
+const TestSelect_js_1 = __importDefault(require("./TestSelect.js"));
+const Wrapper = theming_1.styled.div(({ isRunning }) => ({
+    opacity: isRunning ? 0.5 : 1,
+    height: '100%',
+}));
+const TestSelectContainer = theming_1.styled.div(({ theme }) => ({
+    padding: '8px',
+    border: `1px solid ${theme.appBorderColor}`,
+}));
+const Panel = ({ tests, selectedTestId, onChangeTest, onImageApprove }) => {
+    const result = tests.find((x) => x.id === selectedTestId);
+    const isRunning = result?.status === 'running';
+    return (react_1.default.createElement("div", null,
+        tests.length > 1 && (react_1.default.createElement(TestSelectContainer, null,
+            react_1.default.createElement(TestSelect_js_1.default, { tests: tests, selectedTestId: selectedTestId, onChangeTest: onChangeTest }))),
+        isRunning && react_1.default.createElement(components_1.Loader, null),
+        result?.results?.length ? (react_1.default.createElement(Wrapper, { isRunning: isRunning },
+            react_1.default.createElement(ResultsPage_js_1.ResultsPage, { height: '100%', key: `${result.id}_${result.results.length}`, id: result.id, path: (0, helpers_js_1.getTestPath)(result), results: result.results, approved: result.approved, onImageApprove: onImageApprove }))) : null));
+};
+exports.Panel = Panel;
+//# sourceMappingURL=Panel.js.map

package/dist/client/addon/components/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../../src/client/addon/components/Panel.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,sDAA+C;AAC/C,gDAA4C;AAE5C,2EAAqE;AACrE,wDAAsD;AACtD,oEAAyC;AAQzC,MAAM,OAAO,GAAG,gBAAM,CAAC,GAAG,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;IACrE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC5B,MAAM,EAAE,MAAM;CACf,CAAC,CAAC,CAAC;AAEJ,MAAM,mBAAmB,GAAG,gBAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACrD,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,aAAa,KAAK,CAAC,cAAc,EAAE;CAC5C,CAAC,CAAC,CAAC;AAEG,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAc,EAAe,EAAE;IACxG,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,cAAc,CAAC,CAAC;IAE1D,MAAM,SAAS,GAAG,MAAM,EAAE,MAAM,KAAK,SAAS,CAAC;IAE/C,OAAO,CACL;QACG,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACnB,8BAAC,mBAAmB;YAClB,8BAAC,uBAAU,IAAC,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,GAAI,CACpE,CACvB;QACA,SAAS,IAAI,8BAAC,mBAAM,OAAG;QACvB,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CACzB,8BAAC,OAAO,IAAC,SAAS,EAAE,SAAS;YAC3B,8BAAC,4BAAW,IACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,MAAM,CAAC,EAAE,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,EAC5C,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,IAAI,EAAE,IAAA,wBAAW,EAAC,MAAM,CAAC,EACzB,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,cAAc,EAAE,cAAc,GAC9B,CACM,CACX,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;AACJ,CAAC,CAAC;AA5BW,QAAA,KAAK,SA4BhB"}

package/{lib/types → dist}/client/addon/components/TestSelect.d.ts

@@ -1,8 +1,8 @@
-import { TestData } from '../../../types';
-interface TestSelectProps {
-    tests: TestData[];
-    selectedTestId: string;
-    onChangeTest: (testId: string) => void;
-}
-export default function TestSelect(props: TestSelectProps): JSX.Element;
-export {};
+import { TestData } from '../../../types.js';
+interface TestSelectProps {
+    tests: TestData[];
+    selectedTestId: string;
+    onChangeTest: (testId: string) => void;
+}
+export default function TestSelect(props: TestSelectProps): JSX.Element;
+export {};

package/dist/client/addon/components/TestSelect.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TestSelect;
+const react_1 = __importDefault(require("react"));
+const components_1 = require("@storybook/components");
+const theming_1 = require("@storybook/theming");
+const utils_js_1 = require("../utils.js");
+const LinkIconContainer = theming_1.styled.span(({ theme }) => ({
+    display: 'inline-block',
+    width: '20px',
+    color: theme.color.defaultText,
+    textAlign: 'center',
+}));
+function TestSelect(props) {
+    const testName = props.tests.find((x) => x.id === props.selectedTestId)?.testName ?? '';
+    return (react_1.default.createElement(components_1.WithTooltip, { trigger: "click", placement: "bottom", closeOnClick: true, tooltip: ({ onHide }) => (react_1.default.createElement(components_1.TooltipLinkList, { links: props.tests.map((x) => ({
+                id: x.id,
+                title: x.testName ?? '',
+                active: props.selectedTestId === x.id,
+                onClick: () => {
+                    props.onChangeTest(x.id);
+                    onHide();
+                },
+                left: react_1.default.createElement(LinkIconContainer, null, (0, utils_js_1.getEmojiByTestStatus)(x.status, x.skip)),
+            })) })) },
+        react_1.default.createElement(components_1.Button, { outline: true, small: true },
+            react_1.default.createElement(components_1.Icons, { icon: "menu" }),
+            testName)));
+}
+//# sourceMappingURL=TestSelect.js.map

package/dist/client/addon/components/TestSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestSelect.js","sourceRoot":"","sources":["../../../../src/client/addon/components/TestSelect.tsx"],"names":[],"mappings":";;;;;AAmBA,6BA4BC;AA/CD,kDAA0B;AAC1B,sDAAoF;AACpF,gDAA4C;AAE5C,0CAAmD;AAQnD,MAAM,iBAAiB,GAAG,gBAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACpD,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW;IAC9B,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC,CAAC;AAEJ,SAAwB,UAAU,CAAC,KAAsB;IACvD,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,cAAc,CAAC,EAAE,QAAQ,IAAI,EAAE,CAAC;IACxF,OAAO,CACL,8BAAC,wBAAW,IACV,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,QAAQ,EAClB,YAAY,QACZ,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACvB,8BAAC,4BAAe,IACd,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;gBAC7B,EAAE,EAAE,CAAC,CAAC,EAAE;gBACR,KAAK,EAAE,CAAC,CAAC,QAAQ,IAAI,EAAE;gBACvB,MAAM,EAAE,KAAK,CAAC,cAAc,KAAK,CAAC,CAAC,EAAE;gBACrC,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;oBACzB,MAAM,EAAE,CAAC;gBACX,CAAC;gBACD,IAAI,EAAE,8BAAC,iBAAiB,QAAE,IAAA,+BAAoB,EAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAqB;aACtF,CAAC,CAAC,GACH,CACH;QAED,8BAAC,mBAAM,IAAC,OAAO,QAAC,KAAK;YACnB,8BAAC,kBAAK,IAAC,IAAI,EAAC,MAAM,GAAG;YACpB,QAAQ,CACF,CACG,CACf,CAAC;AACJ,CAAC"}

package/dist/client/addon/components/Tools.d.ts

@@ -0,0 +1,6 @@
+import { CreeveyController } from '../controller.js';
+interface ToolsProps {
+    controller: CreeveyController;
+}
+export declare const Tools: ({ controller }: ToolsProps) => JSX.Element | null;
+export {};

package/dist/client/addon/components/Tools.js

@@ -0,0 +1,89 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tools = void 0;
+const react_1 = __importStar(require("react"));
+const qs_1 = require("qs");
+const components_1 = require("@storybook/components");
+const theming_1 = require("@storybook/theming");
+const Icons_js_1 = require("./Icons.js");
+const types_js_1 = require("../../../types.js");
+const helpers_js_1 = require("../../shared/helpers.js");
+const Button = (0, theming_1.styled)(components_1.IconButton)({
+    '&:disabled': {
+        opacity: 0.5,
+        cursor: 'default',
+    },
+    '&:disabled:hover': {
+        color: 'inherit',
+    },
+});
+const Tools = ({ controller }) => {
+    const [buttonClicked, setButtonClicked] = (0, react_1.useState)();
+    const [isRunning, setRunning] = (0, react_1.useState)(controller.status.isRunning);
+    const forceUpdate = (0, helpers_js_1.useForceUpdate)();
+    const test = controller.getCurrentTest();
+    (0, react_1.useEffect)(() => {
+        const unsubscribe = controller.onChangeTest(() => {
+            forceUpdate();
+        });
+        return unsubscribe;
+    }, [controller, forceUpdate]);
+    (0, react_1.useEffect)(() => {
+        const unsubscribe = controller.onUpdateStatus(({ isRunning }) => {
+            if ((0, types_js_1.isDefined)(isRunning))
+                setRunning(isRunning);
+        });
+        return unsubscribe;
+    }, [controller]);
+    if (!test)
+        return null;
+    function renderButton(type, title, onClick, icon) {
+        const handleClick = () => {
+            setButtonClicked(type);
+            onClick();
+        };
+        const disabled = isRunning && buttonClicked != null && buttonClicked !== type;
+        return (
+        // @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623
+        react_1.default.createElement(Button, { onClick: () => {
+                if (isRunning)
+                    controller.onStop();
+                else
+                    handleClick();
+            }, title: disabled ? '' : title, disabled: disabled }, buttonClicked === type && isRunning ? react_1.default.createElement(components_1.Icons, { icon: 'stop' }) : icon));
+    }
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(components_1.IconButton, { href: `http://localhost:${__CREEVEY_CLIENT_PORT__ ?? __CREEVEY_SERVER_PORT__ ?? 3000}/?${(0, qs_1.stringify)({
+                testPath: (0, helpers_js_1.getTestPath)(test),
+            })}`, target: "_blank", title: "Show in Creevey UI" },
+            react_1.default.createElement(components_1.Icons, { icon: "sharealt" })),
+        react_1.default.createElement(components_1.Separator, null),
+        renderButton('RunAll', 'Run all', controller.onStartAllTests, react_1.default.createElement(Icons_js_1.ForwardIcon, null)),
+        renderButton('RunStoryTests', 'Run all story tests', controller.onStartAllStoryTests, react_1.default.createElement(Icons_js_1.NextIcon, { width: 15, height: 11 })),
+        renderButton('RunTest', 'Run', controller.onStart, react_1.default.createElement(components_1.Icons, { icon: "play" }))));
+};
+exports.Tools = Tools;
+//# sourceMappingURL=Tools.js.map

package/dist/client/addon/components/Tools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tools.js","sourceRoot":"","sources":["../../../../src/client/addon/components/Tools.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6D;AAC7D,2BAA+B;AAC/B,sDAAqE;AACrE,gDAA4C;AAC5C,yCAAmD;AACnD,gDAAwD;AACxD,wDAAsE;AAOtE,MAAM,MAAM,GAAG,IAAA,gBAAM,EAAC,uBAAU,CAAC,CAAC;IAChC,YAAY,EAAE;QACZ,OAAO,EAAE,GAAG;QACZ,MAAM,EAAE,SAAS;KAClB;IAED,kBAAkB,EAAE;QAClB,KAAK,EAAE,SAAS;KACjB;CACF,CAAC,CAAC;AAII,MAAM,KAAK,GAAG,CAAC,EAAE,UAAU,EAAc,EAAsB,EAAE;IACtE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,GAAqB,CAAC;IACxE,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IACtE,MAAM,WAAW,GAAG,IAAA,2BAAc,GAAE,CAAC;IACrC,MAAM,IAAI,GAAyB,UAAU,CAAC,cAAc,EAAE,CAAC;IAE/D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,UAAU,CAAC,YAAY,CAAC,GAAG,EAAE;YAC/C,WAAW,EAAE,CAAC;QAChB,CAAC,CAAC,CAAC;QACH,OAAO,WAAW,CAAC;IACrB,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAE9B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;YAC9D,IAAI,IAAA,oBAAS,EAAC,SAAS,CAAC;gBAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;QACH,OAAO,WAAW,CAAC;IACrB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,SAAS,YAAY,CAAC,IAAgB,EAAE,KAAa,EAAE,OAAmB,EAAE,IAAiB;QAC3F,MAAM,WAAW,GAAG,GAAS,EAAE;YAC7B,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC;QACF,MAAM,QAAQ,GAAG,SAAS,IAAI,aAAa,IAAI,IAAI,IAAI,aAAa,KAAK,IAAI,CAAC;QAC9E,OAAO;QACL,gFAAgF;QAChF,8BAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,SAAS;oBAAE,UAAU,CAAC,MAAM,EAAE,CAAC;;oBAC9B,WAAW,EAAE,CAAC;YACrB,CAAC,EACD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAC5B,QAAQ,EAAE,QAAQ,IAEjB,aAAa,KAAK,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,8BAAC,kBAAK,IAAC,IAAI,EAAE,MAAM,GAAI,CAAC,CAAC,CAAC,IAAI,CAC9D,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,8BAAC,gBAAQ;QAEP,8BAAC,uBAAU,IACT,IAAI,EAAE,oBAAoB,uBAAuB,IAAI,uBAAuB,IAAI,IAAI,KAAK,IAAA,cAAS,EAAC;gBACjG,QAAQ,EAAE,IAAA,wBAAW,EAAC,IAAI,CAAC;aAC5B,CAAC,EAAE,EACJ,MAAM,EAAC,QAAQ,EACf,KAAK,EAAC,oBAAoB;YAE1B,8BAAC,kBAAK,IAAC,IAAI,EAAC,UAAU,GAAG,CACd;QACb,8BAAC,sBAAS,OAAG;QACZ,YAAY,CAAC,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,8BAAC,sBAAW,OAAG,CAAC;QAC9E,YAAY,CACX,eAAe,EACf,qBAAqB,EACrB,UAAU,CAAC,oBAAoB,EAC/B,8BAAC,mBAAQ,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CACpC;QACA,YAAY,CAAC,SAAS,EAAE,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,8BAAC,kBAAK,IAAC,IAAI,EAAC,MAAM,GAAG,CAAC,CACjE,CACZ,CAAC;AACJ,CAAC,CAAC;AAlEW,QAAA,KAAK,SAkEhB"}

package/{lib/types/client/addon/Manager.d.ts → dist/client/addon/controller.d.ts}

@@ -1,37 +1,38 @@
-import { API } from '@storybook/api';
-import { denormalizeStoryParameters } from '../../shared';
-import { CreeveyStatus, CreeveyUpdate, TestData, TestStatus, StoriesRaw } from '../../types';
-import { CreeveyClientApi } from '../shared/creeveyClientApi';
-export declare class CreeveyManager {
-    storyId: string;
-    activeBrowser: string;
-    selectedTestId: string;
-    status: CreeveyStatus;
-    creeveyApi: CreeveyClientApi | null;
-    storybookApi: API;
-    stories: StoriesRaw;
-    updateStatusListeners: Array<(update: CreeveyUpdate) => void>;
-    changeTestListeners: Array<(testId: string) => void>;
-    constructor(storybookApi: API);
-    initAll: () => Promise<void>;
-    onUpdateStatus(listener: (update: CreeveyUpdate) => void): () => void;
-    onChangeTest(listener: (testId: string) => void): () => void;
-    handleCreeveyUpdate: (update: CreeveyUpdate) => void;
-    getCurrentTest: () => TestData | undefined;
-    onStoryRendered: (storyId: string) => void;
-    onStart: () => void;
-    onStop: () => void;
-    onImageApprove: (id: string, retry: number, image: string) => void;
-    onStartAllStoryTests: () => void;
-    onStartAllTests: () => void;
-    onSetStories: (data: Parameters<typeof denormalizeStoryParameters>['0']) => void;
-    setActiveBrowser: (browser: string) => void;
-    setSelectedTestId: (testId: string) => void;
-    getStoryTests: (storyId: string) => TestData[];
-    getBrowsers: () => string[];
-    getTestsByStoryIdAndBrowser: (browser: string) => TestData[];
-    getTabTitle: (browser: string) => string;
-    setPanelsTitle: () => void;
-    addStatusesToSideBar(): Promise<void>;
-    addStatusToStoryName(name: string, status: TestStatus | undefined, skip: string | boolean): string;
-}
+import { API } from '@storybook/api';
+import { denormalizeStoryParameters } from '../../shared/index.js';
+import { CreeveyStatus, CreeveyUpdate, TestData, TestStatus, StoriesRaw } from '../../types.js';
+import { CreeveyClientApi } from '../shared/creeveyClientApi.js';
+export declare const ADDON_ID = "creevey";
+export declare class CreeveyController {
+    storybookApi: API;
+    storyId: string;
+    activeBrowser: string;
+    selectedTestId: string;
+    status: CreeveyStatus;
+    creeveyApi: CreeveyClientApi | null;
+    stories: StoriesRaw;
+    updateStatusListeners: ((update: CreeveyUpdate) => void)[];
+    changeTestListeners: ((testId: string) => void)[];
+    constructor(storybookApi: API);
+    initAll: () => Promise<void>;
+    onUpdateStatus(listener: (update: CreeveyUpdate) => void): () => void;
+    onChangeTest(listener: (testId: string) => void): () => void;
+    handleCreeveyUpdate: (update: CreeveyUpdate) => void;
+    getCurrentTest: () => TestData | undefined;
+    onStoryRendered: (storyId: string) => void;
+    onStart: () => void;
+    onStop: () => void;
+    onImageApprove: (id: string, retry: number, image: string) => void;
+    onStartAllStoryTests: () => void;
+    onStartAllTests: () => void;
+    onSetStories: (data: Parameters<typeof denormalizeStoryParameters>["0"]) => void;
+    setActiveBrowser: (browser: string) => void;
+    setSelectedTestId: (testId: string) => void;
+    getStoryTests: (storyId: string) => TestData[];
+    getBrowsers: () => string[];
+    getTestsByStoryIdAndBrowser: (browser: string) => TestData[];
+    getTabTitle: (browser: string) => string;
+    setPanelsTitle: () => void;
+    addStatusesToSideBar(): void;
+    addStatusToStoryName(name: string, status: TestStatus | undefined, skip: string | boolean): string;
+}