storybook-addon-playwright 4.6.4 → 4.8.0

package/configs.d.ts

@@ -1 +1 @@
-export * from './dist/api/server/configs';
+export * from './dist/api/server/configs';

package/configs.js

@@ -1,2 +1,2 @@
-const configs = require('./dist/api/server/configs');
-module.exports = configs;
+const configs = require('./dist/api/server/configs');
+module.exports = configs;

package/dist/api/client/get-theme-data.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '@material-ui/core';
+export declare const getThemeData: () => Promise<Theme>;

package/dist/api/client/get-theme-data.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const utils_1 = require("./utils");
+exports.getThemeData = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    const restEndpoint = utils_1.getEndpoint('GET_THEME');
+    const resp = yield fetch(restEndpoint, {
+        headers: {
+            Accept: 'application/json, text-plain, */*',
+            'Content-Type': 'application/json',
+        },
+        method: 'post',
+    }).then(utils_1.responseHandler);
+    return resp;
+});
+//# sourceMappingURL=get-theme-data.js.map

package/dist/api/client/get-theme-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-theme-data.js","sourceRoot":"","sources":["../../../src/api/client/get-theme-data.ts"],"names":[],"mappings":";;;AACA,mCAAuD;AAE1C,QAAA,YAAY,GAAG,GAAqC,EAAE;IACjE,MAAM,YAAY,GAAG,mBAAW,CAAC,WAAW,CAAC,CAAC;IAE9C,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,YAAY,EAAE;QACrC,OAAO,EAAE;YACP,MAAM,EAAE,mCAAmC;YAC3C,cAAc,EAAE,kBAAkB;SACnC;QACD,MAAM,EAAE,MAAM;KACf,CAAC,CAAC,IAAI,CAAC,uBAAe,CAAC,CAAC;IAEzB,OAAO,IAAI,CAAC;AACd,CAAC,CAAA,CAAC"}

package/dist/api/client/utils/endpoint.d.ts

@@ -1 +1 @@
-export declare const getEndpoint: (route: "CHANGE_SCREENSHOT_INDEX" | "DELETE_ACTION_SET" | "DELETE_SCREENSHOT" | "DELETE_STORY_SCREENSHOT" | "FIX_STORY_TITLE_CHANGE" | "GET_ACTIONS_DATA" | "GET_ACTION_SET" | "GET_SCHEMA" | "GET_STORY_SCREENSHOTS" | "SAVE_ACTION_SET" | "SAVE_SCREENSHOT" | "TAKE_SCREENSHOT" | "TEST_SCREENSHOT" | "TEST_SCREENSHOTS" | "TEST_STORY_SCREENSHOT" | "UPDATE_SCREENSHOT") => string;
+export declare const getEndpoint: (route: "CHANGE_SCREENSHOT_INDEX" | "DELETE_ACTION_SET" | "DELETE_SCREENSHOT" | "DELETE_STORY_SCREENSHOT" | "FIX_STORY_TITLE_CHANGE" | "GET_ACTIONS_DATA" | "GET_ACTION_SET" | "GET_SCHEMA" | "GET_STORY_SCREENSHOTS" | "GET_THEME" | "SAVE_ACTION_SET" | "SAVE_SCREENSHOT" | "TAKE_SCREENSHOT" | "TEST_SCREENSHOT" | "TEST_SCREENSHOTS" | "TEST_STORY_SCREENSHOT" | "UPDATE_SCREENSHOT") => string;

package/dist/api/server/controller/get-theme-data.d.ts

@@ -0,0 +1 @@
+export declare const getThemeData: (_req: any, res: any) => Promise<void>;

package/dist/api/server/controller/get-theme-data.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const get_theme_data_1 = require("../services/get-theme-data");
+exports.getThemeData = (_req, res) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    const theme = get_theme_data_1.getThemeData();
+    res.json(theme);
+});
+//# sourceMappingURL=get-theme-data.js.map

package/dist/api/server/controller/get-theme-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-theme-data.js","sourceRoot":"","sources":["../../../../src/api/server/controller/get-theme-data.ts"],"names":[],"mappings":";;;AAAA,+DAAgF;AAEnE,QAAA,YAAY,GAAG,CAAO,IAAI,EAAE,GAAG,EAAiB,EAAE;IAC3D,MAAM,KAAK,GAAG,6BAAmB,EAAE,CAAC;IACpC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACpB,CAAC,CAAA,CAAA"}

