style: format code by using prettier

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/.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": {

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

packages/core/configs/svgr/indexTemplate.js

@@ -39,18 +39,18 @@ function indexTemplate(iconComponentFileAbsPaths) {
   const exportStatements = iconComponentFileAbsPaths.map((filePath) => {
     const componentFileNameWithoutExt = path.basename(filePath, path.extname(filePath));
     /**
-         * icon type on <Icon /> is kebab case.
-         * svgr will transform it to upper camel case(pascal case) for component.
-         * Here we just transform it back.
-         */
+     * icon type on <Icon /> is kebab case.
+     * svgr will transform it to upper camel case(pascal case) for component.
+     * Here we just transform it back.
+     */
     const originalSvgName = upperCamelCaseToKebabCase(componentFileNameWithoutExt);
     const keyString = originalSvgName.includes('-') ? `'${originalSvgName}'` : originalSvgName;
     return `${keyString}: ${componentFileNameWithoutExt},`;
   });
   return `${importStatements.join('\n')}
 
 export default {
-${exportStatements.map(s => `  ${s}`).join('\n')}
+${exportStatements.map((s) => `  ${s}`).join('\n')}
 };
 `;
 }

packages/core/configs/webpack.dist.js

@@ -11,9 +11,7 @@ module.exports = webpackMerge(defaultConfigs, {
     rules: [
       {
         test: /\.(woff|woff2|otf|ttf|eot)$/,
-        include: [
-          path.resolve(packageDirname, 'src/fonts'),
-        ],
+        include: [path.resolve(packageDirname, 'src/fonts')],
         type: 'asset/resource',
         generator: {
           filename: 'fonts/[name]-[hash:6][ext]',

packages/core/src/Avatar.js

@@ -14,20 +14,20 @@ const SQUARE = 'square';
 const ROUNDED = 'rounded';
 const CIRCLE = 'circle';
 
-function Avatar({
-  className,
-  src,
-  alt,
-  type,
-  ...otherProps
-}) {
+function Avatar({ className, src, alt, type, ...otherProps }) {
   const bemClass = ROOT_BEM.modifier(type);
 
   const rootClassName = classNames(className, `${bemClass}`);
 
   return (
-    <div className={rootClassName} {...otherProps}>
-      <img alt={alt} src={src} />
+    <div
+      className={rootClassName}
+      {...otherProps}
+    >
+      <img
+        alt={alt}
+        src={src}
+      />
     </div>
   );
 }

packages/core/src/BasicRow.js

@@ -6,13 +6,7 @@ import Tag from './Tag';
 
 import wrapIfNotElement from './utils/wrapIfNotElement';
 
-function BasicRow({
-  basic,
-  tag,
-  statusIcon,
-  children,
-  ...otherProps
-}) {
+function BasicRow({ basic, tag, statusIcon, children, ...otherProps }) {
   if (!basic) {
     return null;
   }