├── src
    ├── App.css
    ├── react-app-env.d.ts
    ├── assests
    │   ├── images
    │   │   └── FaSun.png
    │   └── fonts
    │   │   ├── Poppins-Medium.ttf
    │   │   ├── Poppins-Regular.ttf
    │   │   └── Poppins-SemiBold.ttf
    ├── Child.tsx
    ├── setupTests.ts
    ├── App.test.tsx
    ├── App.tsx
    ├── reportWebVitals.ts
    ├── index.tsx
    └── index.css
├── .husky
    ├── .gitignore
    └── pre-commit
├── .eslintignore
├── .prettierignore
├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── .gitignore
├── .prettierrc.json
├── tsconfig.json
├── .eslintrc.js
├── package.json
└── README.md


/src/App.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.husky/.gitignore:
--------------------------------------------------------------------------------
1 | _
2 | 


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | src/service-worker.ts
2 | src/serviceWorkerRegistration.ts


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | src/service-worker.ts
2 | src/serviceWorkerRegistration.ts


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShubhamSj07/react-typescript-boilerplate/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShubhamSj07/react-typescript-boilerplate/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShubhamSj07/react-typescript-boilerplate/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/src/assests/images/FaSun.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShubhamSj07/react-typescript-boilerplate/HEAD/src/assests/images/FaSun.png


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | 
4 | npx lint-staged
5 | yarn run format:fix
6 | yarn run validate
7 | 


--------------------------------------------------------------------------------
/src/assests/fonts/Poppins-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShubhamSj07/react-typescript-boilerplate/HEAD/src/assests/fonts/Poppins-Medium.ttf


--------------------------------------------------------------------------------
/src/assests/fonts/Poppins-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShubhamSj07/react-typescript-boilerplate/HEAD/src/assests/fonts/Poppins-Regular.ttf


--------------------------------------------------------------------------------
/src/assests/fonts/Poppins-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShubhamSj07/react-typescript-boilerplate/HEAD/src/assests/fonts/Poppins-SemiBold.ttf


--------------------------------------------------------------------------------
/src/Child.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Child = () => {
 4 |   return (
 5 |     <div>
 6 |       <h1>testing lint staged for unstaged files:)</h1>
 7 |     </div>
 8 |   );
 9 | };
10 | 
11 | export default Child;
12 | 


--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import "@testing-library/jest-dom";
6 | 


--------------------------------------------------------------------------------
/src/App.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { render, screen } from "@testing-library/react";
 3 | import App from "./App";
 4 | 
 5 | test("renders learn react link", () => {
 6 |   render(<App />);
 7 |   const linkElement = screen.getByText(/learn react/i);
 8 |   expect(linkElement).toBeInTheDocument();
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | // <reference path="path/types.d.ts" />
 2 | import FaSun from "./assests/images/FaSun.png";
 3 | import "./App.css";
 4 | 
 5 | const App = () => {
 6 |   return (
 7 |     <div>
 8 |       <h3>react-typescript boilerplate!</h3>
 9 |       <h5>testing lint stage!!</h5>
10 | 
11 |       <img src={FaSun} alt="FaSun" />
12 |     </div>
13 |   );
14 | };
15 | 
16 | export default App;
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | .eslintcache
11 | 
12 | # production
13 | /build
14 | 6
15 | 
16 | # misc
17 | .DS_Store
18 | .env
19 | .env.local
20 | .env.development.local
21 | .env.test.local
22 | .env.production.local
23 | 
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
 1 | import { ReportHandler } from "web-vitals";
 2 | 
 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
 4 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 5 |     import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 6 |       getCLS(onPerfEntry);
 7 |       getFID(onPerfEntry);
 8 |       getFCP(onPerfEntry);
 9 |       getLCP(onPerfEntry);
10 |       getTTFB(onPerfEntry);
11 |     });
12 |   }
13 | };
14 | 
15 | export default reportWebVitals;
16 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "arrowParens": "avoid",
 3 |   "bracketSameLine": false,
 4 |   "bracketSpacing": true,
 5 |   "embeddedLanguageFormatting": "auto",
 6 |   "htmlWhitespaceSensitivity": "css",
 7 |   "insertPragma": false,
 8 |   "jsxSingleQuote": false,
 9 |   "printWidth": 80,
