├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── prettier.config.js ├── public ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.tsx ├── index.tsx ├── pages │ └── Home │ │ ├── index.tsx │ │ └── styles.ts ├── react-app-env.d.ts ├── reportWebVitals.ts ├── setupTests.ts └── styles │ ├── GlobalStyles.ts │ └── theme │ ├── defaultTheme.ts │ └── styled.d.ts ├── tsconfig.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: https://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = false 12 | insert_final_newline = false 13 | end_of_line = lf -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /*.js 2 | node_modules 3 | dist 4 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": [ 7 | "airbnb", 8 | "plugin:@typescript-eslint/recommended", 9 | "plugin:prettier/recommended", 10 | "plugin:react/recommended", 11 | "prettier/@typescript-eslint" 12 | ], 13 | "parser": "@typescript-eslint/parser", 14 | "parserOptions": { 15 | "ecmaFeatures": { 16 | "jsx": true 17 | }, 18 | "ecmaVersion": 12, 19 | "sourceType": "module" 20 | }, 21 | "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"], 22 | "rules": { 23 | "@typescript-eslint/explicit-module-boundary-types": "off", 24 | "@typescript-eslint/no-use-before-define": "off", 25 | "camelcase": "off", 26 | "consistent-return": "off", 27 | "no-param-reassign": "off", 28 | "no-use-before-define": "off", 29 | "prettier/prettier": "error", 30 | "react-hooks/exhaustive-deps": "warn", 31 | "react-hooks/rules-of-hooks": "error", 32 | "react/jsx-props-no-spreading": "off", 33 | "react/prop-types": "off", 34 | "react/require-default-props": "off", 35 | "react/jsx-filename-extension": [ 36 | 1, 37 | { 38 | "extensions": [".tsx"] 39 | } 40 | ], 41 | "import/prefer-default-export": "off", 42 | "import/extensions": [ 43 | "error", 44 | "ignorePackages", 45 | { 46 | "ts": "never", 47 | "tsx": "never" 48 | } 49 | ] 50 | }, 51 | "settings": { 52 | "import/resolver": { 53 | "typescript": {} 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /.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 | #ESLint 9 | .eslintcache 10 | 11 | # testing 12 | /coverage 13 | 14 | # production 15 | /build 16 | 17 | # misc 18 | .DS_Store 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 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Lucas Reinaldo de Melo 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 |

Welcome and feel free to use!

