diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..c3fcc74 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 Dalton Menezes + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md index 7288879..7883808 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,55 @@ -# cra-template-good-start -A template for create react app with typescript, minimal files and estlin/prettier configured +

react logo

+ +

cra-template-good-start

+

A good starting point template to init a configured React app with typescript, eslint, prettier and more 💅

+ +

+ + + patreon url + + + + + npm version + + + + + npm version + +

+ +## Table of Contents +- [Usage](#usage) +- [Features](#features) +- [License](#license) + +## Usage + +To use this template, add `--template cra-template-good-start` when creating a new app with **create-react-app**. + +For example: +```bash +npx create-react-app my-app --template cra-template-good-start + +# OR + +yarn create react-app my-app --template cra-template-good-start +``` +Then: +```bash +cd my-app +``` + +## Features +- ⚡ typescript +- ⚡ eslint +- ⚡ prettier +- ⚡ editor config +- ⚡ sass +- ⚡ css reset +- ⚡ absolute imports + +## License +[MIT © Dalton Menezes](https://github.com/daltonmenezes/cra-template-good-start/blob/main/LICENSE) diff --git a/package.json b/package.json new file mode 100644 index 0000000..f300479 --- /dev/null +++ b/package.json @@ -0,0 +1,30 @@ +{ + "name": "cra-template-good-start", + "version": "1.0.0", + "keywords": [ + "react", + "create-react-app", + "template", + "typescript", + "eslint", + "prettier", + "editorconfig", + "sass" + ], + "description": "A good starting point template to init a configured React app with typescript, eslint, prettier and more for Create React App", + "repository": { + "type": "git", + "url": "https://github.com/daltonmenezes/cra-template-good-start.git" + }, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "bugs": { + "url": "https://github.com/daltonmenezes/cra-template-good-start/issues" + }, + "files": [ + "template", + "template.json" + ] +} \ No newline at end of file diff --git a/template.json b/template.json new file mode 100644 index 0000000..d3b0fb4 --- /dev/null +++ b/template.json @@ -0,0 +1,30 @@ +{ + "package": { + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "eject": "react-scripts eject" + }, + "dependencies": { + "@types/node": "^12.0.0", + "@types/react": "^17.0.0", + "@types/react-dom": "^17.0.0", + "typescript": "^4.1.2" + }, + "devDependencies": { + "prettier": "^2.2.1", + "eslint-config-prettier": "^7.2.0", + "eslint-plugin-prettier": "^3.3.1", + "node-sass": "^5.0.0" + }, + "eslintConfig": { + "extends": ["react-app", "prettier/@typescript-eslint", "plugin:prettier/recommended"], + "rules": { + "prettier/prettier": ["error", {}, { "usePrettierrc": true }], + "react/prop-types": "off", + "react-hooks/exhaustive-deps": "off", + "@typescript-eslint/no-empty-interface": "off" + } + } + } +} \ No newline at end of file diff --git a/template/.editorconfig b/template/.editorconfig new file mode 100644 index 0000000..4a7ea30 --- /dev/null +++ b/template/.editorconfig @@ -0,0 +1,12 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/template/.prettierrc b/template/.prettierrc new file mode 100644 index 0000000..1bd6133 --- /dev/null +++ b/template/.prettierrc @@ -0,0 +1,7 @@ +{ + "semi": false, + "singleQuote": true, + "tabWidth": 2, + "useTabs": false, + "trailingComma": "es5" +} diff --git a/template/README.md b/template/README.md new file mode 100644 index 0000000..e982274 --- /dev/null +++ b/template/README.md @@ -0,0 +1,3 @@ +# Your awesome App + +> This is your good starting point to creating something awesome! Let's do this! ✨ diff --git a/template/gitignore b/template/gitignore new file mode 100644 index 0000000..00ec607 --- /dev/null +++ b/template/gitignore @@ -0,0 +1,24 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local +.eslintcache + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/template/public/index.html b/template/public/index.html new file mode 100644 index 0000000..12043e5 --- /dev/null +++ b/template/public/index.html @@ -0,0 +1,12 @@ + + + + + + Your awesome app + + + +
+ + diff --git a/template/src/App.tsx b/template/src/App.tsx new file mode 100644 index 0000000..690a43d --- /dev/null +++ b/template/src/App.tsx @@ -0,0 +1,11 @@ +import Hello from 'components/Hello' + +function App() { + return ( +
+ +
+ ) +} + +export default App diff --git a/template/src/components/Hello/index.tsx b/template/src/components/Hello/index.tsx new file mode 100644 index 0000000..3ceec21 --- /dev/null +++ b/template/src/components/Hello/index.tsx @@ -0,0 +1,15 @@ +import styles from './styles.module.sass' + +function Hello() { + return ( +
+

Hi, there!

+

+ This is your good starting point to creating something awesome! Let's do + this! ✨ +

+
+ ) +} + +export default Hello diff --git a/template/src/components/Hello/styles.module.sass b/template/src/components/Hello/styles.module.sass new file mode 100644 index 0000000..550d3b5 --- /dev/null +++ b/template/src/components/Hello/styles.module.sass @@ -0,0 +1,7 @@ +@import 'styles/colors' + +.text + color: $light-blue + + h1 + font-size: 3rem diff --git a/template/src/index.tsx b/template/src/index.tsx new file mode 100644 index 0000000..3034dff --- /dev/null +++ b/template/src/index.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import ReactDOM from 'react-dom' +import App from './App' + +import './styles/global.styles.sass' + +ReactDOM.render( + + + , + document.getElementById('root') +) diff --git a/template/src/styles/colors.sass b/template/src/styles/colors.sass new file mode 100644 index 0000000..eb82e6f --- /dev/null +++ b/template/src/styles/colors.sass @@ -0,0 +1,2 @@ +$light-blue: #0084ff +$black: #131313 diff --git a/template/src/styles/global.styles.sass b/template/src/styles/global.styles.sass new file mode 100644 index 0000000..ed2d31b --- /dev/null +++ b/template/src/styles/global.styles.sass @@ -0,0 +1,21 @@ +@import 'colors' + +* + margin: 0 + padding: 0 + outline: 0 + border: 0 + text-decoration: none + box-sizing: border-box + +html, body, #root, .containers + width: 100vw + height: 100vh + +.containers + display: flex + flex-flow: column wrap + align-items: center + justify-content: center + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif + background-color: $black diff --git a/template/tsconfig.json b/template/tsconfig.json new file mode 100644 index 0000000..860b1d5 --- /dev/null +++ b/template/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "baseUrl": "src" + }, + "include": [ + "src" + ] +}