├── .jest
    └── setup.js
├── .prettierrc
├── generators
    ├── templates
    │   ├── hook
    │   │   ├── index.js.hbs
    │   │   ├── hook.js.hbs
    │   │   └── test.js.hbs
    │   └── component
    │   │   ├── index.js.hbs
    │   │   ├── component.jsx.hbs
    │   │   └── test.jsx.hbs
    ├── plopfile.cjs
    ├── hook.generator.cjs
    └── component.generator.cjs
├── jsconfig.json
├── src
    ├── App.jsx
    └── main.jsx
├── vite.config.js
├── .editorconfig
├── babel.config.cjs
├── jest.config.cjs
├── .gitignore
├── index.html
├── .eslintrc.json
├── public
    └── vite.svg
├── package.json
└── README.md


/.jest/setup.js:
--------------------------------------------------------------------------------
1 | import "@testing-library/jest-dom";
2 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "trailingComma": "none",
3 |   "semi": false,
4 |   "singleQuote": true
5 | }
6 | 


--------------------------------------------------------------------------------
/generators/templates/hook/index.js.hbs:
--------------------------------------------------------------------------------
1 | export { default as {{camelCase name}} } from './{{camelCase name}}'
2 | 


--------------------------------------------------------------------------------
/generators/templates/component/index.js.hbs:
--------------------------------------------------------------------------------
1 | export { default as {{pascalCase name}} } from './{{pascalCase name}}'
2 | 


--------------------------------------------------------------------------------
/generators/templates/hook/hook.js.hbs:
--------------------------------------------------------------------------------
1 | function {{camelCase name}}() {
2 |   return true
3 | }
4 | 
5 | export default {{camelCase name}}
6 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "jsx": "react-jsx",
4 |     "types": ["node", "jest", "@testing-library/jest-dom"],
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | function App() {
 2 |   return (
 3 |     <div>
 4 |       React JavaScript boilerplate
 5 |     </div>
 6 |   )
 7 | }
 8 | 
 9 | export default App
10 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()]
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 


--------------------------------------------------------------------------------
/babel.config.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     ['@babel/preset-env', { modules: 'auto' }],
 4 |     [
 5 |       '@babel/preset-react',
 6 |       {
 7 |         runtime: 'automatic'
 8 |       }
 9 |     ]
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App'
 4 | 
 5 | ReactDOM.createRoot(document.getElementById('root')).render(
 6 |   <React.StrictMode>
 7 |     <App />
 8 |   </React.StrictMode>
 9 | )
10 | 


--------------------------------------------------------------------------------
/generators/plopfile.cjs:
--------------------------------------------------------------------------------
1 | const componentGenerator = require('./component.generator.cjs')
2 | const hookGenerator = require('./hook.generator.cjs')
3 | 
4 | module.exports = function generator(plop) {
5 |   plop.setGenerator('component', componentGenerator)
6 |   plop.setGenerator('hook', hookGenerator)
7 | }
8 | 


--------------------------------------------------------------------------------
/generators/templates/component/component.jsx.hbs:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types'
 2 | 
 3 | function {{pascalCase name}}(props) {
 4 |   const { children } = props
 5 | 
 6 |   return <div>{children}</div>
 7 | }
 8 | 
 9 | {{pascalCase name}}.propTypes = {
10 |   children: PropTypes.node
11 | }
12 | 
13 | export default {{pascalCase name}}
14 | 


--------------------------------------------------------------------------------
/generators/templates/hook/test.js.hbs:
--------------------------------------------------------------------------------
 1 | import { renderHook } from '@testing-library/react'
 2 | import {{camelCase name}} from './{{camelCase name}}'
 3 | 
 4 | describe('{{camelCase name}}', () => {
 5 |   it('...', () => {
 6 |     const { result } = renderHook(() => {{camelCase name}}())
 7 | 
 8 |     expect(result.current).toBe(true)
 9 |   })
10 | })
11 | 


