Skip to content

Commit 5b4480f

Browse files
mohvnmohvn
authored
[FEAT]: Setup Front-End with React + Vite (#8)
## Contexto Esse Pull Request faz a configuração inicial do Front-End do site em React ([Vite](https://vite.dev/)). Muitas issues/tasks são necessárias já ter uma estrutura de frontend inicial criada para que a task consiga a se desenvolver. Esse pull request apenas faz a criação do projeto e algumas configurações úteis como: - Configuração de linter (ESLint/Prettier); - Criação de um workflow para verificar se o commit continua seguindo o padrão de estlização proposto. --- A ideia é apenas termos o esqueleto do site funcional já configurado e outras questões como tags de título, estliização e etc serem resolvidas em outras PRs, como mostram as issues #7 #3 como exemplo ## Anexos: Estrutura: <img width="468" height="692" alt="image" src="https://github.com/user-attachments/assets/27146f36-a659-445e-b06b-c4a5c8180605" />
2 parents cd0b132 + 18211d8 commit 5b4480f

File tree

17 files changed

+3729
-0
lines changed

17 files changed

+3729
-0
lines changed

‎.github/workflows/lint.yml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name: Lint Check
2+
3+
on: [push, pull_request]
4+
5+
jobs:
6+
lint:
7+
runs-on: ubuntu-latest
8+
9+
steps:
10+
- name: Checkout code
11+
uses: actions/checkout@v4
12+
13+
- name: Setup Node.js
14+
uses: actions/setup-node@v4
15+
with:
16+
node-version: "18"
17+
cache: "npm"
18+
cache-dependency-path: frontend/package-lock.json
19+
20+
- name: Install dependencies
21+
run: |
22+
cd frontend
23+
npm ci
24+
25+
- name: Run lint
26+
run: |
27+
cd frontend
28+
npm run lint
29+
30+
- name: Check formatting
31+
run: |
32+
cd frontend
33+
npm run format:check

‎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/.prettierignore‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Dependencies
2+
node_modules/
3+
4+
# Build outputs
5+
dist/
6+
build/
7+
8+
# Environment files
9+
.env
10+
.env.local
11+
.env.production
12+
.env.test
13+
14+
# Logs
15+
*.log
16+
npm-debug.log*
17+
yarn-debug.log*
18+
yarn-error.log*
19+
20+
# Runtime data
21+
pids
22+
*.pid
23+
*.seed
24+
*.pid.lock
25+
26+
# Coverage directory used by tools like istanbul
27+
coverage/
28+
29+
# IDE
30+
.vscode/
31+
.idea/
32+
33+
# OS
34+
.DS_Store
35+
Thumbs.db
36+
37+
# Package files
38+
package-lock.json
39+
yarn.lock
40+
pnpm-lock.yaml
41+
42+
# Temporary files
43+
*.tmp
44+
*.swp
45+
*.bak

‎frontend/.prettierrc‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"semi": true,
3+
"singleQuote": true,
4+
"tabWidth": 2,
5+
"useTabs": false,
6+
"trailingComma": "es5",
7+
"printWidth": 80,
8+
"bracketSpacing": true,
9+
"bracketSameLine": false,
10+
"arrowParens": "avoid",
11+
"endOfLine": "lf",
12+
"plugins": ["@trivago/prettier-plugin-sort-imports"],
13+
"importOrder": ["^react", "^@?\\w", "^[./]"],
14+
"importOrderSeparation": true,
15+
"importOrderSortSpecifiers": true
16+
}

‎frontend/README.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/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+
```js
15+
export default tseslint.config([
16+
globalIgnores(['dist']),
17+
{
18+
files: ['**/*.{ts,tsx}'],
19+
extends: [
20+
// Other configs...
21+
22+
// Remove tseslint.configs.recommended and replace with this
23+
...tseslint.configs.recommendedTypeChecked,
24+
// Alternatively, use this for stricter rules
25+
...tseslint.configs.strictTypeChecked,
26+
// Optionally, add this for stylistic rules
27+
...tseslint.configs.stylisticTypeChecked,
28+
29+
// Other configs...
30+
],
31+
languageOptions: {
32+
parserOptions: {
33+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
34+
tsconfigRootDir: import.meta.dirname,
35+
},
36+
// other options...
37+
},
38+
},
39+
]);
40+
```
41+
42+
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
43+
44+
```js
45+
// eslint.config.js
46+
import reactDom from 'eslint-plugin-react-dom';
47+
import reactX from 'eslint-plugin-react-x';
48+
49+
export default tseslint.config([
50+
globalIgnores(['dist']),
51+
{
52+
files: ['**/*.{ts,tsx}'],
53+
extends: [
54+
// Other configs...
55+
// Enable lint rules for React
56+
reactX.configs['recommended-typescript'],
57+
// Enable lint rules for React DOM
58+
reactDom.configs.recommended,
59+
],
60+
languageOptions: {
61+
parserOptions: {
62+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
63+
tsconfigRootDir: import.meta.dirname,
64+
},
65+
// other options...
66+
},
67+
},
68+
]);
69+
```

‎frontend/eslint.config.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import js from '@eslint/js';
2+
import prettierConfig from 'eslint-config-prettier';
3+
import prettier from 'eslint-plugin-prettier';
4+
import reactHooks from 'eslint-plugin-react-hooks';
5+
import reactRefresh from 'eslint-plugin-react-refresh';
6+
import { globalIgnores } from 'eslint/config';
7+
import globals from 'globals';
8+
import tseslint from 'typescript-eslint';
9+
10+
export default tseslint.config([
11+
globalIgnores(['dist']),
12+
{
13+
files: ['**/*.{ts,tsx}', '**/*.{js,jsx}'],
14+
extends: [
15+
js.configs.recommended,
16+
tseslint.configs.recommended,
17+
reactHooks.configs['recommended-latest'],
18+
reactRefresh.configs.vite,
19+
prettierConfig,
20+
],
21+
plugins: {
22+
prettier,
23+
},
24+
languageOptions: {
25+
ecmaVersion: 2020,
26+
globals: globals.browser,
27+
},
28+
rules: {
29+
'prettier/prettier': 'error',
30+
},
31+
},
32+
]);

‎frontend/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Py013</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)