Skip to content

Commit 5cdb541

Browse files
ederssouzaederssouza
authored
Migrate CRA to Vite (#2)
* chore: add config * feat: add jest config * feat: add vite * feat: add vite * feat: add vite * feat: implement component * chore: add alias path * feat: import useRoutePaths * chore: run lint fix * chore: export hooks * feat: implement hook useRoutePaths * chore: rename hook * chore: run lint fix * feat: create paths module * feat: export modules * feat: change functions signature * feat: export paths * feat: implement error boundary * chore: rename component * chore: rename component * feat: export component * chore: run lint fix * feat: change functions signature * feat: export modules * destructuring params in the function body * chore: remove dead code * feat: add dependabot config * feat: add ci config * feat: add jest config * feat: rewrite vscode config * feat: add public dir * feat: refactor module * chore: rename module * fix: unit tests * chore: remove dead code * chore: remove dead code * chore: remove dead code * feat: add typecheck and coverage test in the lint-staged * feat: update doc * chore: remove dead code * chore: rename functions * chore: update comment * feat: update doc
1 parent ae38c61 commit 5cdb541

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+5323
-10963
lines changed

‎.eslintrc.json‎

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,43 +2,35 @@
22
"env": {
33
"browser": true,
44
"es2021": true,
5-
"jest": true
5+
"jest": true,
6+
"node": true
7+
},
8+
"settings": {
9+
"react": {
10+
"version": "detect"
11+
}
612
},
713
"extends": [
14+
"eslint:recommended",
815
"plugin:react/recommended",
9-
"standard"
16+
"plugin:@typescript-eslint/recommended",
17+
"plugin:prettier/recommended"
18+
],
19+
"overrides": [
1020
],
1121
"parser": "@typescript-eslint/parser",
1222
"parserOptions": {
13-
"ecmaFeatures": {
14-
"jsx": true
15-
},
16-
"ecmaVersion": 12,
23+
"ecmaVersion": "latest",
1724
"sourceType": "module"
1825
},
1926
"plugins": [
2027
"react",
21-
"@typescript-eslint",
22-
"eslint-plugin-import-helpers"
28+
"react-hooks",
29+
"@typescript-eslint"
2330
],
2431
"rules": {
25-
"react/react-in-jsx-scope": "off",
26-
"react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
27-
"no-use-before-define": "off",
28-
"@typescript-eslint/no-use-before-define": ["error"],
29-
"import-helpers/order-imports": [
30-
"warn",
31-
{
32-
"newlinesBetween": "always",
33-
"groups": [
34-
["/^react/", "module"],
35-
["parent", "sibling", "index"]
36-
],
37-
"alphabetize": {
38-
"order": "asc",
39-
"ignoreCase": true
40-
}
41-
}
42-
]
32+
"react-hooks/rules-of-hooks": "error",
33+
"react-hooks/exhaustive-deps": "warn",
34+
"react/react-in-jsx-scope": "off"
4335
}
4436
}

‎.github/dependabot.yml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
version: 2
2+
updates:
3+
- package-ecosystem: npm
4+
directory: "/"
5+
schedule:
6+
interval: monthly
7+
open-pull-requests-limit: 15

‎.github/workflows/ci.yml‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
name: ci
2+
on: [pull_request]
3+
4+
jobs:
5+
build:
6+
runs-on: ubuntu-latest
7+
steps:
8+
- name: Checkout Repository
9+
uses: actions/checkout@v2
10+
11+
- name: Setup Node
12+
uses: actions/setup-node@v1
13+
with:
14+
node-version: 18.x
15+
16+
- uses: actions/cache@v2
17+
id: yarn-cache
18+
with:
19+
path: |
20+
~/cache
21+
!~/cache/exclude
22+
**/node_modules
23+
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
24+
restore-keys: |
25+
${{ runner.os }}-yarn-
26+
27+
- name: Install dependencies
28+
run: yarn install
29+
30+
- name: Linting
31+
run: yarn lint
32+
33+
- name: Test
34+
run: yarn coverage-test
35+
36+
- name: Build
37+
run: yarn build

‎.jest/setup.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import '@testing-library/jest-dom'

‎.prettierignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
!.jest
2+
/dist
3+
/node_modules
4+
/public
5+
/generators

‎.prettierrc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"trailingComma": "none",
3+
"semi": false,
4+
"singleQuote": true
5+
}

‎.vscode/settings.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"editor.formatOnSave": false,
3+
"editor.codeActionsOnSave": {
4+
"source.fixAll.eslint": true
5+
}
6+
}

‎README.md‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
- [Route types](#route-types)
3535
- [Public route](#public-route)
3636
- [Private route](#private-route)
37+
- [Hybrid route](#hybrid-route)
3738
- [Control visibility of components](#control-visibility-of-components)
3839
- [Contributing](#contributing)
3940
- [Versioning](#versioning)
@@ -147,34 +148,34 @@ The route components are based on `<Route />` component of [react-router-dom](ht
147148

148149
The route can only be accessed if a user is not authenticated. If accessed after authentication, the user will be redirected `/` route.
149150

150-
```js
151-
import { Switch } from 'react-router-dom'
151+
```tsx
152+
import { Routes } from 'react-router-dom'
152153
import { PublicRoute } from 'src/router/PublicRoute'
153154

154155
const SampleComponent = () => <div>Sample component</div>
155156

156157
export const Routes = () => (
157-
<Switch>
158+
<Routes>
158159
<PublicRoute
159160
path="/login"
160161
component={SampleComponent}
161162
/>
162-
</Switch>
163+
</Routes>
163164
)
164165
```
165166

166167
### Private route
167168

168-
The route can only be accessed if a user is authenticated. Use permission props to access control.
169+
The route can only be accessed if a user is authenticated. Use permission props (returned by the API) to access the control.
169170

170-
```js
171-
import { Switch } from 'react-router-dom'
171+
```tsx
172+
import { Routes } from 'react-router-dom'
172173
import { PrivateRoute } from 'src/router/PrivateRoute'
173174

174175
const SampleComponent = () => <div>Sample component</div>
175176

176177
export const Routes = () => (
177-
<Switch>
178+
<Routes>
178179
{/*
179180
allow route access if the user has the permissions
180181
`users.list` and `users.create`
@@ -184,15 +185,32 @@ export const Routes = () => (
184185
component={SampleComponent}
185186
permissions={['users.list', 'users.create']}
186187
/>
187-
</Switch>
188+
</Routes>
189+
)
190+
```
191+
192+
### Hybrid route
193+
194+
The route can be accessed if a user is authenticated or not. Use `Route` component.
195+
196+
```tsx
197+
import { Routes } from 'react-router-dom'
198+
import { PrivateRoute } from 'src/router/PrivateRoute'
199+
200+
const SampleComponent = () => <div>Sample component</div>
201+
202+
export const Routes = () => (
203+
<Routes>
204+
<Route path="/contact" element={<SampleComponent />} />
205+
</Routes>
188206
)
189207
```
190208

191209
## Control visibility of components
192210

193211
Use the `CanAccess` component and pass `permissions` props to control the visibility of a component.
194212

195-
```js
213+
```tsx
196214
import { CanAccess } from 'src/components'
197215

198216
export function NavBar () {

‎babel.config.cjs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
presets: [
3+
['@babel/preset-typescript'],
4+
['@babel/preset-env', { modules: 'auto' }],
5+
[
6+
'@babel/preset-react',
7+
{
8+
runtime: 'automatic'
9+
}
10+
]
11+
]
12+
}

‎index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>React JS Authentication Boilerplate</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)