Task: Add prettier, craco and add default pages and functions

2021-06-12 14:51:22 +07:00 · 2021-06-12 14:51:22 +07:00 · 4c0fe442cd
commit 4c0fe442cd
parent d5451f51b9
21 changed files with 140 additions and 68 deletions
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,4 @@
+node_modules
+build
+dist
+coverage
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}
--- a/README.md
+++ b/README.md
@ -1,10 +1,13 @@
 # CUBETIQ React App
+
 CUBETIQ React App Template for general use in react application.

 # Libraries
+
 - Create React App: 4.0.3
 - React: 17.0.0
 - TypeScript: 4.1.2

 # Contributors
+
 - Sambo Chea <sombochea@cubetiqs.com>
--- a/craco.config.js
+++ b/craco.config.js
@ -0,0 +1,9 @@
+const path = require('path')
+
+module.exports = {
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+}
--- a/package.json
+++ b/package.json
@ -1,27 +1,28 @@
 {
  "name": "cubetiq-react-app",
  "version": "0.1.0",
+  "author": {
+    "name": "Sambo Chea",
+    "email": "sombochea@cubetiqs.com",
+    "url": "https://github.com/SomboChea"
+  },
+  "license": "MIT",
+  "repository": {
+    "url": "https://git.cubetiqs.com/CUBETIQ/cubetiq-react-app.git"
+  },
  "private": true,
  "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "react-scripts eject",
+    "format": "prettier --write ."
  },
  "eslintConfig": {
    "extends": [
@ -40,5 +41,19 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "devDependencies": {
+    "@craco/craco": "^6.1.2",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "craco-less": "^1.17.1",
+    "prettier": "^2.3.1",
+    "react-scripts": "4.0.3",
+    "typescript": "^4.1.2"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
@ -10,11 +9,10 @@
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>%REACT_APP_NAME%</title>
-</head>
+  </head>

-<body>
+  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
-</body>
-
+  </body>
 </html>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,10 +0,0 @@
-import React from 'react';
-import './App.css';
-
-export default function App() {
-  return (
-    <div className="App">
-      <h1>CUBETIQ</h1>
-    </div>
-  );
-}
--- a/src/app/App.css
+++ b/src/app/App.css
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@ -0,0 +1,12 @@
+import React from 'react'
+import './App.css'
+
+const App = () => {
+  return (
+    <div className="App">
+      <h1>CUBETIQ</h1>
+    </div>
+  )
+}
+
+export default App
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,17 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './app/App'
+import reportWebVitals from './reportWebVitals'

 ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
-);
+)

 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()
--- a/src/pages/About/index.less
+++ b/src/pages/About/index.less
@ -0,0 +1,4 @@
+.about-title {
+  text-align: center;
+  font-weight: bold;
+}
--- a/src/pages/About/index.tsx
+++ b/src/pages/About/index.tsx
@ -0,0 +1,10 @@
+import React from 'react'
+import './index.less'
+
+export default function About() {
+  return (
+    <div className="about-title">
+      <h1>About Us</h1>
+    </div>
+  )
+}
--- a/src/pages/Home/index.less
+++ b/src/pages/Home/index.less
@ -0,0 +1,5 @@
+.home-title {
+  text-align: center;
+  font-weight: bold;
+  font-size: large;
+}
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@ -0,0 +1,10 @@
+import React from 'react'
+import './index.less'
+
+export default function Home() {
+  return (
+    <div className="home-title">
+      <h1>Home</h1>
+    </div>
+  )
+}
--- a/src/reportWebVitals.ts
+++ b/src/reportWebVitals.ts
@ -1,15 +1,15 @@
-import { ReportHandler } from 'web-vitals';
+import { ReportHandler } from 'web-vitals'

 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
+      getCLS(onPerfEntry)
+      getFID(onPerfEntry)
+      getFCP(onPerfEntry)
+      getLCP(onPerfEntry)
+      getTTFB(onPerfEntry)
+    })
  }
-};
+}

-export default reportWebVitals;
+export default reportWebVitals
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@ -0,0 +1,7 @@
+import React from 'react'
+
+const RouterView = () => {
+  return <>Router</>
+}
+
+export default RouterView
--- a/src/routes/routes.ts
+++ b/src/routes/routes.ts
@ -0,0 +1 @@
+export const routes: Array<any> = []
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom'
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,11 +1,7 @@
 {
  "compilerOptions": {
    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
@ -20,7 +16,5 @@
    "noEmit": true,
    "jsx": "react-jsx"
  },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }