├── .eslintrc.json
├── .gitignore
├── LICENSE
├── README.md
├── components
    ├── button
    │   ├── index.tsx
    │   ├── style.module.scss
    │   └── tests
    │   │   └── index.unit.spec.tsx
    └── readme.md
├── jest.config.js
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── _document.js
    ├── example
    │   └── example.tsx
    └── index.tsx
├── public
    ├── favicon.ico
    └── zeit.svg
├── setupTests.ts
├── theme
    └── index.ts
├── tsconfig.jest.json
└── tsconfig.json


/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "es6": true,
 5 |     "node": true
 6 |   },
 7 |   "extends": [
 8 |     "plugin:react/recommended",
 9 |     "plugin:prettier/recommended",
10 |     "plugin:@typescript-eslint/eslint-recommended",
11 |     "plugin:@typescript-eslint/recommended",
12 |     "plugin:jest/all",
13 |     "standard",
14 |     "prettier"
15 |   ],
16 |   "globals": {
17 |     "Atomics": "readonly",
18 |     "SharedArrayBuffer": "readonly"
19 |   },
20 |   "parser": "@typescript-eslint/parser",
21 |   "parserOptions": {
22 |     "ecmaFeatures": {
23 |       "jsx": true
24 |     },
25 |     "ecmaVersion": 2018,
26 |     "sourceType": "module"
27 |   },
28 |   "settings": {
29 |     "react": {
30 |       "version": "detect"
31 |     }
32 |   },
33 |   "plugins": [
34 |     "react",
35 |     "@typescript-eslint"
36 |   ],
37 |   "rules": {
38 |     "prettier/prettier": "error",
39 |     "jest/no-hooks": "off",
40 |     "jest/prefer-expect-assertions": "off",
41 |     "jest/no-standalone-expect": "off",
42 |     "react/prop-types": 0,
43 |     "jest/expect-expect": [
44 |       "warn",
45 |       {
46 |         "assertFunctionNames": [
47 |           "expect",
48 |           "request.*.expect"
49 |         ]
50 |       }
51 |     ],
52 |     "jest/lowercase-name": "off",
53 |     "@typescript-eslint/no-empty-function": "warn",
54 |     "camelcase": "warn",
55 |     "no-case-declarations": "warn",
56 |     "no-use-before-define": "off",
57 |     "@typescript-eslint/no-use-before-define": [
58 |       "error"
59 |     ],
60 |     "@typescript-eslint/explicit-module-boundary-types": "off"
61 |   }
62 | }


--------------------------------------------------------------------------------
/.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 | .env*
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Mehmet Sefa
 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 | ## NEXTJS STARTER TEMPLATE WITH TYPESCRIPT, MATERIALUI AND JEST
 2 | 
 3 | This is a Nextjs project whose Typescript, MaterialUI and Jest config setups are made by default.
 4 | 
 5 | If you want to kickstart a project using Nextjs, Typescript, MaterialUI and Jest, clone this already-setup-repo and start coding!
 6 | 
 7 | ```
 8 | npm i
 9 | ```
10 | 
11 | ```
12 | npm run test
13 | ```
14 | 
15 | ```
16 | npm run dev
17 | ```
18 | 


--------------------------------------------------------------------------------
/components/button/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FunctionComponent } from "react";
 2 | import MuiButton from "@mui/material/Button";
 3 | import style from "./style.module.scss";
 4 | 
 5 | interface Props {
 6 |   color: "primary" | "secondary";
 7 |   name: string;
 8 | }
 9 | 
10 | const Button: FunctionComponent<Props> = ({ color, name }) => {
11 |   return (
12 |     <>
13 |       <MuiButton color={color} variant="contained">
14 |         {name}
15 |       </MuiButton>
16 |       <div className={style.text}>pink text</div>
17 |     </>
18 |   );
19 | };
20 | export { Button };
21 | 


--------------------------------------------------------------------------------
/components/button/style.module.scss:
--------------------------------------------------------------------------------
1 | .text {
2 |   color: pink;
3 | }


--------------------------------------------------------------------------------
/components/button/tests/index.unit.spec.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import sinon, { SinonStub } from "sinon";
 3 | import faker from "faker";
 4 | import { render, cleanup } from "@testing-library/react";
 5 | import { Button } from "../index";
 6 | import { ThemeProvider } from "@material-ui/core/styles";
 7 | import { theme } from "../../../theme";
 8 | import MuiButton from "@material-ui/core/Button";
 9 | 
