creevey 0.9.1 → 0.10.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "creevey",
   "description": "Cross-browser screenshot testing tool for Storybook with fancy UI Runner",
-  "version": "0.9.1",
+  "version": "0.10.0-beta.0",
   "type": "commonjs",
   "bin": "./dist/cli.js",
   "main": "./dist/index.js",
@@ -32,157 +32,155 @@
   "license": "MIT",
   "scripts": {
     "commit": "git-cz",
-    "clean": "rimraf dist",
-    "lint": "redrun -p \"lint:*\"",
+    "clean": "rm -rf dist",
+    "lint": "concurrently \"yarn lint:tsc\" \"yarn lint:eslint\" \"yarn lint:prettier\"",
     "lint:tsc": "tsc --noEmit",
     "lint:eslint": "eslint",
     "lint:prettier": "prettier --check .",
     "test": "vitest",
-    "start": "redrun -p \"start:*\"",
-    "start:client": "webpack-dev-server",
+    "start": "concurrently \"yarn start:client\" \"yarn start:storybook\" \"yarn start:creevey\"",
+    "start:client": "vite",
     "start:storybook": "storybook dev --ci -p 6006",
     "start:creevey": "yarn creevey --ui",
     "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": "concurrently \"yarn fix:eslint\" \"yarn fix:prettier\"",
     "fix:eslint": "eslint --fix",
     "fix:prettier": "prettier --write .",
     "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:client": "vite build",
     "build:creevey": "tsc --build tsconfig.prod.json",
-    "postbuild": "cpx \"scripts/dist/*\" dist/",
+    "postbuild": "cp \"scripts/dist/index.d.ts\" dist/",
     "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
     "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token t3010eknrh",
-    "prepare": "husky install"
+    "chromatic": "chromatic --project-token=chpt_80df83ca94e6fb4",
+    "prepare": "husky"
   },
   "engines": {
     "node": ">=18.0"
   },
