minhtrannhat/neo-todo-api
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat(Frontend): added ThemeProvider

Browse Source 
- ThemeProvider will change the default Material UI looks. CSSBaseline
  in ThemeProvider will reset and normalize the browser's styling,
  making sure our app looks the same in any browser.
- ThemeProvider will be used as the parent of any styled components.
This commit is contained in:
minhtrannhat 2023-07-21 17:57:13 -04:00
parent c36993f974
commit 3636affd18
Signed by: minhtrannhat
GPG Key ID: E13CFA85C53F8062
10 changed files with 1237 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/README.md
View File

@ -1,7 +1,30 @@
# Neo Todo App Frontend # Neo Todo App Frontend
## Dependencies ## Dev Log
### Dev Dependencies ### Styling the frontend
- `prettier`: formatter - Used the [MUI](mui.com) React component library using Material Design by Google.
- Font used is `Roboto`. Font is imported to `src/App.tsx`.
#### Use ThemeProvider
To override the default MUI looks, we create a ThemeProvider at `src/ThemeProvider.tsx`.
#### React Hook useMemo
useMemo is a React Hook that lets you cache the result of a calculation between re-renders. Made for running expensive synchronous operations less often.
#### MUI (Material UI)
##### Palette Mode
Change default component colors to suit one's needs.
#### CSSBaseline
Reset the CSS injected into `<head>`. A collection of HTML element and attribute style-normalizations, you can expect all of the elements to look the same across all browsers.
#### useMediaQuery
This React hook listens for matches to a CSS media query. It allows the rendering of components based on whether the query matches or not.

1132
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

35
frontend/package.json
View File

@ -3,6 +3,12 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^5.0.5",
"@mui/icons-material": "^5.14.1",
"@mui/lab": "^5.0.0-alpha.137",
"@mui/material": "^5.14.1",
"@testing-library/jest-dom": "^5.17.0", "@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
@ -20,13 +26,25 @@
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject",
"analyze": "npm run build && source-map-explorer \"build/static/js/*.js\"",
"format": "eslint --fix \"src/**/*.{ts,tsx}\" && prettier --parser typescript --write \"src/**/*.{ts,tsx}\"",
"lint": "eslint \"src/**/*.{ts,tsx}\" && prettier --parser typescript --list-different \"src/**/*.{ts,tsx}\""
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
"react-app", "react-app",
"react-app/jest" "react-app/jest",
] "plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"prettier"
],
"settings": {
"import/resolver": {
"typescript": {}
}
}
}, },
"browserslist": { "browserslist": {
"production": [ "production": [
@ -41,9 +59,16 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"prettier": "^3.0.0" "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"eslint": "^8.45.0",
"eslint-config-prettier": "^8.8.0",
"eslint-import-resolver-typescript": "^3.5.5",
"eslint-plugin-import": "^2.27.5",
"prettier": "^3.0.0",
"source-map-explorer": "^2.5.3"
}, },
"prettier": { "prettier": {
"trailingComma": "all" "trailingComma": "all"
} },
"proxy": "http://localhost:5050"
} }

8
frontend/src/App.test.tsx
View File

@ -1,8 +1,8 @@
import React from 'react'; import React from "react";
import { render, screen } from '@testing-library/react'; import { render, screen } from "@testing-library/react";
import App from './App'; import App from "./App";
test('renders learn react link', () => { test("renders learn react link", () => {
render(<App />); render(<App />);
const linkElement = screen.getByText(/learn react/i); const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument(); expect(linkElement).toBeInTheDocument();

10
frontend/src/App.tsx
View File

@ -1,6 +1,10 @@
import React from 'react'; import React from "react";
import logo from './logo.svg'; import logo from "./logo.svg";
import './App.css'; import "./App.css";
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
function App() { function App() {
return ( return (

29
frontend/src/ThemeProvider.tsx Normal file
View File

@ -0,0 +1,29 @@
import { useMemo } from "react";
import { PaletteMode } from "@mui/material";
import CssBaseline from "@mui/material/CssBaseline";
import useMediaQuery from "@mui/material/useMediaQuery";
import {
createTheme,
ThemeProvider as MuiThemeProvider,
} from "@mui/material/styles";
interface IProps {
children: React.ReactNode;
}
const ThemeProvider = ({ children }: IProps) => {
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
const theme = useMemo(() => {
const palette = {
mode: (prefersDarkMode ? "dark" : "light") as PaletteMode,
};
return createTheme({ palette });
}, [prefersDarkMode]);
return (
<MuiThemeProvider theme={theme}>
<CssBaseline enableColorScheme />
{children}
</MuiThemeProvider>
);
};
export default ThemeProvider;

14
frontend/src/index.tsx
View File

@ -1,16 +1,16 @@
import React from 'react'; import React from "react";
import ReactDOM from 'react-dom/client'; import ReactDOM from "react-dom/client";
import './index.css'; import "./index.css";
import App from './App'; import App from "./App";
import reportWebVitals from './reportWebVitals'; import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement document.getElementById("root") as HTMLElement,
); );
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode> </React.StrictMode>,
); );
// 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

4
frontend/src/reportWebVitals.ts
View File

@ -1,8 +1,8 @@
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);

2
frontend/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";

11
frontend/tsconfig.json
View File

@ -1,11 +1,8 @@
{ {
"compilerOptions": { "compilerOptions": {
"baseUrl": "./",
"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 +17,5 @@
"noEmit": true, "noEmit": true,
"jsx": "react-jsx" "jsx": "react-jsx"
}, },
"include": [ "include": ["src"]
"src"
]
} }