@applitools/eyes-storybook 3.55.9 → 3.56.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## [3.56.0](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.55.9...js/eyes-storybook@3.56.0) (2025-07-23)
+
+
+### Features
+
+* eyes-setup script | AD-9543 ([#3075](https://github.com/Applitools-Dev/sdk/issues/3075)) ([27f15f9](https://github.com/Applitools-Dev/sdk/commit/27f15f9b54ba93c8189214a5df424b543d564120))
+
+
+### Bug Fixes
+
+* use strict mode to get config | AD-10156 ([#3092](https://github.com/Applitools-Dev/sdk/issues/3092)) ([6b2d21b](https://github.com/Applitools-Dev/sdk/commit/6b2d21b23219f03b56d27604d0afe768eaae6fc2))
+
+
+### Dependencies
+
+* @applitools/nml-client bumped to 1.10.0
+  #### Features
+
+  * android multi target | AD-9868 ([#2943](https://github.com/Applitools-Dev/sdk/issues/2943)) ([808aa21](https://github.com/Applitools-Dev/sdk/commit/808aa21e489c3562b93006e2e26ff7ffbb743dd6))
+
+
+
+* @applitools/core-base bumped to 1.26.0
+  #### Features
+
+  * batch properties limit | FLD-3174 ([#3080](https://github.com/Applitools-Dev/sdk/issues/3080)) ([feb9e79](https://github.com/Applitools-Dev/sdk/commit/feb9e79d79f5eab3c58eac2b4ef3c15a562f079c))
+* @applitools/ec-client bumped to 1.11.1
+
+* @applitools/core bumped to 4.43.0
+  #### Features
+
+  * android multi target | AD-9868 ([#2943](https://github.com/Applitools-Dev/sdk/issues/2943)) ([808aa21](https://github.com/Applitools-Dev/sdk/commit/808aa21e489c3562b93006e2e26ff7ffbb743dd6))
+  * batch properties limit | FLD-3174 ([#3080](https://github.com/Applitools-Dev/sdk/issues/3080)) ([feb9e79](https://github.com/Applitools-Dev/sdk/commit/feb9e79d79f5eab3c58eac2b4ef3c15a562f079c))
+
+
+
+* @applitools/eyes bumped to 1.35.3
+
+
 ## [3.55.9](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.55.8...js/eyes-storybook@3.55.9) (2025-07-15)
 
 

package/bin/eyes-setup.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require('../src/eyes-setup');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.55.9",
+  "version": "3.56.0",
   "description": "",
   "keywords": [
     "applitools",
@@ -14,7 +14,10 @@
   "homepage": "https://applitools.com/tutorials/sdks/storybook",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Applitools Team <team@applitools.com>",
-  "bin": "./bin/eyes-storybook.js",
+  "bin": {
+    "eyes-setup": "./bin/eyes-setup.js",
+    "eyes-storybook": "./bin/eyes-storybook.js"
+  },
   "files": [
     "src",
     "bin",
@@ -53,15 +56,16 @@
     "up:framework": "cd test/fixtures/storybook-versions/${APPLITOOLS_FRAMEWORK_VERSION} && npm ci"
   },
   "dependencies": {
-    "@applitools/core": "4.42.1",
+    "@applitools/core": "4.43.0",
     "@applitools/driver": "1.22.1",
-    "@applitools/eyes": "1.35.2",
+    "@applitools/eyes": "1.35.3",
     "@applitools/functional-commons": "1.6.0",
     "@applitools/logger": "2.1.5",
     "@applitools/monitoring-commons": "1.0.19",
     "@applitools/spec-driver-puppeteer": "1.5.1",
     "@applitools/ufg-client": "1.16.14",
     "@applitools/utils": "1.9.0",
+    "@inquirer/prompts": "7.0.1",
     "boxen": "4.2.0",
     "chalk": "3.0.0",
     "detect-port": "1.3.0",

package/src/eyes-setup.js

@@ -0,0 +1,272 @@
+#!/usr/bin/env node
+
+const fs = require('fs').promises;
+const {input, confirm} = require('@inquirer/prompts');
+const yargs = require('yargs/yargs');
+const chalk = require('chalk');
+const {pathToFileURL} = require('url');
+const utils = require('@applitools/utils');
+
+const {hideBin} = require('yargs/helpers');
+yargs(hideBin(process.argv))
+  .command({
+    command: '*',
+    builder: yargs => {
+      const args = yargs.options({
+        apiKey: {
+          describe:
+            "Your Applitools Team's API key (here's how to obtain it: https://applitools.com/docs/topics/overview/obtain-api-key.html)",
+          type: 'string',
+        },
+        serverUrl: {describe: 'Your Eyes dedicated cloud server URL', type: 'string'},
+      });
+      return args;
+    },
+    handler: handleError(init),
+  })
+  .help()
+  .parse();
+
+function handleError(asyncFunc) {
+  return async (...args) =>
+    asyncFunc(...args).catch(err => {
+      if (err.name === 'ExitPromptError') {
+        log('See you next time!');
+      } else {
+        error(`Error while setting up Eyes: ${err.message}`);
+      }
+      process.exit(1);
+    });
+}
+
+async function init(args) {
+  let shouldUpdate = true;
+  let fileName;
+
+  log(chalk.yellow('Setting up Eyes-Storybook for your project:'));
+
+  let config = await loadExistingConfig();
+  if (config) {
+    shouldUpdate = false;
+    // this show a warning if the apiKey is actually 'process.env.APPLITOOLS_API_KEY' in the config file since we load it
+    // if (config.apiKey !== 'process.env.APPLITOOLS_API_KEY') {
+    //   console.log(config.apiKey)
+    //   log(
+    //     chalk.yellow(
+    //       `Detected 'apiKey' is not obscured. It is recommended to set this via environment variable APPLITOOLS_API_KEY.`,
+    //     ),
+    //   );
+    // }
+  }
+
+  let apiKey,
+    serverUrl,
+    shouldUseEnvApiKey = false,
+    shouldUseEnvServerUrl = false,
+    warnForApiKey = false;
+  if (shouldUpdate && utils.general.getEnvValue('API_KEY')) {
+    shouldUseEnvApiKey = await confirm({
+      message:
+        'Detected APPLITOOLS_API_KEY environment variable. Would you like it to be used? (default Yes):',
+      default: true,
+    });
+    apiKey = shouldUseEnvApiKey ? 'process.env.APPLITOOLS_API_KEY' : undefined;
+    warnForApiKey = !shouldUseEnvApiKey; // warn if the user doesn't want to use the env variable
+  }
+  for (const url of ['EYES_SERVER_URL', 'SERVER_URL']) {
+    if (shouldUpdate && utils.general.getEnvValue(url)) {
+      shouldUseEnvServerUrl = await confirm({
+        message: `Detected APPLITOOLS_${url} environment variable. Would you like it to be used? (default Yes):`,
+        default: true,
+      });
+      serverUrl = shouldUseEnvServerUrl ? `APPLITOOLS_${url}` : undefined;
+    }
+  }
+
+  if (shouldUpdate) {
+    if (!shouldUseEnvApiKey) {
+      apiKey =
+        args.apiKey ??
+        (await input({
+          message:
+            'Enter your API key (https://applitools.com/docs/topics/overview/obtain-api-key.html):',
+        }));
+      warnForApiKey = apiKey !== ''; // warn if the user did provide an API key
+    }
+    if (!shouldUseEnvServerUrl) {
+      serverUrl =
+        args.serverUrl ??
+        (await input({
+          message: 'Enter your Eyes server URL (default is https://eyes.applitools.com):',
+        }));
+    }
+
+    config = {
+      ...config,
+      appName: 'My Storybook App',
+      batchName: 'My Storybook',
+      showLogs: false,
+    };
+
+    const fileContent = generateConfigContent();
+    await fs.writeFile(fileName, fileContent, 'utf8');
+  }
+
+  printPostlude();
+
+  async function loadExistingConfig() {
+    const configFiles = [
+      'applitools.config.js',
+      'applitools.config.mjs',
+      'applitools.config.cjs',
+      'eyes.config.js',
+    ];
+
+    for (const file of configFiles) {
+      fileName = file;
+      try {
+        await fs.access(file);
+        const fileUrl = pathToFileURL(file).href;
+        const module = await import(fileUrl);
+        return module.default || module;
+      } catch (err) {
+        // try the next file if it doesn't exist
+        if (err.code === 'ENOENT') continue;
+        throw err; // we are only interested in the file not found error
+      }
+    }
+    // no config file found
+    fileName = 'applitools.config.js';
+    return null;
+  }
+
+  function generateConfigContent() {
+    const envConfigMap = {
+      batchName: 'APPLITOOLS_BATCH_NAME',
+      batchId: 'APPLITOOLS_BATCH_ID',
+      showLogs: 'APPLITOOLS_SHOW_LOGS',
+      batchSequenceName: 'APPLITOOLS_BATCH_SEQUENCE_NAME',
+      proxy: 'APPLITOOLS_PROXY',
+      notifyOnCompletion: 'APPLITOOLS_NOTIFY_ON_COMPLETION',
+      concurrentTabs: 'APPLITOOLS_CONCURRENT_TABS',
+      appName: 'APPLITOOLS_APP_NAME',
+    };
+
+    const configLines = [];
+
+    // Handle apiKey
+    if (apiKey === 'process.env.APPLITOOLS_API_KEY') {
+      configLines.push('apiKey: process.env.APPLITOOLS_API_KEY,');
+    } else if (apiKey) {
+      configLines.push(
+        `apiKey: '${apiKey}', // Warning: 'apiKey' is not obscured, consider setting it via environment variable APPLITOOLS_API_KEY`,
+      );
+    } else {
+      configLines.push(`// apiKey: '',`);
+    }
+
+    // Handle serverUrl
+    if (serverUrl && serverUrl.startsWith('process.env.')) {
+      configLines.push(`serverUrl: ${serverUrl},`);
+    } else if (serverUrl) {
+      configLines.push(`serverUrl: '${serverUrl}',`);
+    } else {
+      configLines.push(`// serverUrl: '',`);
+    }
+
+    // Handle other config lines
+    const otherKeys = [
+      'appName',
+      'batchName',
+      'batchId',
+      'showLogs',
+      'batchSequenceName',
+      'proxy',
+      'notifyOnCompletion',
+      'concurrentTabs',
+    ];
+
+    for (const key of otherKeys) {
+      const line = getConfigLine(key);
+      if (line) {
+        configLines.push(line);
+      }
+    }
+
+    return `/**
+ * @type {import('@applitools/eyes-storybook').ApplitoolsConfig}
+ **/
+module.exports = {
+  ${configLines.join('\n  ')}
+  // browsersInfo: [
+  //    {width: 1024, height: 768, name: 'firefox'},
+  //    {width: 1024, height: 768, name: 'chrome'},
+  //    {iosDeviceInfo: {deviceName: 'iPhone 16'}},
+  //    {chromeEmulationInfo: {deviceName: 'Galaxy S20'}},
+  // ]
+};
+`;
+
+    function getConfigLine(key, override = undefined) {
+      const envVar = envConfigMap[key];
+      if (override) {
+        return config[key];
+      }
+      if (utils.types.isArray(envVar)) {
+        for (const v of envVar) {
+          if (utils.general.getEnvValue(v.replace('APPLITOOLS_', ''))) {
+            return `${key}: process.env.${v},`;
+          }
+        }
+      } else if (envVar && utils.general.getEnvValue(envVar.replace('APPLITOOLS_', ''))) {
+        return `${key}: process.env.${envVar},`;
+      }
+
+      // Check if the key exists in the config object before using its value.
+      // Using Object.prototype.hasOwnProperty.call is a safe way to check.
+      if (Object.prototype.hasOwnProperty.call(config, key)) {
+        const value = config[key];
+        // Format the value based on its type.
+        return typeof value === 'string' ? `${key}: '${value}',` : `${key}: ${value},`;
+      } else {
+        return '';
+      }
+    }
+  }
+
+  function printPostlude() {
+    log('');
+    if (shouldUpdate) {
+      log(
+        chalk.green('✔ Success!'),
+        chalk.bold('\n'),
+        chalk.bold('Eyes Storybook is now set up!'),
+        chalk.bold('Please visit our Storybook documentation to learn more.'),
+        chalk.bold('https://applitools.com/tutorials/sdks/storybook/quickstart'),
+      );
+    } else {
+      log(
+        chalk.green('✔ Good news! Eyes Storybook is already properly configured!'),
+        chalk.bold('\n'),
+        chalk.bold('Please visit our Storybook documentation to learn more.'),
+        chalk.bold('https://applitools.com/tutorials/sdks/storybook/quickstart'),
+      );
+    }
+
+    if (warnForApiKey) {
+      log(
+        chalk.yellow(
+          'Please consider setting your API key via environment variable APPLITOOLS_API_KEY to avoid exposing it in the config file.',
+        ),
+      );
+    }
+  }
+}
+
+function log(...args) {
+  console.log(...args);
+}
+
+function error(...args) {
+  console.error(...args);
+}

package/src/eyesStorybook.js

@@ -91,7 +91,11 @@ async function eyesStorybook({
       },
     })
     .catch(async error => {
-      if (error && error.message && error.message.includes('Unauthorized(401)')) {
+      if (
+        error &&
+        error.message &&
+        error.message.includes('Please check your API key and try again.')
+      ) {
         const failMsg = 'Incorrect API Key';
         logger.log(failMsg);
         await browser.close();

package/src/generateConfig.js

@@ -10,7 +10,12 @@ function generateConfig({argv = {}, defaultConfig = {}, externalConfigParams = [
   const defaultConfigParams = Object.keys(defaultConfig);
   const configPaths = argv.conf ? [resolve(process.cwd(), argv.conf)] : undefined;
   const configParams = uniq(defaultConfigParams.concat(externalConfigParams));
-  const config = utils.config.getConfig({paths: configPaths, params: configParams});
+  const config = utils.config.getConfig({
+    paths: configPaths,
+    params: configParams,
+    strict: true,
+    traverse: false,
+  });
   const argvConfig = lodash.pick(argv, configParams);
   const result = Object.assign({}, defaultConfig, config, argvConfig);
 
@@ -87,12 +92,23 @@ function transformConfig(result) {
 }
 
 function transformBrowser(result) {
+  if (result.browsersInfo) {
+    transformBrowsersInfo(result.browsersInfo);
+    delete result.browsersInfo;
+  }
   if (result.browser) {
+    transformBrowsersInfo(result.browser);
+    delete result.browser;
+  }
+
+  return result;
+
+  function transformBrowsersInfo(info) {
     result.environments = [];
-    if (!Array.isArray(result.browser)) {
-      result.browser = [result.browser];
+    if (!utils.types.isArray(info)) {
+      info = [info];
     }
-    result.environments = result.browser.map(browser => {
+    result.environments = info.map(browser => {
       if (browser.deviceName) {
         return {chromeEmulationInfo: browser};
       } else if (utils.types.has(browser, 'iosDeviceInfo')) {
@@ -104,8 +120,6 @@ function transformBrowser(result) {
       return browser;
     });
   }
-  delete result.browser;
-  return result;
 }
 
 function transformLayoutBreakpoints(result) {

package/src/types/types.ts

@@ -0,0 +1,4 @@
+import {Configuration} from '@applitools/eyes'
+
+// should we omit more properties?
+export type ApplitoolsConfig = Omit<Configuration, 'waitBeforeScreenshots'>