Improve storybook configuration detection

src/service/project-type/configurators/storybook.ts

@@ -1,6 +1,6 @@
 import { supportedStorybookFrameworks } from "../storybook";
 import { gt, minVersion, SemVer } from "semver";
-import { ArgumentParser } from "argparse";
+import { Command } from "commander";
 import logger from "../../../util/logger";
 import { getDependencyVersion } from "../../../util/js/dependency";
 import { Configurator } from ".";
@@ -22,20 +22,33 @@ export function storybookConfiguratorFactory(): Configurator {
             }
 
             if (packageJson.scripts) {
-                const argparser = new ArgumentParser({ prog: "start-storybook", addHelp: false });
-                argparser.addArgument(["-h", "--host"]);
-                argparser.addArgument(["-p", "--port"]);
-                argparser.addArgument(["--https"], { type: Boolean });
+                const program = new Command()
+                    .option("-p, --port <port>")
+                    .option("-h, --host <host>")
+                    .option("--https")
+                    .allowUnknownOption();
+
+                const foundScript = Object.entries(packageJson.scripts)
+                    .find(([, v]) => v.indexOf("start-storybook") !== -1);
 
-                const foundScript = Object.entries(packageJson.scripts).find(([, v]) => v.startsWith("start-storybook"));
                 if (foundScript) {
                     const [scriptName, scriptValue] = foundScript;
+
                     logger.debug(`Found storybook script "${scriptName}": "${scriptValue}"`);
-                    const scriptArgs = scriptValue.split(" ").map(a => a.trim());
-                    const [{ host, port, https }] = argparser.parseKnownArgs(scriptArgs);
-                    const protocol = https ? "https" : "http";
-                    config.url = `${protocol}://${host || defaultHost}:${port || defaultPort}/`;
-                    config.startScript = scriptName;
+
+                    const sbCommand = (scriptValue.split("&&")
+                        .reduce((prev, curr) => prev.concat(curr.split("||")), [] as string[])
+                        .find(v => v.trim().startsWith("start-storybook"))) || "";
+
+                    if (sbCommand) {
+                        const sbArgs = sbCommand.split(" ").map(a => a.trim());
+
+                        const { host, port, https } = program.parse(sbArgs, { from: "user" });
+
+                        const protocol = https ? "https" : "http";
+                        config.url = `${protocol}://${host || defaultHost}:${port || defaultPort}/`;
+                        config.startScript = scriptName;
+                    }
                 }
             }
         }

test/service/project-type/configurators/storybook.test.ts

@@ -0,0 +1,144 @@
+import { storybookConfiguratorFactory } from "../../../../src/service/project-type/configurators/storybook";
+import { supportedStorybookFrameworks } from "../../../../src/service/project-type/storybook";
+
+const storybookConfigurator = storybookConfiguratorFactory();
+
+describe("Storybook configurator", () => {
+    test("should detect storybook config", () => {
+        const config = storybookConfigurator({
+            scripts: {
+                storybook: "start-storybook"
+            }
+        });
+
+        expect(config).toStrictEqual({
+            url: "http://localhost:9009/",
+            startScript: "storybook"
+        });
+    });
+
+    test("should detect storybook config with custom port", () => {
+        const config = storybookConfigurator({
+            scripts: {
+                storybook: "start-storybook -p 1234"
+            }
+        });
+
+        expect(config).toStrictEqual({
+            url: "http://localhost:1234/",
+            startScript: "storybook"
+        });
+    });
+
+    test("should detect storybook config with custom host", () => {
+        const config = storybookConfigurator({
+            scripts: {
+                storybook: "start-storybook -h example.com"
+            }
+        });
+
+        expect(config).toStrictEqual({
+            url: "http://example.com:9009/",
+            startScript: "storybook"
+        });
+    });
+
+    test("should detect storybook config with https", () => {
+        const config = storybookConfigurator({
+            scripts: {
+                storybook: "start-storybook --https"
+            }
+        });
+
+        expect(config).toStrictEqual({
+            url: "https://localhost:9009/",
+            startScript: "storybook"
+        });
+    });
+
+    test("should detect storybook config with custom host and https", () => {
+        const config = storybookConfigurator({
+            scripts: {
+                storybook: "start-storybook -h example.com --https"
+            }
+        });
+
+        expect(config).toStrictEqual({
+            url: "https://example.com:9009/",
+            startScript: "storybook"
+        });
+    });
+
+    test("should detect storybook config with custom host and port", () => {
+        const config = storybookConfigurator({
+            scripts: {
+                storybook: "start-storybook -h example.com -p 1234"
+            }
+        });
+
+        expect(config).toStrictEqual({
+            url: "http://example.com:1234/",
+            startScript: "storybook"
+        });
+    });
+
+    test("should detect storybook config with custom host, port and https", () => {
+        const config = storybookConfigurator({
+            scripts: {
+                storybook: "start-storybook -h example.com -p 1234 --https"
+            }
+        });
+
+        expect(config).toStrictEqual({
+            url: "https://example.com:1234/",
+            startScript: "storybook"
+        });
+    });
+
+    test("should detect storybook config with storybook v5+", () => {
+        const config = storybookConfigurator({
+            devDependencies: {
+                [`${supportedStorybookFrameworks[0]}`]: "5.0.0"
+            },
+            scripts: {
+                storybook: "start-storybook"
+            }
+        });
+
+        expect(config).toStrictEqual({
+            url: "http://localhost:9009/",
+            startScript: "storybook",
+            format: "new"
+        });
+    });
+
+    test("should detect storybook config with storybook v5+", () => {
+        const config = storybookConfigurator({
+            devDependencies: {
+                [`${supportedStorybookFrameworks[0]}`]: "5.0.0"
+            },
+            scripts: {
+                storybook: "start-storybook"
+            }
+        });
+
+        expect(config).toStrictEqual({
+            url: "http://localhost:9009/",
+            startScript: "storybook",
+            format: "new"
+        });
+    });
+
+    test("should detect storybook config if the script contains multiple commands", () => {
+        const config = storybookConfigurator({
+            scripts: {
+                storybook: "some-other-command -p param && start-storybook -p 1234 -h example.com || some-other-command -p param"
+            }
+        });
+
+        expect(config).toStrictEqual({
+            url: "http://example.com:1234/",
+            startScript: "storybook"
+        });
+    });
+});