Skip to content

Commit b59c59c

Browse files
patrickjmeurerpatrickjmeurer
authored
Merge pull request #2 from potreco/dev
Added commit linting, absolute imports and some fixes
2 parents b072228 + 466fd87 commit b59c59c

16 files changed

+173
-63
lines changed

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ vite.config.ts
77
jest.setup.ts
88
jest.config.js
99
/test/__mocks__/fileMock.js
10+
commitlint.config.js

‎.eslintrc.json

+22-1
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,31 @@
2626
"@typescript-eslint",
2727
"prettier"
2828
],
29+
"settings": {
30+
"import/extensions": [".js", ".jsx", ".ts", ".tsx"],
31+
"import/resolver": {
32+
"typescript": {
33+
"directory": "./tsconfig.json"
34+
},
35+
"node": {
36+
"extensions": [".js", ".jsx", ".ts", ".tsx"]
37+
}
38+
}
39+
},
2940
"rules": {
3041
"prettier/prettier": "error",
3142
"react/react-in-jsx-scope": "off",
3243
"react/prop-types": "off",
33-
"react/jsx-no-bind": "off"
44+
"react/jsx-no-bind": "off",
45+
"import/extensions": [
46+
"error",
47+
"ignorePackages",
48+
{
49+
"js": "never",
50+
"jsx": "never",
51+
"ts": "never",
52+
"tsx": "never"
53+
}
54+
]
3455
}
3556
}

‎.husky/commit-msg

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/usr/bin/env sh
2+
. "$(dirname -- "$0")/_/husky.sh"
3+
4+
npx --no-install commitlint --edit

