Add GitHub Action to build @nymproject/react storybook and example

2022-03-08 10:50:07 +00:00
parent 4c5d4ac4a4
commit c791de426a
9 changed files with 136 additions and 5 deletions
@@ -0,0 +1,63 @@
+name: CI for ts-packages
+
+on:
+  push:
+    paths:
+      - 'ts-packages/**'
+
+jobs:
+  build:
+    runs-on: custom-runner-linux
+    steps:
+    - uses: actions/checkout@v2
+    - name: Install rsync
+      run: sudo apt-get install rsync
+    - uses: rlespinasse/github-slug-action@v3.x
+    - uses: actions/setup-node@v2
+      with:
+        node-version: '16'
+    - name: Setup yarn
+      run: npm install -g yarn
+    - name: Build
+      run: yarn && yarn build && yarn build:ci
+    - name: Deploy branch to CI www (storybook)
+      continue-on-error: true
+      uses: easingthemes/ssh-deploy@main
+      env:
+        SSH_PRIVATE_KEY: ${{ secrets.CI_WWW_SSH_PRIVATE_KEY }}
+        ARGS: "-rltgoDzvO --delete"
+        SOURCE: "ts-packages/dist/storybook/"
+        REMOTE_HOST: ${{ secrets.CI_WWW_REMOTE_HOST }}
+        REMOTE_USER: ${{ secrets.CI_WWW_REMOTE_USER }}
+        TARGET: ${{ secrets.CI_WWW_REMOTE_TARGET }}/ts-${{ env.GITHUB_REF_SLUG }}
+        EXCLUDE: "/dist/, /node_modules/"
+    - name: Deploy branch to CI www (example)
+      continue-on-error: true
+      uses: easingthemes/ssh-deploy@main
+      env:
+        SSH_PRIVATE_KEY: ${{ secrets.CI_WWW_SSH_PRIVATE_KEY }}
+        ARGS: "-rltgoDzvO --delete"
+        SOURCE: "ts-packages/dist/example/"
+        REMOTE_HOST: ${{ secrets.CI_WWW_REMOTE_HOST }}
+        REMOTE_USER: ${{ secrets.CI_WWW_REMOTE_USER }}
+        TARGET: ${{ secrets.CI_WWW_REMOTE_TARGET }}/ts-${{ env.GITHUB_REF_SLUG }}-example
+        EXCLUDE: "/dist/, /node_modules/"
+    - name: Keybase - Node Install
+      run: npm install
+      working-directory: .github/workflows/support-files
+    - name: Keybase - Send Notification
+      env:
+        NYM_NOTIFICATION_KIND: ts-packages
+        NYM_PROJECT_NAME: "ts-packages"
+        NYM_CI_WWW_BASE: "${{ secrets.NYM_CI_WWW_BASE }}"
+        NYM_CI_WWW_LOCATION: "ts-${{ env.GITHUB_REF_SLUG }}"
+        GIT_COMMIT_MESSAGE: "${{ github.event.head_commit.message }}"
+        GIT_BRANCH: "${GITHUB_REF##*/}"
+        KEYBASE_NYMBOT_USERNAME: "${{ secrets.KEYBASE_NYMBOT_USERNAME }}"
+        KEYBASE_NYMBOT_PAPERKEY: "${{ secrets.KEYBASE_NYMBOT_PAPERKEY }}"
+        KEYBASE_NYMBOT_TEAM: "${{ secrets.KEYBASE_NYMBOT_TEAM }}"
+        KEYBASE_NYM_CHANNEL: "ci-ts-packages"
+        IS_SUCCESS: "${{ job.status == 'success' }}"
+      uses: docker://keybaseio/client:stable-node
+      with:
+        args: .github/workflows/support-files/notifications/entry_point.sh
@@ -3,7 +3,7 @@ require('dotenv').config();
 const Bot = require('keybase-bot');

 let context = {
-  kinds: ['network-explorer', 'nightly'],
+  kinds: ['ts-packages', 'network-explorer', 'nightly'],
 };

 /**
@@ -0,0 +1,29 @@
+const Handlebars = require('handlebars');
+const fs = require('fs');
+const path = require('path');
+
+async function addToContextAndValidate(context) {
+  if (!context.env.NYM_CI_WWW_LOCATION) {
+    throw new Error('Please ensure the env var NYM_CI_WWW_LOCATION is set');
+  }
+  if (!context.env.NYM_CI_WWW_BASE) {
+    throw new Error('Please ensure the env var NYM_CI_WWW_BASE is set');
+  }
+}
+
+async function getMessageBody(context) {
+  const source = fs
+    .readFileSync(
+      context.env.IS_SUCCESS === 'true'
+        ? path.resolve(__dirname, 'templates', 'success')
+        : path.resolve(__dirname, 'templates', 'failure'),
+    )
+    .toString();
+  const template = Handlebars.compile(source);
+  return template(context);
+}
+
+module.exports = {
+  addToContextAndValidate,
+  getMessageBody,
+};
@@ -0,0 +1,11 @@
+🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥
+> :rocket: {{ env.NYM_PROJECT_NAME }}
+> 🔴 **FAILURE** :cry:
+> `branch` {{ env.GITHUB_SERVER_URL }}/{{ env.GITHUB_REPOSITORY }}/tree/{{ env.GIT_BRANCH_NAME }}
+> `commit` {{ env.GITHUB_SERVER_URL }}/{{ env.GITHUB_REPOSITORY }}/commit/{{ env.GITHUB_SHA }}
+> `build ` {{ env.GITHUB_SERVER_URL }}/{{ env.GITHUB_REPOSITORY }}/actions/runs/{{ env.GITHUB_RUN_ID }}
+
+Commit message:
+```
+{{ env.GIT_COMMIT_MESSAGE }}
+```
@@ -0,0 +1,16 @@
+🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩
+> :rocket: {{ env.NYM_PROJECT_NAME }}
+> ✅ **SUCCESS**
+
+> ➡️➡️➡️➡️➡️ **View output:**
+> `storybook`: https://{{ env.NYM_CI_WWW_LOCATION }}.{{ env.NYM_CI_WWW_BASE }}
+> `example`: https://{{ env.NYM_CI_WWW_LOCATION }}-example.{{ env.NYM_CI_WWW_BASE }}
+
+> `branch` {{ env.GITHUB_SERVER_URL }}/{{ env.GITHUB_REPOSITORY }}/tree/{{ env.GIT_BRANCH_NAME }}
+> `commit` {{ env.GITHUB_SERVER_URL }}/{{ env.GITHUB_REPOSITORY }}/commit/{{ env.GITHUB_SHA }}
+> `build ` {{ env.GITHUB_SERVER_URL }}/{{ env.GITHUB_REPOSITORY }}/actions/runs/{{ env.GITHUB_RUN_ID }}
+
+Commit message by `{{ env.GITHUB_ACTOR }}` at {{ timestamp }}:
+```
+{{ env.GIT_COMMIT_MESSAGE }}
+```
@@ -36,4 +36,5 @@ contracts/mixnet/Makefile
 validator-config
 *.patch
 validator-api-config.toml
-dist
+dist
+storybook-static
@@ -8,9 +8,14 @@
    "nym-wallet"
  ],
  "scripts": {
-    "build": "lerna run --scope @nymproject/mui-theme --scope @nymproject/react build --stream"
+    "build": "lerna run --scope @nymproject/mui-theme --scope @nymproject/react build --stream",
+    "build:react-example": "lerna run --scope @nymproject/react-webpack-with-theme-example build --stream",
+    "build:playground": "lerna run --scope @nymproject/react storybook:build --stream",
+    "build:ci": "yarn build && run-p build:react-example build:playground && yarn build:ci:collect-artifacts",
+    "build:ci:collect-artifacts": "mkdir -p ts-packages/dist && mv ts-packages/react-components/storybook-static ts-packages/dist/storybook && mv ts-packages/react-webpack-with-theme-example/dist ts-packages/dist/example"
  },
  "devDependencies": {
-    "lerna": "^4.0.0"
+    "lerna": "^4.0.0",
+    "npm-run-all": "^4.1.5"
  }
 }
@@ -53,3 +53,9 @@ Our React components have a Storybook in [react-components](./react-components):
 cd ts-packages/react-components
 yarn storybook
 ```
+
+## Development
+
+Watch mode is available in some packages with `yarn watch`.
+
+See [mui-theme](./mui-theme/README.md) for an example.
@@ -42,5 +42,5 @@ module.exports = {
  },
  features: {
    emotionAlias: false,
-  },
+  }
 }