Initial commit

ChrisUser · Mar 23, 2024 · 1a3ce3b · 1a3ce3b
1 parent 39890aa
commit 1a3ce3b
Show file tree

Hide file tree

Showing 18 changed files with 1,607 additions and 7,116 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+SERVER_OPEN_BROWSER=true
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,8 @@
+node_modules/
+# Ignore artifacts:
+build/
+coverage/
+
+vite-env.d.ts
+vite.config.ts
+jest.config.js
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log\*
+
+yarn.lock
+package-lock.json
diff --git a/README.md b/README.md
@@ -1,5 +1,62 @@
 <h1 align="center">New React App</h1>
 
+# Usage
+
+To clone and use this template type the following commands
+
+## npm
+
+```sh
+npx degit chrisuser/vite-complete-react-app my-app
+```
+
+```sh
+cd my-app
+```
+
+```sh
+npm install
+```
+
+```sh
+npm dev
+```
+
+## yarn
+
+```sh
+yarn degit chrisuser/vite-complete-react-app my-app
+```
+
+```sh
+cd my-app
+```
+
+```sh
+yarn
+```
+
+```sh
+yarn dev
+```
+
+> [!TIP]
+> Remember to update the project name inside the `package.json` file.
+
+<br />
+
+## ⚗️ Technologies list
+
+-   [TypeScript](https://www.typescriptlang.org/)
+-   [Sass](https://sass-lang.com/)
+-   [Redux Toolkit](https://redux-toolkit.js.org/)
+-   [Router](https://reactrouter.com/)
+-   [Axios](https://axios-http.com/)
+-   [Moment](https://momentjs.com/)
+-   [ESlint](https://eslint.org/) & [Prettier](https://prettier.io/)
+
+---
+
 <br />
 
 This is a blank README file that you can customize at your needs.\
@@ -16,7 +73,7 @@ In the project directory, you can run:
 ## ⚡️ start
 
 ```
-yarn start
+npm start
 ```
 
 or
@@ -33,7 +90,7 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 ## 🧪 test
 
 ```
-yarn test
+npm test
 ```
 
 or
@@ -49,7 +106,7 @@ Launches the test runner in the interactive watch mode.
 ## 🦾 build
 
 ```
-yarn build
+npm build
 ```
 
 or
@@ -68,7 +125,7 @@ The build is minified and the filenames include the hashes.
 ## 🧶 lint
 
 ```
-yarn lint
+npm lint
 ```
 
 or
@@ -84,7 +141,7 @@ Creates a `.eslintcache` file in which ESLint cache is stored. Running this comm
 ## 🎯 format
 
 ```
-yarn format
+npm format
 ```
 
 or
@@ -105,36 +162,41 @@ This is the structure of the files in the project:
     │
     ├── public                  # public files (favicon, .htaccess, manifest, ...)
     ├── src                     # source files
+    │   ├── __tests__           # all test files
     │   ├── components
     │   ├── pages
     │   ├── resources           # images, constants and other static resources
     │   ├── store               # Redux store
     │   │   ├── actions         # store's actions
     │   │   └── reducers        # store's reducers
     │   ├── styles
-    │   ├── tests               # all test files
     │   ├── types               # data interfaces
     │   ├── utility             # utilities functions and custom components
     │   ├── App.tsx
     │   ├── index.tsx
-    │   ├── react-app-env.d.ts
     │   ├── RootComponent.tsx   # React component with all the routes
     │   ├── serviceWorker.ts
-    │   └── setupTests.ts
+    │   ├── setupTests.ts
+    │   └── vite-env.d.ts
+    ├── .env
+    ├── .eslintignore
     ├── .eslintrc.js
     ├── .gitignore
     ├── .prettierrc
+    ├── index.html
+    ├── jest.config.cjs
     ├── package.json
     ├── README.md
-    └── tsconfig.json
+    ├── tsconfig.json
+    └── vite.config.json
 ```
 
 # 📖 Learn More
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+You can learn more in the [Vite documentation](https://vitejs.dev/guide/).
 
 To learn React, check out the [React documentation](https://reactjs.org/).
 
 #
 
-<p align="center">Bootstrapped with Create React App.</p>
+<p align="center">Bootstrapped with Vite.</p>
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="description" content="Web site created using Vite" />
+        <link rel="apple-touch-icon" href="/logo192.png" />
+        <link rel="manifest" href="/manifest.json" />
+        <title>React App</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <script type="module" src="/src/index.tsx"></script>
+        <div id="root"></div>
+    </body>
+</html>
diff --git a/jest.config.cjs b/jest.config.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+    roots: ['<rootDir>/src'],
+    transform: {
+        '^.+\\.tsx$': 'ts-jest',
+        '^.+\\.ts$': 'ts-jest'
+    },
+    testRegex: '(/__tests__/.*.(test|spec)).(jsx?|tsx?)$',
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+    collectCoverage: true,
+    collectCoverageFrom: ['<rootDir>/src/**/*.{ts,tsx}'],
+    coverageDirectory: '<rootDir>/coverage/',
+    coveragePathIgnorePatterns: ['(tests/.*.mock).(jsx?|tsx?)$', '(.*).d.ts$'],
+    moduleNameMapper: {
+        '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg)$': 'identity-obj-proxy'
+    },
+    verbose: true,
+    testTimeout: 30000
+}
diff --git a/package.json b/package.json
@@ -1,56 +1,60 @@
 {
-  "name": "vite-complete-react-app",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@reduxjs/toolkit": "^2.2.2",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
-    "@testing-library/user-event": "^14.5.2",
-    "axios": "^1.6.8",
-    "eslint-plugin-prettier": "^5.1.3",
-    "moment": "^2.30.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-redux": "^9.1.0",
-    "react-router-dom": "^6.22.3",
-    "react-scripts": "5.0.1",
-    "redux-persist": "^6.0.0",
-    "sass": "^1.72.0",
-    "sass-loader": "^14.1.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint --cache .",
-    "format": "prettier --check ."
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": [
-    "defaults",
-    "not IE 11"
-  ],
-  "devDependencies": {
-    "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.30",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
-    "@types/react-redux": "^7.1.33",
-    "typescript": "^5.4.3"
-  },
-  "overrides": {
-    "react-scripts": {
-      "typescript": "^5"
-    }
-  },
-  "homepage": ".",
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  }
+    "name": "vite-complete-react-app",
+    "version": "1.0.0",
+    "type": "module",
+    "author": {
+        "name": "Cristiano Raimondi",
+        "url": "https://github.com/chrisuser"
+    },
+    "dependencies": {
+        "@reduxjs/toolkit": "^2.2.2",
+        "@testing-library/jest-dom": "^6.4.2",
+        "@testing-library/react": "^14.2.2",
+        "@testing-library/user-event": "^14.5.2",
+        "axios": "^1.6.8",
+        "eslint-plugin-prettier": "^5.1.3",
+        "moment": "^2.30.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-redux": "^9.1.0",
+        "react-router-dom": "^6.22.3",
+        "redux-persist": "^6.0.0",
+        "sass": "^1.72.0",
+        "sass-loader": "^14.1.1"
+    },
+    "scripts": {
+        "start": "vite --port 3000 --open",
+        "dev": "vite --port 3000 --open",
+        "build": "vite build",
+        "serve": "vite preview --open",
+        "test": "jest",
+        "test:coverage": "jest --silent --watchAll=false --coverage",
+        "lint": "eslint --cache .",
+        "format": "prettier --check ."
+    },
+    "eslintConfig": {
+        "extends": "react-app"
+    },
+    "browserslist": [
+        "defaults",
+        "not IE 11"
+    ],
+    "devDependencies": {
+        "@types/jest": "^29.5.12",
+        "@types/node": "^20.11.30",
+        "@types/react": "^18.2.67",
+        "@types/react-dom": "^18.2.22",
+        "@types/react-redux": "^7.1.33",
+        "@vitejs/plugin-react": "^4.2.1",
+        "identity-obj-proxy": "^3.0.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "ts-jest": "^29.1.2",
+        "typescript": "^5.4.3",
+        "vite": "^5.2.4",
+        "vite-plugin-env-compatible": "^2.0.1",
+        "vite-plugin-html": "^3.2.2",
+        "vitest": "^1.4.0"
+    },
+    "homepage": "."
 }
diff --git a/public/index.html b/public/index.html
diff --git a/src/__tests__/components/DateDisplay.test.tsx b/src/__tests__/components/DateDisplay.test.tsx
@@ -0,0 +1,14 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render, screen, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import DateDisplay from '../../components/DateDisplay'
+
+test('renders current date', () => {
+    render(<DateDisplay />)
+    ;async () => {
+        const timeFormat = screen.getByText(/GMT/i)
+        await waitFor(() => expect(timeFormat).toBeInTheDocument())
+    }
+})
diff --git a/src/tests/pages/HomePage.test.tsx → src/__tests__/pages/HomePage.test.tsx b/src/tests/pages/HomePage.test.tsx → src/__tests__/pages/HomePage.test.tsx
@@ -1,4 +1,8 @@
+/**
+ * @jest-environment jsdom
+ */
 import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
 import HomePage from '../../pages/HomePage'
 
 test('renders hello world message', () => {

diff --git a/src/tests/pages/NotFoundPage.test.tsx → src/__tests__/pages/NotFoundPage.test.tsx b/src/tests/pages/NotFoundPage.test.tsx → src/__tests__/pages/NotFoundPage.test.tsx
@@ -1,4 +1,8 @@
+/**
+ * @jest-environment jsdom
+ */
 import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
 import { BrowserRouter as Router } from 'react-router-dom'
 import NotFoundPage from '../../pages/NotFoundPage'
 

diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
diff --git a/src/setupTests.ts b/src/setupTests.ts
@@ -1 +1,6 @@
-import '@testing-library/jest-dom'
+import { expect, afterEach } from 'vitest'
+import { cleanup } from '@testing-library/react'
+import * as matchers from '@testing-library/jest-dom/matchers'
+
+expect.extend(matchers)
+afterEach(cleanup)