Add Storybook of integration test docs

.storybook/addons.js

@@ -0,0 +1 @@
+import "@storybook/addon-viewport/register";

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/html';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,13 @@
+const path = require("path");
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        loaders: ["style-loader", "css-loader", "sass-loader"],
+        include: path.resolve(__dirname, "../")
+      }
+    ]
+  }
+};

README.md

@@ -28,7 +28,21 @@ First, install [Node](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/en/
 
     $ yarn
 
-The LaTeXML and LaTeX toolchain runs inside Docker. [Install Docker](https://docs.docker.com/install/) and build the Docker image:
+### Frontend development
+
+For developing the CSS and frontend JavaScript, there are a bunch of pre-rendered documents you can use to work with. This means you don't need to install any LaTeX or Docker stuff.
+
+Run this command:
+
+    $ yarn run storybook
+
+Then, all the documents will be available as a Storybook at [http://localhost:6006](http://localhost:6006). Any chances you make to the CSS and JS in `src/assets/` will be automatically updated in the Storybook.
+
+### Converting documents
+
+The LaTeXML and LaTeX toolchain runs inside Docker. If you want to work on the code that actually converts documents, you will need to install Docker.
+
+[Install Docker](https://docs.docker.com/install/) and build the Docker image:
 
     $ script/docker-build
 

package.json

@@ -11,7 +11,9 @@
     "prettier-check": "prettier-check \"{src,tests}/**/*.js\"",
     "server": "LATEXML_DOCKER=true bin/engrafo-server",
     "test": "LATEXML_DOCKER=true yarn run test-inside-docker",
-    "test-inside-docker": "yarn run prettier-check && jest"
+    "test-inside-docker": "yarn run prettier-check && jest",
+    "storybook": "start-storybook -p 6006 -s tests/documents/",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "aws-sdk": "^2.295.0",
@@ -25,10 +27,15 @@
     "tmp-promise": "^1.0.5"
   },
   "devDependencies": {
+    "@storybook/addon-viewport": "^3.4.10",
+    "@storybook/html": "^4.0.0-alpha.11",
+    "babel-core": "^6.26.3",
+    "babel-runtime": "^6.26.0",
     "jest": "^23.5.0",
     "node-sass": "^4.9.3",
     "parcel-bundler": "^1.9.7",
     "prettier": "^1.14.2",
-    "prettier-check": "^2.0.0"
+    "prettier-check": "^2.0.0",
+    "sass-loader": "^7.1.0"
   }
 }

stories/index.stories.js

@@ -0,0 +1,38 @@
+/* eslint-disable no-console, react/button-has-type */
+
+import { document } from "global";
+import { storiesOf } from "@storybook/html";
+
+import * as snapshots from "../tests/__snapshots__/integration.test.js.snap";
+import "../src/assets/css/index.scss";
+import main from "../src/assets/javascript/main";
+
+function createStory(html) {
+  return () => {
+    const container = document.createElement("div");
+    container.innerHTML = html;
+    main(container);
+    return container;
+  };
+}
+
+storiesOf("Basic functionality")
+  .add("Citations", createStory(snapshots[`citations.tex 1`]))
+  .add("Figures", createStory(snapshots[`figures.tex 1`]))
+  .add("Footnotes", createStory(snapshots[`footnotes.tex 1`]))
+  .add("Headings", createStory(snapshots[`headings.tex 1`]))
+  .add("Lists", createStory(snapshots[`lists.tex 1`]))
+  .add("Math", createStory(snapshots[`math.tex 1`]))
+  .add("Paragraph styles", createStory(snapshots[`paragraph.tex 1`]))
+  .add("Tables", createStory(snapshots[`tables.tex 1`]))
+  .add("Text styles", createStory(snapshots[`text.tex 1`]))
+  .add("URLs", createStory(snapshots[`urls.tex 1`]));
+
+storiesOf("Packages", module)
+  .add("aa", createStory(snapshots[`aa.tex 1`]))
+  .add("algorithm2e", createStory(snapshots[`algorithm.tex 1`]))
+  .add("listings", createStory(snapshots[`listings.tex 1`]));
+
+storiesOf("Complete documents")
+  .add("sample2e", createStory(snapshots[`sample2e.tex 1`]))
+  .add("small2e", createStory(snapshots[`small2e.tex 1`]));