chore: Automate release process (#372)

* Install and configure semantic-release * Publish from Travis CI * Try to fix docz build error on Travis * Speed up Travis CI with cache * Install and configure commitizen * Only deploy on master * Publish on master, next, and beta branches * Publish on all branches * Fix prereleaes script * fix: fix husky config tech/semantic-release tech/semantic-release tech/semantic-release tech/semantic-release * chore: upgrade @sumup/foundry tech/semantic-release tech/semantic-release tech/semantic-release * fix(configs): add proper scope names * style(configs): reset release number * fix(configs): remove obsolete dependency * style: fix eslint errors * chore(deps): upgrade to Foundry 1.4.1 * chore(deps): fix yarn.lock file
sumup-oss · Jul 15, 2019 · f0dc889 · f0dc889
1 parent 4fc6e6e
commit f0dc889
Show file tree

Hide file tree

Showing 15 changed files with 375 additions and 80 deletions.
diff --git a/.cz-config.js b/.cz-config.js
@@ -0,0 +1,40 @@
+module.exports = {
+  types: [
+    { value: 'feat', name: 'feat:     A new feature' },
+    { value: 'fix', name: 'fix:      A bug fix' },
+    { value: 'docs', name: 'docs:     Documentation only changes' },
+    {
+      value: 'style',
+      name:
+        'style:    Changes that do not affect the meaning of the code\n            (white-space, formatting, missing semi-colons, etc)'
+    },
+    {
+      value: 'refactor',
+      name:
+        'refactor: A code change that neither fixes a bug nor adds a feature'
+    },
+    {
+      value: 'perf',
+      name: 'perf:     A code change that improves performance'
+    },
+    { value: 'test', name: 'test:     Adding missing tests' },
+    {
+      value: 'chore',
+      name:
+        'chore:    Changes to the build process or auxiliary tools\n            and libraries such as documentation generation'
+    },
+    { value: 'revert', name: 'revert:   Revert to a commit' },
+    { value: 'WIP', name: 'WIP:      Work in progress' }
+  ],
+
+  scopes: [
+    { name: 'components' },
+    { name: 'utils' },
+    { name: 'docs' },
+    { name: 'theme' },
+    { name: 'configs' }
+  ],
+
+  allowCustomScopes: true,
+  allowBreakingChanges: ['feat', 'fix']
+};
diff --git a/.huskyrc.js b/.huskyrc.js
@@ -1 +1,10 @@
-module.exports = require('@sumup/foundry/husky').base;
+const { merge } = require('lodash/fp');
+const { base: baseConfig } = require('@sumup/foundry/husky');
+
+const customConfig = {
+  hooks: {
+    'commit-msg': 'cz-customizable-ghooks ${HUSKY_GIT_PARAMS}'
+  }
+};
+
+module.exports = merge(baseConfig, customConfig);
diff --git a/.releaserc.js b/.releaserc.js
@@ -0,0 +1 @@
+module.exports = require('@sumup/foundry/semantic-release').modules;
diff --git a/.travis.yml b/.travis.yml
@@ -1,21 +1,48 @@
-language: node_js
 sudo: required
+
 dist: trusty
+
+language: node_js
+
 node_js: '10.15.0'
+
+cache:
+  yarn: true
+  directories:
+    - 'node_modules'
+
 before_install:
   - npm install -g yarn
 install: yarn install --frozen-lockfile
-script: yarn check:security && yarn check:licenses && yarn test:ci
 
-deploy:
-  provider: pages
-  skip_cleanup: true
-  github_token: $GITHUB_TOKEN
-  on:
-    branch: master
-  local-dir: dist
-  target_branch: gh-pages # default
-before_deploy:
-  - echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
-  - rm -rf ./dist && mkdir dist && yarn run docz:build && yarn build && cp ./src/CNAME ./dist/CNAME
-after_success: yarn coverage:upload -t ${CODECOV_TOKEN}
+jobs:
+  include:
+    # Run tests in parallel
+    - stage: test
+      script: yarn check:security && yarn check:licenses
+    - script: yarn test:lint-js
+    - script: yarn test:unit --runInBand
+      # Upload coverage reports to Codecov
+      after_success: yarn coverage:upload -t ${CODECOV_TOKEN}
+    - stage: publish
+      script: skip
+      # Publish package to NPM
+      deploy:
+        provider: script
+        skip_cleanup: true
+        on:
+          all_branches: true
+        script: yarn release
+      # Increase number of watchers
+    - script: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
+      if: branch = master
+      # Deploy docz and Storybook to GitHub Pages
+      before_deploy: yarn predeploy
+      deploy:
+        provider: pages
+        skip_cleanup: true
+        github_token: $GITHUB_TOKEN
+        on:
+          branch: master
+        local-dir: dist
+        target_branch: gh-pages
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@sumup/circuit-ui",
   "sideEffects": false,
-  "version": "1.0.0-beta.10",
+  "version": "0.0.0-semantically-released",
   "description": "SumUp's React UI component library",
   "main": "lib/index.js",
   "module": "lib/es/index.js",
@@ -10,16 +10,15 @@
     "README.md"
   ],
   "scripts": {
-    "coverage:upload": "codecov",
-    "fix:eslint": "foundry run eslint --fix --quiet \"src/**/*.js\"",
+    "commit": "git-cz",
     "fix": "yarn fix:eslint",
+    "fix:eslint": "foundry run eslint --fix --quiet src/**/**/*.js",
     "test": "yarn test:lint-js && yarn test:unit",
-    "test:ci": "yarn test:lint-js && yarn test:unit --runInBand",
-    "test:lint-js": "foundry run eslint --quiet --cache \"src/**/*.js\"",
+    "test:lint-js": "foundry run eslint --cache --quiet \"src/**/*.js\"",
     "test:lint-js:watch": "onchange \"src/**/*.js\" -- yarn test:lint-js",
-    "test:unit:verbose": "jest --coverage --no-cache",
     "test:unit": "yarn test:unit:verbose --silent",
     "test:unit:watch": "yarn test:unit:output --watch",
+    "test:unit:verbose": "jest --coverage --no-cache",
     "test:unit:output": "jest --json --outputFile=jest-test-results.json --no-cache --silent",
     "create-component": "foundry run plop component",
     "start": "yarn test:unit && start-storybook -p 6006",
@@ -33,13 +32,25 @@
     "build:js:cjs": "cross-env BABEL_ENV=cjs babel src --out-dir lib --ignore *.spec.js,*.story.js",
     "build:js:es": "cross-env BABEL_ENV=es babel src --out-dir lib/es --ignore *.spec.js,*.story.js",
     "clean:js": "rimraf lib",
-    "deploy": "rm -rf ./dist && mkdir dist && yarn run docz:build && yarn build && cp ./src/CNAME ./dist/CNAME && gh-pages -d dist",
+    "predeploy": "rm -rf ./dist && mkdir dist && yarn run docz:build && yarn build && cp ./src/CNAME ./dist/CNAME",
+    "deploy": "gh-pages -d dist",
+    "prerelease": "yarn build:js",
+    "release": "semantic-release",
+    "coverage:upload": "codecov",
     "docz:dev": "docz dev",
     "docz:build": "docz build",
     "prepublishOnly": "yarn build:js",
     "check:security": "audit-ci --critical",
     "check:licenses": "license-checker --production --summary --failOn=GPLv3"
   },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-customizable"