2 | 3 | ## 💻 Project 4 | 5 | Well, since I have to create a lot of new projects with pretty much the same configs, I decided to save a bit of my time. 6 | 7 | If you are starting and don't know how to create a project on your own and config eslint, prettier, editorconfig I highly recommend you to give a try. But don't forget, look it up to know what's going on here. 😉 8 | 9 | The project was initialised using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html). 10 | 11 | ## 🤔 Benefits of using Prettier and ESLint 12 | 13 | If you have set up Prettier, you can configure it to format your file on saving it. That way, you never need to worry about your code formatting anymore. Since Prettier is highly opinionated, you can do only minor configurations. 14 | 15 | ## 🚀 Technologies 16 | 17 | The project was mainly developed with the following technologies: 18 | 19 | ``` 20 | "dependencies": { 21 | "normalize.css": "^8.0.1", 22 | "react": "^17.0.1", 23 | "react-icons": "^4.1.0", 24 | "styled-components": "^5.2.1", 25 | "typescript": "^4.0.3", 26 | }, 27 | 28 | "devDependencies": { 29 | "@types/styled-components": "^5.1.7", 30 | "@typescript-eslint/eslint-plugin": "^4.10.0", 31 | "@typescript-eslint/parser": "^4.10.0", 32 | "eslint": "^7.15.0", 33 | "eslint-config-airbnb": "^18.2.1", 34 | "eslint-config-prettier": "^7.0.0", 35 | "eslint-import-resolver-typescript": "^2.3.0", 36 | "eslint-plugin-import": "^2.22.1", 37 | "eslint-plugin-jsx-a11y": "^6.4.1", 38 | "eslint-plugin-prettier": "^3.3.0", 39 | "eslint-plugin-react": "^7.21.5", 40 | "eslint-plugin-react-hooks": "^4", 41 | "prettier": "^2.2.1" 42 | } 43 | 44 | VS Code with EditorConfig and ESLint 45 | ``` 46 | 47 | ## 🗂 Folders 48 | 49 | ``` 50 | ├── public 51 | │ ├── ... 52 | ├── src 53 | │ ├── App.tsx 54 | │ ├── components 55 | │ ├── index.tsx 56 | │ ├── pages 57 | │ │ └── Home 58 | │ │ ├── index.tsx 59 | │ │ └── styles.ts 60 | │ ├── react-app-env.d.ts 61 | │ ├── reportWebVitals.ts 62 | │ ├── setupTests.ts 63 | │ └── styles 64 | │ ├── GlobalStyles.ts 65 | │ └── theme 66 | │ ├── defaultTheme.ts 67 | │ └── styled.d.ts 68 | ├── .editorconfig 69 | ├── .eslintcache 70 | ├── .eslintignore 71 | ├── .eslintrc.json 72 | ├── .gitignore 73 | ├── LICENSE 74 | ├── README.md 75 | ├── package.json 76 | ├── prettier.config.js 77 | ├── tsconfig.json 78 | └── yarn.lock 79 | ``` 80 | 81 | ## 🧩 You will need 82 | 83 | - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode). 84 | - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint). 85 | - [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig). 86 | 87 | ## 📚 Creating a repository from a template 88 | 89 | - On GitHub, navigate to the main page of the repository. 90 | - Above the file list, click Use this template. 91 | - Use the Owner drop-down menu, and select the account you want to own the repository. 92 | - Type a name for your repository, and an optional description. 93 | - Choose a repository visibility. 94 | 95 | ## 📚 How to clone and use 96 | 97 | To clone and run this application, we will need NodeJS + Yarn (or NPM) installed on computer. 98 | 99 | After this clone the repository, from our command line: 100 | 101 | ``` 102 | # Clone this repository 103 | $ git clone https://github.com/LucasReinaldo/react-typescript-eslint-prettier-boilerplate.git 104 | 105 | # Go into the repository 106 | $ cd react-typescript-eslint-prettier-boilerplate 107 | 108 | # Install dependencies 109 | $ yarn install 110 | 111 | # Run the app 112 | $ yarn start 113 | ``` 114 | 115 | ## 🧠 Need an upgrade? 116 | 117 | Check it out: [Yarn Upgrade](https://classic.yarnpkg.com/en/docs/cli/upgrade/). 118 | 119 | Upgrades packages to their latest version based on the specified range. 120 | 121 | ``` 122 | $ yarn upgrade 123 | ``` 124 | 125 | ## 📖 License 126 | 127 | This project is under MIT license [LICENSE](LICENSE.md) to know more. 128 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-typescript-eslint-prettier-boilerplate", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "@types/jest": "^26.0.15", 10 | "@types/node": "^12.0.0", 11 | "@types/react": "^16.9.53", 12 | "@types/react-dom": "^16.9.8", 13 | "normalize.css": "^8.0.1", 14 | "react": "^17.0.1", 15 | "react-dom": "^17.0.1", 16 | "react-icons": "^4.1.0", 17 | "react-scripts": "4.0.1", 18 | "styled-components": "^5.2.1", 19 | "typescript": "^4.0.3", 20 | "web-vitals": "^0.2.4" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": [ 30 | "react-app", 31 | "react-app/jest" 32 | ] 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | }, 46 | "devDependencies": { 47 | "@types/styled-components": "^5.1.7", 48 | "@typescript-eslint/eslint-plugin": "^4.10.0", 49 | "@typescript-eslint/parser": "^4.10.0", 50 | "eslint": "^7.15.0", 51 | "eslint-config-airbnb": "^18.2.1", 52 | "eslint-config-prettier": "^7.0.0", 53 | "eslint-import-resolver-typescript": "^2.3.0", 54 | "eslint-plugin-import": "^2.22.1", 55 | "eslint-plugin-jsx-a11y": "^6.4.1", 56 | "eslint-plugin-prettier": "^3.3.0", 57 | "eslint-plugin-react": "^7.21.5", 58 | "eslint-plugin-react-hooks": "^4", 59 | "prettier": "^2.2.1" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | singleQuote: true, 3 | trailingComma: 'all', 4 | }; 5 | -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucasReinaldo/react-typescript-eslint-prettier-boilerplate/6ef14509fd7d7a5c66bd2e7264ff5577f9b4ecdb/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucasReinaldo/react-typescript-eslint-prettier-boilerplate/6ef14509fd7d7a5c66bd2e7264ff5577f9b4ecdb/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucasReinaldo/react-typescript-eslint-prettier-boilerplate/6ef14509fd7d7a5c66bd2e7264ff5577f9b4ecdb/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucasReinaldo/react-typescript-eslint-prettier-boilerplate/6ef14509fd7d7a5c66bd2e7264ff5577f9b4ecdb/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Boilerpalte React App 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucasReinaldo/react-typescript-eslint-prettier-boilerplate/6ef14509fd7d7a5c66bd2e7264ff5577f9b4ecdb/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucasReinaldo/react-typescript-eslint-prettier-boilerplate/6ef14509fd7d7a5c66bd2e7264ff5577f9b4ecdb/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Boilerpalte React App", 3 | "name": "Boilerpalte 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/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { ThemeProvider } from 'styled-components'; 4 | import defaultTheme from './styles/theme/defaultTheme'; 5 | import GlobalStyles from './styles/GlobalStyles'; 6 | import Home from './pages/Home'; 7 | 8 | const App = () => { 9 | return ( 10 | <> 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default App; 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 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root'), 11 | ); 12 | 13 | // If you want to start measuring performance in your app, pass a function 14 | // to log results (for example: reportWebVitals(console.log)) 15 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 16 | reportWebVitals(); 17 | -------------------------------------------------------------------------------- /src/pages/Home/index.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-unescaped-entities */ 2 | import React from 'react'; 3 | import { GiSpiderMask } from 'react-icons/gi'; 4 | 5 | import { Container, Section, Description, Warning, Link } from './styles'; 6 | 7 | const Home = () => { 8 | return ( 9 | 10 |
11 | 12 | "With great power there must also come great responsibility" 13 | 14 |

