From f29c0934573a4a7d6ddc8c4275ff556573bb2b3d Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 18 Apr 2021 12:13:41 +0700
Subject: [PATCH] Generate screenshot automatically

---
 .gitignore                 |  1 +
 bin/generateScreenshots.ts | 29 +++++++++++++++++++++++++++++
 package.json               |  5 ++++-
 3 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 bin/generateScreenshots.ts

diff --git a/.gitignore b/.gitignore
index aa7cfbd..4950a94 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@
 dist
 node_modules
 package-lock.json
+public/patterns
 tslint.log
\ No newline at end of file
diff --git a/bin/generateScreenshots.ts b/bin/generateScreenshots.ts
new file mode 100644
index 0000000..c34a003
--- /dev/null
+++ b/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();
+})();
diff --git a/package.json b/package.json
index 2c2d596..96fc35b 100644
--- a/package.json
+++ b/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",