10 | const sandbox = sinon.createSandbox();
11 | const {
12 |   lorem: { word },
13 | } = faker;
14 | 
15 | describe("Button Unit Tests", () => {
16 |   afterEach(() => {
17 |     sandbox.verifyAndRestore();
18 |     cleanup();
19 |   });
20 | 
21 |   it("should render", () => {
22 |     // Arrange
23 |     sandbox.spy(React, "createElement");
24 | 
25 |     // Act
26 |     const { container } = render(
27 |       <ThemeProvider theme={theme}>
28 |         <Button color="primary" name={word()} />
29 |       </ThemeProvider>
30 |     );
31 | 
32 |     // Assert
33 |     expect(container.querySelector("button")).toBeInTheDocument();
34 |     expect((React.createElement as SinonStub).calledWith(MuiButton)).toBe(true);
35 |   });
36 | });
37 | 


--------------------------------------------------------------------------------
/components/readme.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mehmetsefabalik/next-typescript-materialui-jest-starter/a3c101d424dfd344e61ff08a098f0bce3b4911c9/components/readme.md


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   testEnvironment: "jsdom",
 3 |   preset: "ts-jest",
 4 |   setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
 5 |   transform: {
 6 |     "^.+\\.tsx?$": "ts-jest",
 7 |   },
 8 |   testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
 9 |   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
10 |   testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
11 |   globals: {
12 |     "ts-jest": {
13 |       tsconfig: "<rootDir>/tsconfig.jest.json",
14 |     },
15 |   },
16 |   moduleNameMapper: {
17 |     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
18 |       "<rootDir>/__mocks__/fileMock.js",
19 |     "\\.(scss|sass|css)$": "identity-obj-proxy",
20 |   },
21 | };
22 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   poweredByHeader: false,
3 | };
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-typescript-materialui-jest-starter",
 3 |   "version": "0.3.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "test": "npx jest",