+    },
+    "cz-customizable": {
+      "config": "./.cz-config.js"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/sumup/circuit-ui.git"
@@ -66,7 +77,7 @@
     "@storybook/addon-storysource": "^5.0.5",
     "@storybook/addons": "^5.0.5",
     "@storybook/react": "^5.0.5",
-    "@sumup/foundry": "1.4.0",
+    "@sumup/foundry": "^1.4.1",
     "audit-ci": "^2.0.1",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.5.0",
@@ -113,6 +124,9 @@
     "@svgr/webpack": "^4.1.0",
     "babel-plugin-inline-react-svg": "^1.1.0",
     "css-loader": "^2.1.1",
+    "commitizen": "^3.0.5",
+    "cz-customizable": "^5.3.0",
+    "cz-customizable-ghooks": "^1.5.0",
     "dom-helpers": "^3.4.0",
     "downshift": "^1.31.14",
     "emotion": "^10.0.9",

diff --git a/src/components/Modal/Modal.spec.js b/src/components/Modal/Modal.spec.js
@@ -53,7 +53,7 @@ describe('Modal', () => {
     children: ({ onClose }) => (
       <div>
         <div data-test="card">Hello World!</div>
-        <button data-test="close" onClick={onClose} />
+        <button type="button" data-test="close" onClick={onClose} />
       </div>
     ),
     // Disables the need for a wrapper. I couldn't get the Modal to work

diff --git a/src/components/Modal/ModalProvider.js b/src/components/Modal/ModalProvider.js
@@ -61,6 +61,7 @@ export class ModalProvider extends Component {
     }));
   };
 
