chore: update GH's template and prettier config (#309)

* chore(gh): update GitHub's pull-request template

* chore: use unified common prettier config

* chore: add the mdx file to prettier

* chore(gh): update contributing guide docs

.github/CONTRIBUTING.md

@@ -47,6 +47,10 @@ At any time, you think it's ok, you can start the following steps to submit your
 
 - If this is a `feature`, set to `rc` branch. All the others are set to `master` branch.
 
+> How to check my code style?
+
+- Run `yarn prettier`
+
 > I added a new document page, but it was not displayed locally ?
 
 - Run `yarn dev` agian.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,7 +1,7 @@
 ## Checklist
 
 - [ ] Fix linting errors
-- [ ] Label has been added
+- [ ] Tests have been added / updated (or snapshots)
 
 ## Change information
 

.prettierignore

@@ -6,8 +6,6 @@ dist
 coverage
 public
 esm
-*.mdx
-*.md
 *.json
 *.d.ts
 *.yml

README.md

@@ -10,7 +10,6 @@
 
 > Modern and minimalist React UI library, originating from Vercel's design.
 
-
 <br/>
 
 ## Quick Start
@@ -23,9 +22,9 @@
 import { ZeitProvider, CssBaseline } from '@zeit-ui/react'
 
 const Application = () => (
-  <ZeitProvider>        //  ---> Base provider
-    <CssBaseline />     //  ---> normalize styles
-    <AppComponent />    //  ---> Your App Component
+  <ZeitProvider>
+    <CssBaseline /> // ---> normalize styles
+    <AppComponent /> // ---> Your App Component
   </ZeitProvider>
 )
 ```
@@ -57,4 +56,5 @@ const Application = () => (
 <br/>
 
 ## LICENSE
+
 [MIT](./LICENSE)

components/user/__tests__/index.test.tsx

@@ -35,7 +35,7 @@ describe(' User', () => {
 
   it('should pass alt attribute', () => {
     const wrapper = mount(
-      <User name="witt" src="https://unix.bio/assets/avatar.png" altText="witt"/>
+      <User name="witt" src="https://unix.bio/assets/avatar.png" altText="witt" />,
     )
     expect(wrapper.find('img').prop('alt')).toEqual('witt')
   })

examples/create-next-app/pages/_app.js

@@ -1,11 +1,11 @@
-import { ZeitProvider, CssBaseline } from '@zeit-ui/react';
+import { ZeitProvider, CssBaseline } from '@zeit-ui/react'
 
 function MyApp({ Component, pageProps }) {
   return (
     <ZeitProvider>
       <CssBaseline />
       <Component {...pageProps} />
     </ZeitProvider>
-  );
+  )
 }
-export default MyApp;
+export default MyApp

examples/create-next-app/pages/_document.js

@@ -1,15 +1,10 @@
-import Document, {
-  Html,
-  Head,
-  Main,
-  NextScript,
-} from 'next/document';
-import { CssBaseline } from '@zeit-ui/react';
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { CssBaseline } from '@zeit-ui/react'
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    const styles = CssBaseline.flush();
+    const initialProps = await Document.getInitialProps(ctx)
+    const styles = CssBaseline.flush()
 
     return {
       ...initialProps,
@@ -19,7 +14,7 @@ class MyDocument extends Document {
           {styles}
         </>
       ),
-    };
+    }
   }
 
   render() {
@@ -31,8 +26,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    );
+    )
   }
 }
 
-export default MyDocument;
+export default MyDocument

examples/create-next-app/pages/index.js

@@ -8,16 +8,16 @@ export default function Home() {
         <title>Create Next App</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-        <Text h1>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </Text>
-        <Card>
-          hello, world. I am using <Code>@zeit-ui/react</Code> !
-        </Card>
-        <Spacer y={1.5} />
-        <Card shadow>
-          <Note type="success">This note details something important.</Note>
-        </Card>
+      <Text h1>
+        Welcome to <a href="https://nextjs.org">Next.js!</a>
+      </Text>
+      <Card>
+        hello, world. I am using <Code>@zeit-ui/react</Code> !
+      </Card>
+      <Spacer y={1.5} />
+      <Card shadow>
+        <Note type="success">This note details something important.</Note>
+      </Card>
     </Page>
   )
 }

examples/custom-styles/README.md

@@ -13,4 +13,3 @@ yarn && yarn dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-

examples/tree-shaking-create-react-app/README.md

@@ -6,10 +6,9 @@ we use [react-app-rewired](https://github.com/timarney/react-app-rewired) to cha
 
 ### About
 
-  - Add `config-overrides.js` to your root folder.
-  - Add deps: `yarn add babel-plugin-import  customize-cra react-app-rewired -D`
-  - Replace your default scripts(`react-scripts`) with `react-app-rewired`.
-
+- Add `config-overrides.js` to your root folder.
+- Add deps: `yarn add babel-plugin-import customize-cra react-app-rewired -D`
+- Replace your default scripts(`react-scripts`) with `react-app-rewired`.
 
 ### Previews
 

examples/tree-shaking-create-react-app/config-overrides.js

@@ -1,6 +1,6 @@
-const { override, fixBabelImports } = require('customize-cra');
- module.exports = override(
-   fixBabelImports('@zeit-ui/react', {
-     libraryDirectory: 'esm',
-   }),
- );
+const { override, fixBabelImports } = require('customize-cra')
+module.exports = override(
+  fixBabelImports('@zeit-ui/react', {
+    libraryDirectory: 'esm',
+  }),
+)

examples/tree-shaking-nextjs/.babelrc

@@ -1,7 +1,5 @@
 {
-  "presets": [
-    "next/babel"
-  ],
+  "presets": ["next/babel"],
   "plugins": [
     [
       "import",

examples/tree-shaking-nextjs/README.md

@@ -48,6 +48,6 @@ If you don't use `tree shaking` in your porject, bundle `zeit-ui/react` as a `ch
 every time, you may notice that the hash name of `chunk` is still changing,
 this may cause you to not make full use of the cache.
 
