Skip to content

Commit 9607e84

Browse files
committed
Add admin frontend
1 parent 7e034da commit 9607e84

25 files changed

+6050
-0
lines changed

.pre-commit-config.yaml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ repos:
88
rev: v5.0.0
99
hooks:
1010
- id: check-json
11+
exclude: "(.*)/tsconfig.(.*)"
1112
- id: check-toml
1213
- id: check-xml
1314
- id: check-yaml
@@ -19,6 +20,7 @@ repos:
1920
- id: end-of-file-fixer
2021
- id: mixed-line-ending
2122
- id: pretty-format-json
23+
exclude: "(.*)/tsconfig.(.*)"
2224
args:
2325
- --autofix
2426
- id: trailing-whitespace

frontend/.env.production

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
VITE_MICROSERVICE_NAME=NotiCo
2+
VITE_MICROSERVICE_DOMAIN=

frontend/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

frontend/README.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# React + TypeScript + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+
10+
## Expanding the ESLint configuration
11+
12+
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13+
14+
- Configure the top-level `parserOptions` property like this:
15+
16+
```js
17+
export default tseslint.config({
18+
languageOptions: {
19+
// other options...
20+
parserOptions: {
21+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
22+
tsconfigRootDir: import.meta.dirname,
23+
},
24+
},
25+
})
26+
```
27+
28+
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29+
- Optionally add `...tseslint.configs.stylisticTypeChecked`
30+
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31+
32+
```js
33+
// eslint.config.js
34+
import react from 'eslint-plugin-react'
35+
36+
export default tseslint.config({
37+
// Set the react version
38+
settings: { react: { version: '18.3' } },
39+
plugins: {
40+
// Add the react plugin
41+
react,
42+
},
43+
rules: {
44+
// other rules...
45+
// Enable its recommended rules
46+
...react.configs.recommended.rules,
47+
...react.configs['jsx-runtime'].rules,
48+
},
49+
})
50+
```

frontend/eslint.config.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import cspellPlugin from '@cspell/eslint-plugin'
2+
import js from '@eslint/js'
3+
import react from 'eslint-plugin-react'
4+
import reactHooks from 'eslint-plugin-react-hooks'
5+
import reactRefresh from 'eslint-plugin-react-refresh'
6+
import globals from 'globals'
7+
import tseslint from 'typescript-eslint'
8+
9+
export default tseslint.config(
10+
{ ignores: ['dist'] },
11+
{
12+
extends: [
13+
js.configs.recommended,
14+
react.configs.flat.recommended,
15+
...tseslint.configs.recommended,
16+
],
17+
files: ['**/*.{ts,tsx}'],
18+
languageOptions: {
19+
ecmaVersion: 2020,
20+
globals: globals.browser,
21+
parser: tseslint.parser,
22+
},
23+
plugins: {
24+
'react-hooks': reactHooks,
25+
'react-refresh': reactRefresh,
26+
'@cspell': cspellPlugin,
27+
},
28+
settings: {
29+
react: { version: 'detect' },
30+
},
31+
rules: {
32+
...reactHooks.configs.recommended.rules,
33+
'@cspell/spellchecker': ['error', { cspell: { words: ["notico", "RJSF"] } }],
34+
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
35+
'react/react-in-jsx-scope': 'error',
36+
'react/prop-types': 'error',
37+
'sort-imports': ['error', { ignoreDeclarationSort: true }],
38+
},
39+
},
40+
)

