feat: add support for outputting multiple files by kind, or laying out stories by kind

Author: hipstersmoothie

README.md

@@ -110,7 +110,7 @@ module.exports = {
 
 | Parameter           | Explanation                                                                                                                                                                    | Input Type    | Default                                                                             |
 | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------- |
-| output              | Specifies the filename for the generated asketch.json file.                                                                                                                    | string        | `"dist/stories.asketch.json"`                                                       |
+| output              | Specifies the filename for the generated asketch.json file or a folder when outputBy === 'kind'.                                                                               | string        | `"dist/stories.asketch.json"`                                                       |
 | input               | The location of Storybook's generated iframe.html. Use this over `url` if possible for performance.                                                                            | string        | `"dist/iframe.html"`                                                                |
 | url                 | Storybook iframe URL. Will end in `iframe.html`. Prefer `input` for performance if possible.                                                                                   | string        | `"http://localhost:9001/iframe.html"`                                               |
 | stories             | Stories to extract from Storybook. You should probably override the default.                                                                                                   | object/string | `"all"`                                                                             |
@@ -122,6 +122,8 @@ module.exports = {
 | fixPseudo           | Attempt to insert real elements in place of pseudo-elements                                                                                                                    | boolean       | `false`                                                                             |
 | puppeteerOptions    | Options to be passed directly to `puppeteer.launch`. See [puppeteer docs](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions) for usage. | object        | `{}`                                                                                |
 | removePreviewMargin | Remove preview margin from the iframe body.                                                                                                                                    | boolean       | `true`                                                                              |
+| layoutBy            | How to layout the stories. (values: 'kind')                                                                                                                                    | string        | null                                                                                |
+| outputBy            | How to output the stories (values: 'kind')                                                                                                                                     | string        | null                                                                                |
 
 ### Example story2sketch.config.js
 
@@ -188,7 +190,6 @@ module.exports = {
   },
   ...
 };
-
 ```
 
 <a name="questions"><a/>

package.json

@@ -54,6 +54,7 @@
     "chalk": "^2.3.0",
     "cosmiconfig": "^4.0.0",
     "find-up": "^2.1.0",
+    "mkdirp": "^0.5.1",
     "mock-require": "^3.0.1",
     "progress": "^2.0.0",
     "puppeteer": "^1.0.0",

src/server/Story2sketch.js

@@ -2,6 +2,8 @@
 
 import puppeteer from "puppeteer";
 import fs from "fs";
+import path from "path";
+import mkdirp from "mkdirp";
 import chalk from "chalk";
 import ProgressBar from "progress";
 
@@ -35,7 +37,9 @@ export default class Story2sketch {
     fixPseudo = false,
     stories,
     puppeteerOptions = {},
-    removePreviewMargin = true
+    removePreviewMargin = true,
+    layoutBy = null,
+    outputBy = null
   }) {
     this.output = output;
     this.url = url;
@@ -47,6 +51,8 @@ export default class Story2sketch {
     this.stories = stories;
     this.verbose = verbose;
     this.fixPseudo = fixPseudo;
+    this.layoutBy = layoutBy;
+    this.outputBy = outputBy;
     this.removePreviewMargin = removePreviewMargin === true;
     this.puppeteerOptions = puppeteerOptions;
 
@@ -61,6 +67,7 @@ export default class Story2sketch {
 
   reset() {
     this.symbolsByViewport = {};
+    this.symbolsByKind = {};
     this.widestByViewport = {};
     this.tallestByStory = {};
     this.processedStories = 0;
@@ -135,6 +142,12 @@ export default class Story2sketch {
     await pagePool.init();
 
     for (const { kind, stories } of this.stories) {
+      this.symbolsByKind[kind] = {};
+
+      for (const { id } of this.sortedViewports) {
+        this.symbolsByKind[kind][id] = Array(stories.length);
+      }
+
       for (const story of stories) {
         const storyIndex = this.storyCount;
 
@@ -161,6 +174,7 @@ export default class Story2sketch {
 
             // Assign by index to retain the order of the symbols
             this.symbolsByViewport[viewportKey][storyIndex] = symbol;
+            this.symbolsByKind[kind][viewportKey][storyIndex] = symbol;
           }
 
           this.tallestByStory[storyIndex] = tallest;
@@ -251,26 +265,80 @@ export default class Story2sketch {
     }
   }
 
-  positionSymbols() {
-    let xOffset = 0;
+  positionSymbols(symbolsByViewport, xOffsetStart = 0) {
+    let layers = [];
+    let xOffset = xOffsetStart;
 
     for (const { id } of this.sortedViewports) {
       let yOffset = 0;
 
-      const symbols = this.symbolsByViewport[id];
+      const symbols = symbolsByViewport[id];
 
       for (const [index, symbol] of symbols.entries()) {
         // Skip failed symbols
         if (symbol) {
           symbol.frame.x = xOffset;
           symbol.frame.y = yOffset;
-          this.sketchPage.layers.push(symbol);
+          layers.push(symbol);
           yOffset += this.tallestByStory[index] + this.symbolGutter;
         }
       }
 
       xOffset += this.widestByViewport[id] + this.symbolGutter;
     }
+
+    return layers;
+  }
+
+  positionSymbolsByViewport() {
+    this.sketchPage.layers = [
+      ...this.sketchPage.layers,
+      ...this.positionSymbols(this.symbolsByViewport)
+    ];
+  }
+
+  positionSymbolsByKind() {
+    const width = this.sortedViewports.reduce(
+      (totalWidth, viewport) =>
+        totalWidth + this.widestByViewport[viewport.id] + this.symbolGutter,
+      0
+    );
+
+    for (const [index, kind] of Object.keys(this.symbolsByKind).entries()) {
+      const symbolsByViewport = this.symbolsByKind[kind];
+
+      this.sketchPage.layers = [
+        ...this.sketchPage.layers,
+        ...this.positionSymbols(symbolsByViewport, width * index)
+      ];
+    }
+  }
+
+  writeByKind() {
+    mkdirp(this.output);
+
+    for (const kind of Object.keys(this.symbolsByKind)) {
+      const sketchPage = {
+        ...this.sketchPage,
+        layers: this.positionSymbols(this.symbolsByKind[kind])
+      };
+      const filename = `${kind
+        .replace(" ", "_")
+        .replace("/", "+")}.asketch.json`;
+
+      fs.writeFileSync(
+        path.join(this.output, filename),
+        JSON.stringify(sketchPage)
+      );
+    }
+
+    console.log(
+      chalk.green(
+        `Success! ${
+          this.processedStories
+        } stories written by kind to ${chalk.white.bold(this.output)}`
+      )
+    );
   }
 
   async execute() {
@@ -289,9 +357,17 @@ export default class Story2sketch {
       }
     });
 
-    this.positionSymbols();
+    if (this.outputBy === "kind") {
+      this.writeByKind();
+    } else {
+      if (this.layoutBy === "kind") {
+        this.positionSymbolsByKind();
+      } else {
+        this.positionSymbolsByViewport();
+      }
 
-    fs.writeFileSync(this.output, JSON.stringify(this.sketchPage));
+      fs.writeFileSync(this.output, JSON.stringify(this.sketchPage));
+    }
 
     console.log(
       chalk.green(

src/server/index.js

@@ -10,17 +10,15 @@ import path from "path";
 import chalk from "chalk";
 import logoAscii from "./logoAscii";
 
+// Ensure paths are absolute, not relative
+const absolute = p => (p && p[0] !== "/" ? path.join(process.cwd(), p) : p);
+
 const tidyConfig = config => {
   const newConfig = { ...config };
 
-  // Ensure paths are absolute, not relative
-  if (newConfig.output && newConfig.output[0] !== "/") {
-    newConfig.output = path.join(process.cwd(), newConfig.output);
-  }
-
-  if (newConfig.input && newConfig.input[0] !== "/") {
-    newConfig.input = path.join(process.cwd(), newConfig.input);
-  }
+  newConfig.input = absolute(newConfig.input);
+  newConfig.output = absolute(newConfig.output);
+  newConfig.outputBy = absolute(newConfig.outputBy);
 
   // Convert input file to URL if defined
   if (newConfig.input) {