cubetiq/ cubetiq-react-app
Template
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

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

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 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>
- 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",
"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"
}
}

32
public/index.html
View File

@ -1,20 +1,18 @@
<!DOCTYPE html>
<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>
<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>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
<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 {
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;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}

14
src/index.tsx
View File

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

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) => {
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

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:
// expect(element).toHaveTextContent(/react/i)
// 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": {
"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"]
}