# storybook config generator
following salesforce's [RFE](https://trello.com/c/3joR3UlD/758-salesforce-storybook-rfe-for-dynamic-config) ticket I decided to suggest the following to the customer.

### `npm script`

{
    "scripts": {
        "prompt": "node applitools.prompts.js && eyes-storybook"
    }
}

### `applitools.prompts.js`

const { prompt } = require('enquirer');
const branch = require('git-branch');
const fs = require('fs').promises;
const pkg = require('./package.json');

const sfdcVersion = pkg.slds.id;
const sfdcName = pkg.slds.name.toLowerCase().replace(' ’', '-');
const currentBranch = branch.sync();

async function ask() {
  return prompt([
    {
      type: 'input',
      name: 'apiKey',
      message: 'Please provide your APPLITOOLS_API_KEY value\n ',
      skip: () => {
        if (process.env.APPLITOOLS_API_KEY) {
          return true;
        }
      }
    },
    {
      type: 'input',
      name: 'batchName',
      message: 'Please provide a batch name for this run\n ',
      initial: 'Local run',
      result(name) {
        return `${name} (${process.env.LOGNAME})`;
      }
    },
    {
      type: 'input',
      name: 'parentBranch',
      message: 'Which branch would you like to compare against\n ',
      initial: `${sfdcVersion}-${sfdcName}`,
      result(branch) {
        if (branch) {
          return `salesforce-ux/design-system-internal/${branch}`;
        }

        return `localRun/${currentBranch}`;
      }
    },
    {
      type: 'input',
      name: 'testKindPattern',
      message: `If you'd like to test only some blueprints please enter the regex pattern\n `,
      footer: `  (ex. "Path|Buttons|Icons$" NOTE: do not use ^)`,
      initial: 'all',
      result(pattern) {
        if (pattern.toLowerCase() === 'all') {
          return new RegExp('.*', 'g').toString();
        }

        return new RegExp(pattern, 'g').toString();
      }
    },
    {
      type: 'input',
      name: 'testNamePattern',
      message: `If you'd like to test only specific tests within blueprints please enter the regex pattern\n `,
      initial: '^Kitchen Sink',
      result(pattern) {
        return new RegExp(pattern, 'g').toString();
      }
    },
    {
      type: 'confirm',
      name: 'showStorybookOutput',
      message: `Would you like to show Storybook output logs?\n `
    },
    {
      type: 'confirm',
      name: 'showLogs',
      message: `Would you like to show Applitools output logs?\n `
    }
  ])
    .catch(console.error);
};

ask().then(async answers => {
  answers.branch = currentBranch;
  const template = require('./applitools.config.template')

  const userConfig = Object.keys(answers).reduce((acc, key) => {
    if (key in template) {
        acc[key] = answers[key] || template[key];
    }
     return acc;
  }, {});
  
  const config = Object.assign(template, userConfig);
  const parsedConfig = Object.keys(config).map(key => {
    const value = config[key];
    const type = typeof value;
    
    if(type === 'object'){
      return `${key}: ${JSON.stringify(value, null, 4)}`;
    } else if (type === 'string') {
      return `${key}: '${value}'`
    }  else {
      return `${key}: ${value}`;
    } 
  }).join(',\n  ')

  const configExport = `
module.exports = {
  ${parsedConfig}
}
  `

  await fs.writeFile(`./applitools.config.js`, configExport)
})

### `applitools.config.template.js`

const resolution = { width: 1024, height: 768 };

module.exports = {
  apiKey: process.env.APPLITOOLS_API_KEY,
  appName: 'SLDS',
  matchLevel: 'Strict',
  ignoreDisplacements: true,
  accessibilityValidation: {
    level: 'AA',
    guidelinesVersion: 'WCAG_2_0',
  },
  properties: [{ name: 'Group', value: 'desktop' }],
  batchName: process.env.CI ? undefined : '',
  branch: process.env.CI ? undefined : '',
  parentBranch: process.env.CI ? undefined : '',
  showLogs: !!!process.env.CI,
  showStorybookOutput: !!process.env.CI,
  // saveDebugData: false,
  exitcode: false,
  concurrency: 100,
  serverUrl: 'https://salesforceuxeyesapi.applitools.com',
  testKindPattern: '',
  testNamePattern: '',
  include: function ({ name, kind, parameters }) {
    return new RegExp(this.testKindPattern).test(kind) && new RegExp(this.testNamePattern).test(name);
  },
  puppeteerOptions: process.env.CIRCLECI
    ? { executablePath: '/usr/bin/google-chrome' }
    : undefined,
  waitBeforeScreenshot: 250,
  browser: [
    { width: resolution.width, height: resolution.height, name: 'firefox' },
    { width: resolution.width, height: resolution.height, name: 'chrome' },
    { width: resolution.width, height: resolution.height, name: 'safari' },
    {
      width: resolution.width,
      height: resolution.height,
      name: 'edgechromium',
    },
  ],
};

:::warning
NOTE! this is provided as-is and by no means considered a formal solution or part of our product. It is meant to help the customer achieve their goal with our tools.
I verified it works but any future maintenace/fixes required is the responsibility of the user.
:::