ci: replace semantic commit checks with new workflow (#1188)

* ci: replace semantic commit checks with new workflow

* style: fix prettier errors

* ci: fix lint script

* ci: fix lint script

* style: ignore import extension errors

* style: ignore prop-type errors

* style: remove unused eslint disable

* chore: fix husky after rebase

* chore: address eslint violation after rebase

Co-authored-by: Hendrik de Graaf <hendrik@dhis2.org>

.eslintrc.js

@@ -2,9 +2,8 @@ const { config } = require('@dhis2/cli-style')
 
 module.exports = {
     extends: [config.eslintReact],
-    plugins: ['react-hooks'],
     rules: {
-        'react-hooks/rules-of-hooks': 'error',
         'react-hooks/exhaustive-deps': 'error',
+        'import/extensions': 'off',
     },
 }

.github/workflows/dhis2-verify-commits.yml

@@ -0,0 +1,32 @@
+name: 'dhis2: verify (commits)'
+
+on:
+    pull_request:
+        types: ['opened', 'edited', 'reopened', 'synchronize']
+
+jobs:
+    lint-pr-title:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - uses: c-hive/gha-yarn-cache@v1
+            - run: yarn install --frozen-lockfile
+            - id: commitlint
+              run: echo ::set-output name=config_path::$(node -e "process.stdout.write(require('@dhis2/cli-style').config.commitlint)")
+            - uses: JulienKode/pull-request-name-linter-action@v0.5.0
+              with:
+                  configuration-path: ${{ steps.commitlint.outputs.config_path }}
+
+    lint-commits:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+              with:
+                  fetch-depth: 0
+            - uses: c-hive/gha-yarn-cache@v1
+            - run: yarn install --frozen-lockfile
+            - id: commitlint
+              run: echo ::set-output name=config_path::$(node -e "process.stdout.write(require('@dhis2/cli-style').config.commitlint)")
+            - uses: wagoid/commitlint-github-action@v4
+              with:
+                  configFile: ${{ steps.commitlint.outputs.config_path }}

.hooks/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn d2-style check commit "$1"

.hooks/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn d2-style check --staged

docs/advanced/offline.md

@@ -71,13 +71,8 @@ export function CacheableSectionWrapper({ id }) {
 import { useCacheableSections } from '@dhis2/app-runtime'
 
 function DemoComponent() {
-    const {
-        startRecording,
-        remove,
-        lastUpdated,
-        isCached,
-        recordingState,
-    } = useCacheableSection(id)
+    const { startRecording, remove, lastUpdated, isCached, recordingState } =
+        useCacheableSection(id)
 }
 ```
 
@@ -115,11 +110,11 @@ function StartRecordingButton({ id }) {
         startRecording({
             onStarted: () => console.log('Recording started'),
             onCompleted: () => console.log('Recording completed'),
-            onError: err => console.error(err),
+            onError: (err) => console.error(err),
             recordingTimeoutDelay: 1000, // the default
         })
             .then(() => console.log('startRecording signal sent successfully'))
-            .catch(err =>
+            .catch((err) =>
                 console.error(`Error when starting recording: ${err}`)
             )
     }

docs/hooks/useAlerts.md

@@ -35,7 +35,7 @@ const Alerter = () => {
 const Alerts = () => {
     const alerts = useAlerts()
 
-    return alerts.map(alert => (
+    return alerts.map((alert) => (
         <div key={alert.id}>
             {alert.message}
             <button onClick={alert.remove}>hide</button>

docs/hooks/useDataQuery.md

@@ -64,7 +64,7 @@ export const IndicatorList = () => {
             {data && (
                 <pre>
                     {data.indicators.indicators
-                        .map(ind => ind.displayName)
+                        .map((ind) => ind.displayName)
                         .join('\n')}
                 </pre>
             )}
@@ -101,7 +101,7 @@ export const IndicatorList = () => {
     const pager = data?.indicators?.pager
     const hasNextPage = pager?.nextPage
 
-    const handlePageChange = nextPage => {
+    const handlePageChange = (nextPage) => {
         // "page" variable in query is passed via refetch below
         refetch({ page: nextPage })
     }
@@ -114,7 +114,7 @@ export const IndicatorList = () => {
             {data && (
                 <pre>
                     {data.indicators.indicators
-                        .map(ind => ind.displayName)
+                        .map((ind) => ind.displayName)
                         .join('\n')}
                 </pre>
             )}

examples/cra/src/components/Alerts.js

@@ -4,7 +4,7 @@ import React from 'react'
 export const Alerts = () => {
     const alerts = useAlerts()
 
-    return alerts.map(alert => (
+    return alerts.map((alert) => (
         <div key={alert.id}>
             {alert.message}
             <button onClick={alert.remove}>hide</button>

examples/cra/src/components/IndicatorList.js

@@ -16,7 +16,7 @@ const query = {
 
 export const IndicatorList = () => {
     const { loading, error, data, refetch } = useDataQuery(query)
-    const { show } = useAlert(id => `Created indicator ${id}`)
+    const { show } = useAlert((id) => `Created indicator ${id}`)
     return (
         <div>
             <h3>Indicators</h3>
@@ -25,7 +25,7 @@ export const IndicatorList = () => {
             {data && (
                 <>
                     <pre>
-                        {data.indicators.indicators.map(ind => (
+                        {data.indicators.indicators.map((ind) => (
                             <Indicator
                                 key={ind.id}
                                 indicator={ind}
@@ -46,7 +46,7 @@ export const IndicatorList = () => {
                         &lt;- Previous
                     </button>
                     <AddButton
-                        onCreate={result => {
+                        onCreate={(result) => {
                             show(result.response.uid)
                             refetch()
                         }}

examples/cra/src/components/SwitchableProvider.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/prop-types */
+
 import { Provider, DataProvider } from '@dhis2/app-runtime'
 import React from 'react'
 

examples/cra/src/serviceWorker.js

@@ -57,7 +57,7 @@ export function register(config) {
 function registerValidSW(swUrl, config) {
     navigator.serviceWorker
         .register(swUrl)
-        .then(registration => {
+        .then((registration) => {
             registration.onupdatefound = () => {
                 const installingWorker = registration.installing
                 if (installingWorker == null) {
@@ -93,15 +93,15 @@ function registerValidSW(swUrl, config) {
                 }
             }
         })
-        .catch(error => {
+        .catch((error) => {
             console.error('Error during service worker registration:', error)
         })
 }
 
 function checkValidServiceWorker(swUrl, config) {
     // Check if the service worker can be found. If it can't reload the page.
     fetch(swUrl)
-        .then(response => {
+        .then((response) => {
             // Ensure service worker exists, and that we really are getting a JS file.
             const contentType = response.headers.get('content-type')
             if (
@@ -110,7 +110,7 @@ function checkValidServiceWorker(swUrl, config) {
                     contentType.indexOf('javascript') === -1)
             ) {
                 // No service worker found. Probably a different app. Reload the page.
-                navigator.serviceWorker.ready.then(registration => {
+                navigator.serviceWorker.ready.then((registration) => {
                     registration.unregister().then(() => {
                         window.location.reload()
                     })
@@ -129,7 +129,7 @@ function checkValidServiceWorker(swUrl, config) {
 
 export function unregister() {
     if ('serviceWorker' in navigator) {
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
             registration.unregister()
         })
     }

examples/query-playground/src/components/Editor.js

@@ -6,7 +6,7 @@ import 'brace/theme/monokai'
 import 'brace/theme/github'
 import './Editor.css'
 
-export const Editor = props => (
+export const Editor = (props) => (
     <AceEditor
         fontSize={14}
         mode="json"

examples/query-playground/src/components/QueryEditor.js

@@ -22,7 +22,7 @@ const defaultMutation = {
     },
 }
 
-const getDefaultQueryByType = type =>
+const getDefaultQueryByType = (type) =>
     JSON.stringify(type === 'query' ? defaultQuery : defaultMutation, null, 4)
 
 export const QueryEditor = ({
@@ -51,7 +51,7 @@ export const QueryEditor = ({
         execute({ query: parsed, type }).then(setResult)
     }
 
-    const onKeyPress = event => {
+    const onKeyPress = (event) => {
         if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
             onExecute()
             event.stopPropagation()

examples/query-playground/src/components/TabControls.js

@@ -38,12 +38,12 @@ const TabControl = ({
         onEditDoneClick()
     }
 
-    const onEditIconClick = event => {
+    const onEditIconClick = (event) => {
         event.stopPropagation()
         onEditClick()
     }
 
-    const onRemoveIconClick = event => {
+    const onRemoveIconClick = (event) => {
         event.stopPropagation()
         onRemoveTab()
     }
@@ -72,7 +72,7 @@ const TabControl = ({
                 )}
 
                 {edit && (
-                    <div onClick={e => e.stopPropagation()}>
+                    <div onClick={(e) => e.stopPropagation()}>
                         <Modal>
                             <form onSubmit={save}>
                                 <ModalTitle>Edit tab name</ModalTitle>

examples/query-playground/src/hooks/useExecuteQuery.js

@@ -1,7 +1,7 @@
 import { useDataEngine } from '@dhis2/app-runtime'
 import { useState } from 'react'
 
-const stringify = obj => JSON.stringify(obj, undefined, 2)
+const stringify = (obj) => JSON.stringify(obj, undefined, 2)
 
 export const useExecuteQuery = () => {
     const engine = useDataEngine()

examples/query-playground/src/hooks/useTabs.js

@@ -23,11 +23,11 @@ const spliceTabs = (tabs, index, updatedTab) => {
     return [...before, ...updated, ...after]
 }
 
-const newTab = id => {
+const newTab = (id) => {
     return { ...tabTemplate, id, name: `Query ${id}` }
 }
 
-const initTabState = storageNameSpace => {
+const initTabState = (storageNameSpace) => {
     if (localStorage.getItem(storageNameSpace)) {
         const { version, ...storedState } = JSON.parse(
             localStorage.getItem(storageNameSpace)
@@ -42,9 +42,9 @@ const initTabState = storageNameSpace => {
         tabs: [newTab(1)],
     }
 }
-const nextAvailableId = tabs => {
+const nextAvailableId = (tabs) => {
     let candidate = 0
-    while (tabs.some(tab => tab.id === candidate)) {
+    while (tabs.some((tab) => tab.id === candidate)) {
         ++candidate
     }
     return candidate
@@ -98,13 +98,13 @@ const reducer = (state, action) => {
     }
 }
 
-const prepareForStorage = state => ({
+const prepareForStorage = (state) => ({
     version: VERSION,
     ...state,
-    tabs: state.tabs.map(tab => ({ ...tab, result: '' })),
+    tabs: state.tabs.map((tab) => ({ ...tab, result: '' })),
 })
 
-const useTabState = storageNameSpace => {
+const useTabState = (storageNameSpace) => {
     const [state, dispatch] = useReducer(
         reducer,
         storageNameSpace,
@@ -124,7 +124,7 @@ const useTabState = storageNameSpace => {
         })
     }
 
-    const removeTab = index => {
+    const removeTab = (index) => {
         dispatch({
             type: 'remove',
             payload: {
@@ -143,7 +143,7 @@ const useTabState = storageNameSpace => {
         })
     }
 
-    const setActiveTab = index => {
+    const setActiveTab = (index) => {
         dispatch({
             type: 'setActive',
             payload: {
@@ -166,14 +166,13 @@ const useTabState = storageNameSpace => {
 export const useTabs = () => {
     const { baseUrl } = useConfig()
     const storageNameSpace = `playground-${baseUrl}`
-    const [state, { addTab, removeTab, editTab, setActiveTab }] = useTabState(
-        storageNameSpace
-    )
+    const [state, { addTab, removeTab, editTab, setActiveTab }] =
+        useTabState(storageNameSpace)
 
-    const setName = name => editTab(state.activeTab, { name })
-    const setQuery = query => editTab(state.activeTab, { query })
-    const setResult = result => editTab(state.activeTab, { result })
-    const setType = type => editTab(state.activeTab, { type })
+    const setName = (name) => editTab(state.activeTab, { name })
+    const setQuery = (query) => editTab(state.activeTab, { query })
+    const setResult = (result) => editTab(state.activeTab, { result })
+    const setType = (type) => editTab(state.activeTab, { type })
 
     return {
         activeTab: state.activeTab,

package.json

@@ -11,7 +11,7 @@
     ],
     "devDependencies": {
         "@dhis2/cli-app-scripts": "^6.2.0",
-        "@dhis2/cli-style": "^7.2.2",
+        "@dhis2/cli-style": "^10.4.1",
         "@dhis2/cli-utils-docsite": "^2.0.3",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^12.0.0",
@@ -48,11 +48,11 @@
         "test:services": "loop \"yarn test\" --cwd ./services --exit-on-error",
         "test:runtime": "cd runtime && yarn test",
         "test": "yarn test:services && yarn test:runtime",
-        "format": "d2-style js apply --all --no-stage && d2-style text apply --all --no-stage",
+        "format": "d2-style apply js --all --no-stage && d2-style apply text --all --no-stage",
         "start": "yarn build && cd examples/query-playground && yarn start",
         "docs:build": "d2-utils-docsite build ./docs -o ./dist && yarn build:playground",
         "docs:serve": "d2-utils-docsite serve ./docs -o ./dist",
-        "lint": "d2-style js check && d2-style text check"
+        "lint": "d2-style check js && d2-style check text"
     },
     "d2": {
         "docsite": {