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

package/dist/types.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noop = noop;
+exports.isDefined = isDefined;
+exports.isTest = isTest;
+exports.isObject = isObject;
+exports.isString = isString;
+exports.isFunction = isFunction;
+exports.isImageError = isImageError;
+exports.isProcessMessage = isProcessMessage;
+exports.isWorkerMessage = isWorkerMessage;
+exports.isStoriesMessage = isStoriesMessage;
+exports.isTestMessage = isTestMessage;
+exports.isWebpackMessage = isWebpackMessage;
+exports.isDockerMessage = isDockerMessage;
+function noop() {
+    /* noop */
+}
+function isDefined(value) {
+    return value !== null && value !== undefined;
+}
+function isTest(x) {
+    return (isDefined(x) &&
+        isObject(x) &&
+        'id' in x &&
+        'storyId' in x &&
+        typeof x.id == 'string' &&
+        typeof x.storyId == 'string');
+}
+function isObject(x) {
+    return typeof x == 'object' && x != null;
+}
+function isString(x) {
+    return typeof x == 'string';
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isFunction(x) {
+    return typeof x == 'function';
+}
+function isImageError(error) {
+    return error instanceof Error && 'images' in error;
+}
+function isProcessMessage(message) {
+    return isObject(message) && 'scope' in message;
+}
+function isWorkerMessage(message) {
+    return isProcessMessage(message) && message.scope == 'worker';
+}
+function isStoriesMessage(message) {
+    return isProcessMessage(message) && message.scope == 'stories';
+}
+function isTestMessage(message) {
+    return isProcessMessage(message) && message.scope == 'test';
+}
+function isWebpackMessage(message) {
+    return isProcessMessage(message) && message.scope == 'webpack';
+}
+function isDockerMessage(message) {
+    return isProcessMessage(message) && message.scope == 'docker';
+}
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":";;AAybA,oBAEC;AAED,8BAEC;AAED,wBASC;AAED,4BAEC;AAED,4BAEC;AAGD,gCAEC;AAED,oCAEC;AAED,4CAEC;AAED,0CAEC;AAED,4CAEC;AAED,sCAEC;AAED,4CAEC;AAED,0CAEC;AA1DD,SAAgB,IAAI;IAClB,UAAU;AACZ,CAAC;AAED,SAAgB,SAAS,CAAI,KAA2B;IACtD,OAAO,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC;AAC/C,CAAC;AAED,SAAgB,MAAM,CAAC,CAA8B;IACnD,OAAO,CACL,SAAS,CAAC,CAAC,CAAC;QACZ,QAAQ,CAAC,CAAC,CAAC;QACX,IAAI,IAAI,CAAC;QACT,SAAS,IAAI,CAAC;QACd,OAAO,CAAC,CAAC,EAAE,IAAI,QAAQ;QACvB,OAAO,CAAC,CAAC,OAAO,IAAI,QAAQ,CAC7B,CAAC;AACJ,CAAC;AAED,SAAgB,QAAQ,CAAC,CAAU;IACjC,OAAO,OAAO,CAAC,IAAI,QAAQ,IAAI,CAAC,IAAI,IAAI,CAAC;AAC3C,CAAC;AAED,SAAgB,QAAQ,CAAC,CAAU;IACjC,OAAO,OAAO,CAAC,IAAI,QAAQ,CAAC;AAC9B,CAAC;AAED,8DAA8D;AAC9D,SAAgB,UAAU,CAAC,CAAU;IACnC,OAAO,OAAO,CAAC,IAAI,UAAU,CAAC;AAChC,CAAC;AAED,SAAgB,YAAY,CAAC,KAAc;IACzC,OAAO,KAAK,YAAY,KAAK,IAAI,QAAQ,IAAI,KAAK,CAAC;AACrD,CAAC;AAED,SAAgB,gBAAgB,CAAC,OAAgB;IAC/C,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,OAAO,IAAI,OAAO,CAAC;AACjD,CAAC;AAED,SAAgB,eAAe,CAAC,OAAgB;IAC9C,OAAO,gBAAgB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC;AAChE,CAAC;AAED,SAAgB,gBAAgB,CAAC,OAAgB;IAC/C,OAAO,gBAAgB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,IAAI,SAAS,CAAC;AACjE,CAAC;AAED,SAAgB,aAAa,CAAC,OAAgB;IAC5C,OAAO,gBAAgB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,IAAI,MAAM,CAAC;AAC9D,CAAC;AAED,SAAgB,gBAAgB,CAAC,OAAgB;IAC/C,OAAO,gBAAgB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,IAAI,SAAS,CAAC;AACjE,CAAC;AAED,SAAgB,eAAe,CAAC,OAAgB;IAC9C,OAAO,gBAAgB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC;AAChE,CAAC"}

package/docs/config.md

@@ -12,7 +12,7 @@
 
 ### Creevey config
 
-In default configuration Creevey take screenshots of `#root` element only for chrome browser in one concurrent instance, to run tests in different browsers or speedup tests and run in parallel, you need to define config file `.creevey/config.js`
+In default configuration Creevey take screenshots of `#storybook-root` element only for chrome browser in one concurrent instance, to run tests in different browsers or speedup tests and run in parallel, you need to define config file `.creevey/config.js`
 
 ```ts
 module.exports = {
@@ -47,9 +47,6 @@ module.exports = {
   // Default Storybook url
   storybookUrl: 'http://localhost:6006',
 
-  // Storybook config directory
-  storybookDir: path.join(__dirname, '.storybook'),
-
   // Where original images are stored
   screenDir: path.join(__dirname, '../images'),
 
@@ -120,7 +117,7 @@ export const parameters = {
   creevey: {
     // Skip all *hover tests in IE11 on the global level
     skip: {
-      ie11: { in: 'ie11', tests: /.*hover$/ },
+      "hovers don't work in ie11": { in: 'ie11', tests: /.*hover$/ },
     },
   },
 };
@@ -137,15 +134,14 @@ export default {
   parameters: {
     creevey: {
       // You could skip some browsers/stories or even specific tests
-      skip: [
-        { in: 'ie11', reason: "`MyComponent` doesn't support ie11" },
-        { in: 'firefox', stories: 'Loading', reason: "Loading stories are flaky in firefox" },
-        {
+      skip: {
+        "`MyComponent` doesn't support ie11": { in: 'ie11' },
+        "Loading stories are flaky in firefox": { in: 'firefox', stories: 'Loading' },
+        "`MyComponent` hovering doesn't work correctly": {
           in: ['firefox', 'chrome'],
           tests: /.*hover$/,
-          reason: "For some reason `MyComponent` hovering doesn't work correctly",
         },
-      ],
+      },
     },
   },
 } as Meta & CreeveyMeta;
@@ -169,43 +165,47 @@ Basic.parameters = {
 
 ```ts
 interface SkipOption {
-  reason?: string;
   in?: string | string[] | RegExp;
   kinds?: string | string[] | RegExp;
   stories?: string | string[] | RegExp;
   tests?: string | string[] | RegExp;
 }
 
-type SkipOptions = SkipOption | SkipOption[] | Record<string, SkipOption | SkipOption[]>;
+type SkipOptions = boolean | string | Record<string, SkipOption | SkipOption[]>;
 ```
 
 - Skip all stories for all browsers:
   - `skip: true`
   - `skip: 'Skip reason message'`
-  - `skip: { reason: 'Skip reason message' }`
+  - `skip: { 'Skip reason message': true }`
 - Skip all stories for specific browsers:
-  - `skip: { in: 'ie11' }`
-  - `skip: { in: ['ie11', 'chrome'] }`
-  - `skip: { in: /^fire.*/ }`
+  - `skip: { 'Skip reason message': { in: 'ie11' } }`
+  - `skip: { 'Skip reason message': { in: ['ie11', 'chrome'] } }`
+  - `skip: { 'Skip reason message': { in: /^fire.*/ } }`
 - Skip all stories in specific kinds:
-  - `skip: { kinds: 'Button' }`
-  - `skip: { kinds: ['Button', 'Input'] }`
-  - `skip: { kinds: /.*Modal$/ }`
+  - `skip: { 'Skip reason message': { kinds: 'Button' } }`
+  - `skip: { 'Skip reason message': { kinds: ['Button', 'Input'] } }`
+  - `skip: { 'Skip reason message': { kinds: /.*Modal$/ } }`
 - Skip all tests in specific stories:
-  - `skip: { stories: 'simple' }`
-  - `skip: { stories: ['simple', 'special'] }`
-  - `skip: { stories: /.*large$/ }`
+  - `skip: { 'Skip reason message': { stories: 'simple' } }`
+  - `skip: { 'Skip reason message': { stories: ['simple', 'special'] } }`
+  - `skip: { 'Skip reason message': { stories: /.*large$/ } }`
 - Skip specific tests:
-  - `skip: { tests: 'click' }`
-  - `skip: { tests: ['hover', 'click'] }`
-  - `skip: { tests: /^press.*$/ }`
+  - `skip: { 'Skip reason message': { tests: 'click' } }`
+  - `skip: { 'Skip reason message': { tests: ['hover', 'click'] } }`
+  - `skip: { 'Skip reason message': { tests: /^press.*$/ } }`
 - Multiple skip options:
-  - as an array `skip: [{ /* ... */ }]`
-  - as an object
+  - for one reason
+    ```
+    skip: {
+      "reason": [{ /* ... */ }, { /* ... */ }],
+    }
+    ```
+  - for several reasons
     ```
     skip: {
-      foo: { /* ... */ },
-      bar: { /* ... */ },
+      "reason 1": { /* ... */ },
+      "reason 2": { /* ... */ },
     }
     ```
 

package/docs/tests.md

@@ -13,7 +13,7 @@ export default { title: 'MyComponent' };
 export const Basic: Story & CreeveyStory = () => <MyComponent />;
 Basic.parameters = {
   creevey: {
-    captureElement: '#root',
+    captureElement: '#storybook-root',
     tests: {
       async click() {
         await this.browser.actions().click(this.captureElement).perform();
@@ -25,7 +25,7 @@ Basic.parameters = {
 };
 ```
 
-NOTE: Here you define story parameters with simple test `click`. Where you setup capturing element `#root` then click on that element and taking screenshot to assert it. `this.browser` allow you to access to native selenium webdriver instance you could check [API here](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html).
+NOTE: Here you define story parameters with simple test `click`. Where you setup capturing element `#storybook-root` then click on that element and taking screenshot to assert it. `this.browser` allow you to access to native selenium webdriver instance you could check [API here](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html).
 
 You also could write more powerful tests with asserting multiple screenshots
 
@@ -40,7 +40,7 @@ export const Basic: CSFStory<JSX.Element> = () => <MyForm />;
 Basic.story = {
   parameters: {
     creevey: {
-      captureElement: '#root',
+      captureElement: '#storybook-root',
       delay: 1000,
       tests: {
         async submit() {

package/manager/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "../dist/client/addon/manager.js"
+}

package/package.json

@@ -1,6 +1,22 @@
 {
   "name": "creevey",
   "description": "Cross-browser screenshot testing tool for Storybook with fancy UI Runner",
+  "version": "0.9.0",
+  "type": "commonjs",
+  "bin": "./dist/cli.js",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./manager": "./dist/client/addon/manager.js",
+    "./preview": "./dist/client/addon/preview.js",
+    "./preset": "./dist/client/addon/preset.js",
+    "./dist/client/addon/manager.js": "./dist/client/addon/manager.js",
+    "./dist/client/addon/preview.js": "./dist/client/addon/preview.js",
+    "./package.json": "./package.json"
+  },
+  "author": "Dmitriy Lazarev <w@kich.dev>",
+  "repository": "github.com:creevey/creevey",
   "keywords": [
     "testing",
     "storybook",
@@ -13,216 +29,159 @@
     "addon",
     "test"
   ],
-  "version": "0.9.0-non-webpack.2.fix-capture-element",
-  "bin": {
-    "creevey": "./lib/cjs/cli.js"
-  },
-  "exports": {
-    ".": {
-      "types": "./lib/types/index.d.ts",
-      "default": "./lib/cjs/index.js"
-    },
-    "./addon": {
-      "types": "./lib/types/client/addon/index.d.ts",
-      "default": "./lib/cjs/client/addon/index.js"
-    },
-    "./preset": "./preset.js",
-    "./lib/cjs/client/addon/decorator.js": "./lib/cjs/client/addon/decorator.js"
-  },
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
-  "types": "lib/types/index.d.ts",
-  "author": "Dmitriy Lazarev <w@kich.dev>",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/wKich/creevey.git"
-  },
   "license": "MIT",
   "scripts": {
     "commit": "git-cz",
-    "clean": "rimraf lib",
-    "lint": "run-p --continue-on-error lint:*",
+    "clean": "rimraf dist",
+    "lint": "redrun -p \"lint:*\"",
     "lint:tsc": "tsc --noEmit",
-    "lint:eslint": "eslint --ext .js,.ts,.tsx ./",
-    "lint:prettier": "prettier --check *.{md,json,js,ts} ./**/*.{js,ts,tsx}",
-    "pretest:e2e": "yarn build && yarn pack -f creevey.tgz",
-    "bootstrap:storybook": "cd ../storybook && yarn install && yarn bootstrap --core",
-    "test": "run-p test:*",
-    "test:unit": "jest --config jest.config.js",
-    "start": "run-p start:*",
+    "lint:eslint": "eslint",
+    "lint:prettier": "prettier --check .",
+    "test": "vitest",
+    "start": "redrun -p \"start:*\"",
     "start:client": "webpack-dev-server",
-    "start:storybook": "start-storybook --ci -p 6006",
+    "start:storybook": "storybook dev --ci -p 6006",
     "start:creevey": "yarn creevey --ui",
-    "start:creevey:github": "yarn creevey:github --ui",
-    "creevey": "node --require ./scripts/babel-register -- src/cli",
-    "creevey:github": "yarn creevey --config .creevey/github.config.ts",
-    "creevey:gitlab": "yarn creevey --config .creevey/gitlab.config.ts",
-    "creevey:hybrid": "yarn creevey --config .creevey/hybrid.config.ts",
-    "fix": "run-s fix:*",
-    "fix:eslint": "eslint --fix ./",
+    "creevey": "tsx ./src/cli",
+    "creevey:github": "yarn creevey --config .creevey/github.config.mts",
+    "creevey:gitlab": "yarn creevey --config .creevey/gitlab.config.mts",
+    "creevey:hybrid": "yarn creevey --config .creevey/hybrid.config.mts",
+    "fix": "redrun \"fix:*\"",
+    "fix:eslint": "eslint --fix",
     "fix:prettier": "prettier --write .",
-    "prebuild": "yarn clean && mkdir lib",
-    "build": "run-p --continue-on-error build:*",
-    "build:types": "tsc --emitDeclarationOnly -p scripts/tsconfig.prod.json",
-    "build:creevey": "run-p \"build:creevey:* --extensions .ts,.tsx --ignore src/client/web\"",
-    "build:creevey:cjs": "cross-env BABEL_MODE=cjs babel src --out-dir lib/cjs",
-    "build:creevey:esm": "cross-env BABEL_MODE=esm babel src --out-dir lib/esm",
-    "build:client": "webpack --mode production",
-    "postbuild": "run-p copy:*",
-    "copy:index": "cpx scripts/dist/types/* lib/types/",
-    "copy:html": "cpx src/client/web/index.html lib/cjs/client/web",
+    "prebuild": "yarn clean && mkdir dist",
+    "build": "yarn prebuild && yarn build:client && yarn build:creevey && yarn postbuild",
+    "build:client": "webpack --mode production && cpx src/client/web/index.html dist/client/web",
+    "build:creevey": "tsc --build tsconfig.prod.json",
+    "postbuild": "cpx \"scripts/dist/*\" dist/",
     "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
-    "build-storybook": "build-storybook",
+    "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token t3010eknrh",
     "prepare": "husky install"
   },
   "engines": {
-    "node": ">=16.0"
+    "node": ">=18.0"
   },
   "dependencies": {
-    "@babel/preset-typescript": "^7.18.6",
-    "@babel/code-frame": "^7.18.6",
-    "@babel/generator": "^7.18.7",
-    "@babel/helpers": "^7.18.6",
-    "@babel/parser": "^7.18.8",
-    "@babel/plugin-transform-runtime": "^7.18.6",
-    "@babel/preset-env": "^7.18.6",
-    "@babel/register": "^7.18.6",
-    "@babel/runtime-corejs3": "^7.18.6",
-    "@babel/traverse": "^7.18.8",
-    "@babel/types": "^7.18.8",
     "@koa/cors": "^3.3.0",
     "@octokit/core": "^4.0.4",
-    "@storybook/components": "^6.5.9",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "^6.5.9",
-    "@types/chai": "^4.3.1",
-    "@types/selenium-webdriver": "^4.1.5",
-    "airbnb-js-shims": "^2.2.1",
-    "babel-plugin-tsconfig-paths": "^1.0.3",
-    "chai": "^4.3.6",
+    "@storybook/components": "^7.6.20",
+    "@storybook/core-events": "^7.6.20",
+    "@storybook/csf": "^0.1.2",
+    "@storybook/manager-api": "^7.6.20",
+    "@storybook/preview-api": "^7.6.20",
+    "@storybook/theming": "^7.6.20",
+    "@types/chai": "^4.3.19",
+    "@types/dockerode": "^3.3.31",
+    "@types/find-cache-dir": "^3.2.0",
+    "@types/koa": "^2.13.1",
+    "@types/koa-bodyparser": "^4.3.7",
+    "@types/koa-mount": "^4.0.1",
+    "@types/koa-static": "^4.0.1",
+    "@types/koa__cors": "^3.3.0",
+    "@types/lodash": "^4.14.182",
+    "@types/micromatch": "^4.0.1",
+    "@types/minimist": "^1.2.1",
+    "@types/mocha": "^9.1.1",
+    "@types/pixelmatch": "^5.2.2",
+    "@types/pngjs": "^6.0.0",
+    "@types/qs": "^6.9.6",
+    "@types/react": "^17.0.19",
+    "@types/react-dom": "^17.0.3",
+    "@types/selenium-webdriver": "^4.1.26",
+    "@types/shelljs": "^0.8.15",
+    "@types/uuid": "^10",
+    "@types/ws": "^8.5.3",
+    "chai": "^4.5.0",
     "chalk": "^4.1.2",
     "chokidar": "^3.5.3",
-    "core-js": "^3.23.4",
-    "dockerode": "^3.3.2",
-    "event-source-polyfill": "1.0.25",
+    "dockerode": "^4.0.2",
     "find-cache-dir": "^3.3.1",
-    "get-tsconfig": "^4.2.0",
-    "global-jsdom": "8.5.0",
-    "jsdom": "^20.0.0",
     "koa": "^2.13.4",
     "koa-bodyparser": "^4.3.0",
     "koa-mount": "^4.0.0",
     "koa-static": "^5.0.0",
-    "loader-utils": "^3.2.0",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.0",
     "loglevel-plugin-prefix": "^0.8.4",
     "micromatch": "^4.0.5",
     "minimist": "^1.2.6",
     "mocha": "~10.0.0",
-    "null-loader": "^4.0.1",
     "ora": "^5.4.1",
-    "pirates": "^4.0.5",
     "pixelmatch": "^5.3.0",
     "pngjs": "^6.0.0",
     "polished": "^4.2.2",
     "qs": "^6.11.0",
-    "regenerator-runtime": "^0.13.7",
-    "resolve-from": "^5.0.0",
-    "ts-node": "^10.9.1",
-    "schema-utils": "^4.0.0",
-    "selenium-webdriver": "^4.3.1",
+    "selenium-webdriver": "^4.25.0",
     "shelljs": "^0.8.5",
-    "tsconfig-paths": "^4.0.0",
-    "webpack-node-externals": "^3.0.0",
+    "tsx": "^4.17.0",
+    "uuid": "^10.0.0",
     "ws": "^8.8.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.18.6",
-    "@babel/core": "^7.18.6",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@mdx-js/mdx": "^1.6.22",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.5.9",
-    "@storybook/api": "^6.5.9",
-    "@storybook/channels": "^6.5.9",
-    "@storybook/client-api": "^6.5.9",
-    "@storybook/client-logger": "^6.5.9",
-    "@storybook/core": "^6.5.9",
-    "@storybook/core-client": "^6.5.9",
-    "@storybook/core-common": "^6.5.9",
-    "@storybook/core-events": "^6.5.9",
-    "@storybook/core-server": "^6.5.9",
-    "@storybook/preview-web": "^6.5.9",
-    "@storybook/react": "^6.5.9",
-    "@types/babel__code-frame": "^7.0.2",
-    "@types/babel__generator": "^7.6.4",
-    "@types/babel__traverse": "^7.17.1",
-    "@types/dockerode": "^3.3.9",
-    "@types/find-cache-dir": "^3.2.0",
-    "@types/koa": "^2.13.1",
-    "@types/koa-bodyparser": "^4.3.7",
-    "@types/koa-mount": "^4.0.1",
-    "@types/koa-static": "^4.0.1",
-    "@types/koa__cors": "^3.3.0",
-    "@types/loader-utils": "^2.0.2",
-    "@types/lodash": "^4.14.182",
-    "@types/micromatch": "^4.0.1",
-    "@types/minimist": "^1.2.1",
-    "@types/mocha": "^9.1.1",
-    "@types/node": "^16.11.43",
-    "@types/pixelmatch": "^5.2.2",
-    "@types/pngjs": "^6.0.0",
-    "@types/qs": "^6.9.6",
-    "@types/react": "^17.0.19",
-    "@types/react-dom": "^17.0.3",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@eslint/js": "^9.9.1",
+    "@storybook/addon-essentials": "^7.6.20",
+    "@storybook/addon-interactions": "^7.6.20",
+    "@storybook/addon-links": "^7.6.20",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/addons": "^7.6.20",
+    "@storybook/api": "^7.6.20",
+    "@storybook/channels": "^7.6.20",
+    "@storybook/client-api": "^7.6.20",
+    "@storybook/client-logger": "^7.6.20",
+    "@storybook/core-client": "^7.6.20",
+    "@storybook/core-common": "^7.6.20",
+    "@storybook/core-server": "^7.6.20",
+    "@storybook/preview-web": "^7.6.20",
+    "@storybook/react": "^7.6.20",
+    "@storybook/react-vite": "^7.6.20",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/cpx": "^1.5.5",
+    "@types/eslint": "^9.6.1",
+    "@types/eslint__js": "^8.42.3",
+    "@types/node": "^18.19.50",
     "@types/resize-observer-browser": "^0.1.7",
-    "@types/shelljs": "^0.8.11",
     "@types/tmp": "^0.2.3",
-    "@types/webpack": "^5.28.0",
-    "@types/webpack-node-externals": "^2.5.3",
-    "@types/ws": "^8.5.3",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
-    "@typescript-eslint/parser": "^5.30.5",
     "babel-loader": "^8.2.5",
     "browserstack-local": "^1.5.1",
     "chromatic": "^6.7.0",
     "conventional-changelog-cli": "^2.2.2",
-    "cpx": "1.5.0",
+    "core-js": "^3.23.4",
+    "cpx": "^1.5.0",
     "cross-env": "7.0.3",
     "dotenv": "^16.0.1",
-    "eslint": "^8.19.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint": "^9.9.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.0",
     "git-cz": "^4.9.0",
+    "globals": "^15.9.0",
     "husky": "^8.0.1",
     "immer": "^9.0.15",
-    "jest": "^28.1.3",
+    "jiti": "^1.21.6",
     "lint-staged": "^13.0.3",
-    "npm-run-all": "^4.1.5",
     "pinst": "^3.0.0",
-    "prettier": "^2.7.1",
+    "prettier": "^3.3.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
-    "require-from-string": "^2.0.2",
+    "redrun": "^11.0.5",
+    "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.2",
+    "storybook": "^7.6.20",
     "tmp": "^0.2.1",
-    "typescript": "~4.7.4",
+    "typescript": "~5.5.4",
+    "typescript-eslint": "^8.3.0",
     "use-immer": "^0.7.0",
-    "webpack": "^5.73.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.3"
+    "vite": "^5.4.2",
+    "vitest": "^2.0.5",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   },
   "config": {
     "commitizen": {
@@ -230,7 +189,7 @@
     }
   },
   "lint-staged": {
-    "**/*.(j|t)s?(x)": [
+    "**/*.?(c|m)(j|t)s?(x)": [
       "eslint --fix",
       "prettier --write"
     ],
@@ -242,7 +201,7 @@
     "displayName": "Creevey"
   },
   "volta": {
-    "node": "16.15.0",
-    "yarn": "1.22.19"
+    "node": "20.16.0",
+    "yarn": "4.4.0"
   }
 }

package/preset/README.md

@@ -0,0 +1,3 @@
+This is a fallback for package.json's `exports.addon` field. It's required for outdated environments (like node 11 and typescript with the "node" moduleResolution) to resolve imports from `creevey/addon` properly.
+
+See https://github.com/andrewbranch/example-subpath-exports-ts-compat. The fallback uses the "package-json-redirects" startegy.

package/preset/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "../dist/client/addon/preset.js"
+}

package/preview/README.md

@@ -0,0 +1,3 @@
+This is a fallback for package.json's `exports.addon` field. It's required for outdated environments (like node 11 and typescript with the "node" moduleResolution) to resolve imports from `creevey/addon` properly.
+
+See https://github.com/andrewbranch/example-subpath-exports-ts-compat. The fallback uses the "package-json-redirects" startegy.

package/preview/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "../dist/client/addon/preview.js"
+}

package/src/cli.ts

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

package/src/client/addon/components/Addon.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { Placeholder } from '@storybook/components';
+import { TestData } from '../../../types.js';
+import { Panel } from './Panel.js';
+import { CreeveyController } from '../controller.js';
+
+interface AddonProps {
+  active?: boolean;
+  browser: string;
+  controller: CreeveyController;
+}
+export const Addon = ({ active, browser, controller }: AddonProps): JSX.Element | null => {
+  const [tests, setTests] = useState<TestData[]>([]);
+
+  const [selectedTestId, setSelectedTestId] = useState(controller.selectedTestId);
+
+  useEffect(() => {
+    if (active) {
+      controller.setActiveBrowser(browser);
+      const browserTests = controller.getTestsByStoryIdAndBrowser(controller.activeBrowser);
+      setTests(browserTests);
+    }
+  }, [active, browser, controller]);
+
+  useEffect(() => {
+    const unsubscribe = controller.onChangeTest((testId) => {
+      setSelectedTestId(testId);
+      const status = controller.getTestsByStoryIdAndBrowser(controller.activeBrowser);
+      setTests(status);
+    });
+    return unsubscribe;
+  }, [controller]);
+
+  useEffect(() => {
+    const unsubscribe = controller.onUpdateStatus(() => {
+      setTests(controller.getTestsByStoryIdAndBrowser(controller.activeBrowser));
+    });
+    return unsubscribe;
+  }, [controller, browser]);
+
+  return active ? (
+    tests.length ? (
+      <Panel
+        tests={tests}
+        selectedTestId={selectedTestId}
+        onChangeTest={controller.setSelectedTestId}
+        onImageApprove={controller.onImageApprove}
+      />
+    ) : (
+      <Placeholder>No test results</Placeholder>
+    )
+  ) : null;
+};