package/dist/api/server/controller/index.d.ts

@@ -14,3 +14,4 @@ export * from './delete-story-screenshots';
 export * from './change-screenshot-index';
 export * from './get-schema-controller';
 export * from './fix-screenshot-file-name';
+export * from './get-theme-data';

package/dist/api/server/controller/index.js

@@ -17,4 +17,5 @@ tslib_1.__exportStar(require("./delete-story-screenshots"), exports);
 tslib_1.__exportStar(require("./change-screenshot-index"), exports);
 tslib_1.__exportStar(require("./get-schema-controller"), exports);
 tslib_1.__exportStar(require("./fix-screenshot-file-name"), exports);
+tslib_1.__exportStar(require("./get-theme-data"), exports);
 //# sourceMappingURL=index.js.map

package/dist/api/server/controller/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/api/server/controller/index.ts"],"names":[],"mappings":";;;AAAA,2DAAiC;AACjC,+DAAqC;AACrC,2DAAiC;AACjC,4DAAkC;AAClC,4DAAkC;AAClC,8DAAoC;AACpC,kEAAwC;AACxC,8DAAoC;AACpC,4DAAkC;AAClC,mEAAyC;AACzC,6DAAmC;AACnC,8DAAoC;AACpC,qEAA2C;AAC3C,oEAA0C;AAC1C,kEAAwC;AACxC,qEAA2C"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/api/server/controller/index.ts"],"names":[],"mappings":";;;AAAA,2DAAiC;AACjC,+DAAqC;AACrC,2DAAiC;AACjC,4DAAkC;AAClC,4DAAkC;AAClC,8DAAoC;AACpC,kEAAwC;AACxC,8DAAoC;AACpC,4DAAkC;AAClC,mEAAyC;AACzC,6DAAmC;AACnC,8DAAoC;AACpC,qEAA2C;AAC3C,oEAA0C;AAC1C,kEAAwC;AACxC,qEAA2C;AAC3C,2DAAiC"}

package/dist/api/server/routes.js