10 |   "proseWrap": "preserve",
11 |   "quoteProps": "as-needed",
12 |   "requirePragma": false,
13 |   "semi": true,
14 |   "singleQuote": false,
15 |   "tabWidth": 2,
16 |   "trailingComma": "es5",
17 |   "useTabs": false,
18 |   "vueIndentScriptAndStyle": false
19 | }
20 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import App from "./App";
 4 | import reportWebVitals from "./reportWebVitals";
 5 | import "./index.css";
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>,
11 |   document.getElementById("root")
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "esModuleInterop": true,
 8 |     "allowSyntheticDefaultImports": true,
 9 |     "strict": true,
10 |     "forceConsistentCasingInFileNames": true,
11 |     "noFallthroughCasesInSwitch": true,
12 |     "module": "esnext",
13 |     "moduleResolution": "node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "noEmit": true,
17 |     "jsx": "react-jsx"
18 |   },
19 |   "include": ["src"]
20 | }
21 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: "Poppins-Medium";
 3 |   src: url("assests/fonts/Poppins-Medium.ttf");
 4 | }
 5 | 
 6 | @font-face {
 7 |   font-family: "Poppins-Regular";
 8 |   src: url("assests/fonts/Poppins-Regular.ttf");
 9 | }
10 | 
11 | @font-face {
12 |   font-family: "Poppins-SemiBold";
13 |   src: url("assests/fonts/Poppins-SemiBold.ttf");
14 | }
15 | 
16 | * {
17 |   margin: 0;
18 |   padding: 0;
19 |   box-sizing: border-box;
20 | }
21 | 
22 | body {
23 |   margin: 0;
24 |   font-family: Poppins-Medium, -apple-system, "Segoe UI", "Roboto", sans-serif;
25 |   -webkit-font-smoothing: antialiased;
26 |   -moz-osx-font-smoothing: grayscale;
27 | }
28 | 
29 | code {
30 |   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
31 |     monospace;
32 | }
33 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: true,
 4 |     es2021: true,
 5 |     jest: true,
 6 |   },
 7 |   extends: [
 8 |     "plugin:react/recommended",
 9 |     "airbnb",
10 |     "prettier",
11 |     "plugin:import/typescript",
12 |   ],
13 |   parser: "@typescript-eslint/parser",
14 |   parserOptions: {
15 |     ecmaFeatures: {
16 |       jsx: true,
17 |     },
18 |     ecmaVersion: 13,
19 |     sourceType: "module",
20 |   },
21 |   plugins: ["react", "@typescript-eslint", "security"],
22 |   rules: {
23 |     "import/extensions": [
24 |       "error",
25 |       "ignorePackages",
26 |       { ts: "never", tsx: "never" },
27 |     ],
28 |     "no-use-before-define": "off",
29 |     "@typescript-eslint/no-use-before-define": "error",
30 |     "react/react-in-jsx-scope": "off",
31 |     "react/jsx-filename-extension": ["error", { extensions: [".tsx"] }],
32 |     "arrow-body-style": ["error", "always"],
33 |     "react/function-component-definition": [
34 |       2,
35 |       {
36 |         namedComponents: "arrow-function",
37 |         unnamedComponents: "arrow-function",
38 |       },
39 |     ],
40 |   },
41 | };
42 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React TypeScript Boilerplate</title>
28 |   </head>
29 | 
30 |   <body>
31 |     <noscript>You need to enable JavaScript to run this app.</noscript>
32 |     <div id="root"></div>
33 |     <!--
34 |       This HTML file is a template.
35 |       If you open it directly in the browser, you will see an empty page.
36 | 
37 |       You can add webfonts, meta tags, or analytics to this file.
38 |       The build step will place the bundled scripts into the <body> tag.
39 | 
40 |       To begin the development, run `npm start` or `yarn start`.
41 |       To create a production bundle, use `npm run build` or `yarn build`.
42 |     -->
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-typescript-boilerplate",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.14.1",
 7 |     "@testing-library/react": "^12.0.0",
 8 |     "@testing-library/user-event": "^13.2.1",
 9 |     "@types/jest": "^27.0.1",