--------------------------------------------------------------------------------
/jest.config.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   testEnvironment: 'jsdom',
 3 |   testPathIgnorePatterns: ['/dist/', '/node_modules/', '/public/'],
 4 |   collectCoverageFrom: ['src/**/*.js(x)?', '!src/**/index.js', '!src/main.jsx'],
 5 |   modulePaths: ['<rootDir>/src/'],
 6 |   setupFilesAfterEnv: ['<rootDir>/.jest/setup.js'],
 7 |   transform: {
 8 |     '^.+\\.jsx?$': 'babel-jest'
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | # jest
27 | coverage
28 | 


--------------------------------------------------------------------------------
/generators/templates/component/test.jsx.hbs:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/react'
 2 | import {{pascalCase name}} from './{{pascalCase name}}'
 3 | 
 4 | describe('{{pascalCase name}}', () => {
 5 |   it('...', () => {
 6 |     render(<{{pascalCase name}}>{{pascalCase name}}</{{pascalCase name}}>)
 7 | 
 8 |     expect(screen.getByText('{{pascalCase name}}')).toBeInTheDocument()
 9 |   })
10 | })
11 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>React JavaScript boilerplate</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "es2021": true,
 5 |     "node": true,
 6 |     "jest": true
 7 |   },
 8 |   "settings": {
 9 |     "react": {
10 |       "version": "detect"
11 |     }
12 |   },
13 |   "extends": [
14 |     "eslint:recommended",
15 |     "plugin:react/recommended",
16 |     "plugin:prettier/recommended"
17 |   ],
18 |   "overrides": [
19 |   ],
20 |   "parserOptions": {
21 |     "ecmaVersion": "latest",
22 |     "sourceType": "module"
23 |   },
24 |   "plugins": [
25 |     "react",
26 |     "react-hooks"
27 |   ],
28 |   "rules": {
29 |     "react-hooks/rules-of-hooks": "error",
30 |     "react-hooks/exhaustive-deps": "warn",
31 |     "react/react-in-jsx-scope": "off"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/generators/hook.generator.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   description: 'application hook',
 3 |   prompts: [
 4 |     {
 5 |       type: 'input',
 6 |       name: 'name',
 7 |       message:
 8 |         'Qual o nome do hook? Se o hook possuir mais de uma palavra insira um espaço entre elas.'
 9 |     }
10 |   ],
11 |   actions: [
12 |     {
13 |       type: 'add',
14 |       path: '../src/hooks/{{camelCase name}}/index.js',
15 |       templateFile: './templates/hook/index.js.hbs'
16 |     },
17 |     {
18 |       type: 'add',
19 |       path: '../src/hooks/{{camelCase name}}/{{camelCase name}}.js',
20 |       templateFile: './templates/hook/hook.js.hbs'
21 |     },
22 |     {
23 |       type: 'add',
24 |       path: '../src/hooks/{{camelCase name}}/{{camelCase name}}.test.js',
25 |       templateFile: './templates/hook/test.js.hbs'
26 |     }
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/generators/component.generator.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   description: 'application component',
 3 |   prompts: [
 4 |     {
 5 |       type: 'input',
 6 |       name: 'name',
 7 |       message:
 8 |         'Qual o nome do componente? Se o componente possuir mais de uma palavra insira um espaço entre elas.'
 9 |     }
10 |   ],
11 |   actions: [
12 |     {
13 |       type: 'add',
14 |       path: '../src/components/{{pascalCase name}}/index.js',
15 |       templateFile: './templates/component/index.js.hbs'
16 |     },
17 |     {
18 |       type: 'add',
19 |       path: '../src/components/{{pascalCase name}}/{{pascalCase name}}.jsx',
20 |       templateFile: './templates/component/component.jsx.hbs'
21 |     },
22 |     {
23 |       type: 'add',
24 |       path: '../src/components/{{pascalCase name}}/{{pascalCase name}}.test.jsx',
25 |       templateFile: './templates/component/test.jsx.hbs'
26 |     }
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-javascript-boilerplate",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview",
10 |     "lint": "eslint 'src/**/*.{js,jsx}'",
11 |     "lint:fix": "npm run lint -- --fix",
12 |     "test": "jest",
13 |     "test:watch": "jest --watch",
14 |     "coverage-test": "jest --coverage",
15 |     "coverage-test:watch": "jest --coverage --watch",
16 |     "generate:component": "plop component --plopfile ./generators/plopfile.cjs",
17 |     "generate:hook": "plop hook --plopfile ./generators/plopfile.cjs"
18 |   },
19 |   "dependencies": {
20 |     "prop-types": "^15.8.1",
21 |     "react": "^18.2.0",
22 |     "react-dom": "^18.2.0"
23 |   },
24 |   "devDependencies": {
25 |     "@babel/preset-env": "^7.19.1",
26 |     "@babel/preset-react": "^7.18.6",
27 |     "@testing-library/jest-dom": "^5.16.5",
28 |     "@testing-library/react": "^13.4.0",
29 |     "@types/react": "^18.0.17",
30 |     "@types/react-dom": "^18.0.6",
31 |     "@vitejs/plugin-react": "^2.1.0",
32 |     "eslint": "^8.23.1",
33 |     "eslint-config-prettier": "^8.5.0",
34 |     "eslint-plugin-prettier": "^4.2.1",
35 |     "eslint-plugin-react": "^7.31.8",
36 |     "eslint-plugin-react-hooks": "^4.6.0",
37 |     "jest": "^29.0.3",
38 |     "jest-environment-jsdom": "^29.0.3",
39 |     "plop": "^3.1.1",
40 |     "prettier": "^2.7.1",
41 |     "vite": "^3.1.0"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React JavaScript Boilerplate
 2 | 
 3 | ## O que foi utilizado?
 4 | 
 5 | - [Vite](https://vitejs.dev)
 6 | - [EditorConfig](https://editorconfig.org)
 7 | - [ESLint](https://eslint.org)
 8 | - [Prettier](https://prettier.io)
 9 | - [Jest](https://jestjs.io)
10 | - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
11 | - [Plop js](https://plopjs.com)
12 | 
13 | ## Começando
14 | 
15 | Primeiro, execute o servidor em modo de desenvolvimento:
16 | 
17 | ```bash
18 | npm run dev
19 | # or
20 | yarn dev
21 | ```
22 | 
23 | Abra a URL [http://localhost:5173](http://localhost:5173) no seu navegador.
24 | 
25 | ## Scripts
26 | 
27 | - `dev`: inicia a aplicação em modo de desenvolvimento;
28 | - `build`: cria a versão de produção;
29 | - `preview`: inicializa um servidor web estático local que serve os arquivos do diretório `dist` (é uma maneira fácil de verificar se a compilação de produção está funcionando corretamente);
30 | - `lint`: executa o linter em todos os arquivos que estão na regra de configuração;
31 | - `lint:fix`: executa o linter e corrige todos os arquivos que estão na regra de configuração;
32 | - `test`: executa os testes unitários e de integração;
33 | - `test:watch`: executa os testes unitários e de integração em modo escuta;
34 | - `coverage-test`: executa os testes unitários e de integração e gera um relatório de cobertura de código;
35 | - `coverage-test:watch`: executa os testes unitários e de integração e gera um relatório de cobertura de código em modo escuta;
36 | - `generate:component`: cria estrutura básica de um componente;
37 | - `generate:hook`: cria estrutura básica de um hook.
38 | 
39 | 


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