-  - This issue from `next.js`, and they're improving that, you can track progress [here](https://github.com/vercel/next.js/issues/6303).
-  - If you want to customize config of webpack, to ensure that the `chunk` from `zeit-ui/react` is always the same,
-you can refer to [this docuemnt](https://webpack.js.org/guides/code-splitting/).
+- This issue from `next.js`, and they're improving that, you can track progress [here](https://github.com/vercel/next.js/issues/6303).
+- If you want to customize config of webpack, to ensure that the `chunk` from `zeit-ui/react` is always the same,
+  you can refer to [this docuemnt](https://webpack.js.org/guides/code-splitting/).

examples/tree-shaking-webpack/.babelrc

@@ -1,9 +1,4 @@
 {
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
-  ],
-  "plugins": [
-    ["import", { "libraryName": "@zeit-ui/react", "libraryDirectory": "esm"}]
-  ]
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [["import", { "libraryName": "@zeit-ui/react", "libraryDirectory": "esm" }]]
 }

examples/tree-shaking-webpack/src/index.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Tree Shaking</title>
-</head>
-<body>
-<div id="app"></div>
-</body>
+  <head>
+    <title>Tree Shaking</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
 </html>

examples/tree-shaking-webpack/src/index.js

@@ -18,5 +18,5 @@ ReactDOM.render(
       <App />
     </ZeitProvider>
   </React.StrictMode>,
-  document.getElementById('app')
+  document.getElementById('app'),
 )

examples/tree-shaking-webpack/webpack.config.js

@@ -3,38 +3,36 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
   entry: './src/index.js',
-  
+
   devtool: 'source-map',
-  
+
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         use: ['babel-loader'],
-      }
-    ]
+      },
+    ],
   },
-  
+
   resolve: {
     extensions: ['.js', '.jsx'],
   },
-  
+
   output: {
     path: __dirname + '/dist',
     publicPath: '/',
     filename: 'bundle.js',
   },
-
-  plugins: [
-    new HtmlWebpackPlugin({ template: path.join(__dirname, './src/index.html') }),
-  ],
-
+
+  plugins: [new HtmlWebpackPlugin({ template: path.join(__dirname, './src/index.html') })],
+
   devServer: {
     host: '127.0.0.1',
     port: '3000',
     contentBase: './dist',
     hot: true,
     open: true,
-  }
-};
+  },
+}

package.json

@@ -15,6 +15,7 @@
     "type": "git",
     "url": "https://github.com/zeit-ui/react"
   },
+  "prettier": "@zeit-ui/prettier-config",
   "keywords": [
     "zeit",
     "zeit ui",
@@ -65,6 +66,7 @@
     "@types/styled-jsx": "^2.2.8",
     "@typescript-eslint/eslint-plugin": "^2.24.0",
     "@typescript-eslint/parser": "^2.24.0",
+    "@zeit-ui/prettier-config": "^1.0.0",
     "@zeit-ui/react-icons": "^1.2.2",
     "babel-jest": "^25.3.0",
     "babel-loader": "^8.0.6",