@@ -43,6 +43,7 @@ const expressMiddleWare = (router) => {
     router.post(routes_1.ROUTE.CHANGE_SCREENSHOT_INDEX, exports.asyncCatch(controller_1.changeScreenShotIndex));
     router.post(routes_1.ROUTE.GET_SCHEMA, exports.asyncCatch(controller_1.getSchemaController));
     router.post(routes_1.ROUTE.FIX_STORY_TITLE_CHANGE, exports.asyncCatch(controller_1.fixScreenshotFileName));
+    router.post(routes_1.ROUTE.GET_THEME, exports.asyncCatch(controller_1.getThemeData));
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     router.use((error, _req, res, next) => {
         res.status(error.status || 500).send({

package/dist/api/server/routes.js.map

@@ -1 +1 @@
-{"version":3,"file":"routes.js","sourceRoot":"","sources":["../../../src/api/server/routes.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"routes.js","sourceRoot":"","sources":["../../../src/api/server/routes.ts"],"names":[],"mappings":"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"}

package/dist/api/server/services/get-theme-data.d.ts

@@ -0,0 +1 @@
+export declare const getThemeData: () => import("@material-ui/core").Theme;

package/dist/api/server/services/get-theme-data.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const configs_1 = require("../configs");
+exports.getThemeData = () => {
+    return configs_1.getConfigs().theme;
+};
+//# sourceMappingURL=get-theme-data.js.map

package/dist/api/server/services/get-theme-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-theme-data.js","sourceRoot":"","sources":["../../../../src/api/server/services/get-theme-data.ts"],"names":[],"mappings":";;AAAA,wCAAwC;AAE3B,QAAA,YAAY,GAAG,GAAG,EAAE;IAC7B,OAAO,oBAAU,EAAE,CAAC,KAAK,CAAC;AAC9B,CAAC,CAAA"}

package/dist/api/server/utils/install-mouse-helper.js

@@ -27,25 +27,25 @@ function installMouseHelper(page) {
                 }
                 return highestZIndex + 1;
             }
-            styleElement.innerHTML = `
-        playwright-mouse-pointer {
-            position: absolute;
-            top: -100px;
-            z-index: 1000;
-            left: -100px;
-            width: 14px;
-            height: 14px;
-            background: rgba(0, 0, 0, 0.39);
-            border: 2px solid #fbfbfb9e;
-            border-radius: 14px;
-            margin: -8px 0 0 -8px;
-            padding: 0;
-            pointer-events: none;
-            box-sizing: content-box;
-          }
-          playwright-mouse-pointer.button-mousedown {
-            background: rgba(243, 169, 4, 0.87);
-          }
+            styleElement.innerHTML = `
+        playwright-mouse-pointer {
+            position: absolute;
+            top: -100px;
+            z-index: 1000;
+            left: -100px;
+            width: 14px;
+            height: 14px;
+            background: rgba(0, 0, 0, 0.39);
+            border: 2px solid #fbfbfb9e;
+            border-radius: 14px;
+            margin: -8px 0 0 -8px;
+            padding: 0;
+            pointer-events: none;
+            box-sizing: content-box;
+          }
+          playwright-mouse-pointer.button-mousedown {
+            background: rgba(243, 169, 4, 0.87);
+          }
         `;
             document.head.appendChild(styleElement);
             document.body.appendChild(box);

package/dist/components/common/ThemeProvider.js

@@ -4,10 +4,12 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@material-ui/core/styles");
 const api_1 = require("@storybook/api");
+const use_custom_theme_1 = require("../../hooks/use-custom-theme");
 // import global from 'jss-plugin-global';
 const ThemeProvider = react_1.memo((props) => {
     const { children } = props;
     const { theme: storyBookTheme } = api_1.useStorybookState();
+    const { theme: customTheme } = use_custom_theme_1.useCustomTheme();
     const theme = styles_1.createTheme({
         palette: {
             action: { active: storyBookTheme.barTextColor },
@@ -24,7 +26,7 @@ const ThemeProvider = react_1.memo((props) => {
         typography: {
             fontFamily: storyBookTheme.fontBase,
         },
-    });
+    }, customTheme);
     return react_1.default.createElement(styles_1.ThemeProvider, { theme: theme }, children);
 });
 exports.ThemeProvider = ThemeProvider;

package/dist/components/common/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../src/components/common/ThemeProvider.tsx"],"names":[],"mappings":";;;AAAA,uDAAoC;AACpC,qDAGkC;AAClC,wCAAmD;AACnD,0CAA0C;AAE1C,MAAM,aAAa,GAAa,YAAI,CAAC,CAAC,KAAK,EAAE,EAAE;IAC7C,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,uBAAiB,EAAE,CAAC;IAEtD,MAAM,KAAK,GAAG,oBAAW,CAAC;QACxB,OAAO,EAAE;YACP,MAAM,EAAE,EAAE,MAAM,EAAE,cAAc,CAAC,YAAY,EAAE;YAC/C,UAAU,EAAE;gBACV,OAAO,EAAE,cAAc,CAAC,KAAK;gBAC7B,KAAK,EAAE,cAAc,CAAC,YAAY;aACnC;YACD,OAAO,EAAE,cAAc,CAAC,cAAc;YACtC,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,CAAC,cAAc,EAAE;YAChD,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,CAAC,YAAY,EAAE;YAChD,IAAI,EAAE,EAAE,OAAO,EAAE,cAAc,CAAC,YAAY,EAAE;YAC9C,IAAI,EAAE,cAAc,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;SACxD;QACD,UAAU,EAAE;YACV,UAAU,EAAE,cAAc,CAAC,QAAQ;SACpC;KACF,CAAC,CAAC;IAEH,OAAO,8BAAC,sBAAe,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAmB,CAAC;AACrE,CAAC,CAAC,CAAC;AAIM,sCAAa;AAFtB,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC"}
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../src/components/common/ThemeProvider.tsx"],"names":[],"mappings":";;;AAAA,uDAAoC;AACpC,qDAGkC;AAClC,wCAAmD;AACnD,mEAA8D;AAC9D,0CAA0C;AAE1C,MAAM,aAAa,GAAa,YAAI,CAAC,CAAC,KAAK,EAAE,EAAE;IAC7C,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,uBAAiB,EAAE,CAAC;IACtD,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,iCAAc,EAAE,CAAC;IAChD,MAAM,KAAK,GAAG,oBAAW,CAAC;QACxB,OAAO,EAAE;YACP,MAAM,EAAE,EAAE,MAAM,EAAE,cAAc,CAAC,YAAY,EAAE;YAC/C,UAAU,EAAE;gBACV,OAAO,EAAE,cAAc,CAAC,KAAK;gBAC7B,KAAK,EAAE,cAAc,CAAC,YAAY;aACnC;YACD,OAAO,EAAE,cAAc,CAAC,cAAc;YACtC,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,CAAC,cAAc,EAAE;YAChD,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,CAAC,YAAY,EAAE;YAChD,IAAI,EAAE,EAAE,OAAO,EAAE,cAAc,CAAC,YAAY,EAAE;YAC9C,IAAI,EAAE,cAAc,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;SACxD;QACD,UAAU,EAAE;YACV,UAAU,EAAE,cAAc,CAAC,QAAQ;SACpC;KACF,EAAE,WAAW,CAAC,CAAC;IAEhB,OAAO,8BAAC,sBAAe,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAmB,CAAC;AACrE,CAAC,CAAC,CAAC;AAIM,sCAAa;AAFtB,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC"}

package/dist/components/preview/SelectorOverlay.js

@@ -104,8 +104,8 @@ const SelectorOverlay = (props) => {
             setMouseupRef(e.target);
         };
         const style = document.createElement('STYLE');
-        style.innerHTML = `html, body {
-      cursor: crosshair !important;
+        style.innerHTML = `html, body {
+      cursor: crosshair !important;
       `;
         const body = document.body;
         document.head.appendChild(style);

package/dist/components/tool-bar/ImageDiffMenuItem.js

@@ -5,9 +5,30 @@ const react_1 = tslib_1.__importStar(require("react"));
 const core_1 = require("@material-ui/core");
 const api_1 = require("@storybook/api");
 const constants_1 = require("../../constants");
+const useStyles = core_1.makeStyles((theme) => {
+    return {
+        notFound: {
+            '& > div': {
+                '& > b': {
+                    color: theme.palette.error.main,
+                },
+                '& > p': {
+                    margin: 0,
+                },
+                fontSize: 14,
+            },
+            border: '1px solid ' + theme.palette.error.main,
+            marginBottom: 2,
+            marginTop: 2,
+            pointerEvents: 'none',
+            userSelect: 'text',
+        },
+    };
+}, { name: 'ImageDiff' });
 const ImageDiffMenuItem = react_1.forwardRef((props, ref) => {
     const { imageDiff, onClick } = props;
     const api = api_1.useStorybookApi();
+    const classes = useStyles();
     const data = api.getData(imageDiff.storyId);
     const handleLoadStory = react_1.useCallback(() => {
         onClick();
@@ -15,7 +36,17 @@ const ImageDiffMenuItem = react_1.forwardRef((props, ref) => {
         api.setSelectedPanel(constants_1.SCREENSHOT_PANEL_ID);
     }, [api, imageDiff.storyId, onClick]);
     if (!data) {
-        return null;
+        return (react_1.default.createElement(core_1.MenuItem, { className: classes.notFound, ref: ref },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("b", null, "Unable to locate story!"),
+                react_1.default.createElement("p", null,
+                    react_1.default.createElement("b", null, "ID:"),
+                    " ",
+                    props.imageDiff.storyId),
+                react_1.default.createElement("p", null,
+                    react_1.default.createElement("b", null, "File:"),
+                    " ",
+                    props.imageDiff.fileName))));
     }
     return (react_1.default.createElement(core_1.MenuItem, { onClick: handleLoadStory, ref: ref }, data.parent + '--' + data.name));
 });

package/dist/components/tool-bar/ImageDiffMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageDiffMenuItem.js","sourceRoot":"","sources":["../../../src/components/tool-bar/ImageDiffMenuItem.tsx"],"names":[],"mappings":";;;AAAA,uDAA4D;AAE5D,4CAA6C;AAC7C,wCAAiD;AACjD,+CAAsD;AAOtD,MAAM,iBAAiB,GAAqC,kBAAU,CACpE,CAAC,KAAK,EAAE,GAAuB,EAAE,EAAE;IACjC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAErC,MAAM,GAAG,GAAG,qBAAe,EAAE,CAAC;IAE9B,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAE5C,MAAM,eAAe,GAAG,mBAAW,CAAC,GAAG,EAAE;QACvC,OAAO,EAAE,CAAC;QACV,GAAG,CAAC,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QACnC,GAAG,CAAC,gBAAgB,CAAC,+BAAmB,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtC,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,8BAAC,eAAQ,IAAC,OAAO,EAAE,eAAe,EAAE,GAAG,EAAE,GAAG,IACzC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,CACtB,CACZ,CAAC;AACJ,CAAC,CACF,CAAC;AAIO,8CAAiB;AAF1B,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC"}
+{"version":3,"file":"ImageDiffMenuItem.js","sourceRoot":"","sources":["../../../src/components/tool-bar/ImageDiffMenuItem.tsx"],"names":[],"mappings":";;;AAAA,uDAA4D;AAE5D,4CAAyD;AACzD,wCAAiD;AACjD,+CAAsD;AAEtD,MAAM,SAAS,GAAG,iBAAU,CAC1B,CAAC,KAAK,EAAE,EAAE;IACR,OAAO;QACL,QAAQ,EAAE;YACR,SAAS,EAAE;gBACT,OAAO,EAAE;oBACP,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI;iBAChC;gBACD,OAAO,EAAE;oBACP,MAAM,EAAE,CAAC;iBACV;gBACD,QAAQ,EAAE,EAAE;aACb;YACD,MAAM,EAAE,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI;YAC/C,YAAY,EAAE,CAAC;YACf,SAAS,EAAE,CAAC;YACZ,aAAa,EAAE,MAAM;YACrB,UAAU,EAAE,MAAM;SACnB;KACF,CAAC;AACJ,CAAC,EACD,EAAE,IAAI,EAAE,WAAW,EAAE,CACtB,CAAC;AAOF,MAAM,iBAAiB,GAAqC,kBAAU,CACpE,CAAC,KAAK,EAAE,GAAuB,EAAE,EAAE;IACjC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAErC,MAAM,GAAG,GAAG,qBAAe,EAAE,CAAC;IAE9B,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAE5C,MAAM,eAAe,GAAG,mBAAW,CAAC,GAAG,EAAE;QACvC,OAAO,EAAE,CAAC;QACV,GAAG,CAAC,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QACnC,GAAG,CAAC,gBAAgB,CAAC,+BAAmB,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtC,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,CACL,8BAAC,eAAQ,IAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAE,GAAG,EAAE,GAAG;YAC7C;gBACE,mEAA8B;gBAE9B;oBACE,+CAAU;;oBAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CACjC;gBAEJ;oBACE,iDAAY;;oBAAE,KAAK,CAAC,SAAS,CAAC,QAAQ,CACpC,CACA,CACG,CACZ,CAAC;KACH;IAED,OAAO,CACL,8BAAC,eAAQ,IAAC,OAAO,EAAE,eAAe,EAAE,GAAG,EAAE,GAAG,IACzC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,CACtB,CACZ,CAAC;AACJ,CAAC,CACF,CAAC;AAIO,8CAAiB;AAF1B,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC"}

package/dist/constants/routes.d.ts

@@ -8,6 +8,7 @@ export declare const ROUTE: {
     GET_ACTION_SET: string;
     GET_SCHEMA: string;
     GET_STORY_SCREENSHOTS: string;
+    GET_THEME: string;
     SAVE_ACTION_SET: string;
     SAVE_SCREENSHOT: string;
     TAKE_SCREENSHOT: string;

package/dist/constants/routes.js

@@ -10,6 +10,7 @@ exports.ROUTE = {
     GET_ACTION_SET: '/actionSet/get',
     GET_SCHEMA: '/getSchema',
     GET_STORY_SCREENSHOTS: '/screenshot/all',
+    GET_THEME: '/getTheme',
     SAVE_ACTION_SET: '/actionSet/save',
     SAVE_SCREENSHOT: '/screenshot/save',
     TAKE_SCREENSHOT: '/screenshot/get',

package/dist/constants/routes.js.map

@@ -1 +1 @@
-{"version":3,"file":"routes.js","sourceRoot":"","sources":["../../src/constants/routes.ts"],"names":[],"mappings":";;AAAa,QAAA,KAAK,GAAG;IACnB,uBAAuB,EAAE,yBAAyB;IAClD,iBAAiB,EAAE,mBAAmB;IACtC,iBAAiB,EAAE,oBAAoB;IACvC,uBAAuB,EAAE,yBAAyB;IAClD,sBAAsB,EAAE,uBAAuB;IAC/C,gBAAgB,EAAE,yBAAyB;IAC3C,cAAc,EAAE,gBAAgB;IAChC,UAAU,EAAE,YAAY;IACxB,qBAAqB,EAAE,iBAAiB;IACxC,eAAe,EAAE,iBAAiB;IAClC,eAAe,EAAE,kBAAkB;IACnC,eAAe,EAAE,iBAAiB;IAClC,eAAe,EAAE,kBAAkB;IACnC,gBAAgB,EAAE,6BAA6B;IAC/C,qBAAqB,EAAE,uBAAuB;IAC9C,iBAAiB,EAAE,oBAAoB;CACxC,CAAC"}
+{"version":3,"file":"routes.js","sourceRoot":"","sources":["../../src/constants/routes.ts"],"names":[],"mappings":";;AAAa,QAAA,KAAK,GAAG;IACnB,uBAAuB,EAAE,yBAAyB;IAClD,iBAAiB,EAAE,mBAAmB;IACtC,iBAAiB,EAAE,oBAAoB;IACvC,uBAAuB,EAAE,yBAAyB;IAClD,sBAAsB,EAAE,uBAAuB;IAC/C,gBAAgB,EAAE,yBAAyB;IAC3C,cAAc,EAAE,gBAAgB;IAChC,UAAU,EAAE,YAAY;IACxB,qBAAqB,EAAE,iBAAiB;IACxC,SAAS,EAAE,WAAW;IACtB,eAAe,EAAE,iBAAiB;IAClC,eAAe,EAAE,kBAAkB;IACnC,eAAe,EAAE,iBAAiB;IAClC,eAAe,EAAE,kBAAkB;IACnC,gBAAgB,EAAE,6BAA6B;IAC/C,qBAAqB,EAAE,uBAAuB;IAC9C,iBAAiB,EAAE,oBAAoB;CACxC,CAAC"}

package/dist/hooks/use-custom-theme.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/// <reference types="@emotion/core" />
+import { Theme } from '@material-ui/core';
+export declare const useCustomTheme: () => {
+    setTheme: import("react").Dispatch<import("react").SetStateAction<Theme>>;
+    theme: Theme;
+};

package/dist/hooks/use-custom-theme.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const get_theme_data_1 = require("../api/client/get-theme-data");
+exports.useCustomTheme = () => {
+    const [theme, setTheme] = react_1.useState();
+    const isTheme = react_1.useRef(false);
+    const fetchTheme = react_1.useCallback(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        try {
+            const resp = yield get_theme_data_1.getThemeData();
+            if (!isTheme.current) {
+                setTheme(resp);
+            }
+        }
+        catch (error) {
+            throw new Error(error.message);
+        }
+    }), []);
+    react_1.useEffect(() => {
+        fetchTheme();
+        return () => {
+            isTheme.current = true;
+        };
+    }, [fetchTheme]);
+    return { setTheme, theme };
+};
+//# sourceMappingURL=use-custom-theme.js.map

package/dist/hooks/use-custom-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-custom-theme.js","sourceRoot":"","sources":["../../src/hooks/use-custom-theme.ts"],"names":[],"mappings":";;;AACA,iCAAiE;AACjE,iEAA4D;AAE/C,QAAA,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,gBAAQ,EAAS,CAAC;IAC5C,MAAM,OAAO,GAAG,cAAM,CAAC,KAAK,CAAC,CAAC;IAE9B,MAAM,UAAU,GAAG,mBAAW,CAAC,GAAS,EAAE;QACxC,IAAI;YACF,MAAM,IAAI,GAAG,MAAM,6BAAY,EAAE,CAAC;YAClC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;gBACpB,QAAQ,CAAC,IAAI,CAAC,CAAC;aAChB;SACF;QAAC,OAAO,KAAK,EAAE;YACd,MAAM,IAAI,KAAK,CAAE,KAAe,CAAC,OAAO,CAAC,CAAC;SAC3C;IACH,CAAC,CAAA,EAAE,EAAE,CAAC,CAAC;IAEP,iBAAS,CAAC,GAAG,EAAE;QACb,UAAU,EAAE,CAAC;QACb,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACzB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AAC7B,CAAC,CAAC"}

package/dist/typings/config.d.ts

@@ -5,13 +5,14 @@ import { DiffDirection, ImageDiffResult, ScreenshotRequest, TakeScreenshotOption
 import { RequestData } from './request';
 import { StoryInfo } from './story-info';
 import { TestFileScreenshots } from '../api/server/services/test-file-screenshots';
+import { Theme } from '@material-ui/core';
 declare type PageGotoOptions = Parameters<Page['goto']>[1];
 export interface Config<T extends unknown = Page> {
     storybookEndpoint: string;
     customActionSchema?: ActionSchemaList;
     pageGotoOptions?: PageGotoOptions;
     releaseModifierKey?: boolean;
-    getPage: (browserType: BrowserTypes, options: BrowserContextOptions, requestData: RequestData) => Promise<T>;
+    getPage: (browserType: BrowserTypes, options: BrowserContextOptions, requestData: ScreenshotRequest) => Promise<T>;
     beforeScreenshot?: (page: T, data: ScreenshotRequest, requestData: RequestData) => Promise<void>;
     afterScreenshot?: (page: T, data: ScreenshotRequest) => Promise<void>;
     beforeStoryImageDiff?: (requestData: StoryInfo & RequestData) => Promise<void>;
@@ -29,5 +30,6 @@ export interface Config<T extends unknown = Page> {
         story?: number;
     };
     screenshotOptions?: TakeScreenshotOptionsParams;
+    theme?: Theme;
 }
 export {};

package/middleware.d.ts

@@ -1,2 +1,2 @@
-import middleware from './dist/api/server/routes';
-export default middleware;
+import middleware from './dist/api/server/routes';
+export default middleware;

package/middleware.js

@@ -1,2 +1,2 @@
-const middleware = require('./dist/api/server/routes');
-module.exports = middleware;
+const middleware = require('./dist/api/server/routes');
+module.exports = middleware;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-playwright",
-  "version": "4.6.4",
+  "version": "4.8.0",
   "description": "An addon to visually test the stories in the multiple browsers within storybook environment",
   "author": "m.doaie <mdoaie@yahoo.co.uk>",
   "engines": {
@@ -111,7 +111,7 @@
     "hash-sum": "^2.0.0",
     "ip": "^1.1.5",
     "jest-image-snapshot": "^4.2.0",
-    "join-images": "^0.2.8",
+    "join-images": "^1.0.0",
     "jsonfile": "^6.1.0",
     "lodash": "^4.17.20",
     "nanoid": "^3.1.18",
@@ -129,7 +129,7 @@
     "react-split-pane": "^0.1.92",
     "react-use": "^17.2.4",
     "reinspect": "^1.1.0",
-    "sharp": "^0.28.3",
+    "sharp": "^0.29.1",
     "tinycolor2": "^1.4.2",
     "ts-to-json": "^1.3.0",
     "webpack-virtual-modules": "^0.3.2"

package/preset.js

@@ -1 +1 @@
-module.exports = require('./dist/preset');
+module.exports = require('./dist/preset');

package/typings/global.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="jest" />
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { MatchImageSnapshotOptions } from 'jest-image-snapshot';
-import 'jest-extended';
-
-declare global {
-  namespace jest {
-    interface Matchers<R> {
-      toMatchScreenshots(options?: MatchImageSnapshotOptions): R;
-    }
-  }
-  interface Window {
-    __visible_snackbar_messages__: { [message: string]: boolean };
-  }
-}
+/// <reference types="jest" />
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { MatchImageSnapshotOptions } from 'jest-image-snapshot';
+import 'jest-extended';
+
+declare global {
+  namespace jest {
+    interface Matchers<R> {
+      toMatchScreenshots(options?: MatchImageSnapshotOptions): R;
+    }
+  }
+  interface Window {
+    __visible_snackbar_messages__: { [message: string]: boolean };
+  }
+}