/dist/'],
54 |
55 | // Indicates which provider should be used to instrument code for coverage
56 | coverageProvider: 'babel',
57 | };
58 |
--------------------------------------------------------------------------------
/jest.setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom';
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-professional-configuration",
3 | "private": true,
4 | "version": "2.0.1",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite --mode development --host",
8 | "staging": "vite --mode staging --host",
9 | "prod": "vite --mode production --host",
10 | "build": "tsc && vite build",
11 | "preview": "vite preview --host",
12 | "lint": "eslint --fix . --ext ts,tsx",
13 | "format": "prettier --write .",
14 | "test": "jest",
15 | "test:watch": "jest --watchAll",
16 | "prepare": "husky install"
17 | },
18 | "dependencies": {
19 | "clsx": "2.0.0",
20 | "react": "18.2.0",
21 | "react-dom": "18.2.0"
22 | },
23 | "devDependencies": {
24 | "@babel/core": "7.23.5",
25 | "@babel/preset-env": "7.23.5",
26 | "@babel/preset-react": "7.23.3",
27 | "@babel/preset-typescript": "7.23.3",
28 | "@testing-library/dom": "9.3.3",
29 | "@testing-library/jest-dom": "6.1.5",
30 | "@testing-library/react": "14.1.2",
31 | "@testing-library/user-event": "14.5.1",
32 | "@types/jest": "29.5.11",
33 | "@types/node": "20.10.3",
34 | "@types/react": "18.2.42",
35 | "@types/react-dom": "18.2.17",
36 | "@typescript-eslint/eslint-plugin": "6.13.2",
37 | "@typescript-eslint/parser": "6.13.2",
38 | "@vitejs/plugin-react-swc": "3.5.0",
39 | "autoprefixer": "10.4.16",
40 | "babel-jest": "29.7.0",
41 | "cssnano": "6.0.1",
42 | "eslint": "8.55.0",
43 | "eslint-config-prettier": "9.1.0",
44 | "eslint-config-standard-with-typescript": "40.0.0",
45 | "eslint-plugin-import": "2.29.0",
46 | "eslint-plugin-n": "16.3.1",
47 | "eslint-plugin-prettier": "5.0.1",
48 | "eslint-plugin-promise": "6.1.1",
49 | "eslint-plugin-react": "7.33.2",
50 | "eslint-plugin-react-hooks": "4.6.0",
51 | "eslint-plugin-react-refresh": "0.4.5",
52 | "husky": "8.0.3",
53 | "jest": "29.7.0",
54 | "jest-environment-jsdom": "29.7.0",
55 | "lint-staged": "15.2.0",
56 | "postcss": "8.4.32",
57 | "prettier": "3.1.0",
58 | "prettier-plugin-tailwindcss": "0.5.9",
59 | "tailwindcss": "3.3.6",
60 | "ts-jest": "29.1.1",
61 | "ts-node": "10.9.1",
62 | "typescript": "5.3.3",
63 | "vite": "5.0.6"
64 | },
65 | "lint-staged": {
66 | "*.{ts,tsx}": [
67 | "npm run lint",
68 | "npm run format"
69 | ]
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | ...(process.env.NODE_ENV === 'production'
6 | ? {
7 | cssnano: {
8 | preset: [
9 | 'default',
10 | { autoprefixer: true, mergeIdents: true, discardUnused: true },
11 | ],
12 | },
13 | }
14 | : {}),
15 | },
16 | };
17 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.test.tsx:
--------------------------------------------------------------------------------
1 | import App from '@/App';
2 | import { render, screen } from '@testing-library/react';
3 | import userEvent from '@testing-library/user-event';
4 |
5 | beforeEach(() => {
6 | render();
7 | });
8 |
9 | describe('', () => {
10 | describe('The App component should be displayed on the screen', () => {
11 | test('App renderer', () => {
12 | const title = screen.getByText(/REACT PROFESSIONAL CONFIGURATION!/);
13 |
14 | expect(title).toBeInTheDocument();
15 | });
16 | });
17 |
18 | describe('Counter', () => {
19 | test('Counter should start at 0', () => {
20 | const counterButton = screen.getByText(/counter 0/i);
21 | expect(counterButton).toBeInTheDocument();
22 | });
23 |
24 | test('Counter should increment when the button is clicked', async () => {
25 | const counterButton = screen.getByText(/counter 0/i);
26 | await userEvent.click(counterButton);
27 |
28 | const updatedCounterButton = screen.getByText(/counter 1/i);
29 | expect(updatedCounterButton).toBeInTheDocument();
30 | });
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | export default function App() {
4 | const [count, setCount] = useState(0);
5 |
6 | const onCounter = () => {
7 | setCount(count + 1);
8 | };
9 |
10 | return (
11 | <>
12 |
13 |
14 | REACT PROFESSIONAL CONFIGURATION!
15 |
16 |
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import App from './App';
4 | import './globals.css';
5 |
6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
7 |
8 |
9 | ,
10 | );
11 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | darkMode: 'class',
3 | important: 'html',
4 | content: [
5 | 'index.html',
6 | './src/App.tsx',
7 | './src/components/**/*.{tsx,jsx,js,css,html}',
8 | './src/routes/**/*.{tsx,jsx,js,css,html}',
9 | './src/pages/**/components/**/*.{tsx,jsx,js,css,html}',
10 | ],
11 | theme: {
12 | extend: {},
13 | },
14 | plugins: [],
15 | };
16 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES6",
4 | "baseUrl": ".",
5 | "paths": { "@/*": ["./src/*"] },
6 | "useDefineForClassFields": true,
7 | "lib": ["DOM", "DOM.Iterable", "ES6"],
8 | "allowJs": false,
9 | "skipLibCheck": true,
10 | "esModuleInterop": false,
11 | "allowSyntheticDefaultImports": true,
12 | "strict": true,
13 | "forceConsistentCasingInFileNames": true,
14 | "module": "ESNext",
15 | "moduleResolution": "Node",
16 | "resolveJsonModule": true,
17 | "isolatedModules": true,
18 | "noEmit": true,
19 | "jsx": "react-jsx",
20 | "types": ["vite/client", "node", "jest"]
21 | },
22 | "include": ["src", "jest.setup.ts"],
23 | "exclude": [
24 | "node_modules",
25 | "dist",
26 | "jest.config.ts",
27 | "vite.config.ts",
28 | ".eslintrc",
29 | "tailwind.config.js",
30 | "postcss.config.js"
31 | ],
32 | "references": [{ "path": "./tsconfig.node.json" }]
33 | }
34 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "module": "ESNext",
5 | "moduleResolution": "Node",
6 | "allowSyntheticDefaultImports": true
7 | },
8 | "include": ["vite.config.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import react from '@vitejs/plugin-react-swc';
2 | import { resolve } from 'path';
3 | import { defineConfig, loadEnv } from 'vite';
4 |
5 | // https://vitejs.dev/config/
6 | export default ({ mode }: { mode: string }) => {
7 | return defineConfig({
8 | plugins: [react()],
9 | resolve: {
10 | alias: [{ find: '@', replacement: resolve(__dirname, './src') }],
11 | },
12 | define: {
13 | 'process.env': { ...loadEnv(mode, process.cwd()) },
14 | },
15 | });
16 | };
17 |
--------------------------------------------------------------------------------