10 |     "lint": "eslint --fix ./pages/*.{js,tsx} ./pages/*/*.tsx ./components/*/*.tsx ./components/*/*/*.tsx"
11 |   },
12 |   "dependencies": {
13 |     "@emotion/react": "^11.8.1",
14 |     "@emotion/styled": "^11.8.1",
15 |     "@mui/material": "^5.4.4",
16 |     "next": "^12.0.8",
17 |     "react": "^17.0.2",
18 |     "react-dom": "^17.0.2"
19 |   },
20 |   "devDependencies": {
21 |     "@testing-library/jest-dom": "^5.11.10",
22 |     "@testing-library/react": "^11.2.6",
23 |     "@types/jest": "^26.0.22",
24 |     "@types/sinon": "^9.0.11",
25 |     "@typescript-eslint/eslint-plugin": "^4.21.0",
26 |     "@typescript-eslint/parser": "^4.21.0",
27 |     "eslint": "^7.23.0",
28 |     "eslint-config-prettier": "^8.1.0",
29 |     "eslint-config-standard": "^16.0.2",
30 |     "eslint-plugin-import": "^2.22.1",
31 |     "eslint-plugin-jest": "^24.3.4",
32 |     "eslint-plugin-node": "^11.1.0",
33 |     "eslint-plugin-prettier": "^3.3.1",
34 |     "eslint-plugin-promise": "^4.3.1",
35 |     "eslint-plugin-react": "^7.23.2",
36 |     "eslint-plugin-standard": "^4.1.0",
37 |     "faker": "^5.5.3",
38 |     "husky": "^6.0.0",
39 |     "identity-obj-proxy": "^3.0.0",
40 |     "jest": "^26.6.3",
41 |     "prettier": "^2.2.1",
42 |     "sass": "^1.32.8",
43 |     "sinon": "^10.0.0",
44 |     "ts-jest": "^26.5.4",
45 |     "typescript": "^4.5.4"
46 |   },
47 |   "husky": {
48 |     "hooks": {
49 |       "pre-commit": "npm run lint",
50 |       "pre-push": "npm run test"
51 |     }
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import App from "next/app";
 3 | import Head from "next/head";
 4 | import { ThemeProvider } from "@mui/material/styles";
 5 | import { theme } from "../theme";
 6 | 
 7 | export default class MyApp extends App {
 8 |   componentDidMount() {
 9 |     // Remove the server-side injected CSS.
10 |     const jssStyles = document.querySelector("#jss-server-side");
11 |     if (jssStyles) {
12 |       jssStyles.parentElement.removeChild(jssStyles);
13 |     }
14 |   }
15 | 
16 |   render() {
17 |     const { Component, pageProps } = this.props;
18 | 
19 |     return (
20 |       <React.Fragment>
21 |         <Head>
22 |           <title>My page</title>
23 |           <meta
24 |             name="viewport"
25 |             content="minimum-scale=1, initial-scale=1, width=device-width"
26 |           />
27 |           <meta name="theme-color" content={theme.palette.primary.main} />
28 |         </Head>
29 |         <ThemeProvider theme={theme}>
30 |           <Component {...pageProps} />
31 |         </ThemeProvider>
32 |       </React.Fragment>
33 |     );
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Document, { Head, Html, Main, NextScript } from "next/document";
 3 | 
 4 | class MyDocument extends Document {
 5 |   render() {
 6 |     return (
 7 |       <Html lang="en">
 8 |         <Head></Head>
 9 |         <body>
10 |           <Main />
11 |           <NextScript />
12 |         </body>
13 |       </Html>
14 |     );
15 |   }
16 | }
17 | 
18 | export default MyDocument;
19 | 


--------------------------------------------------------------------------------
/pages/example/example.tsx:
--------------------------------------------------------------------------------
1 | import React, { FunctionComponent } from "react";
2 | 
3 | const Example: FunctionComponent = () => {
4 |   return <>Example</>;
5 | };
6 | export { Example };
7 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { useTheme } from "@mui/material/styles";
 3 | import { Button } from "../components/button";
 4 | import { Example } from "./example/example";
 5 | 
 6 | const Home = () => {
 7 |   const theme = useTheme();
 8 |   const hello = "Hello";
 9 |   return (
10 |     <>
11 |       <div style={{ color: theme.palette.primary.main }}>{hello}</div>
12 |       <Button name="Click Me" color="primary" />
13 |       <Example />
14 |     </>
15 |   );
16 | };
17 | 
18 | export default Home;
19 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mehmetsefabalik/next-typescript-materialui-jest-starter/a3c101d424dfd344e61ff08a098f0bce3b4911c9/public/favicon.ico


--------------------------------------------------------------------------------
/public/zeit.svg:
--------------------------------------------------------------------------------
 1 | <svg width="82" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <path fill="url(#prefix__paint0_linear)" d="M9.018 0l9.019 16H0L9.018 0z"/>
 3 |     <path fill="#333" fill-rule="evenodd" d="M51.634 12.028h-6.492V2.052h6.492v1.256H46.61v3.007h4.37V7.57h-4.37v3.202h5.024v1.255zm-14.063 0h-7.235v-1.096l5.342-7.624h-5.253V2.052h7.058v1.097l-5.342 7.623h5.43v1.256zm21.88 0h6.333v-1.256h-2.423V3.308h2.423V2.052h-6.332v1.256h2.441v7.465h-2.441v1.255zm18.22 0h-1.468v-8.72h-3.36V2.052h8.225v1.256H77.67v8.72z" clip-rule="evenodd"/>
 4 |     <defs>
 5 |         <linearGradient id="prefix__paint0_linear" x1="28.022" x2="16.189" y1="22.991" y2="8.569" gradientUnits="userSpaceOnUse">
 6 |             <stop stop-color="#fff"/>
 7 |             <stop offset="1"/>
 8 |         </linearGradient>
 9 |     </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/setupTests.ts:
--------------------------------------------------------------------------------
1 | // optional: configure or set up a testing framework before each test
2 | // if you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
3 | 
4 | // used for __tests__/testing-library.js
5 | // learn more: https://github.com/testing-library/jest-dom
6 | import '@testing-library/jest-dom/extend-expect'


--------------------------------------------------------------------------------
/theme/index.ts:
--------------------------------------------------------------------------------
 1 | import { createTheme } from "@mui/material/styles";
 2 | 
 3 | // Create a theme instance.
 4 | const theme = createTheme({
 5 |   palette: {
 6 |     primary: {
 7 |       main: "#DE6A0A",
 8 |     },
 9 |     secondary: {
10 |       main: "#0BDE7D",
11 |     },
12 |     background: {
13 |       default: "#fff",
14 |     },
15 |   },
16 | });
17 | 
18 | export { theme };
19 | 


--------------------------------------------------------------------------------
/tsconfig.jest.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.json",
3 |   "compilerOptions": {
4 |     "jsx": "react"
5 |   }
6 | }


--------------------------------------------------------------------------------
/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 |     "strict": false,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "esModuleInterop": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "jsx": "preserve",
20 |     "incremental": true
21 |   },
22 |   "exclude": [
23 |     "node_modules"
24 |   ],
25 |   "include": [
26 |     "next-env.d.ts",
27 |     "**/*.ts",
28 |     "**/*.tsx",
29 |     "pages/_document.js"
30 |   ]
31 | }
32 | 


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