10 |     "@types/node": "^16.7.13",
11 |     "@types/react": "^17.0.20",
12 |     "@types/react-dom": "^17.0.9",
13 |     "concurrently": "^7.0.0",
14 |     "react": "^17.0.2",
15 |     "react-dom": "^17.0.2",
16 |     "react-scripts": "5.0.0",
17 |     "typescript": "^4.4.2",
18 |     "web-vitals": "^2.1.0"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject",
25 |     "prettier": "prettier . --ignore-path .gitignore",
26 |     "format:check": "prettier . --ignore-path .gitignore --check",
27 |     "format:fix": "prettier . --ignore-path .gitignore --write",
28 |     "lint": "eslint --ext .tsx,.ts .",
29 |     "validate": "concurrently \"yarn run lint\" \"yarn run type:check\" \"yarn run format:check\"",
30 |     "type:check": "tsc",
31 |     "prepare": "husky install"
32 |   },
33 |   "eslintConfig": {
34 |     "extends": [
35 |       "react-app",
36 |       "react-app/jest"
37 |     ]
38 |   },
39 |   "browserslist": {
40 |     "production": [
41 |       ">0.2%",
42 |       "not dead",
43 |       "not op_mini all"
44 |     ],
45 |     "development": [
46 |       "last 1 chrome version",
47 |       "last 1 firefox version",
48 |       "last 1 safari version"
49 |     ]
50 |   },
51 |   "devDependencies": {
52 |     "@typescript-eslint/eslint-plugin": "^5.9.0",
53 |     "@typescript-eslint/parser": "^5.9.0",
54 |     "eslint": "^8.6.0",
55 |     "eslint-config-airbnb": "^19.0.4",
56 |     "eslint-config-prettier": "^8.3.0",
57 |     "eslint-plugin-import": "^2.25.4",
58 |     "eslint-plugin-jsx-a11y": "^6.5.1",
59 |     "eslint-plugin-react": "^7.28.0",
60 |     "eslint-plugin-react-hooks": "^4.3.0",
61 |     "eslint-plugin-security": "^1.4.0",
62 |     "husky": "^7.0.4",
63 |     "lint-staged": "^12.1.5",
64 |     "prettier": "^2.5.1"
65 |   },
66 |   "lint-staged": {
67 |     "*.{tsx,ts}": "eslint --fix",
68 |     "*.{js,css,md}": "prettier --write"
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## A react-typescript boilerplate including
  2 | 
  3 | - `prettier`
  4 | - `eslint`
  5 | - `lint-staged`
  6 | - `husky`
  7 | 
  8 | # ![React Typescript Setup](https://img.shields.io/badge/React--Typescript-044289?style=flat)
  9 | 
 10 | [Docs](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup/)
 11 | 
 12 | - TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
 13 | - Also a powerful compiler tool which converts typescript to javascript
 14 | - It also adds feature of idetifying errors at compile time rather than scratching our head at runtime🥲
 15 | 
 16 | # ![Prettier](https://img.shields.io/badge/Prettier-%23DB7093?style=flat)
 17 | 
 18 | [Docs](https://prettier.io/)
 19 | 
 20 | - An Code formatter
 21 | - Supports many languages
 22 | - Generate prettier rules [here](https://prettier.io/playground/)
 23 | 
 24 | # ![Eslint](https://img.shields.io/badge/Eslint-4B32C3?style=flat)
 25 | 
 26 | [Docs](https://eslint.org/)
 27 | 
 28 | - Find and fix problems in your JavaScript code making code more consistent.
 29 | - We already have `eslint` as an inner-dependency from react-scripts
 30 | - To init eslint config run & choose options accordingly
 31 | 
 32 |   ```
 33 |   npx eslint --init
 34 |   ```
 35 | 
 36 | <!-- ### Prettier plugin
 37 | - We can ask eslint to work with prettier using   ```eslint-config-prettier extension``` -->
 38 | 
 39 | # ![Lint-Staged](https://img.shields.io/badge/Lint--Staged-49C41C?style=flat)
 40 | 
 41 | [Docs](https://www.npmjs.com/package/lint-staged)
 42 | 
 43 | - Linting makes more sense when run before committing your code. By doing so you can ensure no errors go into the repository and enforce code style.
 44 | 
 45 | # ![Husky](https://img.shields.io/badge/Husky-yellow?style=flat)
 46 | 
 47 | [Docs](https://www.npmjs.com/package/husky)
 48 | 
 49 | - Whenever we inti Git in our project, it automatically comes with features called hooks.
 50 | - hooks ex: `pre-commit`, `pre-push`, etc.
 51 | - If we want to ensure before we actually create a commit using the `git commit`, that our code was properly `linted` and `formatted`, we could write a `pre-commit` Git hook.
 52 | 
 53 | # ![Installation](https://img.shields.io/badge/Installation-38427A?style=flat)
 54 | 
 55 | 1. Clone / Download [this](https://github.com/ShubhamSj07/react-typescript-boilerplate) repo.
 56 | 2. Inside the project open a terminal and run:
 57 | 
 58 |    ```
 59 |    yarn install
 60 |    ```
 61 | 
 62 |    This will install all the project dependencies.
 63 | 
 64 | 3. To start the development server run:
 65 | 
 66 |    ```
 67 |    yarn start
 68 |    ```
 69 | 
 70 | 4. Prettier commands
 71 | 
 72 |    - Run the below command to get a list of all unformatted code in the project.
 73 | 
 74 |      ```
 75 |      yarn run format:check
 76 |      ```
 77 | 
 78 |    - Run the below command to fix the unformatted code!
 79 | 
 80 |      ```
 81 |      yarn run format:fix
 82 |      ```
 83 | 
 84 | 5. Eslint commands
 85 | 
 86 |    - We can run the below script present in package.json
 87 | 
 88 |      ```
 89 |      yarn run lint
 90 |      ```
 91 | 
 92 | 6. Run parallel commands at once using [concurrently](https://www.npmjs.com/package/concurrently)
 93 | 
 94 | - #### Syntax
 95 | 
 96 |   ```
 97 |    concurrently \"yarn 1st-cmd\" \"yarn run  2st-cmd\" \"yarn run nth-cmd\""
 98 |   ```
 99 | 
100 | 7. Another great thing about lint-staged is that it automatically does the git add on the modified files. So, if we are doing prettier — write or eslint — fix, we don't have to stage the changes manually.
101 | 
102 | - #### We do format:fix & run our validate script on the staged files
103 | 
104 | - #### After `git add .` and `git commit -m "message"`
105 | 
106 |   the lint-staged kicks in and runs🚀
107 | 
108 | # ![Author](https://img.shields.io/badge/Author-FF3031?style=flat)
109 | 
110 | [![Twitter](https://img.shields.io/badge/follow-%40shubhamsj077-1DA1F2?style=flat&logo=Twitter)](https://twitter.com/shubhamsj077)
111 | 
112 | [![LinkedIn](https://img.shields.io/badge/connect-%40shubhamjadhav-%230077B5?style=flat&logo=LinkedIn)](https://www.linkedin.com/in/shubham-jadhav-77a588192/)
113 | 


--------------------------------------------------------------------------------