├── .babelrc ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── jest.config.js ├── jest.setup.ts ├── next-env.d.ts ├── package.json ├── pages ├── _app.tsx ├── _document.tsx ├── api │ └── hello.ts ├── index.tsx └── sup.tsx ├── public ├── favicon.ico └── vercel.svg ├── src ├── add.test.ts ├── add.ts └── components │ ├── helloWorld.test.tsx │ └── helloWorld.tsx ├── styles ├── Home.module.css ├── globals.css └── theme.ts ├── tsconfig.json └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["next/babel"], 3 | "plugins": [ 4 | [ 5 | "babel-plugin-import", 6 | { 7 | "libraryName": "@material-ui/core", 8 | // Use ""libraryDirectory": ""," if your bundler does not support ES modules 9 | "libraryDirectory": "", 10 | "camel2DashComponentName": false 11 | }, 12 | "core" 13 | ], 14 | [ 15 | "babel-plugin-import", 16 | { 17 | "libraryName": "@material-ui/icons", 18 | // Use ""libraryDirectory": ""," if your bundler does not support ES modules 19 | "libraryDirectory": "", 20 | "camel2DashComponentName": false 21 | }, 22 | "icons" 23 | ] 24 | ] 25 | } -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | coverage 3 | .next -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | node: true, 6 | jest: true, 7 | }, 8 | extends: [ 9 | 'plugin:@typescript-eslint/recommended', 10 | 'plugin:react/recommended', 11 | 'plugin:react-hooks/recommended', 12 | 'airbnb', 13 | 'plugin:prettier/recommended', 14 | 'plugin:import/errors', 15 | 'plugin:import/warnings', 16 | 'plugin:import/typescript', 17 | 'plugin:jsx-a11y/recommended', 18 | ], 19 | parser: '@typescript-eslint/parser', 20 | parserOptions: { 21 | ecmaFeatures: { 22 | jsx: true, 23 | }, 24 | ecmaVersion: 12, 25 | sourceType: 'module', 26 | }, 27 | plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier', 'import', 'jsx-a11y'], 28 | rules: { 29 | 'prettier/prettier': 'error', 30 | 'react/react-in-jsx-scope': 'off', 31 | 'react/jsx-filename-extension': 'off', 32 | 'import/extensions': 'off', 33 | 'import/no-unresolved': 'error', 34 | "no-use-before-define": "off", 35 | "@typescript-eslint/no-use-before-define": ["error"], 36 | 'import/order': [ 37 | 'error', 38 | { 39 | groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'object', 'index']], 40 | pathGroups: [ 41 | { 42 | pattern: 'react', 43 | group: 'external', 44 | position: 'before', 45 | }, 46 | ], 47 | pathGroupsExcludedImportTypes: ['react'], 48 | 'newlines-between': 'never', 49 | alphabetize: { 50 | order: 'asc', 51 | caseInsensitive: true, 52 | }, 53 | }, 54 | ], 55 | 'import/no-extraneous-dependencies': [ 56 | 'error', 57 | { devDependencies: ['jest.setup.ts', '**/*.test.tsx', '**/*.spec.tsx', '**/*.test.ts', '**/*.spec.ts'] }, 58 | ], 59 | }, 60 | settings: { 61 | react: { 62 | version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use 63 | }, 64 | 'import/resolver': { 65 | // use /tsconfig.json 66 | typescript: { 67 | project: '.', 68 | }, 69 | }, 70 | }, 71 | }; 72 | -------------------------------------------------------------------------------- /.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 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | .vscode 36 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "printWidth": 120, 4 | "singleQuote": true, 5 | "trailingComma": "es5", 6 | "semi": true 7 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Leonardo Roese 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 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | testEnvironment: 'jest-environment-jsdom', 3 | setupFilesAfterEnv: ['/jest.setup.ts'], 4 | testPathIgnorePatterns: ['/.next/', '/node_modules/', '/coverage', '/dist'], 5 | moduleDirectories: ['/node_modules', '/src', '/pages'], 6 | moduleNameMapper: { 7 | '@src/(.*)': '/src/$1', 8 | '@pages/(.*)': '/pages/$1', 9 | '@styles/(.*)': '/styles/$1', 10 | }, 11 | coverageDirectory: 'coverage', 12 | collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', 'pages/**/*.{js,jsx,ts,tsx}'], 13 | coverageThreshold: { 14 | global: { 15 | branches: 0, 16 | functions: 0, 17 | lines: 0, 18 | statements: 0, 19 | }, 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /jest.setup.ts: -------------------------------------------------------------------------------- 1 | // jest.setup.ts 2 | import '@testing-library/jest-dom'; 3 | import '@testing-library/jest-dom/extend-expect'; 4 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-ts-materialui", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "cross-env NODE_OPTIONS='--inspect' next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "test": "jest", 10 | "test:watch": "jest --watch", 11 | "test:coverage": "jest --coverage" 12 | }, 13 | "dependencies": { 14 | "@material-ui/core": "^4.12.2", 15 | "@material-ui/icons": "^4.11.2", 16 | "cross-env": "^7.0.3", 17 | "next": "11.0.1", 18 | "react": "17.0.2", 19 | "react-dom": "17.0.2" 20 | }, 21 | "devDependencies": { 22 | "@testing-library/dom": "^8.1.0", 23 | "@testing-library/jest-dom": "^5.14.1", 24 | "@testing-library/react": "^12.0.0", 25 | "@testing-library/user-event": "^13.2.0", 26 | "@types/jest": "^26.0.24", 27 | "@types/node": "^16.4.1", 28 | "@types/react": "^17.0.14", 29 | "@types/react-dom": "^17.0.9", 30 | "@typescript-eslint/eslint-plugin": "^4.28.4", 31 | "@typescript-eslint/parser": "^4.28.4", 32 | "axe-core": "^4.3.1", 33 | "babel-plugin-import": "^1.13.3", 34 | "eslint": "^7.31.0", 35 | "eslint-config-airbnb": "^18.2.1", 36 | "eslint-config-prettier": "^8.3.0", 37 | "eslint-import-resolver-typescript": "^2.4.0", 38 | "eslint-plugin-import": "^2.23.4", 39 | "eslint-plugin-jsx-a11y": "^6.4.1", 40 | "eslint-plugin-prettier": "^3.4.0", 41 | "eslint-plugin-react": "^7.24.0", 42 | "eslint-plugin-react-hooks": "^4.2.0", 43 | "jest": "^27.0.6", 44 | "jest-environment-jsdom": "^27.0.6", 45 | "prettier": "^2.3.2", 46 | "ts-node": "^10.1.0", 47 | "typescript": "^4.3.5" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | // pages/_app.tsx 2 | /* eslint-disable react/jsx-props-no-spreading */ 3 | import { FC, useEffect } from 'react'; 4 | import CssBaseline from '@material-ui/core/CssBaseline'; 5 | import { ThemeProvider } from '@material-ui/core/styles'; 6 | import { AppProps } from 'next/app'; 7 | import Head from 'next/head'; 8 | import theme from '@styles/theme'; 9 | 10 | const MyApp: FC = ({ Component, pageProps }: AppProps) => { 11 | useEffect(() => { 12 | // Remove the server-side injected CSS. 13 | const jssStyles = document.querySelector('#jss-server-side'); 14 | if (jssStyles) { 15 | jssStyles?.parentElement?.removeChild(jssStyles); 16 | } 17 | }, []); 18 | 19 | return ( 20 | <> 21 | 22 | My App 23 | 24 | 25 | 26 | {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} 27 | 28 | 29 | 30 | 31 | ); 32 | }; 33 | 34 | export default MyApp; 35 | -------------------------------------------------------------------------------- /pages/_document.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-props-no-spreading */ 2 | // eslint-disable-next-line no-use-before-define 3 | import React from 'react'; 4 | import { ServerStyleSheets } from '@material-ui/core/styles'; 5 | import Document, { Html, Head, Main, NextScript } from 'next/document'; 6 | 7 | export default class MyDocument extends Document { 8 | render() { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | ); 20 | } 21 | } 22 | 23 | // `getInitialProps` belongs to `_document` (instead of `_app`), 24 | // it's compatible with server-side generation (SSG). 25 | MyDocument.getInitialProps = async (ctx) => { 26 | // Resolution order 27 | // 28 | // On the server: 29 | // 1. app.getInitialProps 30 | // 2. page.getInitialProps 31 | // 3. document.getInitialProps 32 | // 4. app.render 33 | // 5. page.render 34 | // 6. document.render 35 | // 36 | // On the server with error: 37 | // 1. document.getInitialProps 38 | // 2. app.render 39 | // 3. page.render 40 | // 4. document.render 41 | // 42 | // On the client 43 | // 1. app.getInitialProps 44 | // 2. page.getInitialProps 45 | // 3. app.render 46 | // 4. page.render 47 | 48 | // Render app and page and get the context of the page with collected side effects. 49 | const sheets = new ServerStyleSheets(); 50 | const originalRenderPage = ctx.renderPage; 51 | 52 | ctx.renderPage = () => 53 | originalRenderPage({ 54 | enhanceApp: (App) => (props) => sheets.collect(), 55 | }); 56 | 57 | const initialProps = await Document.getInitialProps(ctx); 58 | 59 | return { 60 | ...initialProps, 61 | // Styles fragment is rendered after the app and page rendering finish. 62 | styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()], 63 | }; 64 | }; 65 | -------------------------------------------------------------------------------- /pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | import { NextApiRequest, NextApiResponse } from 'next'; 2 | 3 | export default (_req: NextApiRequest, res: NextApiResponse): void => { 4 | res.status(200).json({ name: 'John Doe' }); 5 | }; 6 | -------------------------------------------------------------------------------- /pages/index.tsx: -------------------------------------------------------------------------------- 1 | // index.tsx 2 | import { FC } from 'react'; 3 | import Head from 'next/head'; 4 | import styles from '../styles/Home.module.css'; 5 | 6 | const Home: FC = () => { 7 | return ( 8 |
9 | 10 | Create Next App 11 | 12 | 13 |
14 | ); 15 | }; 16 | 17 | export default Home; 18 | -------------------------------------------------------------------------------- /pages/sup.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react'; 2 | import { Button } from '@material-ui/core'; 3 | import { makeStyles, createStyles } from '@material-ui/core/styles'; 4 | import styles from '../styles/Home.module.css'; 5 | 6 | interface SupProps { 7 | message: string; 8 | } 9 | 10 | const useStyles = makeStyles(() => 11 | createStyles({ 12 | root: { 13 | backgroundColor: 'red', 14 | }, 15 | }) 16 | ); 17 | 18 | const Sup: FC = ({ message }: SupProps) => { 19 | const classes = useStyles(); 20 | return ( 21 |
22 | 23 | 26 |
27 | ); 28 | }; 29 | 30 | export const getServerSideProps = () => { 31 | return { 32 | props: { 33 | message: 'sup', 34 | }, 35 | }; 36 | }; 37 | 38 | export default Sup; 39 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- 1 |  h6  ��00 �%F(    ,,, === MMM ]]]eee3������###�333�DDD�SSS�___3 2 | �������&&&�777�EEE�ZZZ 3 | ;�������&&&�444;��������???(������(v����v����\��\ �� ::������������?�?����������( @ (((///888@@@HHHPPPXXX```hhhjjjr��������� ���$$$�,,,�444�<<<�DDD�LLL�TTT�\\\�cccrnnnT���������� ���&&&�...�666�>>>�FFF�NNN�VVV�]]]T ��������������&&&�...�666�>>>�FFF�NNN�XXX :��������������&&&�...�666�>>>�EEE:���������������'''�///�666�MMM'���������������'''�...'t��������������t��������������Z������������Z ������������ C����������B����������.��������.~������~������d����d����K��K��**�������������������������?�?�?���������������������������������?���?�����������������������������������(0` $$�������������� �����$$$�)))�///�444�999�???�DDD�III�OOO�TTT�ZZZ�___�ddd�hhh$��������������� ���� �&&&�+++�000�666�;;;�AAA�FFF�KKK�QQQ�VVV�\\\�aaa�fffO��������������� ���� �&&&�+++�000�666�;;;�AAA�FFF�KKK�QQQ�VVV�[[[O���������������� ���� �&&&�+++�111�666�;;;�AAA�FFF�LLL�QQQ�XXX9���������������� ����!!!�&&&�+++�111�666�<<<�AAA�FFF�KKK9����������������� ����!!!�&&&�,,,�111�777�<<<�AAA�RRR&����������������� ����!!!�'''�,,,�111�777�;;;&r����������������� ����!!!�'''�,,,�111r������������������ ����"""�'''�,,,Y������������������ ����!!!Y ������������������� ��� A������������������� �A��������������������-������������������-}����������������}����������������c��������������b��������������J������������J������������4����������4����������"��������"m������m������S����S 4 | ���� 5 | <��<�����������������������������������������������������������������������������������������?���?������������������������������������������������������������?�����?������������������������������������������������������������������������ -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /src/add.test.ts: -------------------------------------------------------------------------------- 1 | // src/add.test.ts 2 | import add from '@src/add'; 3 | 4 | describe('add tests', () => { 5 | it('should return 3', () => { 6 | expect(add(1, 2)).toBe(3); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /src/add.ts: -------------------------------------------------------------------------------- 1 | // src/add.test.ts 2 | const add = (a: number, b: number): number => { 3 | return a + b; 4 | }; 5 | 6 | export default add; 7 | -------------------------------------------------------------------------------- /src/components/helloWorld.test.tsx: -------------------------------------------------------------------------------- 1 | // helloWorld.test.tsx 2 | import { render } from '@testing-library/react'; 3 | import HelloWorld from '@src/components/helloWorld'; 4 | 5 | test('renders a message', () => { 6 | const { container, getByText } = render(); 7 | expect(getByText('Hello World')).toBeInTheDocument(); 8 | expect(container.firstChild).toMatchInlineSnapshot(` 9 |