‎README.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ A modern minimal Vite + React + TypeScript template with pre-configured ESLint (
99
![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E)
1010
![Jest](https://img.shields.io/badge/jest-C21325?style=for-the-badge&logo=jest&logoColor=white)
1111
![Testing Library](https://img.shields.io/badge/testing%20library-E33332?style=for-the-badge&logo=testing-library&logoColor=white)
12+
![Commitlint](https://img.shields.io/badge/commitlint-000000?style=for-the-badge&logo=commitlint&logoColor=white)
1213

1314
![Screenshot](https://i.imgur.com/4dpYsyG.png)
1415

@@ -21,6 +22,8 @@ A modern minimal Vite + React + TypeScript template with pre-configured ESLint (
2122
- 🌀 [Prettier](https://prettier.io) - Opinionated Code Formatter
2223
- 🐺 [Husky](https://github.com/typicode/husky) - Native Git hooks
2324
- ⚙️ [Jest](https://jestjs.io/) - Testing libraries
25+
- ⌨️ Absolute Imports
26+
- 📑 [Commitlint](https://commitlint.js.org/) - Linting your commits based on commit convention
2427

2528
## Why
2629

@@ -55,15 +58,16 @@ yarn dev
5558
| yarn format | Runs the Prettier and fix code style |
5659
| yarn compile | Runs the TS Compiling |
5760
| yarn test | Run the app tests. |
61+
| yarn commit | Open the CZ CLI to create a message to your commit. |
5862

5963
## TODO
6064

6165
- [x] Eslint
6266
- [x] Prettier
6367
- [x] Husky
6468
- [x] Testing Tools
65-
- [ ] Absolute imports
66-
- [ ] Commit linting
69+
- [x] Absolute imports
70+
- [x] Commit linting
6771

6872
## License
6973

‎commitlint.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = { extends: ['@commitlint/config-conventional'] };

‎jest.config.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
export default {
1+
module.exports = {
22
testEnvironment: "jsdom",
33
transform: {
44
"^.+\\.tsx?$": "ts-jest"
55
},
66
moduleNameMapper: {
77
'\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
88
'\\.(css|less|sass|scss)$': 'identity-obj-proxy',
9+
"^@/(.*)$": "<rootDir>\\src\\$1"
910
},
1011
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
11-
}
12+
}

‎package.json

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
{
22
"name": "viterc",
33
"private": false,
4-
"version": "1.0.0",
4+
"version": "1.1.0",
55
"description": "A modern minimal Vite + React + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier, Testing with Jest and Git hooks with Husky out of the box 📦",
66
"license": "MIT",
77
"author": {
88
"name": "Patrick Jean Meurer",
99
"email": "[email protected]",
1010
"url": "https://github.com/potreco"
1111
},
12-
"type": "module",
1312
"scripts": {
1413
"postinstall": "husky install",
1514
"dev": "vite",
@@ -19,13 +18,21 @@
1918
"lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
2019
"format": "prettier \"src/**/*.{js,jsx,ts,tsx,css,scss}\" --write",
2120
"compile": "tsc",
22-
"test": "jest"
21+
"test": "jest",
22+
"commit": "cz"
23+
},
24+
"config": {
25+
"commitizen": {
26+
"path": "./node_modules/cz-conventional-changelog"
27+
}
2328
},
2429
"dependencies": {
2530
"react": "^18.2.0",
2631
"react-dom": "^18.2.0"
2732
},
2833
"devDependencies": {
34+
"@commitlint/cli": "^17.0.3",
35+
"@commitlint/config-conventional": "^17.0.3",
2936
"@testing-library/jest-dom": "^5.16.4",
3037
"@testing-library/react": "^13.3.0",
3138
"@testing-library/user-event": "^14.2.5",
@@ -35,10 +42,12 @@
3542
"@typescript-eslint/eslint-plugin": "^5.30.6",
3643
"@typescript-eslint/parser": "^5.30.6",
3744
"@vitejs/plugin-react": "^2.0.0",
45+
"commitizen": "^4.2.5",
3846
"eslint": "^8.19.0",
3947
"eslint-config-airbnb": "^19.0.4",
4048
"eslint-config-airbnb-typescript": "^17.0.0",
4149
"eslint-config-prettier": "^8.5.0",
50+
"eslint-import-resolver-typescript": "^3.3.0",
4251
"eslint-plugin-import": "2.25.3",
4352
"eslint-plugin-jsx-a11y": "6.5.1",
4453
"eslint-plugin-prettier": "^4.2.1",

‎src/App.tsx

+4-53
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,20 @@
11
import { useState } from 'react';
2-
import reactLogo from '../public/react.svg';
32
import './App.css';
3+
import Header from '@/Components/Header';
4+
import ReadTheDocs from '@/Components/ReadTheDocs';
45

56
function App() {
67
const [count, setCount] = useState(0);
78

89
return (
910
<div className="App">
10-
<div id="logos">
11-
<img src="/vite.svg" className="logo" alt="Vite logo" />
12-
<img src={reactLogo} className="logo react" alt="React logo" />
13-
</div>
14-
<h2>Vite + React + TypeScript + Eslint (Airbnb) + Eslint + Jest + Testing Library = ViteRC❤️‍🔥</h2>
11+
<Header />
1512
<div className="card">
1613
<button type="button" onClick={() => setCount(count + 1)}>
1714
count is {count}
1815
</button>
1916
</div>
20-
<p className="read-the-docs" data-testId="read-the-docs">
21-
<a className="App-link" href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener noreferrer">
22-
Vite Docs
23-
</a>
24-
{' | '}
25-
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
26-
React Docs
27-
</a>
28-
{' | '}
29-
<a className="App-link" href="https://www.typescriptlang.org/docs/" target="_blank" rel="noopener noreferrer">
30-
Typescript
31-
</a>
32-
{' | '}
33-
<a className="App-link" href="https://eslint.org/" target="_blank" rel="noopener noreferrer">
34-
Eslint docs
35-
</a>
36-
{' | '}
37-
<a className="App-link" href="https://github.com/airbnb/javascript" target="_blank" rel="noopener noreferrer">
38-
Airbnb JS Style Guide
39-
</a>
40-
{' | '}
41-
<a
42-
className="App-link"
43-
href="https://github.com/airbnb/javascript/tree/master/react"
44-
target="_blank"
45-
rel="noopener noreferrer"
46-
>
47-
Airbnb React Style Guide
48-
</a>
49-
{' | '}
50-
<a
51-
className="App-link"
52-
href="https://jestjs.io/pt-BR/docs/getting-started"
53-
target="_blank"
54-
rel="noopener noreferrer"
55-
>
56-
Jest
57-
</a>
58-
{' | '}
59-
<a className="App-link" href="https://testing-library.com" target="_blank" rel="noopener noreferrer">
60-
Testing Library
61-
</a>
62-
{' | '}
63-
<a className="App-link" href="https://github.com/potreco/viterc" target="_blank" rel="noopener noreferrer">
64-
Template repository
65-
</a>
66-
</p>
17+
<ReadTheDocs />
6718
</div>
6819
);
6920
}

‎public/react.svg renamed to ‎src/assets/react.svg

File renamed without changes.

‎public/vite.svg renamed to ‎src/assets/vite.svg

File renamed without changes.

‎src/components/Header/Header.test.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { render, screen } from '@testing-library/react';
2+
import Header from '.';
3+
4+
describe('Render the Header Component correctly', () => {
5+
test('should render the Vite logo', async () => {
6+
render(<Header />);
7+
8+
const viteLogo = await screen.findByTestId('vite-logo');
9+
10+
expect(viteLogo).toBeInTheDocument();
11+
});
12+
test('should render the React logo', async () => {
13+
render(<Header />);
14+
15+
const reactLogo = await screen.findByTestId('react-logo');
16+
17+
expect(reactLogo).toBeInTheDocument();
18+
});
19+
20+
test('should render the title', async () => {
21+
render(<Header />);
22+
23+
const header = await screen.findByText(/ViteRC/);
24+
25+
expect(header).toBeInTheDocument();
26+
});
27+
});

‎src/components/Header/index.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import reactLogo from '@/Assets/react.svg';
2+
import viteLogo from '@/Assets/vite.svg';
3+
4+
function Header() {
5+
return (
6+
<>
7+
<div id="logos">
8+
<img src={viteLogo} className="logo" data-testid="vite-logo" alt="Vite logo" />
9+
<img src={reactLogo} className="logo react" data-testid="react-logo" alt="React logo" />
10+
</div>
11+
<h2>Vite + React + TypeScript + Eslint (Airbnb) + Eslint + Jest + Testing Library = ViteRC❤️‍🔥</h2>
12+
</>
13+
);
14+
}
15+
16+
export default Header;

‎src/components/ReadTheDocs/ReadTheDocs.test.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { render, screen } from '@testing-library/react';
2+
import ReadTheDocs from '.';
3+
4+
describe('Render the ReadTheDocs Component correctly', () => {
5+
test('should render the `p` correctly', async () => {
6+
render(<ReadTheDocs />);
7+
8+
expect(await screen.findByTestId('read-the-docs')).toBeInTheDocument();
9+
});
10+
});

‎src/components/ReadTheDocs/index.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
function ReadTheDocs() {
2+
return (
3+
<p className="read-the-docs" data-testid="read-the-docs">
4+
<a className="App-link" href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener noreferrer">
5+
Vite Docs
6+
</a>
7+
{' | '}
8+
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
9+
React Docs
10+
</a>
11+
{' | '}
12+
<a className="App-link" href="https://www.typescriptlang.org/docs/" target="_blank" rel="noopener noreferrer">
13+
Typescript
14+
</a>
15+
{' | '}
16+
<a className="App-link" href="https://eslint.org/" target="_blank" rel="noopener noreferrer">
17+
Eslint docs
18+
</a>
19+
{' | '}
20+
<a className="App-link" href="https://github.com/airbnb/javascript" target="_blank" rel="noopener noreferrer">
21+
Airbnb JS Style Guide
22+
</a>
23+
{' | '}
24+
<a
25+
className="App-link"
26+
href="https://github.com/airbnb/javascript/tree/master/react"
27+
target="_blank"
28+
rel="noopener noreferrer"
29+
>
30+
Airbnb React Style Guide
31+
</a>
32+
{' | '}
33+
<a
34+
className="App-link"
35+
href="https://jestjs.io/pt-BR/docs/getting-started"
36+
target="_blank"
37+
rel="noopener noreferrer"
38+
>
39+
Jest
40+
</a>
41+
{' | '}
42+
<a className="App-link" href="https://testing-library.com" target="_blank" rel="noopener noreferrer">
43+
Testing Library
44+
</a>
45+
{' | '}
46+
<a className="App-link" href="https://github.com/potreco/viterc" target="_blank" rel="noopener noreferrer">
47+
Template repository
48+
</a>
49+
</p>
50+
);
51+
}
52+
export default ReadTheDocs;

‎tsconfig.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,13 @@
1414
"resolveJsonModule": true,
1515
"isolatedModules": true,
1616
"noEmit": true,
17-
"jsx": "react-jsx"
17+
"jsx": "react-jsx",
18+
"baseUrl": "./",
19+
"paths": {
20+
"@/*": ["*", "src/*"],
21+
"@/Assets/*": ["*", "src/assets/*"],
22+
"@/Components/*": ["*", "src/components/*"],
23+
}
1824
},
1925
"include": ["src"],
2026
"references": [{ "path": "./tsconfig.node.json" }]

‎vite.config.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,12 @@ import react from '@vitejs/plugin-react'
33

44
// https://vitejs.dev/config/
55
export default defineConfig({
6-
plugins: [react()]
6+
plugins: [react()],
7+
resolve: {
8+
alias: [
9+
{ find: '@/', replacement: '/src' },
10+
{ find: '@/Assets', replacement: '/src/assets' },
11+
{ find: '@/Components', replacement: '/src/components' },
12+
],
13+
}
714
})

0 commit comments

Comments
 (0)