Add support for static storybook

* static storybook directory is served on a local http server and
  corresponding url is used to fetch stories

Author: pinanks

commands/storybook.js

@@ -1,13 +1,22 @@
 const { default: axios } = require('axios')
 const fs = require('fs');
 const { sendDoM } = require('./utils/dom')
-const { validateStorybookUrl } = require('./utils/validate')
+const { validateStorybookUrl, validateStorybookDir } = require('./utils/validate')
 const { defaultSmartUIConfig } = require('./utils/config')
 const { skipStory } = require('./utils/story')
+const { createStaticServer } = require('./utils/server')
 
-async function storybook(url, options) {
-    // Check connection with storybook url
-    await validateStorybookUrl(url);
+async function storybook(serve, options) {
+    let server, url;
+    let type = /^https?:\/\//.test(serve) ? 'url' : 'dir'
+    if (type === 'url') {
+        await validateStorybookUrl(serve);
+        url = serve;
+    } else {
+        await validateStorybookDir(serve);
+        server = await createStaticServer(serve);
+        url = `http://localhost:${server.address().port}`;
+    }
 
     // TODO: modularize this and separate check for file exists
     let storybookConfig = defaultSmartUIConfig.storybook; 
@@ -37,8 +46,8 @@ async function storybook(url, options) {
     storybookConfig.browsers = (!storybookConfig.browsers.length) ? 'all' : storybookConfig.browsers.toString();
 
     // Get stories object from stories.json and add url corresponding to every story ID 
-    axios.get(new URL('stories.json', url).href)
-        .then(function (response) {
+    await axios.get(new URL('stories.json', url).href)
+        .then(async function (response) {
             let stories = {}
             for (const [storyId, storyInfo] of Object.entries(response.data.stories)) {
                 if (!skipStory(storyInfo.name, storybookConfig)) {
@@ -59,7 +68,7 @@ async function storybook(url, options) {
                 }
             }
             // Capture DoM of every story and send it to renderer API
-            sendDoM(url, stories, storybookConfig, options);
+            await sendDoM(url, stories, storybookConfig, options);
         })
         .catch(function (error) {
             if (error.response) {
@@ -69,8 +78,11 @@ async function storybook(url, options) {
             } else {
                 console.log('[smartui] Error: Cannot fetch Storybook stories');
             }
-            process.exit(0);
         });
+    
+    // Close static server
+    if (server) server?.close();
+    
 };
 
 module.exports = { storybook };

commands/utils/server.js

@@ -0,0 +1,15 @@
+var http = require('http');
+var finalhandler = require('finalhandler');
+var serveStatic = require('serve-static');
+
+async function createStaticServer(staticPath) {
+    var serve = serveStatic(staticPath, {'index': false});
+    var server = http.createServer(function(req, res){
+        var done = finalhandler(req, res);
+        serve(req, res, done);
+    })
+    
+    return server.listen();
+}
+
+module.exports = { createStaticServer }

commands/utils/validate.js

@@ -1,5 +1,6 @@
 const axios = require('axios');
 var { constants } = require('./constants');
+const fs = require('fs');
 
 function validateProjectToken(options) {
     if (process.env.PROJECT_TOKEN) { 
@@ -51,4 +52,12 @@ function validateStorybookUrl(url) {
         });
 };
 
-module.exports = { validateProjectToken, validateStorybookUrl };
+async function validateStorybookDir(dir) {
+    // verify the storybook static directory exists
+    if (!fs.existsSync(dir)) {
+        console.log(`[smartui] Error: No directory found: ${dir}`);
+        process.exit(1);
+    }
+};
+
+module.exports = { validateProjectToken, validateStorybookUrl, validateStorybookDir };

index.js

@@ -24,13 +24,13 @@ configCommand.command('create')
 
 program.command('storybook')
     .description('Snapshot Storybook stories')
-    .argument('<url>', 'Storybook url')
+    .argument('<url|directory>', 'Storybook url or static build directory')
     .option('-c --config <file>', 'Config file path')
     // .option('--env <prod|stage>', 'Runtime environment option', 'prod')
-    .action(async function(url, options) {
+    .action(async function(serve, options) {
         options.env = program.opts().env || 'prod';
         await validateProjectToken(options);
-        storybook(url, options);
+        storybook(serve, options);
     });
 
 program.parse();