Repo Improvements (#22)

* Add more `yarn` commands

* Add docker cache

* move action to later

* Add husky 🐶

Add a pre-commit hook to handle auto-running commands such as docs.

* Update patch version and release process

Add docs for release process and bump the patch version to resync all
packages to v0.1.4.

Seperate typechecking and building.

* fix ci

.github/workflows/main.yml

@@ -8,7 +8,8 @@ on:
 
 jobs:
 
-  build:
+  # Ensure basic typescript checks and linting passes
+  lint:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
@@ -18,8 +19,10 @@ jobs:
         cache: yarn
     - run: yarn --immutable
     - run: yarn build
+    - run: yarn test
     - run: yarn lint
 
+  # Ensure docs are up to date
   docs:
     runs-on: ubuntu-latest
     steps:
@@ -33,6 +36,7 @@ jobs:
     - run: yarn docs
     - run: git diff --exit-code
 
+  # Ensure the e2e suite completes successfully
   end2end:
     timeout-minutes: 15
     runs-on: ubuntu-latest
@@ -44,13 +48,17 @@ jobs:
       with:
         node-version: 16.x
         cache: yarn
+    - uses: docker/setup-buildx-action@v1
     - run: yarn --immutable
     - run: yarn build
-    - run: docker compose up -d
-    - run: docker compose build playwright
-    - run: docker compose logs
-    - run: docker compose run playwright
-# @TODO: Setup volumes for exporting artifacts
+    # Docker Cache using a private github container registry
+    - uses: docker/build-push-action@v2
+      with:
+        context: .
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+    - run: yarn test:docker
+#    @TODO: Setup volumes for exporting artifacts
 #    - uses: actions/upload-artifact@v3
 #      if: always()
 #      with:

.husky/pre-commit

@@ -0,0 +1,7 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# Disable hook during CI
+[ -n "$CI" ] && exit 0
+
+yarn docs

.yarn/versions/16f79a3d.yml

@@ -0,0 +1,9 @@
+undecided:
+  - root
+  - e2e
+  - example-js
+  - example-react
+  - example-react-class
+  - example-vue
+  - "@userback/widget"
+  - "@userback/react"

.yarnrc.yml

@@ -7,5 +7,7 @@ plugins:
     spec: "@yarnpkg/plugin-workspace-tools"
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
+    spec: "@yarnpkg/plugin-version"
 
 yarnPath: .yarn/releases/yarn-3.2.2.cjs

README.md

@@ -19,7 +19,7 @@
 After cloning the repo, you can install all dependencies and build the widgets with:
 ```yarn && yarn build```
 
-After which you can run an example package using `yarn start:js` or `yarn start:react`.
+After which you can run an example package using `yarn start:widget` or `yarn start:react`.
 
 To provide your api token, create a `.env` file containing your Userback api key like the following: 
 ``` sh
@@ -30,11 +30,19 @@ VITE_UB_TOKEN=XXXxxxXXX
 Test coverage is mainly achieved through playwright and docker compose. In order to run the e2e test suite run the following:
 
 ``` sh
-yarn && yarn build
-docker compose up -d
-docker compose build playwright
-docker compose run playwright
+yarn test:docker
 ```
 
 ## Documentation
 Refer to each of the packages listed above for framework specific documentation and examples. For more information about available configuration settings and and functions available, see our [Javascript API](https://support.userback.io/en/articles/5209252-javascript-api)
+
+## Release Process
+
+1. Checkout `develop` against the commit you plan to release.
+2. Build a production build with `yarn build`.
+3. Ensure CI is green and Local testing are successful (eg: `yarn test`).
+4. Update all versions with `yarn version:all (major/minor/patch)`.
+5. `git commit -m "vX.X.X"` and `git tag vX.X.X` where X.X.X is your new version.
+6. `yarn publish` to publish all packages to the npm repo.
+7. `git push && git push --tags` to push the release to github.
+8. Create a github release :tada:

docs/index.html

@@ -39,7 +39,7 @@ <h2>Developing and running examples</h2>
 </a>
 <p>After cloning the repo, you can install all dependencies and build the widgets with:
 <code>yarn &amp;&amp; yarn build</code></p>
-<p>After which you can run an example package using <code>yarn start:js</code> or <code>yarn start:react</code>.</p>
+<p>After which you can run an example package using <code>yarn start:widget</code> or <code>yarn start:react</code>.</p>
 <p>To provide your api token, create a <code>.env</code> file containing your Userback api key like the following: </p>
 <pre><code class="language-sh"><span class="hl-0">VITE_UB_TOKEN=XXXxxxXXX</span>
 </code></pre>
@@ -48,13 +48,27 @@ <h2>Developing and running examples</h2>
   <h3>End to End Testing</h3>
 </a>
 <p>Test coverage is mainly achieved through playwright and docker compose. In order to run the e2e test suite run the following:</p>
-<pre><code class="language-sh"><span class="hl-0">yarn &amp;&amp; yarn build</span><br/><span class="hl-0">docker compose up -d</span><br/><span class="hl-0">docker compose build playwright</span><br/><span class="hl-0">docker compose run playwright</span>
+<pre><code class="language-sh"><span class="hl-0">yarn test:docker</span>
 </code></pre>
 
 <a href="#documentation" id="documentation" style="color: inherit; text-decoration: none;">
   <h2>Documentation</h2>
 </a>
 <p>Refer to each of the packages listed above for framework specific documentation and examples. For more information about available configuration settings and and functions available, see our <a href="https://support.userback.io/en/articles/5209252-javascript-api">Javascript API</a></p>
+
+<a href="#release-process" id="release-process" style="color: inherit; text-decoration: none;">
+  <h2>Release Process</h2>
+</a>
+<ol>
+<li>Checkout <code>develop</code> against the commit you plan to release.</li>
+<li>Build a production build with <code>yarn build</code>.</li>
+<li>Ensure CI is green and Local testing are successful (eg: <code>yarn test</code>).</li>
+<li>Update all versions with <code>yarn version:all (major/minor/patch)</code>.</li>
+<li><code>git commit -m &quot;vX.X.X&quot;</code> and <code>git tag vX.X.X</code> where X.X.X is your new version.</li>
+<li><code>yarn publish</code> to publish all packages to the npm repo.</li>
+<li><code>git push &amp;&amp; git push --tags</code> to push the release to github.</li>
+<li>Create a github release :tada:</li>
+</ol>
 </div></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">

e2e/package.json

@@ -1,5 +1,6 @@
 {
   "name": "e2e",
+  "version": "0.1.4",
   "private": true,
   "scripts": {
     "test": "playwright test"

examples/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-js",
-  "version": "0.0.0",
+  "version": "0.1.4",
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",

examples/react-class/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example-react-class",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.4",
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",

examples/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example-react",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.4",
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",

examples/vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example-vue",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.4",
   "type": "module",
   "scripts": {
     "start": "vite",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "root",
   "description": "Root workspace for userback.io npm packages",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "MIT",
   "private": true,
   "workspaces": [
@@ -14,16 +14,20 @@
     "build:widget": "yarn workspace @userback/widget build",
     "build:react": "yarn workspace @userback/react build",
     "build:vue": "yarn workspace @userback/vue build",
-    "clean": "git clean -fx . -e node_modules -e .env -e .yarn",
+    "clean": "git clean -fx . -e node_modules -e .env -e .yarn -e .husky",
+    "docs": "yarn typedoc --entryPointStrategy packages widget* --gitRevision master",
+    "lint": "yarn eslint . --ext js,ts,jsx,tsx",
+    "publish": "yarn workspaces foreach --no-private npm publish --access public",
     "start:widget": "yarn workspace example-js start",
     "start:react": "yarn workspace example-react start",
     "start:vue": "yarn workspace example-vue start",
-    "test": "yarn workspaces foreach --include \"*example*\" -p run build --minify false",
+    "test": "yarn workspaces foreach -p --no-private run test",
+    "test:examples": "yarn workspaces foreach --include \"*example*\" -p run build --minify false",
     "test:e2e": "yarn workspace e2e run test",
-    "docker:devtest": "docker compose -f docker-compose.yml -f docker-compose.dev.yml run --rm playwright",
-    "publish": "yarn workspaces foreach --no-private npm publish --access public",
-    "lint": "yarn eslint . --ext js,ts,jsx,tsx",
-    "docs": "yarn typedoc --entryPointStrategy packages widget* --gitRevision master"
+    "test:docker": "docker compose up -d && docker compose build playwright && docker compose run --rm playwright",
+    "test:docker:dev": "docker compose up -d && docker compose build playwright && docker compose -f docker-compose.yml -f docker-compose.dev.yml run --rm playwright",
+    "postinstall": "husky install",
+    "version:all": "yarn workspaces foreach version"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.33.0",
@@ -34,6 +38,7 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.0",
     "typedoc": "^0.23.10",
     "typescript": "^4.7.4"
   },

widget-js/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@userback/widget",
   "description": "Userback.io widget for Javascript and Typescript",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "dist/widget.js",
   "module": "dist/widget.mjs",
   "umd": "dist/widget.umd.js",
   "types": "dist/widget.d.ts",
   "scripts": {
-    "build": "tsc --noEmit && rollup -c",
+    "build": "rollup -c",
+    "test": "tsc --noEmit",
     "watch": "tsc -w"
   },
   "devDependencies": {

widget-react/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@userback/react",
   "description": "Userback.io widget for React",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "dist/react.js",
   "module": "dist/react.mjs",
   "umd": "dist/react.umd.js",
   "types": "dist/react.d.ts",
   "scripts": {
-    "build": "tsc --noEmit && rollup -c",
+    "build": "rollup -c",
+    "test": "tsc --noEmit",
     "watch": "tsc -w"
   },
   "dependencies": {

widget-vue/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@userback/vue",
   "description": "Userback.io widget for Vue",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "dist/vue.js",
   "module": "dist/vue.mjs",
   "umd": "dist/vue.umd.js",
   "types": "dist/vue.d.ts",
   "scripts": {
-    "build": "tsc --noEmit && rollup -c",
+    "build": "rollup -c",
+    "test": "tsc --noEmit",
     "watch": "tsc -w"
   },
   "dependencies": {

yarn.lock

@@ -2552,6 +2552,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"husky@npm:^8.0.0":
+  version: 8.0.1
+  resolution: "husky@npm:8.0.1"
+  bin:
+    husky: lib/bin.js
+  checksum: 943a73a13d0201318fd30e83d299bb81d866bd245b69e6277804c3b462638dc1921694cb94c2b8c920a4a187060f7d6058d3365152865406352e934c5fff70dc
+  languageName: node
+  linkType: hard
+
 "iconv-lite@npm:^0.6.2":
   version: 0.6.3
   resolution: "iconv-lite@npm:0.6.3"
@@ -3701,6 +3710,7 @@ __metadata:
     eslint-plugin-jsx-a11y: ^6.6.1
     eslint-plugin-react: ^7.30.1
     eslint-plugin-react-hooks: ^4.6.0
+    husky: ^8.0.0
     typedoc: ^0.23.10
     typescript: ^4.7.4
   languageName: unknown