Merge pull request #157 from reapit/feature/CLD-431-sync-develop

.github/workflows/pull_request_opened.yml

@@ -22,6 +22,9 @@ jobs:
         if: steps.cache.outputs.cache-hit != 'true'
         run: yarn install
 
+      - name: Check version
+        run: yarn checkVersion
+
       - name: Test
         run: yarn test
 

.github/workflows/release-develop.yml

@@ -6,7 +6,7 @@ on:
       - develop
 
 jobs:
-  setup:
+  release_develop:
     runs-on: ubuntu-latest
     steps:
       - name: checks out repository to $GITHUB_WORKSPACE
@@ -29,55 +29,22 @@ jobs:
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: yarn install
+
+      - name: Check version
+        run: yarn checkVersion
 
-  create_release_in_github:
-    runs-on: ubuntu-latest
-    needs: setup
-    steps:
-      - name: Checks out repository to $GITHUB_WORKSPACE
-        uses: actions/checkout@v1
-
-      - name: Setup Node Environement
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12
+      - name: Make sure testcases passed
+        run: yarn test
 
-      - name: Get installed node modules
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: build-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            build-${{ hashFiles('**/yarn.lock') }}
+      - name: Make sure code don't have linter errors
+        run: yarn lint
 
-      - run: yarn release:develop
-
-  publish_package_version_beta:
-    runs-on: ubuntu-latest
-    needs: setup
-    steps:
-      - name: Checks out repository to $GITHUB_WORKSPACE
-        uses: actions/checkout@v1
-
-      - name: Setup Node Environement
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12
-
-      - name: Get installed node modules
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: build-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            build-${{ hashFiles('**/yarn.lock') }}
-
-      - name: Build project
-        run: npm run build
-
-      - name: Publish project
-        run: npm publish --tag beta
-
+      - name: Release develop
+        run: |
+          git checkout --detach
+          yarn build
+          git add -f ./dist
+          yarn release:develop
 env:
   NPM_TOKEN: ${{secrets.NPM_TOKEN}}
   GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.github/workflows/release-master.yml

@@ -29,6 +29,9 @@ jobs:
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: yarn install
+
+      - name: Check version
+        run: yarn checkVersion
 
       - name: Make sure testcases passed
         run: yarn test
@@ -90,7 +93,7 @@ jobs:
           BRANCH: gh-pages # The branch the action should deploy to.
           FOLDER: out # The folder the action should deploy.
 
-  publish_package_version_beta:
+  publish_package_version:
     runs-on: ubuntu-latest
     needs: setup
     steps:

README.md

@@ -21,10 +21,11 @@ A collection of React components and utilities for building apps for Reapit Mark
 - Styles export from `index.scss` at the root of the styles project, ensure any new files are `@import`ed here.
 
 ### Building and Publishing
+- NOTED: THIS PROCESS WON'T BUMP THE PACKAGE VERSION AUTOMATICALLY FOR YOU
 
 - When a PR is created, checks will run to make sure testcases have been passed, code have passes linter standard. If one of checks fail, the PR won't able to be merged, and require the sumbmitter to update his/her code again.
-- Create a PR to merge develop. When the PR merged, npm package will be published to npm as beta tag, and release will be created automatically.
-- To release a stable/latest version of npm package, create a PR to merge master. When the PR merged, npm package will be published to npm, release will be created automatically, storybook assets will be deployed to GH-pages
+- Create a PR to merge develop. When the PR merged to develop, there will be a tag published that have a version based on version field on package.json file. If there were a tag that has the same tag name created, the old tag would be overridden by the new tag. Install them on other by edit package.json as  `@reapit/elements:git+ssh:[email protected]:reapit/elements.git#{tag}`. eg `@reapit/elements: "git+ssh:[email protected]:reapit/elements.git#v0.5.4-beta"`, or commandline: `yarn add @reapit/elements@git+ssh:[email protected]:reapit/elements.git#v0.5.4-beta`
+- To release a stable version of npm package, create a PR to merge master. When the PR was merged, npm package will be published to npm , a new release will be created automatically, and storybook assets will be deployed to GH-pages.
 
 ### To use the project
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reapit/elements",
-  "version": "0.5.3-beta",
+  "version": "0.5.11",
   "description": "A collection of React components and utilities for building apps for Reapit Marketplace",
   "main": "dist/index.js",
   "umd:main": "dist/elements.umd.production.js",