frontend/index.html

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<!doctype html>
2+
<html lang="ko-kr">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width,
7+
height=device-height,
8+
target-densitydpi=device-dpi,
9+
initial-scale=1.0,
10+
minimum-scale=1.0,
11+
maximum-scale=1.0,
12+
user-scalable=0,
13+
user-scalable=no,
14+
shrink-to-fit=no" />
15+
<style>
16+
/* Reset CSS from https://piccalil.li/blog/a-more-modern-css-reset/ */
17+
/* Box sizing rules */
18+
*,
19+
*::before,
20+
*::after {
21+
box-sizing: border-box;
22+
}
23+
24+
/* Prevent font size inflation */
25+
html {
26+
-moz-text-size-adjust: none;
27+
-webkit-text-size-adjust: none;
28+
text-size-adjust: none;
29+
}
30+
31+
/* Remove default margin in favour of better control in authored CSS */
32+
body,
33+
h1,
34+
h2,
35+
h3,
36+
h4,
37+
p,
38+
figure,
39+
blockquote,
40+
dl,
41+
dd {
42+
margin-block-end: 0;
43+
}
44+
45+
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
46+
ul[role='list'],
47+
ol[role='list'] {
48+
list-style: none;
49+
}
50+
51+
/* Set core body defaults */
52+
body {
53+
min-height: 100vh;
54+
line-height: 1.5;
55+
}
56+
57+
/* Set shorter line heights on headings and interactive elements */
58+
h1,
59+
h2,
60+
h3,
61+
h4,
62+
button,
63+
input,
64+
label {
65+
line-height: 1.1;
66+
}
67+
68+
/* Balance text wrapping on headings */
69+
h1,
70+
h2,
71+
h3,
72+
h4 {
73+
text-wrap: balance;
74+
}
75+
76+
/* A elements that don't have a class get default styles */
77+
a:not([class]) {
78+
text-decoration-skip-ink: auto;
79+
color: currentColor;
80+
}
81+
82+
/* Make images easier to work with */
83+
img,
84+
picture {
85+
max-width: 100%;
86+
display: block;
87+
}
88+
89+
/* Inherit fonts for inputs and buttons */
90+
input,
91+
button,
92+
textarea,
93+
select {
94+
font-family: inherit;
95+
font-size: inherit;
96+
}
97+
98+
/* Make sure textareas without a rows attribute are not tiny */
99+
textarea:not([rows]) {
100+
min-height: 10em;
101+
}
102+
103+
/* Anything that has been anchored to should have extra scroll margin */
104+
:target {
105+
scroll-margin-block: 5ex;
106+
}
107+
108+
body,
109+
html,
110+
main,
111+
#root {
112+
overscroll-behavior: none;
113+
114+
-webkit-touch-callout: none;
115+
/* iOS Safari */
116+
-webkit-user-select: none;
117+
/* Safari */
118+
-khtml-user-select: none;
119+
/* Konqueror HTML */
120+
-moz-user-select: none;
121+
/* Old versions of Firefox */
122+
-ms-user-select: none;
123+
/* Internet Explorer/Edge */
124+
user-select: none;
125+
/* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
126+
127+
min-height: -webkit-fill-available;
128+
min-height: 100vh;
129+
max-height: -webkit-fill-available;
130+
max-height: 100vh;
131+
height: 100vh;
132+
133+
max-width: 100vw;
134+
overflow-x: hidden;
135+
136+
margin: 0;
137+
138+
white-space: nowrap;
139+
}
140+
141+
noscript,
142+
.fullScreenAlert {
143+
position: fixed;
144+
top: 0;
145+
left: 0;
146+
width: 100vw;
147+
height: 100vh;
148+
149+
display: flex;
150+
flex-direction: column;
151+
justify-content: center;
152+
align-items: center;
153+
154+
color: var(--color);
155+
font-size: 1.5rem;
156+
font-weight: lighter;
157+
text-align: center;
158+
159+
z-index: 7500;
160+
}
161+
</style>
162+
<title>NotiCo Admin</title>
163+
<meta name="description" content="NotiCo Admin" />
164+
</head>
165+
166+
<body>
167+
<noscript>You need to enable JavaScript to run NotiCo Admin.</noscript>
168+
<div id="root"></div>
169+
<script type="module" src="/src/main.tsx"></script>
170+
</body>
171+
172+
</html>

frontend/package.json

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"dependencies": {
3+
"@emotion/css": "^11.13.5",
4+
"@emotion/react": "^11.13.5",
5+
"@emotion/styled": "^11.13.5",
6+
"@fontsource/roboto": "^5.1.0",
7+
"@mdi/js": "^7.4.47",
8+
"@mdi/react": "^1.6.1",
9+
"@mui/icons-material": "^6.1.10",
10+
"@mui/material": "^6.1.10",
11+
"@rjsf/core": "^5.23.1",
12+
"@rjsf/mui": "^5.23.1",
13+
"@rjsf/utils": "^5.23.1",
14+
"@rjsf/validator-ajv8": "^5.23.1",
15+
"@suspensive/react": "^2.18.7",
16+
"@tanstack/react-query": "^5.62.2",
17+
"@tanstack/react-query-devtools": "^5.62.2",
18+
"notistack": "^3.0.1",
19+
"react": "^18.3.1",
20+
"react-dom": "^18.3.1",
21+
"react-error-boundary": "^4.1.2",
22+
"react-router-dom": "^7.0.2",
23+
"remeda": "^2.17.4"
24+
},
25+
"devDependencies": {
26+
"@cspell/eslint-plugin": "^8.16.1",
27+
"@eslint/js": "^9.15.0",
28+
"@types/react": "^18.3.12",
29+
"@types/react-dom": "^18.3.1",
30+
"@vitejs/plugin-react-swc": "^3.5.0",
31+
"cspell": "^8.16.1",
32+
"eslint": "^9.15.0",
33+
"eslint-plugin-react": "^7.37.2",
34+
"eslint-plugin-react-hooks": "^5.0.0",
35+
"eslint-plugin-react-refresh": "^0.4.14",
36+
"globals": "^15.12.0",
37+
"typescript": "~5.6.2",
38+
"typescript-eslint": "^8.15.0",
39+
"vite": "^6.0.1",
40+
"vite-plugin-singlefile": "^2.0.3"
41+
},
42+
"name": "frontend",
43+
"private": true,
44+
"scripts": {
45+
"build": "tsc -b && vite build",
46+
"dev": "vite",
47+
"lint": "eslint .",
48+
"preview": "vite preview"
49+
},
50+
"type": "module",
51+
"version": "0.0.0"
52+
}

0 commit comments

Comments
 (0)