+  // eslint-disable-next-line react/sort-comp
   contextValue = {
     setModal: this.setModal,
     getModal: () => this.state.modal

diff --git a/src/components/Popover/Popover.js b/src/components/Popover/Popover.js
@@ -175,6 +175,10 @@ class Popover extends Component {
     referenceWrapperStyles: () => null
   };
 
+  buttonRef = null;
+
+  popoverRef = null;
+
   componentDidMount() {
     document.addEventListener('click', this.handleDocumentClick, true);
   }
@@ -192,10 +196,6 @@ class Popover extends Component {
     }
   };
 
-  buttonRef = null;
-
-  popoverRef = null;
-
   receiveButtonRef = ref => {
     this.buttonRef = ref;
   };

diff --git a/src/components/SideNav/components/Drawer/Drawer.js b/src/components/SideNav/components/Drawer/Drawer.js
@@ -108,15 +108,15 @@ export function getAnchor(props) {
  * when `variant="temporary"` is set.
  */
 class Drawer extends React.Component {
-  componentDidMount() {
-    this.mounted = true;
-  }
-
   // Let's assume that the Drawer will always be rendered on user space.
   // We use this state is order to skip the appear transition during the
   // initial mount of the component.
   mounted = false;
 
+  componentDidMount() {
+    this.mounted = true;
+  }
+
   render() {
     const {
       anchor: anchorProp,

diff --git a/src/components/SideNav/components/Modal/Modal.js b/src/components/SideNav/components/Modal/Modal.js
@@ -70,6 +70,14 @@ if (process.env.NODE_ENV !== 'production' && !React.createContext) {
 }
 
 class Modal extends React.Component {
+  mountNode = null;
+
+  modalRef = null;
+
+  dialogRef = null;
+
+  mounted = false;
+
   constructor(props) {
     super(props);
 
@@ -126,14 +134,6 @@ class Modal extends React.Component {
     }
   }
 
-  mountNode = null;
-
-  modalRef = null;
-
-  dialogRef = null;
-
-  mounted = false;
-
   handleRendered = () => {
     this.autoFocus();
 

diff --git a/src/components/SideNav/components/Slide/Slide.js b/src/components/SideNav/components/Slide/Slide.js
@@ -86,6 +86,12 @@ export function setTranslateValue(props, node) {
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 class Slide extends React.Component {
+  frameRequestId = null;
+
+  mounted = false;
+
+  transition = null;
+
   componentDidMount() {
     // state.mounted handle SSR, once the component is mounted, we need
     // to properly hide it.
@@ -110,8 +116,6 @@ class Slide extends React.Component {
     window.cancelAnimationFrame(this.frameRequestId);
   }
 
-  frameRequestId = null;
-
   handleResize = () => {
     if (this.frameRequestId) {
       window.cancelAnimationFrame(this.frameRequestId);
@@ -146,10 +150,6 @@ class Slide extends React.Component {
     }
   };
 
-  mounted = false;
-
-  transition = null;
-
   handleEntering = node => {
     const transitionProps = getTransitionProps(this.props, {
       mode: 'enter'

diff --git a/src/components/Sidebar/SidebarContext.spec.js b/src/components/Sidebar/SidebarContext.spec.js
@@ -25,7 +25,11 @@ describe('SidebarContext', () => {
       <SidebarContextProvider>
         <SidebarContextConsumer>
           {({ toggleSidebar }) => (
-            <button data-selector="child" onClick={toggleSidebar} />
+            <button
+              type="button"
+              data-selector="child"
+              onClick={toggleSidebar}
+            />
           )}
         </SidebarContextConsumer>
       </SidebarContextProvider>

diff --git a/src/components/Sidebar/components/Backdrop/Backdrop.spec.js b/src/components/Sidebar/components/Backdrop/Backdrop.spec.js
@@ -25,7 +25,7 @@ describe('Backdrop', () => {
     });
 
     it('should render with default styles when visible', () => {
-      const actual = create(<Backdrop visible={true} />);
+      const actual = create(<Backdrop visible />);
       expect(actual).toMatchSnapshot();
     });
   });

diff --git a/src/components/Tabs/Tabs.js b/src/components/Tabs/Tabs.js
@@ -71,7 +71,7 @@ class Tabs extends Component {
 
         const tabElement = (
           <Tab
-            key={index}
+            key={tabId}
             selected={selectedIndex === index}
             onClick={() => this.handleChange(index)}
             id={tabId}
@@ -83,7 +83,7 @@ class Tabs extends Component {
         );
         const tabPanelElement = (
           <TabPanel
-            key={index}
+            key={tabId}
             id={panelId}
             aria-labelledby={tabId}
             hidden={selectedIndex !== index}