WIP add multi & config support

.github/workflows/self-multi.yml

@@ -0,0 +1,20 @@
+name: "self test development-like from config (multi)"
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v1
+    - run: |
+        yarn && yarn build
+    - uses: ./
+      env:
+        CHROMATIC_APP_CODE: ${{ secrets.CHROMATIC_APP_CODE }}
+      with: 
+        token: ${{ secrets.GITHUB_TOKEN }}
+        config: chromatic.config.js

.github/workflows/self-run-prod.yml

@@ -1,6 +1,8 @@
 name: "self test production-like"
 on:
   pull_request:
+    branches:
+      - 'release/*'
   push:
     branches:
       - 'release/*'
@@ -14,6 +16,6 @@ jobs:
       with: 
         appCode: ${{ secrets.CHROMATIC_APP_CODE }}
         token: ${{ secrets.GITHUB_TOKEN }}
-        storybookBuildDir: storybook-static
+        storybookBuildDir: storybook-static-1
       env:
         CHROMATIC_STORYBOOK_VERSION: [email protected]

.github/workflows/self-run.yml

@@ -16,4 +16,4 @@ jobs:
       with: 
         appCode: ${{ secrets.CHROMATIC_APP_CODE }}
         token: ${{ secrets.GITHUB_TOKEN }}
-        storybookBuildDir: storybook-static
+        storybookBuildDir: storybook-static-1

chromatic.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  one: {
+    appCode: process.env.CHROMATIC_APP_CODE,
+    storybookBuildDir: 'storybook-static-1',
+  },
+  two: {
+    appCode: process.env.CHROMATIC_APP_CODE,
+    storybookBuildDir: 'storybook-static-2',
+  },
+};

package.json

@@ -23,15 +23,15 @@
     "@actions/core": "^1.2.0",
     "@actions/github": "^1.1.0",
     "esm": "^3.2.25",
-    "storybook-chromatic": "^3.1.0"
+    "storybook-chromatic": "^3.4.1"
   },
   "devDependencies": {
-    "@storybook/react": "^5.2.6",
+    "@storybook/react": "^5.2.8",
     "@types/jest": "^24.0.23",
-    "@types/node": "^12.12.7",
+    "@types/node": "^12.12.14",
     "jest": "^24.8.0",
     "jest-circus": "^24.7.1",
-    "ts-jest": "^24.0.2",
+    "ts-jest": "^24.2.0",
     "typescript": "^3.7.2"
   }
 }

src/main.ts

@@ -1,3 +1,4 @@
+import path from 'path';
 import { getInput, error, setFailed, setOutput, info } from '@actions/core';
 import { GitHub, context } from "@actions/github";
 import { runTest } from 'storybook-chromatic/bin/tester/index';
@@ -74,6 +75,47 @@ const getApi = () => {
   }
 }
 
