From 4c0fe442cd268959db8385fe5e1ccd9ff48f6488 Mon Sep 17 00:00:00 2001 From: Sambo Chea Date: Sat, 12 Jun 2021 14:51:22 +0700 Subject: [PATCH] Task: Add prettier, craco and add default pages and functions --- .prettierignore | 4 ++++ .prettierrc.json | 6 ++++++ .vscode/settings.json | 4 ++++ README.md | 5 ++++- craco.config.js | 9 +++++++++ package.json | 41 ++++++++++++++++++++++++++------------ public/index.html | 32 ++++++++++++++--------------- src/App.tsx | 10 ---------- src/{ => app}/App.css | 2 +- src/app/App.tsx | 12 +++++++++++ src/index.css | 2 +- src/index.tsx | 14 ++++++------- src/pages/About/index.less | 4 ++++ src/pages/About/index.tsx | 10 ++++++++++ src/pages/Home/index.less | 5 +++++ src/pages/Home/index.tsx | 10 ++++++++++ src/reportWebVitals.ts | 18 ++++++++--------- src/routes/index.tsx | 7 +++++++ src/routes/routes.ts | 1 + src/setupTests.ts | 2 +- tsconfig.json | 10 ++-------- 21 files changed, 140 insertions(+), 68 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc.json create mode 100644 .vscode/settings.json create mode 100644 craco.config.js delete mode 100644 src/App.tsx rename src/{ => app}/App.css (93%) create mode 100644 src/app/App.tsx create mode 100644 src/pages/About/index.less create mode 100644 src/pages/About/index.tsx create mode 100644 src/pages/Home/index.less create mode 100644 src/pages/Home/index.tsx create mode 100644 src/routes/index.tsx create mode 100644 src/routes/routes.ts diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..0722ca6 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +node_modules +build +dist +coverage \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..fa51da2 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 2, + "semi": false, + "singleQuote": true +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..9bf4d12 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true +} diff --git a/README.md b/README.md index ae5e601..9a95865 100644 --- 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 \ No newline at end of file + +- Sambo Chea diff --git a/craco.config.js b/craco.config.js new file mode 100644 index 0000000..ff7940b --- /dev/null +++ b/craco.config.js @@ -0,0 +1,9 @@ +const path = require('path') + +module.exports = { + resolve: { + alias: { + '@': path.resolve(__dirname, './src'), + }, + }, +} diff --git a/package.json b/package.json index d9aeb9d..9d37452 100644 --- 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" } } diff --git a/public/index.html b/public/index.html index 2c97be6..f4b1de3 100644 --- a/public/index.html +++ b/public/index.html @@ -1,20 +1,18 @@ + + + + + + + + + %REACT_APP_NAME% + - - - - - - - - - %REACT_APP_NAME% - - - - -
- - - \ No newline at end of file + + +
+ + diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index 1380edd..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import './App.css'; - -export default function App() { - return ( -
-

CUBETIQ

-
- ); -} \ No newline at end of file diff --git a/src/App.css b/src/app/App.css similarity index 93% rename from src/App.css rename to src/app/App.css index e994711..4931613 100644 --- a/src/App.css +++ b/src/app/App.css @@ -1,3 +1,3 @@ .App { text-align: center; -} \ No newline at end of file +} diff --git a/src/app/App.tsx b/src/app/App.tsx new file mode 100644 index 0000000..93193e2 --- /dev/null +++ b/src/app/App.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import './App.css' + +const App = () => { + return ( +
+

CUBETIQ

+
+ ) +} + +export default App diff --git a/src/index.css b/src/index.css index 826a946..1532074 100644 --- a/src/index.css +++ b/src/index.css @@ -5,4 +5,4 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -} \ No newline at end of file +} diff --git a/src/index.tsx b/src/index.tsx index ef2edf8..fd37fd8 100644 --- 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( , 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() diff --git a/src/pages/About/index.less b/src/pages/About/index.less new file mode 100644 index 0000000..4f1259b --- /dev/null +++ b/src/pages/About/index.less @@ -0,0 +1,4 @@ +.about-title { + text-align: center; + font-weight: bold; +} diff --git a/src/pages/About/index.tsx b/src/pages/About/index.tsx new file mode 100644 index 0000000..616ce5b --- /dev/null +++ b/src/pages/About/index.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import './index.less' + +export default function About() { + return ( +
+

About Us

+
+ ) +} diff --git a/src/pages/Home/index.less b/src/pages/Home/index.less new file mode 100644 index 0000000..7610913 --- /dev/null +++ b/src/pages/Home/index.less @@ -0,0 +1,5 @@ +.home-title { + text-align: center; + font-weight: bold; + font-size: large; +} diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx new file mode 100644 index 0000000..b3488b1 --- /dev/null +++ b/src/pages/Home/index.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import './index.less' + +export default function Home() { + return ( +
+

Home

+
+ ) +} diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts index 49a2a16..57a24a2 100644 --- 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 diff --git a/src/routes/index.tsx b/src/routes/index.tsx new file mode 100644 index 0000000..7f94bc5 --- /dev/null +++ b/src/routes/index.tsx @@ -0,0 +1,7 @@ +import React from 'react' + +const RouterView = () => { + return <>Router +} + +export default RouterView diff --git a/src/routes/routes.ts b/src/routes/routes.ts new file mode 100644 index 0000000..b06767f --- /dev/null +++ b/src/routes/routes.ts @@ -0,0 +1 @@ +export const routes: Array = [] diff --git a/src/setupTests.ts b/src/setupTests.ts index 8f2609b..52aaef1 100644 --- 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' diff --git a/tsconfig.json b/tsconfig.json index a273b0c..9d379a3 100644 --- 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"] }