10 | Hello World 11 |

12 | `); 13 | }); 14 | -------------------------------------------------------------------------------- /src/components/helloWorld.tsx: -------------------------------------------------------------------------------- 1 | // src/components/helloWorld.tsx 2 | import { FC } from 'react'; 3 | 4 | const HelloWorld: FC = () => { 5 | return

Hello World

; 6 | }; 7 | 8 | export default HelloWorld; 9 | -------------------------------------------------------------------------------- /styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | min-height: 100vh; 3 | padding: 0 0.5rem; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | } 9 | 10 | .main { 11 | padding: 5rem 0; 12 | flex: 1; 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: center; 16 | align-items: center; 17 | } 18 | 19 | .footer { 20 | width: 100%; 21 | height: 100px; 22 | border-top: 1px solid #eaeaea; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | } 27 | 28 | .footer img { 29 | margin-left: 0.5rem; 30 | } 31 | 32 | .footer a { 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | } 37 | 38 | .title a { 39 | color: #0070f3; 40 | text-decoration: none; 41 | } 42 | 43 | .title a:hover, 44 | .title a:focus, 45 | .title a:active { 46 | text-decoration: underline; 47 | } 48 | 49 | .title { 50 | margin: 0; 51 | line-height: 1.15; 52 | font-size: 4rem; 53 | } 54 | 55 | .title, 56 | .description { 57 | text-align: center; 58 | } 59 | 60 | .description { 61 | line-height: 1.5; 62 | font-size: 1.5rem; 63 | } 64 | 65 | .code { 66 | background: #fafafa; 67 | border-radius: 5px; 68 | padding: 0.75rem; 69 | font-size: 1.1rem; 70 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 71 | Bitstream Vera Sans Mono, Courier New, monospace; 72 | } 73 | 74 | .grid { 75 | display: flex; 76 | align-items: center; 77 | justify-content: center; 78 | flex-wrap: wrap; 79 | max-width: 800px; 80 | margin-top: 3rem; 81 | } 82 | 83 | .card { 84 | margin: 1rem; 85 | flex-basis: 45%; 86 | padding: 1.5rem; 87 | text-align: left; 88 | color: inherit; 89 | text-decoration: none; 90 | border: 1px solid #eaeaea; 91 | border-radius: 10px; 92 | transition: color 0.15s ease, border-color 0.15s ease; 93 | } 94 | 95 | .card:hover, 96 | .card:focus, 97 | .card:active { 98 | color: #0070f3; 99 | border-color: #0070f3; 100 | } 101 | 102 | .card h3 { 103 | margin: 0 0 1rem 0; 104 | font-size: 1.5rem; 105 | } 106 | 107 | .card p { 108 | margin: 0; 109 | font-size: 1.25rem; 110 | line-height: 1.5; 111 | } 112 | 113 | .logo { 114 | height: 1em; 115 | } 116 | 117 | @media (max-width: 600px) { 118 | .grid { 119 | width: 100%; 120 | flex-direction: column; 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | -------------------------------------------------------------------------------- /styles/theme.ts: -------------------------------------------------------------------------------- 1 | // styles/theme.ts 2 | 3 | import { createTheme } from '@material-ui/core/styles'; 4 | 5 | // Create a theme instance. 6 | const theme = createTheme({ 7 | palette: { 8 | common: { 9 | black: '#19192B', 10 | white: '#ffffff', 11 | }, 12 | primary: { 13 | light: '#B3E5FC', 14 | main: '#03A9F4', 15 | dark: '#0288D1', 16 | contrastText: '#212121', 17 | }, 18 | secondary: { 19 | main: '#607D8B', // omitting light and dark will calculate from main 20 | contrastText: '#757575', 21 | }, 22 | grey: { 23 | '500': '#bcbcbc', 24 | '700': '#79797a', 25 | }, 26 | info: { 27 | main: '#1bb2f1', 28 | }, 29 | success: { 30 | main: '#00d589', 31 | }, 32 | error: { 33 | main: '#832838', 34 | }, 35 | background: { 36 | default: '#fff', 37 | }, 38 | }, 39 | typography: { 40 | fontFamily: 'Roboto', 41 | }, 42 | }); 43 | 44 | export default theme; 45 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", // Specify ECMAScript target version 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], // List of library files to be included in the compilation 9 | "allowJs": true, // Allow JavaScript files to be compiled 10 | "skipLibCheck": true, // Skip type checking of all declaration files 11 | "esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs") 12 | "allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export 13 | "strict": true, // Enable all strict type checking options 14 | "forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file. 15 | "module": "esnext", // Specify module code generation 16 | "moduleResolution": "node", // Resolve modules using Node.js style 17 | "isolatedModules": true, // Unconditionally emit imports for unresolved files 18 | "resolveJsonModule": true, // Include modules imported with .json extension 19 | "noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking) 20 | "jsx": "preserve", // Support JSX in .tsx files 21 | "sourceMap": true, // Generate corrresponding .map file 22 | "declaration": true, // Generate corresponding .d.ts file 23 | "noUnusedLocals": true, // Report errors on unused locals 24 | "noUnusedParameters": true, // Report errors on unused parameters 25 | "noFallthroughCasesInSwitch": true, // Report errors for fallthrough cases in switch statement 26 | "rootDir": ".", 27 | "baseUrl": ".", 28 | "paths": { //alias pathing for absolute paths 29 | "@src/*": ["src/*"], 30 | "@pages/*": ["pages/*"], 31 | "@styles/*": ["styles/*"] 32 | }, 33 | "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 34 | "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 35 | }, 36 | "include": [ 37 | "next-env.d.ts", "pages/**/*", "src/**/*", "styles/**/*" // *** The files TypeScript should type check *** 38 | ], 39 | "exclude": ["node_modules", "coverage"] // *** The files to not type check *** 40 | } --------------------------------------------------------------------------------