or simply

15 | "With great power comes great responsibility" 16 |

or simply

17 | 18 | "Don't forget my star and follow me on Github/LucasReinaldo" 19 | 20 |
21 | 22 | 23 | TypeScript + React: Why I don't use React.FC 24 | 25 | 26 | ); 27 | }; 28 | 29 | export default Home; 30 | -------------------------------------------------------------------------------- /src/pages/Home/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | 10 | > svg { 11 | margin: 4rem; 12 | transition: all 0.2s ease; 13 | 14 | &:hover { 15 | color: tomato; 16 | } 17 | } 18 | `; 19 | 20 | export const Section = styled.div` 21 | display: flex; 22 | flex-direction: column; 23 | align-items: center; 24 | `; 25 | 26 | export const Description = styled.h2``; 27 | 28 | export const Warning = styled.h4``; 29 | 30 | export const Link = styled.a` 31 | font-size: 24px; 32 | transition: all 0.2s ease; 33 | font-weight: 500; 34 | margin-top: 8rem; 35 | 36 | &:hover { 37 | color: #91baf8; 38 | } 39 | `; 40 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/styles/GlobalStyles.ts: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | import 'normalize.css/normalize.css'; 3 | 4 | interface ITheme { 5 | theme: { 6 | dark: string; 7 | }; 8 | } 9 | 10 | export default createGlobalStyle` 11 | :root { 12 | /* UI Colors */ 13 | --primary-color: #fff; 14 | --secondary-color: #000; 15 | 16 | --background-color: #000; 17 | } 18 | 19 | * { 20 | margin: 0; 21 | padding: 0; 22 | outline: 0; 23 | box-sizing: border-box; 24 | } 25 | 26 | html { 27 | font-size: 62.5%; 28 | scroll-behavior: smooth; 29 | /* BETTER FONT SMOOTHING - https://gist.github.com/hsleonis/55712b0eafc9b25f1944 */ 30 | font-variant-ligatures: none; 31 | -webkit-font-variant-ligatures: none; 32 | text-rendering: optimizeLegibility; 33 | -moz-osx-font-smoothing: grayscale; 34 | font-smooth: antialiased; 35 | -webkit-font-smoothing: antialiased; 36 | text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px; 37 | } 38 | 39 | body { 40 | background: ${(props) => props.theme.dark}; 41 | color: var(--primary-color); 42 | line-height: 1.5; 43 | height: 100vh; 44 | margin: auto; 45 | overflow: initial; 46 | width: 100vw; 47 | } 48 | 49 | body, input, textarea, button { 50 | font: 1.6rem 'Montserrat', sans-serif; 51 | } 52 | 53 | h1, h2, h3, h4, h5, h6, strong { 54 | font-family: 'Lato', sans-serif; 55 | line-height: 1.25; 56 | margin: 16px 0; 57 | text-transform: capitalize; 58 | } 59 | 60 | /* Common base styles for the site */ 61 | figure, img, svg, video { 62 | max-width: 100%; 63 | } 64 | 65 | figure { 66 | width: auto !important; 67 | } 68 | 69 | video { 70 | display: block; 71 | width: 100%; 72 | } 73 | 74 | h1, .h1 { 75 | margin: 24px 0; 76 | font-size: 3.2rem; 77 | font-weight: 700; 78 | line-height: 1.1; 79 | } 80 | 81 | h2, .h2 { 82 | font-size: 3rem; 83 | } 84 | 85 | h3, .h3 { 86 | font-size: 2.4rem; 87 | } 88 | 89 | h4, .h4 { 90 | font-size: 2rem; 91 | } 92 | 93 | h5, .h5 { 94 | font-size: 1.8rem; 95 | } 96 | 97 | h6, .h6 { 98 | font-size: 1.6rem; 99 | } 100 | 101 | button, a { 102 | font-size: 1.5rem; 103 | cursor: pointer; 104 | } 105 | 106 | a { 107 | color: inherit; 108 | text-decoration: none; 109 | } 110 | 111 | /* Accessibly remove animations: https://gist.githubusercontent.com/bellangerq/6cdfe6e3701b4048c72546960c7c9f66/raw/dc5036697d0da57eff8e0f659106b319102e72a0/a11y-disable-animations.css */ 112 | @media (prefers-reduced-motion: reduce) { 113 | *, 114 | *::before, 115 | *::after { 116 | animation-duration: 0.001ms !important; 117 | animation-iteration-count: 1 !important; 118 | transition-duration: 0.001ms !important; 119 | } 120 | } 121 | 122 | /* https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html */ 123 | .hide:not(:focus):not(:active), 124 | .hidden:not(:focus):not(:active) { 125 | clip: rect(0 0 0 0); 126 | clip-path: inset(50%); 127 | height: 1px; 128 | overflow: hidden; 129 | position: absolute; 130 | white-space: nowrap; 131 | width: 1px; 132 | } 133 | 134 | html { 135 | @media (max-width: 1080px) { 136 | font-size: 60%; 137 | } 138 | @media (max-width: 980px) { 139 | font-size: 48%; 140 | } 141 | } 142 | `; 143 | -------------------------------------------------------------------------------- /src/styles/theme/defaultTheme.ts: -------------------------------------------------------------------------------- 1 | import { IDefaultTheme } from 'styled-components'; 2 | 3 | const defaultTheme: IDefaultTheme = { 4 | title: 'default', 5 | dark: '#000', 6 | }; 7 | 8 | export default defaultTheme; 9 | -------------------------------------------------------------------------------- /src/styles/theme/styled.d.ts: -------------------------------------------------------------------------------- 1 | import 'styled-components'; 2 | 3 | declare module 'styled-components' { 4 | export interface IDefaultTheme { 5 | title: string; 6 | dark: string; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | --------------------------------------------------------------------------------