@@ -19,7 +19,8 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook -o out",
     "release:develop": "node scripts/releaseDevelop.js",
-    "release:master": "node scripts/releaseMaster.js"
+    "release:master": "node scripts/releaseMaster.js",
+    "checkVersion": "node ./scripts/checkVersion.js"
   },
   "repository": {
     "type": "git",
@@ -55,11 +56,11 @@
     "@types/storybook__react": "^4.0.2",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
+    "compare-versions": "^3.5.1",
     "css-loader": "^3.2.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-to-json": "^3.4.0",
-    "husky": "^3.0.3",
     "jest": "^24.9.0",
     "jest-fetch-mock": "^2.1.2",
     "node-sass": "^4.12.0",
@@ -72,7 +73,7 @@
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "rimraf": "^2.7.0",
-    "rollup": "^1.19.4",
+    "rollup": "^1.27.9",
     "rollup-plugin-scss": "^1.0.2",
     "sass-loader": "^7.2.0",
     "style-loader": "^1.0.0",

scripts/checkVersion.js

@@ -0,0 +1,10 @@
+const {npm_package_version: currentPackageVersion, npm_package_name: npmPackageName} = process.env
+const { execSync } = require('child_process');
+const remotePackageVersion = execSync(`yarn info ${npmPackageName} version`).toString().trim()
+const compareVersions = require('compare-versions');
+
+// currentPackageVersion < remotePackageVersion
+if (compareVersions(currentPackageVersion, remotePackageVersion) < 1) {
+  console.log('Current version is smaller than remote version. Please bump your package version')
+  process.exit(1)
+}

scripts/releaseDevelop.js

@@ -1,5 +1,30 @@
-const release = require('./release')
-release('dev').catch(err => {
-  console.error(err.message)
-  process.exit(1)
-})
+const {npm_package_version, GITHUB_TOKEN, GITHUB_ACTOR, GITHUB_REPOSITORY} = process.env
+const remoteRepo = `https://${GITHUB_ACTOR}:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git`
+const tagName=`v${npm_package_version}-beta`
+const { execSync } = require('child_process');
+
+// delete tag remotely and locally
+execSync(`git remote add origin ${remoteRepo}`)
+execSync(`git config --global user.email "${GITHUB_ACTOR}@email.com"`)
+execSync(`git config --global user.name "${GITHUB_ACTOR}"`)
+
+try {
+execSync(`git commit -am 'Publish ${tagName} -- with dist files'`)
+} catch (err) {
+  console.log(err);
+}
+
+try {
+  execSync(`git tag -d ${tagName}`)
+  execSync(`git push --delete origin ${tagName}`)
+} catch (_) {
+  // Delete existed tag will resulted in Error
+  // Ignored
+}
+
+// Tag current commit
+execSync(`git tag ${tagName}`)
+
+// Push the tag
+execSync(`git push origin ${tagName}`)
+

scripts/releaseMaster.js

@@ -1,5 +1,30 @@
-const release = require('./release')
-release('prod').catch(err => {
-  console.error(err.message)
-  process.exit(1)
-})
+const Octokit = require('@octokit/rest')
+const releaseMaster = async () => {
+  const currentVersion = process.env.npm_package_version
+  let tagName = 'v' + currentVersion
+
+  const token = process.env.GITHUB_TOKEN
+
+  const octokit = new Octokit({
+    auth: token
+  })
+
+  await octokit.git
+    .createRef({
+      owner: 'reapit',
+      repo: 'elements',
+      ref: 'refs/tags/' + tagName,
+      sha: process.env.GITHUB_SHA
+    })
+
+  // create new release based on tag
+  await octokit.repos
+    .createRelease({
+      owner: 'reapit',
+      repo: 'elements',
+      tag_name: tagName
+    })
+}
+releaseMaster()
+
+

src/components/Menu/Menu.tsx

@@ -21,7 +21,12 @@ export interface MenuItem {
 
 export const getActiveItemKey = (menu: MenuItem[], location?: Location<any>): string | null => {
   if (location && location.pathname) {
-    const activeItem = menu.find(item => location.pathname === item.url)
+    const activeItem = menu.find(item => {
+      const isExactRoot = location.pathname === '/' && item.url === '/'
+      const isNotRootAndHasCommonPrefix = item.url && item.url !== '/' && location.pathname.startsWith(item.url)
+      return isExactRoot || isNotRootAndHasCommonPrefix
+    })
+
     if (activeItem && activeItem.url) {
       return activeItem.key
     }

src/components/Menu/__tests__/Menu.tsx

@@ -50,17 +50,25 @@ describe('Menu', () => {
 
   describe('getActiveItemKey', () => {
     it('should return url if matches an item', () => {
-      const result = getActiveItemKey(mockMenuProps.menu, { pathname: mockMenuProps.menu[1].url } as Location<any>)
+      const result = getActiveItemKey(mockMenuProps.menu, {
+        pathname: mockMenuProps.menu[1].url
+      } as Location<any>)
       expect(result).toEqual(mockMenuProps.menu[1].key)
     })
     it('should return null if location is undefined', () => {
       const result = getActiveItemKey(mockMenuProps.menu)
       expect(result).toBeNull()
     })
     it('should return null if location does not match an item', () => {
-      const result = getActiveItemKey(mockMenuProps.menu, { pathname: '/some-random-path' } as Location<any>)
+      const result = getActiveItemKey(mockMenuProps.menu, {
+        pathname: '/some-random-path'
+      } as Location<any>)
       expect(result).toBeNull()
     })
+    it('should default back to defaultActiveKey if pathname === /', () => {
+      const result = getActiveItemKey(mockMenuProps.menu, { pathname: '/' } as Location<any>)
+      expect(result).toBe(null)
+    })
   })
 
   describe('Change active menu item when location change', () => {
@@ -98,5 +106,40 @@ describe('Menu', () => {
           .text()
       ).toEqual(newSelectedItem.title)
     })
+
+    it('should hightlight correct item when paged', () => {
+      const currentSelectedItem = mockMenuProps.menu[4]
+      const newSelectedItem = mockMenuProps.menu[4]
+
+      const currentLocation = { pathname: '/docs' }
+      mockMenuProps.location = currentLocation as Location<any>
+
+      const Component = props => (
+        <MemoryRouter initialEntries={['/client']}>
+          <Menu {...props} />
+        </MemoryRouter>
+      )
+
+      const wrapper = mount(<Component {...mockMenuProps} />)
+
+      expect(
+        wrapper
+          .find('.is-active')
+          .at(0)
+          .childAt(1)
+          .text()
+      ).toEqual(currentSelectedItem.title)
+
+      wrapper.setProps({ location: { pathname: '/docs/2' } })
+      wrapper.update()
+
+      expect(
+        wrapper
+          .find('.is-active')
+          .at(0)
+          .childAt(1)
+          .text()
+      ).toEqual(newSelectedItem.title)
+    })
   })
 })

src/components/Tile/index.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { H4, SubTitleH6 } from '../Typography/index'
 
 export interface TileProps {
-  heading: string
-  subHeading?: string
+  heading: React.ReactNode
+  subHeading?: React.ReactNode
   hightlight?: boolean
   icon?: React.ReactNode
   image?: React.ReactNode