Merge pull request #434 from iCHEF/chore/add_prettier

chore: add prettier

.prettierignore

@@ -0,0 +1,8 @@
+# Ignore artifacts:
+coverage
+patches
+locales
+node_modules
+.yarn
+.github
+.vscode

README.md

@@ -1,4 +1,5 @@
 # gypcrete
+
 iCHEF web components library, built with React.
 
 [![npm package](https://img.shields.io/npm/v/@ichef/gypcrete.svg)](https://www.npmjs.com/package/@ichef/gypcrete)
@@ -10,17 +11,21 @@ iCHEF web components library, built with React.
 [![DevDependencies](https://img.shields.io/david/dev/iCHEF/gypcrete.svg)](https://david-dm.org/iCHEF/gypcrete?type=dev)
 
 ## Demo
+
 [ichef.github.io/gypcrete](https://ichef.github.io/gypcrete)
 
 ## Installation
+
 ```sh
 yarn add @ichef/gypcrete
 ```
 
 ## Usage
+
 Here is a quick example to get you started:
 
 **./App.js**
+
 ```jsx
 import React from 'react';
 import { createRoot } from 'react-dom/client';
@@ -41,18 +46,18 @@ root.render(<App />);
 ```
 
 **./CustomComponent.js**
+
 ```jsx
 import React from 'react';
 import { Button } from '@ichef/gypcrete';
 
-const CustomComponent = () => (
-  <Button basic="Hello World!" />
-);
+const CustomComponent = () => <Button basic="Hello World!" />;
 
 export default CustomComponent;
 ```
 
 ## Develop
+
 Gypcrete is a multi-package mono-repo built on [Lerna](https://github.com/lerna/lerna). All sub-pacakges are placed inside `packages/` folder. It uses [Yarn Workspaces](https://yarnpkg.com/en/docs/workspaces) to hoist all dependencies to root level.
 
 To install dependencies and link packages, simply run `yarn install`.
@@ -62,20 +67,22 @@ Linters and test runners are configured at repository level.
 They should check all source files across every package in the `packages/` folder.
 
 Gypcrete does not publish develop builds to the `dist` branch anymore. It now publishes to NPM instead:
-  * When pushed to `develop` branch --> publish a canary build
-  * When pushed to `master` branch --> publish a relase build
+
+- When pushed to `develop` branch --> publish a canary build
+- When pushed to `master` branch --> publish a relase build
 
 ## Release
 
 1. 從 develop 開出新的 release branch，release branch 的格式必須符合 `release/x.y.z`，例如 `release/1.2.3`。`x.y.z` 的部分為欲發佈的版號，必須符合 semantic versioning。
 2. 以這支新的 release branch 開出新的 PR，base branch 設為 `master`。
 3. 當 PR 被 merge 時，會觸發 github action 的 [Release workflow](https://github.com/iCHEF/fe-modules/blob/master/.github/workflows/release.yml)，此 workflow 會在 master branch 做下列動作：
-    - 更新 package.json 的 version 並 commit
-    - 執行 `yarn changelog` 更新 CHANGELOG.md
-    - 打 git tag 並將 tag push 上 github
-    - 發佈新版本到 npm
-    - 開出 backport 到 develop branch 的 PR
+   - 更新 package.json 的 version 並 commit
+   - 執行 `yarn changelog` 更新 CHANGELOG.md
+   - 打 git tag 並將 tag push 上 github
+   - 發佈新版本到 npm
+   - 開出 backport 到 develop branch 的 PR
 4. merge backport PR。至此完成 release 流程。
 
 ## LICENSE
+
 This project is licensed under the terms of the [Apache License 2.0](https://github.com/ichef/gypcrete/blob/master/LICENSE)

babel.config.js

@@ -1,18 +1,21 @@
 module.exports = {
-  presets: [
-    '@babel/preset-env',
-    '@babel/preset-react',
-  ],
+  presets: ['@babel/preset-env', '@babel/preset-react'],
 
   plugins: [
     '@babel/plugin-proposal-class-properties',
-    ['@babel/plugin-transform-runtime', {
-      corejs: 3,
-    }],
-    ['babel-plugin-module-resolver', {
-      root: ['./'],
-      cwd: 'packagejson',
-    }],
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        corejs: 3,
+      },
+    ],
+    [
+      'babel-plugin-module-resolver',
+      {
+        root: ['./'],
+        cwd: 'packagejson',
+      },
+    ],
   ],
 
   env: {
@@ -22,38 +25,38 @@ module.exports = {
     },
     lib: {
       // Module: CommonJS
-      plugins: [
-        'babel-plugin-strip-css-imports',
-      ],
+      plugins: ['babel-plugin-strip-css-imports'],
       ignore: ['**/__tests__/*'],
     },
     es: {
       // Module: ES Module
-      presets: [
-        ['@babel/preset-env', { modules: false }],
-      ],
-      plugins: [
-        'babel-plugin-strip-css-imports',
-      ],
+      presets: [['@babel/preset-env', { modules: false }]],
+      plugins: ['babel-plugin-strip-css-imports'],
       ignore: ['**/__tests__/*'],
     },
     test: {
       // Module: CommonJS
       presets: [
-        ['@babel/preset-env', {
-          useBuiltIns: 'usage',
-          corejs: 3,
-          targets: {
-            node: 'current',
+        [
+          '@babel/preset-env',
+          {
+            useBuiltIns: 'usage',
+            corejs: 3,
+            targets: {
+              node: 'current',
+            },
           },
-        }],
+        ],
       ],
       plugins: [
         'babel-plugin-strip-css-imports',
-        ['@babel/plugin-transform-runtime', {
-          // so `setTimeout` is not replaced with core-js 3 version.
-          corejs: false,
-        }],
+        [
+          '@babel/plugin-transform-runtime',
+          {
+            // so `setTimeout` is not replaced with core-js 3 version.
+            corejs: false,
+          },
+        ],
       ],
     },
   },

codecov.yml

@@ -2,7 +2,7 @@ codecov:
   branch: develop
 
 comment:
-  layout: "diff, files"
+  layout: 'diff, files'
 
 coverage:
   status:

configs/.eslintrc.yml

@@ -1,13 +1,15 @@
-extends: ichef
+extends:
+  - ichef
+  - prettier
 
 env:
-    browser: true
-    es6: true
-    jest: true
+  browser: true
+  es6: true
+  jest: true
 
 settings:
-    import/resolver:
-        babel-module: {}
+  import/resolver:
+    babel-module: {}
 
 parserOptions:
-    sourceType: module
+  sourceType: module

configs/.stylelintrc.yml

@@ -3,11 +3,11 @@ extends: stylelint-config-standard
 configBasedir: ../
 
 rules:
-    indentation: 2
-    number-leading-zero: never
-    selector-pseudo-element-colon-notation: single
+  indentation: 2
+  number-leading-zero: never
+  selector-pseudo-element-colon-notation: single
 
 ignoreFiles:
-    - node_modules/
-    - coverage/
-    - dist/
+  - node_modules/
+  - coverage/
+  - dist/

configs/jest.config.json

@@ -9,8 +9,6 @@
   "moduleNameMapper": {
     "\\.(css|scss|sass|md|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|)$": "<rootDir>/__mocks__/fileMock.js"
   },
-  "transformIgnorePatterns": [
-    "<rootDir>/node_modules/(?!@ichef/)"
-  ],
+  "transformIgnorePatterns": ["<rootDir>/node_modules/(?!@ichef/)"],
   "setupTestFrameworkScriptFile": "<rootDir>/configs/jestSetup.js"
 }

configs/webpack.dist.js

@@ -8,10 +8,9 @@ const fullPackageName = process.env.npm_package_name || process.env.GPT_PKG_NAME
 const packageName = fullPackageName.replace(/@ichef\//, '');
 
 function toCamelCase(str) {
-  return str.replace(/([-_]\w)/g, g => g[1].toUpperCase());
+  return str.replace(/([-_]\w)/g, (g) => g[1].toUpperCase());
 }
 
-
 module.exports = {
   mode: 'production',
 
@@ -32,9 +31,7 @@ module.exports = {
     rules: [
       {
         test: /\.jsx?$/,
-        include: [
-          path.resolve(packageDirname, 'src'),
-        ],
+        include: [path.resolve(packageDirname, 'src')],
         use: [
           {
             loader: 'babel-loader',
@@ -46,9 +43,7 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        include: [
-          path.resolve(packageDirname, 'src'),
-        ],
+        include: [path.resolve(packageDirname, 'src')],
         use: [
           {
             loader: MiniCssExtractPlugin.loader,

jsconfig.json

@@ -1,16 +1,9 @@
 {
-    "compilerOptions": {
-        "lib": [
-            "dom",
-            "es2018",
-        ]
-    },
-    "exclude": [
-      "node_modules"
-    ],
-    "typeAcquisition": {
-        "include": [
-            "jest"
-        ]
-    }
+  "compilerOptions": {
+    "lib": ["dom", "es2018"]
+  },
+  "exclude": ["node_modules"],
+  "typeAcquisition": {
+    "include": ["jest"]
+  }
 }

lerna.json

@@ -1,7 +1,5 @@
 {
-  "packages": [
-    "packages/*"
-  ],
+  "packages": ["packages/*"],
   "version": "7.1.0",
   "npmClient": "yarn",
   "command": {

package.json

@@ -58,6 +58,7 @@
     "eslint": "7.8",
     "eslint-config-airbnb": "18.2",
     "eslint-config-ichef": "8.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-babel-module": "^5.0.0-beta.1",
     "eslint-plugin-babel": "5.3",
     "eslint-plugin-filenames": "1.3",
@@ -66,10 +67,13 @@
     "eslint-plugin-react": "7.20",
     "eslint-plugin-react-hooks": "4.1",
     "eslint-plugin-unicorn": "21.0",
+    "husky": "^3.0.0",
     "jest": "^26.1.0",
     "lerna": "^3.22.1",
+    "lint-staged": "^9.2.0",
     "mini-css-extract-plugin": "^2.7.6",
     "postcss-loader": "^7.3.3",
+    "prettier": "3.1.1",
     "prop-types": "^15.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -91,5 +95,22 @@
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
+  },
+  "lint-staged": {
+    "*.{yml,json,md}": [
+      "prettier --write",
+      "git add"
+    ],
+    "*.{js,jsx}": [
+      "prettier --write",
+      "eslint --quiet",
+      "stylelint",
+      "git add"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
   }
 }

packages/core/configs/svgr/componentTemplate.js

@@ -3,20 +3,12 @@
  * The `template` param is from babel-template (https://babeljs.io/docs/en/next/babel-template.html)
  * See svgr document (https://react-svgr.com/docs/custom-templates/#custom-index-template)
  */
-function componentTemplate(
-  { template },
-  opts,
-  {
-    componentName,
-    props,
-    jsx,
-  },
-) {
+function componentTemplate({ template }, opts, { componentName, props, jsx }) {
   /**
-     * Because we cannot keep line break with template.ast (https://babeljs.io/docs/en/next/babel-template.html#ast-1),
-     * we have to write it like this to inject newline and other arguments.
-     * See usage: https://babeljs.io/docs/en/next/babel-template.html#string-usage
-     */
+   * Because we cannot keep line break with template.ast (https://babeljs.io/docs/en/next/babel-template.html#ast-1),
+   * we have to write it like this to inject newline and other arguments.
+   * See usage: https://babeljs.io/docs/en/next/babel-template.html#string-usage
+   */
   const code = `
     import React from 'react';
     NEWLINE