forked from cubetiq/cubetiq-react-app
Task: Add prettier, craco and add default pages and functions
This commit is contained in:
parent
d5451f51b9
commit
4c0fe442cd
4
.prettierignore
Normal file
4
.prettierignore
Normal file
@ -0,0 +1,4 @@
|
||||
node_modules
|
||||
build
|
||||
dist
|
||||
coverage
|
6
.prettierrc.json
Normal file
6
.prettierrc.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 2,
|
||||
"semi": false,
|
||||
"singleQuote": true
|
||||
}
|
4
.vscode/settings.json
vendored
Normal file
4
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"editor.formatOnSave": true
|
||||
}
|
@ -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
9
craco.config.js
Normal file
@ -0,0 +1,9 @@
|
||||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
}
|
41
package.json
41
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"
|
||||
}
|
||||
}
|
||||
|
@ -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
10
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>
|
||||
);
|
||||
}
|
@ -1,3 +1,3 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
12
src/app/App.tsx
Normal file
12
src/app/App.tsx
Normal 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
|
@ -5,4 +5,4 @@ body {
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
@ -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
4
src/pages/About/index.less
Normal file
@ -0,0 +1,4 @@
|
||||
.about-title {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
10
src/pages/About/index.tsx
Normal file
10
src/pages/About/index.tsx
Normal 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
5
src/pages/Home/index.less
Normal file
@ -0,0 +1,5 @@
|
||||
.home-title {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
}
|
10
src/pages/Home/index.tsx
Normal file
10
src/pages/Home/index.tsx
Normal 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>
|
||||
)
|
||||
}
|
@ -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
7
src/routes/index.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
import React from 'react'
|
||||
|
||||
const RouterView = () => {
|
||||
return <>Router</>
|
||||
}
|
||||
|
||||
export default RouterView
|
1
src/routes/routes.ts
Normal file
1
src/routes/routes.ts
Normal file
@ -0,0 +1 @@
|
||||
export const routes: Array<any> = []
|
@ -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'
|
||||
|
@ -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"]
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user