chore: Build GitHub Pages through GitHub Actions (#316)

.circleci/config.yml

@@ -93,15 +93,6 @@ jobs:
           name: Publish package
           command: yarn lerna publish --canary --preid dev --dist-tag next --yes
 
-  deploy-storybook:
-    docker:
-      - image: circleci/node:10.15
-    working_directory: ~/repo
-    steps:
-      - attach_workspace:
-          at: ~/repo
-      - run: .circleci/deploy-storybooks.js
-
 workflows:
   version: 2
   build_and_test:
@@ -110,12 +101,6 @@ workflows:
       - loki:
           requires:
             - build
-      - deploy-storybook:
-          requires:
-            - build
-          filters:
-              branches:
-                only: master
       - publish:
           requires:
             - loki

.circleci/deploy-storybooks.js

-#!/usr/bin/env node
-'use strict';
-const { spawn } = require('child_process');
-const fs = require('fs-extra');
-const ghPages = require('gh-pages');
-const path = require('path');
-const { promisify } = require('util');
-
-const buildStorybook = async (packageName) => {
-  const run = (...args) => new Promise((resolve, reject) => {
-    try {
-      const childProcess = spawn(...args);
-      childProcess.on('close', (code) => {
-        if (code === 0) {
-          resolve();
-        } else {
-          reject(code);
-        }
-      });
-    } catch (error) {
-      reject(error);
-    }
-  });
-
-  await run('node_modules/.bin/jest', [
-    '--max-workers',
-    '1',
-    '--json',
-    '--outputFile',
-    path.join(__dirname, '../packages', packageName, '.storybook/jest-results.json')], {
-    stdio: 'inherit',
-    cwd: path.join(__dirname, '../packages', packageName),
-    env: { ...process.env, NODE_ENV: 'production' }
-  });
-
-  await run('node_modules/.bin/build-storybook', ['-o', path.join(__dirname, '../static')], {
-    stdio: 'inherit',
-    cwd: path.join(__dirname, '../packages', packageName),
-    env: { ...process.env, NODE_ENV: 'production' }
-  });
-};
-
-(async () => {
-  process.chdir(path.join(__dirname, '..'));
-
-  console.log('Building static files directory...');
-  await fs.ensureDir('static');
-
-  console.log('Building Storybooks...');
-  await buildStorybook('fuselage');
-
-  console.log('Publishing...');
-  const publish = promisify(ghPages.publish);
-  const { GH_TOKEN } = process.env;
-  await publish('static', {
-    source: 'static/**/*',
-    ...GH_TOKEN && { repo: `https://${ GH_TOKEN }@github.com/RocketChat/Rocket.Chat.Fuselage.git` },
-    message: 'Deploy Storybook to Github Pages [skip ci]',
-    user: {
-      name: 'Guilherme Gazzo',
-      email: 'guilherme.gazzo@rocket.chat',
-    },
-    silent: true,
-  });
-})();

.github/workflows/storybook.yml

+name: Storybook
+
+on:
+  push:
+    branches:
+      - main
+      - master
+      - develop
+  pull_request:
+
+jobs:
+  fuselage:
+    name: Build Storybook from @rocket.chat/fuselage
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2-beta
+        with:
+          node-version: '12'
+      - uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
+      - run: yarn --check-files
+      - run: yarn jest --max-workers 1 --json --outputFile .storybook/jest-results.json
+        working-directory: packages/fuselage
+      - run: yarn build-storybook -o ../../static
+        working-directory: packages/fuselage
+        env:
+          NODE_ENV: production
+      - uses: actions/upload-artifact@v2
+        with:
+          name: fuselage
+          path: static
+
+  fuselage-ui-kit:
+    name: Build Storybook from @rocket.chat/fuselage-ui-kit
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2-beta
+        with:
+          node-version: '12'
+      - uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
+      - run: yarn --check-files
+      - run: yarn build-storybook -o ../../static
+        working-directory: packages/fuselage-ui-kit
+        env:
+          NODE_ENV: production
+      - uses: actions/upload-artifact@v2
+        with:
+          name: fuselage-ui-kit
+          path: static
+
+  publish:
+    name: Publish to GitHub Pages
+    runs-on: ubuntu-latest
+    needs:
+      - fuselage
+      - fuselage-ui-kit
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: gh-pages
+      - id: directory
+        name: Prepare directory
+        run: |
+          if [ -z "${{ github.event.number }}" ]
+          then
+            dir="${{ github.event.number }}"
+          else
+            dir=$(echo '${{ github.ref }}' | cut -d/ -f3)
+          fi
+          echo "::set-output name=directory::$dir"
+          rm -rf "fuselage/$dir" "fuselage-ui-kit/$dir"
+          mkdir -p fuselage fuselage-ui-kit
+      - uses: actions/download-artifact@v2
+        with:
+          name: fuselage
+          path: fuselage/${{ steps.directory.outputs.directory }}
+      - uses: actions/download-artifact@v2
+        with:
+          name: fuselage-ui-kit
+          path: fuselage-ui-kit/${{ steps.directory.outputs.directory }}
+      - run: |
+          cat > index.html <<EOF
+          <!DOCTYPE html>
+          <meta charset="utf-8">
+          <title>Redirecting to fuselage/master/</title>
+          <meta http-equiv="refresh" content="0; URL=fuselage/master/">
+          <link rel="canonical" href="fuselage/master/">
+          EOF
+      - uses: crazy-max/ghaction-github-pages@v2
+        with:
+          target_branch: gh-pages
+          build_dir: .
+          commit_message: 'Deploy to Github Pages [skip ci]'
+          jekyll: false
+        env:
+          GITHUB_TOKEN: ${{ github.token }}

.heroku/build.js

-#!/usr/bin/env node
-'use strict';
-const { spawn } = require('child_process');
-const fs = require('fs-extra');
-const path = require('path');
-
-const buildStorybook = async (packageName) => {
-  const run = (...args) => new Promise((resolve, reject) => {
-    const childProcess = spawn(...args);
-    childProcess.on('close', (code) => {
-      if (code === 0) {
-        resolve();
-      } else {
-        reject(code);
-      }
-    });
-  });
-
-  await run('node_modules/.bin/build-storybook', ['-o', path.join(__dirname, '../static')], {
-    stdio: 'inherit',
-    cwd: path.join(__dirname, '../packages', packageName),
-  });
-};
-
-(async () => {
-  process.chdir(path.join(__dirname, '..'));
-
-  console.log('Building static files directory...');
-  await fs.ensureDir('static');
-
-  console.log('Building Storybooks...');
-  await buildStorybook('fuselage');
-})();

app.json

-{
-  "name": "Rocket.Chat.Fuselage",
-  "description": "React implementation of Rocket.Chat's design system",
-  "repository": "https://github.com/RocketChat/Rocket.Chat.Fuselage",
-  "logo": "https://raw.githubusercontent.com/RocketChat/Rocket.Chat/master/public/images/logo/1024x1024.png",
-  "keywords": ["react", "community", "chat"],
-  "website": "https://rocket.chat",
-  "env": {
-    "HEROKU_APP_NAME": {
-      "description": "Please re-enter your App Name from the top.",
-      "required": true
-    },
-    "DEPLOY_PLATFORM": "heroku"
-  },
-  "buildpacks": [
-    {
-      "url": "heroku/nodejs"
-    },
-    {
-      "url": "https://github.com/heroku/heroku-buildpack-static.git"
-    }
-  ]
-}

package.json

@@ -8,7 +8,6 @@
   "devDependencies": {
     "cross-env": "^7.0.2",
     "fs-extra": "^9.0.0",
-    "gh-pages": "^3.1.0",
     "husky": "^4.2.3",
     "lerna": "^3.20.2"
   },
@@ -19,8 +18,7 @@
     "test": "lerna run test:ci --stream",
     "lint": "lerna run lint",
     "lint-staged": "lerna run lint-staged",
-    "storybook": "lerna run storybook --parallel",
-    "heroku-postbuild": "./.heroku/build.js"
+    "storybook": "lerna run storybook --parallel"
   },
   "husky": {
     "hooks": {