Generate screenshot automatically

.gitignore

@@ -3,4 +3,5 @@
 dist
 node_modules
 package-lock.json
+public/patterns
 tslint.log

bin/generateScreenshots.ts

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+
+const puppeteer = require('puppeteer');
+
+import Pattern from '../client/constants/Pattern';
+import slug from '../client/helpers/slug';
+
+process.setMaxListeners(0);
+
+(async () => {
+    const browser = await puppeteer.launch();    
+
+    await Promise.all(
+        Object.entries(Pattern).map(async ([_, patternName]) => {            
+            const page = await browser.newPage();
+            const pattern = slug(patternName);
+            await page.goto(`http://localhost:1234/patterns/${pattern}`);
+
+            await page.waitForSelector('.demo');
+            const element = await page.$('.demo');
+            await element.screenshot({
+                path: `public/patterns/${pattern}.png`
+            });
+            await page.close();
+        })
+    );
+    
+    await browser.close();
+})();

package.json

@@ -8,7 +8,8 @@
         "export": "react-snap",
         "deploy": "npm run build && netlify deploy --dir=dist --prod",
         "analyse": "NODE_ENV=analyse webpack --config webpack.config.js -p",
-        "lint": "tslint -c tslint.json -o tslint.log 'client/**/*.{ts,tsx}'"
+        "lint": "tslint -c tslint.json -o tslint.log 'client/**/*.{ts,tsx}'",
+        "screenshot": "rm -rf public/patterns && mkdir public/patterns && TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node bin/generateScreenshots.ts"
     },
     "dependencies": {
         "@loadable/component": "^5.14.1",
@@ -35,11 +36,13 @@
         "css-loader": "^5.2.0",
         "html-webpack-plugin": "^5.3.1",
         "mini-css-extract-plugin": "^1.4.0",
+        "puppeteer": "^1.20.0",
         "react-snap": "^1.23.0",
         "rimraf": "^3.0.2",
         "source-map-loader": "^2.0.1",
         "style-loader": "^2.0.0",
         "ts-loader": "^8.1.0",
+        "ts-node": "^9.1.1",
         "tslint": "^6.1.3",
         "tslint-react": "^5.0.0",
         "typescript": "^4.2.3",