+  "peerDependencies": {
+    "playwright": "*",
+    "selenium-webdriver": "*"
+  },
+  "peerDependenciesMeta": {
+    "playwright": {
+      "optional": true
+    },
+    "selenium-webdriver": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "@koa/cors": "^3.3.0",
-    "@octokit/core": "^4.0.4",
-    "@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",
+    "@koa/cors": "^5.0.0",
+    "@octokit/core": "^6.1.2",
+    "@storybook/components": "^8.4.1",
+    "@storybook/core-events": "^8.4.1",
+    "@storybook/csf": "^0.1.11",
+    "@storybook/icons": "^1.2.12",
+    "@storybook/manager-api": "^8.4.1",
+    "@storybook/preview-api": "^8.4.1",
+    "@storybook/theming": "^8.4.1",
+    "@storybook/types": "^8.4.1",
+    "@types/chai": "^4.3.20",
     "@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/koa": "^2.15.0",
+    "@types/koa-bodyparser": "^4.3.12",
+    "@types/koa-mount": "^4.0.5",
+    "@types/koa-static": "^4.0.4",
+    "@types/koa__cors": "^5.0.0",
+    "@types/lodash": "^4.17.13",
+    "@types/micromatch": "^4.0.9",
+    "@types/minimist": "^1.2.5",
+    "@types/pixelmatch": "^5.2.6",
+    "@types/pngjs": "^6.0.5",
+    "@types/qs": "^6.9.16",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/selenium-webdriver": "^4.1.27",
     "@types/shelljs": "^0.8.15",
-    "@types/uuid": "^10",
-    "@types/ws": "^8.5.3",
+    "@types/ws": "^8.5.13",
     "chai": "^4.5.0",
     "chalk": "^4.1.2",
-    "chokidar": "^3.5.3",
+    "chokidar": "^4.0.1",
     "dockerode": "^4.0.2",
-    "find-cache-dir": "^3.3.1",
-    "koa": "^2.13.4",
-    "koa-bodyparser": "^4.3.0",
+    "find-cache-dir": "^5.0.0",
+    "get-port": "^7.1.0",
+    "koa": "^2.15.3",
+    "koa-bodyparser": "^4.4.1",
     "koa-mount": "^4.0.0",
     "koa-static": "^5.0.0",
     "lodash": "^4.17.21",
-    "loglevel": "^1.8.0",
+    "loglevel": "^1.9.2",
     "loglevel-plugin-prefix": "^0.8.4",
-    "micromatch": "^4.0.5",
-    "minimist": "^1.2.6",
-    "mocha": "~10.0.0",
-    "ora": "^5.4.1",
-    "pixelmatch": "^5.3.0",
-    "pngjs": "^6.0.0",
-    "polished": "^4.2.2",
-    "qs": "^6.11.0",
-    "selenium-webdriver": "^4.25.0",
+    "micromatch": "^4.0.8",
+    "minimist": "^1.2.8",
+    "odiff-bin": "^3.1.2",
+    "pixelmatch": "^6.0.0",
+    "pngjs": "^7.0.0",
+    "polished": "^4.3.1",
+    "qs": "^6.13.0",
+    "semver": "^7.6.3",
     "shelljs": "^0.8.5",
-    "tsx": "^4.17.0",
-    "uuid": "^10.0.0",
-    "ws": "^8.8.0"
+    "tar-stream": "^3.1.7",
+    "tsx": "^4.19.2",
+    "uuid": "^11.0.2",
+    "ws": "^8.18.0",
+    "yocto-spinner": "^0.1.1"
   },
   "devDependencies": {
-    "@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",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@eslint/js": "^9.14.0",
+    "@storybook/addon-essentials": "^8.4.1",
+    "@storybook/addon-interactions": "^8.4.1",
+    "@storybook/blocks": "^8.4.1",
+    "@storybook/channels": "^8.4.1",
+    "@storybook/client-logger": "^8.4.1",
+    "@storybook/core-common": "^8.4.1",
+    "@storybook/core-server": "^8.4.1",
+    "@storybook/react": "^8.4.1",
+    "@storybook/react-vite": "^8.4.1",
+    "@storybook/test": "^8.4.1",
     "@types/eslint": "^9.6.1",
     "@types/eslint__js": "^8.42.3",
-    "@types/node": "^18.19.50",
-    "@types/resize-observer-browser": "^0.1.7",
-    "@types/tmp": "^0.2.3",
-    "babel-loader": "^8.2.5",
-    "browserstack-local": "^1.5.1",
-    "chromatic": "^6.7.0",
-    "conventional-changelog-cli": "^2.2.2",
-    "core-js": "^3.23.4",
-    "cpx": "^1.5.0",
-    "cross-env": "7.0.3",
-    "dotenv": "^16.0.1",
-    "eslint": "^9.9.1",
+    "@types/node": "^18.19.64",
+    "@types/resize-observer-browser": "^0.1.11",
+    "@types/semver": "^7",
+    "@types/tar-stream": "^3.1.3",
+    "@types/tmp": "^0.2.6",
+    "@vitejs/plugin-react-swc": "^3.7.1",
+    "browserstack-local": "^1.5.5",
+    "chromatic": "^11.16.3",
+    "concurrently": "^9.0.1",
+    "conventional-changelog-cli": "^5.0.0",
+    "dotenv": "^16.4.5",
+    "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "git-cz": "^4.9.0",
-    "globals": "^15.9.0",
-    "husky": "^8.0.1",
-    "immer": "^9.0.15",
-    "jiti": "^1.21.6",
-    "lint-staged": "^13.0.3",
+    "globals": "^15.11.0",
+    "husky": "^9.1.6",
+    "immer": "^10.1.1",
+    "lint-staged": "^15.2.10",
     "pinst": "^3.0.0",
+    "playwright-core": "^1.48.0",
     "prettier": "^3.3.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
-    "redrun": "^11.0.5",
-    "regenerator-runtime": "^0.13.7",
-    "rimraf": "^3.0.2",
-    "storybook": "^7.6.20",
-    "tmp": "^0.2.1",
-    "typescript": "~5.5.4",
-    "typescript-eslint": "^8.3.0",
-    "use-immer": "^0.7.0",
-    "vite": "^5.4.2",
-    "vitest": "^2.0.5",
-    "webpack": "^5.94.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
+    "selenium-webdriver": "^4.26.0",
+    "storybook": "^8.4.1",
+    "tmp": "^0.2.3",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.12.2",
+    "use-immer": "^0.10.0",
+    "vite": "^5.4.10",
+    "vitest": "^2.1.4"
   },
   "config": {
     "commitizen": {

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { JSX, useEffect, useState } from 'react';
 import { Placeholder } from '@storybook/components';
 import { TestData } from '../../../types.js';
 import { Panel } from './Panel.js';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 
 interface IconProps {
   width?: number;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { Loader } from '@storybook/components';
 import { styled } from '@storybook/theming';
 import { TestData } from '../../../types.js';

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

@@ -1,5 +1,6 @@
-import React from 'react';
-import { Button, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';
+import React, { JSX } from 'react';
+import { Button, TooltipLinkList, WithTooltip } from '@storybook/components';
+import { MenuIcon } from '@storybook/icons';
 import { styled } from '@storybook/theming';
 import { TestData } from '../../../types.js';
 import { getEmojiByTestStatus } from '../utils.js';
@@ -23,7 +24,6 @@ export default function TestSelect(props: TestSelectProps): JSX.Element {
     <WithTooltip
       trigger="click"
       placement="bottom"
-      closeOnClick
       tooltip={({ onHide }) => (
         <TooltipLinkList
           links={props.tests.map((x) => ({
@@ -39,8 +39,8 @@ export default function TestSelect(props: TestSelectProps): JSX.Element {
         />
       )}
     >
-      <Button outline small>
-        <Icons icon="menu" />
+      <Button size="small" variant="outline">
+        <MenuIcon />
         {testName}
       </Button>
     </WithTooltip>

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

@@ -1,6 +1,7 @@
-import React, { Fragment, useState, useEffect } from 'react';
+import React, { JSX, Fragment, useState, useEffect } from 'react';
 import { stringify } from 'qs';
-import { IconButton, Icons, Separator } from '@storybook/components';
+import { IconButton, Separator } from '@storybook/components';
+import { StopIcon, ShareAltIcon, PlayIcon } from '@storybook/icons';
 import { styled } from '@storybook/theming';
 import { ForwardIcon, NextIcon } from './Icons.js';
 import { isDefined, TestData } from '../../../types.js';
@@ -53,7 +54,6 @@ export const Tools = ({ controller }: ToolsProps): JSX.Element | null => {
     };
     const disabled = isRunning && buttonClicked != null && buttonClicked !== type;
     return (
-      // @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623
       <Button
         onClick={() => {
           if (isRunning) controller.onStop();
@@ -62,23 +62,23 @@ export const Tools = ({ controller }: ToolsProps): JSX.Element | null => {
         title={disabled ? '' : title}
         disabled={disabled}
       >
-        {buttonClicked === type && isRunning ? <Icons icon={'stop'} /> : icon}
+        {buttonClicked === type && isRunning ? <StopIcon /> : icon}
       </Button>
     );
   }
 
   return (
     <Fragment>
-      {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
-      <IconButton
+      <a
         href={`http://localhost:${__CREEVEY_CLIENT_PORT__ ?? __CREEVEY_SERVER_PORT__ ?? 3000}/?${stringify({
           testPath: getTestPath(test),
         })}`}
         target="_blank"
         title="Show in Creevey UI"
+        rel="noopener noreferrer"
       >
-        <Icons icon="sharealt" />
-      </IconButton>
+        <ShareAltIcon />
+      </a>
       <Separator />
       {renderButton('RunAll', 'Run all', controller.onStartAllTests, <ForwardIcon />)}
       {renderButton(
@@ -87,7 +87,7 @@ export const Tools = ({ controller }: ToolsProps): JSX.Element | null => {
         controller.onStartAllStoryTests,
         <NextIcon width={15} height={11} />,
       )}
-      {renderButton('RunTest', 'Run', controller.onStart, <Icons icon="play" />)}
+      {renderButton('RunTest', 'Run', controller.onStart, <PlayIcon />)}
     </Fragment>
   );
 };

package/src/client/addon/controller.ts

@@ -1,4 +1,3 @@
-import { API } from '@storybook/api';
 import { Addon_TypesEnum } from '@storybook/types';
 import { SET_STORIES, STORY_RENDERED } from '@storybook/core-events';
 import { denormalizeStoryParameters } from '../../shared/index.js';
@@ -6,6 +5,7 @@ import { CreeveyStatus, CreeveyUpdate, isDefined, TestData, TestStatus, StoriesR
 import { initCreeveyClientApi, CreeveyClientApi } from '../shared/creeveyClientApi.js';
 import { calcStatus } from '../shared/helpers.js';
 import { getEmojiByTestStatus } from './utils.js';
+import { API } from '@storybook/manager-api';
 
 export const ADDON_ID = 'creevey';
 

package/src/client/addon/manager.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { API } from '@storybook/api';
-import { addons, types } from '@storybook/manager-api';
+import { Addon_TypesEnum } from '@storybook/types';
+import { addons, API } from '@storybook/manager-api';
 import { Addon } from './components/Addon.js';
 import { Tools } from './components/Tools.js';
 import { CreeveyController, ADDON_ID } from './controller.js';
@@ -16,7 +16,7 @@ async function registerCreeveyPanels(storybookApi: API): Promise<void> {
   addons.add(`${ADDON_ID}/panel/run`, {
     title: `Creevey/Run`,
     match: ({ viewMode }) => !!(viewMode && /^story$/.exec(viewMode)),
-    type: types.TOOL,
+    type: Addon_TypesEnum.TOOL,
 
     render: () => React.createElement(Tools, { controller }),
   });
@@ -28,7 +28,7 @@ async function registerCreeveyPanels(storybookApi: API): Promise<void> {
     const title = controller.getTabTitle(browser);
     addons.add(panelId, {
       title,
-      type: types.PANEL,
+      type: Addon_TypesEnum.PANEL,
       paramKey: browser,
 
       // NOTE key = PANEL_ID needs to correct render button in addons panel

package/src/client/addon/withCreevey.ts

@@ -1,8 +1,6 @@
 import * as Events from '@storybook/core-events';
-import type { PreviewWeb } from '@storybook/preview-web';
-import type { AnyFramework, StoryContextForEnhancers } from '@storybook/csf';
-import type { StoryStore } from '@storybook/client-api';
-import { makeDecorator } from '@storybook/preview-api';
+import type { Renderer, StoryContextForEnhancers } from '@storybook/csf';
+import { makeDecorator, PreviewWeb, StoryStore } from '@storybook/preview-api';
 import { Channel } from '@storybook/channels';
 import { CaptureOptions, CreeveyStoryParams, isObject, noop, StoriesRaw, StorybookGlobals } from '../../types.js';
 import { serializeRawStories } from '../../shared/index.js';
@@ -17,16 +15,15 @@ declare global {
     __CREEVEY_SELECT_STORY__: (
       storyId: string,
       shouldWaitForReady: boolean,
-      callback: (response: [error?: string | null, isCaptureCalled?: boolean]) => void,
-    ) => Promise<void>;
+    ) => Promise<[error?: string | null, isCaptureCalled?: boolean]>;
     __CREEVEY_UPDATE_GLOBALS__: (globals: StorybookGlobals) => void;
     __CREEVEY_INSERT_IGNORE_STYLES__: (ignoreElements: string[]) => HTMLStyleElement;
     __CREEVEY_REMOVE_IGNORE_STYLES__: (ignoreStyles: HTMLStyleElement) => void;
-    __CREEVEY_HAS_PLAY_COMPLETED_YET__: (callback: (isPlayCompleted: boolean) => void) => void;
+    __CREEVEY_HAS_PLAY_COMPLETED_YET__: () => Promise<boolean>;
     __CREEVEY_SET_READY_FOR_CAPTURE__?: () => void;
     __STORYBOOK_ADDONS_CHANNEL__: Channel;
-    __STORYBOOK_STORY_STORE__: StoryStore<AnyFramework>;
-    __STORYBOOK_PREVIEW__: PreviewWeb<AnyFramework>;
+    __STORYBOOK_STORY_STORE__: StoryStore<Renderer>;
+    __STORYBOOK_PREVIEW__: PreviewWeb<Renderer>;
   }
 }
 
@@ -174,8 +171,7 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
   async function selectStory(
     storyId: string,
     shouldWaitForReady: boolean,
-    callback: (response: [error?: string | null, isCaptureCalled?: boolean]) => void,
-  ): Promise<void> {
+  ): Promise<[error?: string | null, isCaptureCalled?: boolean]> {
     const currentStory = window.__STORYBOOK_PREVIEW__.currentSelection?.storyId ?? '';
 
     if (!isAnimationDisabled) disableAnimation();
@@ -205,7 +201,7 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
         })(),
         errorPromise,
       ]);
-      callback([null, isCaptureCalled]);
+      return [null, isCaptureCalled];
     } catch (reason) {
       // NOTE Event `STORY_THREW_EXCEPTION` triggered only in react and vue frameworks and return Error instance
       // NOTE Event `STORY_ERRORED` return error-like object without `name` field
@@ -215,7 +211,7 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
           : isObject(reason)
             ? `${reason.message as string}\n    ${reason.stack as string}`
             : (reason as string);
-      callback([errorMessage]);
+      return [errorMessage];
     } finally {
       renderPromise.cancel();
       errorPromise.cancel();
@@ -251,21 +247,23 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     ignoreStyles.parentNode?.removeChild(ignoreStyles);
   }
 
-  function hasPlayCompletedYet(callback: (isPlayCompleted: boolean) => void): void {
-    creeveyReady();
-    let isCaptureCalled = false;
-    let isPlayCompleted = false;
-
-    const channel = addonsChannel();
-    void waitForStoryRendered(channel).then(() => {
-      if (isCaptureCalled) return;
-      isPlayCompleted = true;
-      callback(true);
-    });
-    void waitForCaptureCall().then(() => {
-      if (isPlayCompleted) return;
-      isCaptureCalled = true;
-      callback(false);
+  function hasPlayCompletedYet(): Promise<boolean> {
+    return new Promise<boolean>((resolve) => {
+      creeveyReady();
+      let isCaptureCalled = false;
+      let isPlayCompleted = false;
+
+      const channel = addonsChannel();
+      void waitForStoryRendered(channel).then(() => {
+        if (isCaptureCalled) return;
+        isPlayCompleted = true;
+        resolve(true);
+      });
+      void waitForCaptureCall().then(() => {
+        if (isPlayCompleted) return;
+        isCaptureCalled = true;
+        resolve(false);
+      });
     });
   }
 

package/src/client/shared/components/ImagesView/BlendView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { JSX, useEffect, useRef } from 'react';
 import { styled, withTheme } from '@storybook/theming';
 import { ViewPropsWithTheme, getBorderColor, themeBorderColors } from './common.js';
 import { useApplyScale, useCalcScale, useLoadImages } from '../../helpers.js';

package/src/client/shared/components/ImagesView/ImagesView.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { JSX, FunctionComponent } from 'react';
 import { styled, withTheme } from '@storybook/theming';
 import { SideBySideView } from './SideBySideView.js';
 import { SwapView } from './SwapView.js';
@@ -14,7 +14,7 @@ interface ImagesViewProps {
   mode: ImagesViewMode;
 }
 
-const views: { [mode in ImagesViewMode]: FunctionComponent<ViewProps> } = {
+const views: Record<ImagesViewMode, FunctionComponent<ViewProps>> = {
   'side-by-side': SideBySideView,
   swap: SwapView,
   slide: SlideView,

package/src/client/shared/components/ImagesView/SideBySideView.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { JSX, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Loader } from '@storybook/components';
 import { styled, withTheme } from '@storybook/theming';
 import { ViewPropsWithTheme, getBorderColor, themeBorderColors } from './common.js';

package/src/client/shared/components/ImagesView/SlideView.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { JSX, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Loader } from '@storybook/components';
 import { styled, withTheme } from '@storybook/theming';
 import { getBorderColor, themeBorderColors, ViewPropsWithTheme } from './common.js';

package/src/client/shared/components/ImagesView/SwapView.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { JSX, useCallback, useEffect, useRef, useState } from 'react';
 import { Loader } from '@storybook/components';
 import { styled, withTheme } from '@storybook/theming';
 import { ViewPropsWithTheme, getBorderColor, themeBorderColors } from './common.js';

package/src/client/shared/components/PageFooter/PageFooter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { styled, withTheme } from '@storybook/theming';
 import { Paging } from './Paging.js';
 
@@ -20,7 +20,7 @@ const Container = withTheme(
 export function PageFooter({ retriesCount, retry, onRetryChange }: PageFooterProps): JSX.Element {
   return (
     <Container>
-      <Paging activePage={retry} onPageChange={onRetryChange} pagesCount={retriesCount} />
+      <Paging activePage={`${retry}`} onPageChange={onRetryChange} pagesCount={retriesCount} />
     </Container>
   );
 }