+const getConfigs = () => {
+  const appCode = getInput('appCode');
+
+  if (appCode) {
+    return {
+      default: {
+        appCode,
+        buildScriptName: maybe(getInput('buildScriptName')),
+        scriptName: maybe(getInput('scriptName')),
+        exec: maybe(getInput('exec')),
+        doNotStart: maybe(getInput('doNotStart')),
+        storybookPort: maybe(getInput('storybookPort')),
+        storybookUrl: maybe(getInput('storybookUrl')),
+        storybookBuildDir: maybe(getInput('storybookBuildDir')),
+        storybookHttps: maybe(getInput('storybookHttps')),
+        storybookCert: maybe(getInput('storybookCert')),
+        storybookKey: maybe(getInput('storybookKey')),
+        storybookCa: maybe(getInput('storybookCa')),
+        autoAcceptChanges: maybe(getInput('autoAcceptChanges')),
+        exitZeroOnChanges: maybe(getInput('exitZeroOnChanges'), true),
+        ignoreLastBuildOnBranch: maybe(getInput('ignoreLastBuildOnBranch')),
+        fromCI: true,
+        interactive: false,
+      },
+    };
+  } else {
+    const configLocation = getInput('config');
+
+    const config = require(path.resolve(configLocation));
+
+    if(config.appCode) {
+      return {
+        default: config,
+      };
+    }
+
+    return config;
+  }
+
+}
+
 async function run() {
   let deployment_id: number = NaN;
   const api = getApi();
@@ -86,87 +128,66 @@ async function run() {
   const { branch, repo, owner, sha } = commit;
 
   try {
-    const appCode = getInput('appCode');
-    const buildScriptName = getInput('buildScriptName');
-    const scriptName = getInput('scriptName');
-    const exec = getInput('exec');
-    const doNotStart = getInput('doNotStart');
-    const storybookPort = getInput('storybookPort');
-    const storybookUrl = getInput('storybookUrl');
-    const storybookBuildDir = getInput('storybookBuildDir');
-    const storybookHttps = getInput('storybookHttps');
-    const storybookCert = getInput('storybookCert');
-    const storybookKey = getInput('storybookKey');
-    const storybookCa = getInput('storybookCa');
-    const autoAcceptChanges = getInput('autoAcceptChanges');
-    const exitZeroOnChanges = getInput('exitZeroOnChanges');
-    const ignoreLastBuildOnBranch = getInput('ignoreLastBuildOnBranch');
+    const configs = getConfigs();
 
     process.env.CHROMATIC_SHA = sha;
     process.env.CHROMATIC_BRANCH = branch;
 
-    const deployment = api.repos.createDeployment({
-      repo,
-      owner,
-      ref: branch,
-      environment: 'chromatic',
-      required_contexts: [],
-      auto_merge: false,
-    }).then(deployment => {
-      deployment_id = deployment.data.id;
-
-      return api.repos.createDeploymentStatus({
+    const outputs: Record<string, Output> = await Object.entries(configs).reduce(async (acc, [k, v]) => {
+      const existing = await acc;
+
+      const deployment = api.repos.createDeployment({
         repo,
         owner,
-        deployment_id,
-        state: 'pending',
-      });
-    }).catch(e => {
-      deployment_id = NaN;
-      console.log('adding deployment to GitHub failed, You are likely on a forked repo and do not have write access.');
-    });
-
-    const chromatic = runChromatic({
-      appCode,
-      buildScriptName: maybe(buildScriptName),
-      scriptName: maybe(scriptName),
-      exec: maybe(exec),
-      doNotStart: maybe(doNotStart),
-      storybookPort: maybe(storybookPort),
-      storybookUrl: maybe(storybookUrl),
-      storybookBuildDir: maybe(storybookBuildDir),
-      storybookHttps: maybe(storybookHttps),
-      storybookCert: maybe(storybookCert),
-      storybookKey: maybe(storybookKey),
-      storybookCa: maybe(storybookCa),
-      fromCI: true,
-      interactive: false,
-      autoAcceptChanges: maybe(autoAcceptChanges),
-      exitZeroOnChanges: maybe(exitZeroOnChanges, true),
-      ignoreLastBuildOnBranch: maybe(ignoreLastBuildOnBranch),
-    });
-
-    const [{ url, code }] = await Promise.all([
-      chromatic,
-      deployment,
-    ]);
-
-    if (typeof deployment_id === 'number' && !isNaN(deployment_id)) {
-      try {
-        await api.repos.createDeploymentStatus({
+        ref: branch,
+        environment: k === 'default' ? 'chromatic' : 'chromatic ' + k,
+        required_contexts: [],
+        auto_merge: false,
+      }).then(deployment => {
+        deployment_id = deployment.data.id;
+
+        return api.repos.createDeploymentStatus({
           repo,
           owner,
           deployment_id,
-          state: 'success',
-          environment_url: url
+          state: 'pending',
         });
-      } catch (e){
-        //
+      }).catch(e => {
+        deployment_id = NaN;
+        console.log('adding deployment to GitHub failed, You are likely on a forked repo and do not have write access.');
+      });
+
+      const chromatic = runChromatic(v);
+
+      const [{ url, code }] = await Promise.all([
+        chromatic,
+        deployment,
+      ]);
+
+      if (typeof deployment_id === 'number' && !isNaN(deployment_id)) {
+        try {
+          await api.repos.createDeploymentStatus({
+            repo,
+            owner,
+            deployment_id,
+            state: 'success',
+            environment_url: url
+          });
+        } catch (e){
+          //
+        }
       }
-    }
 
-    setOutput('url', url);
-    setOutput('code', code.toString());
+      return { ...existing, [k]: { code, url } }
+    }, Promise.resolve({}));
+
+
+    Object.entries(outputs).forEach(([key, { url, code }]) => {
+      const pre = key === 'default' ? '' : key + '-';
+
+      setOutput(pre + 'url', url);
+      setOutput(pre + 'code', code.toString());
+    });
   } catch (e) {
     e.message && error(e.message);
     e.stack && error(e.stack);

storybook-static-2/iframe.html

@@ -0,0 +1,73 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"><base target="_parent"><style>:not(.sb-show-main) > .sb-main,
+  :not(.sb-show-nopreview) > .sb-nopreview,
+  :not(.sb-show-errordisplay) > .sb-errordisplay {
+    display: none;
+  }
+
+  .sb-wrapper {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20px;
+    font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    overflow: auto;
+  }
+
+  .sb-heading {
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    margin: 10px 0;
+    padding-right: 25px;
+  }
+
+  .sb-nopreview {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+  }
+
+  .sb-nopreview_main {
+    margin: auto;
+    padding: 30px;
+    border-radius: 10px;
+    background: rgba(0,0,0,0.03);
+  }
+
+  .sb-nopreview_heading {
+    text-align: center;
+  }
+
+  .sb-errordisplay {
+    border: 20px solid rgb(187, 49, 49);
+    background: #222;
+    color: #fff;
+    z-index: 999999;
+  }
+
+  .sb-errordisplay_code {
+    padding: 10px;
+    background: #000;
+    color: #eee;
+    font-family: "Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Andale Mono", "Lucida Console", Consolas, Monaco, monospace;
+  }
+
+  .sb-errordisplay pre {
+    white-space: pre-wrap;
+  }</style><script>/* globals window */
+  /* eslint-disable no-underscore-dangle */
+  try {
+    if (window.parent !== window) {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('unable to connect to parent frame for connecting dev tools');
+  }</script><style>#root[hidden],
+      #docs-root[hidden] {
+        display: none !important;
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.774ec8a69245de6ad3ef.bundle.js"></script><script src="vendors~main.774ec8a69245de6ad3ef.bundle.js"></script><script src="main.774ec8a69245de6ad3ef.bundle.js"></script></body></html>

storybook-static-2/index.html

@@ -0,0 +1,20 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"><style>html, body {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }</style><script>/* globals window */
+  /* eslint-disable no-underscore-dangle */
+  try {
+    if (window.parent !== window) {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('unable to connect to parent frame for connecting dev tools');
+  }</script><style>#root[hidden],
+      #docs-root[hidden] {
+        display: none !important;
+      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.25fc818af1dd5d1e4dbb.bundle.js"></script><script src="vendors~main.8a575d479d4527f0c5fc.bundle.js"></script><script src="main.133e24f8ec81fc731630.bundle.js"></script></body></html>