├── .babelrc ├── .eslintrc.json ├── .github └── workflows │ └── linters.yml ├── .gitignore ├── .stylelintrc.json ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── index.html ├── manifest.json └── robots.txt └── src ├── components ├── Header.jsx ├── InputTaskManager.jsx ├── TaskManagerApp.jsx ├── TaskManagerItem.jsx ├── TaskManagerList.jsx └── TaskManagerLogic.jsx ├── index.js ├── reportWebVitals.js ├── styles ├── base │ └── normalize.css └── index.scss └── tests └── setupTests.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-react"], 3 | "plugins": ["@babel/plugin-syntax-jsx"] 4 | } 5 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "@babel/eslint-parser", 8 | "parserOptions": { 9 | "ecmaFeatures": { 10 | "jsx": true 11 | }, 12 | "ecmaVersion": 2018, 13 | "sourceType": "module" 14 | }, 15 | "extends": [ 16 | "airbnb", 17 | "plugin:react/recommended", 18 | "plugin:react-hooks/recommended" 19 | ], 20 | "plugins": ["react"], 21 | "rules": { 22 | "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }], 23 | "react/react-in-jsx-scope": "off", 24 | "import/no-unresolved": "off", 25 | "no-shadow": "off" 26 | }, 27 | "overrides": [ 28 | { 29 | // feel free to replace with your preferred file pattern - eg. 'src/**/*Slice.js' or 'redux/**/*Slice.js' 30 | "files": ["src/**/*Slice.js"], 31 | // avoid state param assignment 32 | "rules": { "no-param-reassign": ["error", { "props": false }] } 33 | } 34 | ], 35 | "ignorePatterns": ["dist/", "build/"] 36 | } 37 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | eslint: 10 | name: ESLint 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v3 14 | - uses: actions/setup-node@v3 15 | with: 16 | node-version: "18.x" 17 | - name: Setup ESLint 18 | run: | 19 | npm install --save-dev eslint@7.x eslint-config-airbnb@18.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@4.x @babel/eslint-parser@7.x @babel/core@7.x @babel/plugin-syntax-jsx@7.x @babel/preset-env@7.x @babel/preset-react@7.x 20 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.eslintrc.json 21 | [ -f .babelrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.babelrc 22 | - name: ESLint Report 23 | run: npx eslint "**/*.{js,jsx}" 24 | stylelint: 25 | name: Stylelint 26 | runs-on: ubuntu-22.04 27 | steps: 28 | - uses: actions/checkout@v3 29 | - uses: actions/setup-node@v3 30 | with: 31 | node-version: "18.x" 32 | - name: Setup Stylelint 33 | run: | 34 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 35 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.stylelintrc.json 36 | - name: Stylelint Report 37 | run: npx stylelint "**/*.{css,scss}" 38 | nodechecker: 39 | name: node_modules checker 40 | runs-on: ubuntu-22.04 41 | steps: 42 | - uses: actions/checkout@v3 43 | - name: Check node_modules existence 44 | run: | 45 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 3 | 4 | # dependencies 5 | /node_modules 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": [ 6 | true, 7 | { 8 | "ignoreAtRules": [ 9 | "tailwind", 10 | "apply", 11 | "variants", 12 | "responsive", 13 | "screen" 14 | ] 15 | } 16 | ], 17 | "scss/at-rule-no-unknown": [ 18 | true, 19 | { 20 | "ignoreAtRules": [ 21 | "tailwind", 22 | "apply", 23 | "variants", 24 | "responsive", 25 | "screen" 26 | ] 27 | } 28 | ], 29 | "csstree/validator": true 30 | }, 31 | "ignoreFiles": [ 32 | "build/**", 33 | "dist/**", 34 | "**/reset*.css", 35 | "**/bootstrap*.css", 36 | "**/*.js", 37 | "**/*.jsx" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Arthur Emanuel G. Iturres 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

⚛️ ✍️ ⚛️

5 | 6 |

React Task Manager

7 |
8 | 9 | --- 10 | 11 | 12 | 13 | # 📗 Table of Contents 14 | 15 | - [📖 About the Project](#about-project) 16 | - [🛠 Built With](#built-with) 17 | - [Tech Stack](#tech-stack) 18 | - [Key Features](#key-features) 19 | - [🚀 Live Demo](#live-demo) 20 | - [💻 Getting Started](#getting-started) 21 | - [Setup](#setup) 22 | - [Prerequisites](#prerequisites) 23 | - [Install](#install) 24 | - [Usage](#usage) 25 | - [Run tests](#run-tests) 26 | - [Deployment](#deployment) 27 | - [👥 Authors](#authors) 28 | - [🔭 Future Features](#future-features) 29 | - [🤝 Contributing](#contributing) 30 | - [⭐️ Show your support](#support) 31 | - [🙏 Acknowledgements](#acknowledgements) 32 | - [📝 License](#license) 33 | 34 | --- 35 | 36 | 37 | 38 | # 📖 React Task Manager 39 | 40 | **React Task Manager** is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. 41 | 42 | --- 43 | 44 | #### Learning objectives 45 | 46 | - Use React components. 47 | - Use React props. 48 | - Use React state. 49 | - Use React hooks. 50 | - Use JavaScript events. 51 | - Use React life cycle methods. 52 | - Understand the mechanism of lifting state up. 53 | 54 | --- 55 | 56 | ## 🛠 Built With 57 | 58 | ### Tech Stack 59 | 60 | 78 | 79 | 80 | 81 | ### Key Features 82 | 83 | - **SPA app** 84 | - **Built with React.js** 85 | 86 |

(back to top)

87 | 88 | --- 89 | 90 | 91 | 92 | ## 💻 Getting Started 93 | 94 | To get a local copy up and running, follow these steps. 95 | 96 | ### Prerequisites 97 | 98 | In order to run this project you need: 99 | 100 | ### Setup 101 | 102 | Clone this repository to your desired folder: 103 | 104 | Example commands: 105 | 106 | ```bash 107 | cd my-folder 108 | git clone git@github.com:ITurres/react-task-manager.git 109 | ``` 110 | 111 | ### Install 112 | 113 | Install this project's dependencies with: 114 | 115 | - npm install 116 | 117 | ### Usage 118 | 119 | To run the project, execute the following command: 120 | 121 | ```bash 122 | npm run start 123 | ``` 124 | 125 | Runs the app in the development mode.\ 126 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 127 | 128 | The page will reload when you make changes.\ 129 | You may also see any lint errors in the console. 130 | 131 | ### Run tests 132 | 133 | ```bash 134 | npm test 135 | ``` 136 | 137 | Launches the test runner in the interactive watch mode.\ 138 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 139 | 140 |

(back to top)

141 | 142 | --- 143 | 144 | 145 | 146 | ## 👥 Authors 147 | 148 | 👤 **Author1** 149 | 150 | - GitHub: [@ITurres](https://github.com/ITurres) 151 | - Twitter: [@Arthur_ITurres](https://twitter.com/ArthurIturres) 152 | - LinkedIn: [Arthur Emanuel G. Iturres](https://www.linkedin.com/in/arturoemanuelguerraiturres/) 153 | 154 |

(back to top)

155 | 156 | --- 157 | 158 | 159 | 160 | ## 🔭 Future Features 161 | 162 | - [ ] **more pages** 163 | - [ ] **Responsive design** 164 | - [ ] **Bootstrap** 165 | 166 |

(back to top)

167 | 168 | --- 169 | 170 | 171 | 172 | ## 🤝 Contributing 173 | 174 | Contributions, issues, and feature requests are welcome! 175 | 176 | Feel free to check the [issues page](https://github.com/ITurres/react-task-manager/issues). 177 | 178 |

(back to top)

179 | 180 | --- 181 | 182 | 183 | 184 | ## ⭐️ Show your support 185 | 186 | Give a ⭐ if you liked this project! 187 | 188 |

(back to top)

189 | 190 | --- 191 | 192 | 193 | 194 | ## 🙏 Acknowledgments 195 | 196 | I thank Microverse for this fantastic opportunity, the Code Reviewers for their advice and time 🏆 197 | 198 |

(back to top)

199 | 200 | --- 201 | 202 | 203 | 204 | ## 📝 License 205 | 206 | This project is [MIT](./LICENSE) licensed. 207 | 208 |

(back to top)

209 | 210 | --- 211 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "math-magicians", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "prop-types": "^15.8.1", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-scripts": "5.0.1", 13 | "sass": "^1.63.6", 14 | "web-vitals": "^2.1.4" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | }, 40 | "devDependencies": { 41 | "@babel/core": "^7.22.5", 42 | "@babel/eslint-parser": "^7.22.5", 43 | "@babel/plugin-syntax-jsx": "^7.22.5", 44 | "@babel/preset-react": "^7.22.5", 45 | "eslint": "^7.32.0", 46 | "eslint-config-airbnb": "^18.2.1", 47 | "eslint-plugin-import": "^2.27.5", 48 | "eslint-plugin-jsx-a11y": "^6.7.1", 49 | "eslint-plugin-react": "^7.32.2", 50 | "eslint-plugin-react-hooks": "^4.6.0", 51 | "stylelint": "^13.13.1", 52 | "stylelint-config-standard": "^21.0.0", 53 | "stylelint-csstree-validator": "^1.9.0", 54 | "stylelint-scss": "^3.21.0" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 18 | React Task Manager 19 | 20 | 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | const Header = () => ( 2 |
3 |

Tasks

4 |

Items will persist in the browser local storage

5 |
6 | ); 7 | export default Header; 8 | -------------------------------------------------------------------------------- /src/components/InputTaskManager.jsx: -------------------------------------------------------------------------------- 1 | const InputTaskManager = () =>
InputTaskManager content
; 2 | 3 | export default InputTaskManager; 4 | -------------------------------------------------------------------------------- /src/components/TaskManagerApp.jsx: -------------------------------------------------------------------------------- 1 | import Header from './Header'; 2 | import TaskManagerLogic from './TaskManagerLogic'; 3 | 4 | const TaskManagerApp = () => ( 5 | <> 6 |
7 | 8 | 9 | ); 10 | export default TaskManagerApp; 11 | -------------------------------------------------------------------------------- /src/components/TaskManagerItem.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | 3 | const TaskManagerItem = ({ task }) =>
  • {task.title}
    • ; 4 | 5 | TaskManagerItem.propTypes = { 6 | itemProp: PropTypes.shape({}).isRequired, 7 | }; 8 | 9 | TaskManagerItem.propTypes = { 10 | task: PropTypes.shape({ 11 | id: PropTypes.number.isRequired, 12 | title: PropTypes.string.isRequired, 13 | completed: PropTypes.bool.isRequired, 14 | }).isRequired, 15 | }; 16 | 17 | export default TaskManagerItem; 18 | -------------------------------------------------------------------------------- /src/components/TaskManagerList.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import TaskManagerItem from './TaskManagerItem'; 3 | 4 | const TaskManagerList = ({ tasks }) => ( 5 | 10 | ); 11 | 12 | TaskManagerList.propTypes = { 13 | tasks: PropTypes.arrayOf( 14 | PropTypes.shape({ 15 | id: PropTypes.number.isRequired, 16 | title: PropTypes.string.isRequired, 17 | completed: PropTypes.bool.isRequired, 18 | }), 19 | ).isRequired, 20 | }; 21 | 22 | export default TaskManagerList; 23 | -------------------------------------------------------------------------------- /src/components/TaskManagerLogic.jsx: -------------------------------------------------------------------------------- 1 | import InputTaskManager from './InputTaskManager'; 2 | import TaskManagerList from './TaskManagerList'; 3 | 4 | const TaskManagerLogic = () => { 5 | const tasks = [ 6 | { 7 | id: 1, 8 | title: 'Setup development environment', 9 | completed: true, 10 | }, 11 | { 12 | id: 2, 13 | title: 'Develop website and add content', 14 | completed: false, 15 | }, 16 | { 17 | id: 3, 18 | title: 'Deploy to live server', 19 | completed: false, 20 | }, 21 | ]; 22 | 23 | return ( 24 |
    25 | 26 | 27 |
    28 | ); 29 | }; 30 | 31 | export default TaskManagerLogic; 32 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './styles/index.scss'; 4 | import TaskManagerApp from './components/TaskManagerApp'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | , 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 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = (onPerfEntry) => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ 4 | getCLS, 5 | getFID, 6 | getFCP, 7 | getLCP, 8 | getTTFB, 9 | }) => { 10 | getCLS(onPerfEntry); 11 | getFID(onPerfEntry); 12 | getFCP(onPerfEntry); 13 | getLCP(onPerfEntry); 14 | getTTFB(onPerfEntry); 15 | }); 16 | } 17 | }; 18 | 19 | export default reportWebVitals; 20 | -------------------------------------------------------------------------------- /src/styles/base/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, sans-serif; 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, sans-serif; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { 178 | /* 1 */ 179 | overflow: visible; 180 | } 181 | 182 | /** 183 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 184 | * 1. Remove the inheritance of text transform in Firefox. 185 | */ 186 | 187 | button, 188 | select { 189 | /* 1 */ 190 | text-transform: none; 191 | } 192 | 193 | /** 194 | * Correct the inability to style clickable types in iOS and Safari. 195 | */ 196 | 197 | button, 198 | [type='button'], 199 | [type='reset'], 200 | [type='submit'] { 201 | -webkit-appearance: button; 202 | } 203 | 204 | /** 205 | * Remove the inner border and padding in Firefox. 206 | */ 207 | 208 | button::-moz-focus-inner, 209 | [type='button']::-moz-focus-inner, 210 | [type='reset']::-moz-focus-inner, 211 | [type='submit']::-moz-focus-inner { 212 | border-style: none; 213 | padding: 0; 214 | } 215 | 216 | /** 217 | * Restore the focus styles unset by the previous rule. 218 | */ 219 | 220 | button:-moz-focusring, 221 | [type='button']:-moz-focusring, 222 | [type='reset']:-moz-focusring, 223 | [type='submit']:-moz-focusring { 224 | outline: 1px dotted ButtonText; 225 | } 226 | 227 | /** 228 | * Correct the padding in Firefox. 229 | */ 230 | 231 | fieldset { 232 | padding: 0.35em 0.75em 0.625em; 233 | } 234 | 235 | /** 236 | * 1. Correct the text wrapping in Edge and IE. 237 | * 2. Correct the color inheritance from `fieldset` elements in IE. 238 | * 3. Remove the padding so developers are not caught out when they zero out 239 | * `fieldset` elements in all browsers. 240 | */ 241 | 242 | legend { 243 | box-sizing: border-box; /* 1 */ 244 | color: inherit; /* 2 */ 245 | display: table; /* 1 */ 246 | max-width: 100%; /* 1 */ 247 | padding: 0; /* 3 */ 248 | white-space: normal; /* 1 */ 249 | } 250 | 251 | /** 252 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 253 | */ 254 | 255 | progress { 256 | vertical-align: baseline; 257 | } 258 | 259 | /** 260 | * Remove the default vertical scrollbar in IE 10+. 261 | */ 262 | 263 | textarea { 264 | overflow: auto; 265 | } 266 | 267 | /** 268 | * 1. Add the correct box sizing in IE 10. 269 | * 2. Remove the padding in IE 10. 270 | */ 271 | 272 | [type='checkbox'], 273 | [type='radio'] { 274 | box-sizing: border-box; /* 1 */ 275 | padding: 0; /* 2 */ 276 | } 277 | 278 | /** 279 | * Correct the cursor style of increment and decrement buttons in Chrome. 280 | */ 281 | 282 | [type='number']::-webkit-inner-spin-button, 283 | [type='number']::-webkit-outer-spin-button { 284 | height: auto; 285 | } 286 | 287 | /** 288 | * 1. Correct the odd appearance in Chrome and Safari. 289 | * 2. Correct the outline style in Safari. 290 | */ 291 | 292 | [type='search'] { 293 | -webkit-appearance: textfield; /* 1 */ 294 | outline-offset: -2px; /* 2 */ 295 | } 296 | 297 | /** 298 | * Remove the inner padding in Chrome and Safari on macOS. 299 | */ 300 | 301 | [type='search']::-webkit-search-decoration { 302 | -webkit-appearance: none; 303 | } 304 | 305 | /** 306 | * 1. Correct the inability to style clickable types in iOS and Safari. 307 | * 2. Change font properties to `inherit` in Safari. 308 | */ 309 | 310 | ::-webkit-file-upload-button { 311 | -webkit-appearance: button; /* 1 */ 312 | font: inherit; /* 2 */ 313 | } 314 | 315 | /* Interactive 316 | ========================================================================== */ 317 | 318 | /* 319 | * Add the correct display in Edge, IE 10+, and Firefox. 320 | */ 321 | 322 | details { 323 | display: block; 324 | } 325 | 326 | /* 327 | * Add the correct display in all browsers. 328 | */ 329 | 330 | summary { 331 | display: list-item; 332 | } 333 | 334 | /* Misc 335 | ========================================================================== */ 336 | 337 | /** 338 | * Add the correct display in IE 10+. 339 | */ 340 | 341 | template { 342 | display: none; 343 | } 344 | 345 | /** 346 | * Add the correct display in IE 10. 347 | */ 348 | 349 | [hidden] { 350 | display: none; 351 | } 352 | -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | color: #000; 4 | } 5 | -------------------------------------------------------------------------------- /src/tests/setupTests.js: -------------------------------------------------------------------------------- 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 | --------------------------------------------------------------------------------