huyheng.louv/cubetiq-react-app
1
0
Fork 0
forked from cubetiq/cubetiq-react-app
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sambo Chea 2021-06-12 14:51:22 +07:00
parent d5451f51b9
commit 4c0fe442cd
21 changed files with 140 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.prettierignore Normal file
View File

@ -0,0 +1,4 @@
node_modules
build
dist
coverage

6
.prettierrc.json Normal file
View File

@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true
}

4
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,4 @@
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}

5
README.md
View File

@ -1,10 +1,13 @@
# CUBETIQ React App # CUBETIQ React App
CUBETIQ React App Template for general use in react application. CUBETIQ React App Template for general use in react application.
# Libraries # Libraries
- Create React App: 4.0.3 - Create React App: 4.0.3
- React: 17.0.0 - React: 17.0.0
- TypeScript: 4.1.2 - TypeScript: 4.1.2
# Contributors # Contributors
- Sambo Chea <sombochea@cubetiqs.com>
- Sambo Chea <sombochea@cubetiqs.com>

9
craco.config.js Normal file
View File

@ -0,0 +1,9 @@
const path = require('path')
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
}

41
package.json
View File

@ -1,27 +1,28 @@
{ {
"name": "cubetiq-react-app", "name": "cubetiq-react-app",
"version": "0.1.0", "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, "private": true,
"dependencies": { "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": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1" "web-vitals": "^1.0.1"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "craco start",
"build": "react-scripts build", "build": "craco build",
"test": "react-scripts test", "test": "craco test",
"eject": "react-scripts eject" "eject": "react-scripts eject",
"format": "prettier --write ."
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
@ -40,5 +41,19 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari 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"
} }
} }

32
public/index.html
View File

@ -1,20 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="%REACT_APP_DESCRIPTION%" />
<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>
<meta charset="utf-8" /> <noscript>You need to enable JavaScript to run this app.</noscript>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <div id="root"></div>
<meta name="viewport" content="width=device-width, initial-scale=1" /> </body>
<meta name="theme-color" content="#000000" /> </html>
<meta name="description" content="%REACT_APP_DESCRIPTION%" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>%REACT_APP_NAME%</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

10
src/App.tsx
View File

@ -1,10 +0,0 @@
import React from 'react';
import './App.css';
export default function App() {
return (
<div className="App">
<h1>CUBETIQ</h1>
</div>
);
}

2
src/App.css → src/app/App.css
View File

@ -1,3 +1,3 @@
.App { .App {
text-align: center; text-align: center;
} }

12
src/app/App.tsx Normal file
View File

@ -0,0 +1,12 @@
import React from 'react'
import './App.css'
const App = () => {
return (
<div className="App">
<h1>CUBETIQ</h1>
</div>
)
}
export default App

2
src/index.css
View File

@ -5,4 +5,4 @@ body {
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }

14
src/index.tsx
View File

@ -1,17 +1,17 @@
import React from 'react'; import React from 'react'
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom'
import './index.css'; import './index.css'
import App from './App'; import App from './app/App'
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals'
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, </React.StrictMode>,
document.getElementById('root') document.getElementById('root')
); )
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log)) // to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals(); reportWebVitals()

4
src/pages/About/index.less Normal file
View File

@ -0,0 +1,4 @@
.about-title {
text-align: center;
font-weight: bold;
}

10
src/pages/About/index.tsx Normal file
View File

@ -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>
)
}

5
src/pages/Home/index.less Normal file
View File

@ -0,0 +1,5 @@
.home-title {
text-align: center;
font-weight: bold;
font-size: large;
}

10
src/pages/Home/index.tsx Normal file
View File

@ -0,0 +1,10 @@
import React from 'react'
import './index.less'
export default function Home() {
return (
<div className="home-title">
<h1>Home</h1>
</div>
)
}

18
src/reportWebVitals.ts
View File

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

7
src/routes/index.tsx Normal file
View File

@ -0,0 +1,7 @@
import React from 'react'
const RouterView = () => {
return <>Router</>
}
export default RouterView

1
src/routes/routes.ts Normal file
View File

@ -0,0 +1 @@
export const routes: Array<any> = []

2
src/setupTests.ts
View File

@ -2,4 +2,4 @@
// allows you to do things like: // allows you to do things like:
// expect(element).toHaveTextContent(/react/i) // expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom // learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom'; import '@testing-library/jest-dom'

10
tsconfig.json
View File

@ -1,11 +1,7 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es5",
"lib": [ "lib": ["dom", "dom.iterable", "esnext"],
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,
@ -20,7 +16,5 @@
"noEmit": true, "noEmit": true,
"jsx": "react-jsx" "jsx": "react-jsx"
}, },
"include": [ "include": ["src"]
"src"
]
} }