chore(root): add formatter

.eslintignore

@@ -0,0 +1,3 @@
+// .eslintignore
+node_modules
+db

.eslintrc.js

@@ -0,0 +1,34 @@
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        paths: ['.', 'components', 'styles'],
+        extensions: ['.js', '.jsx'],
+      },
+    },
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: ['plugin:react/recommended', 'airbnb', 'prettier'],
+  plugins: ['react', 'prettier'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 'off',
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+    'react/jsx-props-no-spreading': 'off',
+    'no-plusplus': 'off',
+  },
+};

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore :
+build
+.next
+node_modules

.prettierrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  tabWidth: 2,
+  printWidth: 80,
+  endOfLine: 'auto',
+  arrowParens: 'always',
+  semi: true,
+  useTabs: false,
+  singleQuote: true,
+  bracketSpacing: true,
+};

next-seo.config.js

@@ -3,7 +3,7 @@ const description =
   'An opinionated starter project with Next.js and Chakra UI. Created by hendraaagil';
 const url = 'https://nextjs-chakra-hendraaagil.vercel.app';
 
-export const SEO = {
+const SEO = {
   title,
   description,
   canonical: url,
@@ -28,3 +28,5 @@ export const SEO = {
   },
   additionalLinkTags: [{ rel: 'icon', href: '/favicon.ico' }],
 };
+
+export default SEO;

package.json

@@ -5,10 +5,13 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "eslint ./components/** ./pages/** -c .eslintrc.js --ext js,jsx",
+    "lint-fix": "eslint ./components/** ./pages/** -c .eslintrc.js --fix --ext js,jsx"
   },
   "dependencies": {
     "@chakra-ui/react": "^1.6.3",
+    "@chakra-ui/theme-tools": "^1.1.7",
     "@emotion/react": "11",
     "@emotion/styled": "11",
     "framer-motion": "4",
@@ -18,5 +21,15 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-icons": "^4.2.0"
+  },
+  "devDependencies": {
+    "eslint": "^7.28.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
+    "prettier": "^2.3.1"
   }
 }

pages/_app.js

@@ -5,9 +5,9 @@ import { DefaultSeo } from 'next-seo';
 import { Box, ChakraProvider } from '@chakra-ui/react';
 import { AnimatePresence, motion } from 'framer-motion';
 
-import { SEO } from 'next-seo.config';
-import { theme } from 'styles/theme';
-import { GlobalStyle } from 'styles/styles';
+import SEO from 'next-seo.config';
+import theme from 'styles/theme';
+import GlobalStyle from 'styles/styles';
 import 'styles/css/nprogress.css';
 
 import Star from 'components/Star';

styles/styles.js

@@ -1,6 +1,6 @@
 import { Global, css } from '@emotion/react';
 
-export const GlobalStyle = ({ children }) => (
+const GlobalStyle = ({ children }) => (
   <>
     <Global
       styles={css`
@@ -18,3 +18,5 @@ export const GlobalStyle = ({ children }) => (
     {children}
   </>
 );
+
+export default GlobalStyle;

styles/theme.js

@@ -9,10 +9,12 @@ const breakpoints = createBreakpoints({
   '2xl': '1440px',
 });
 
-export const theme = extendTheme({
+const theme = extendTheme({
   fonts: {
     heading: `'Inter', ${defaultTheme.fonts.heading}`,
     body: `'Inter', ${defaultTheme.fonts.body}`,
   },
   breakpoints,
 });
+
+export default theme;