example app

Author: keonik

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["next/babel"]
+}

.eslintignore

@@ -0,0 +1,4 @@
+.next/
+node_modules/
+charts/
+prisma/

.eslintrc

@@ -0,0 +1,30 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "project": "./tsconfig.json",
+        "ecmaVersion": 2020,
+        "sourceType": "module"
+    },
+    "extends": ["prettier", "eslint:recommended", "plugin:@typescript-eslint/recommended"],
+    "plugins": ["prettier", "@typescript-eslint"],
+    "rules": {
+        "react/react-in-jsx-scope": "off",
+        // all prettier file errors
+        "prettier/prettier": "error",
+        "@typescript-eslint/explicit-module-boundary-types": 0,
+        "@typescript-eslint/ban-ts-ignore": 0,
+        "@typescript-eslint/ban-ts-comment": 0
+    },
+    "globals": {
+        "React": "writable"
+    },
+    "overrides": [
+        {
+            "files": ["*.js"],
+            "parser": "babel-eslint"
+        }
+    ]
+}

.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Next.js
+/.next
+
+# testing
+/coverage

.prettierignore

@@ -0,0 +1,7 @@
+.next/
+node_modules/
+charts/
+prisma/migrations/
+prisma/schema.prisma
+CHANGELOG.md
+coverage/

.prettierrc

@@ -0,0 +1,20 @@
+{
+    "printWidth": 120,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "useTabs": false,
+    "proseWrap": "never",
+    "semi": true,
+    "tabWidth": 4,
+    "overrides": [
+        {
+            "files": "*.md",
+            "options": {
+                "printWidth": 70,
+                "useTabs": false,
+                "semi": false,
+                "trailingComma": "none"
+            }
+        }
+    ]
+}

README.md

@@ -0,0 +1,21 @@
+# Next.js Example app
+
+Includes TypeScript, Material UI, ESLint, Jest, and React Testing Library
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/MileTwo/nextjs-typescript-material-ui-eslint-jest)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example nextjs-typescript-material-eslint-jest https://github.com/MileTwo/nextjs-typescript-material-ui-eslint-jest
+# or
+yarn create next-app --example nextjs-typescript-material-eslint-jest https://github.com/MileTwo/nextjs-typescript-material-ui-eslint-jest
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

jest.config.ts

@@ -0,0 +1,15 @@
+import type { Config } from '@jest/types';
+
+// Sync object
+const config: Config.InitialOptions = {
+    collectCoverage: true,
+    setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+    testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
+    transform: {
+        '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
+        '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    },
+    verbose: true,
+};
+
+export default config;

lib/theme.ts

@@ -0,0 +1,99 @@
+import { createMuiTheme, responsiveFontSizes, ThemeOptions } from '@material-ui/core/styles';
+
+import '@material-ui/core/styles';
+
+declare module '@material-ui/core/styles/createPalette' {
+    interface Palette {
+        priority: Palette['primary'];
+        gray: Palette['primary'];
+        shadow: Palette['primary'];
+    }
+    interface PaletteOptions {
+        priority: PaletteOptions['primary'];
+        gray: PaletteOptions['primary'];
+        shadow: PaletteOptions['primary'];
+    }
+}
+
+declare module '@material-ui/core/styles/createTypography' {
+    interface Typography {
+        fontWeightHeavy: number;
+    }
+    interface TypographyOptions {
+        fontWeightHeavy: number;
+    }
+}
+
+const THEME: ThemeOptions = {
+    typography: {
+        fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(','),
+        fontWeightLight: 100,
+        fontWeightMedium: 300,
+        fontWeightRegular: 400,
+        fontWeightHeavy: 500,
+        fontWeightBold: 700,
+        h1: {
+            fontSize: '2.5rem',
+            fontWeight: 500,
+        },
+        h2: {
+            fontSize: '2rem',
+            fontWeight: 500,
+        },
+        h3: {
+            fontSize: '1.8rem',
+            fontWeight: 500,
+        },
+        h4: {
+            fontSize: '1.6rem',
+            fontWeight: 500,
+        },
+        h5: {
+            fontSize: '1.4rem',
+            fontWeight: 500,
+        },
+        h6: {
+            fontSize: '1.2rem',
+            fontWeight: 500,
+        },
+        body1: {
+            fontSize: '1rem',
+            fontWeight: 400,
+        },
+        body2: {
+            fontSize: '.8rem',
+            fontWeight: 400,
+        },
+    },
+    palette: {
+        primary: {
+            light: '#d0df63',
+            main: '#016848',
+            dark: '#003b21',
+        },
+        secondary: {
+            light: '#577984',
+            main: '#1a3a44',
+            dark: '#00151d',
+            contrastText: '#d8ddea',
+        },
+        priority: {
+            light: '#2f78c5',
+            main: '#d35400',
+            dark: '#8b0000',
+        },
+        gray: {
+            light: '#EEEEEE',
+            main: '#888888',
+            dark: '#212121',
+            contrastText: '#5a5a5a',
+        },
+        shadow: {
+            main: 'rgba(1, 104, 72, 0.16)',
+        },
+    },
+};
+
+const theme = responsiveFontSizes(createMuiTheme(THEME));
+
+export default theme;

lib/tools.ts

@@ -0,0 +1,79 @@
+export const tools: Tool[] = [
+    {
+        name: 'TypeScript',
+        description:
+            'TypeScript extends JavaScript by adding types. By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code. Any browser, any OS, anywhere JavaScript runs. Entirely Open Source.',
+        link: 'https://www.typescriptlang.org/',
+        image: {
+            src: '/typescript.svg',
+            width: 48,
+            height: 50,
+            alt: 'TypeScript',
+        },
+    },
+    {
+        name: 'Material UI',
+        description:
+            'React components for faster and easier web development. Build your own design system, or start with Material Design.',
+        link: 'https://material-ui.com/',
+        image: { src: '/material-ui.svg', width: 50, height: 50, alt: 'Material UI' },
+    },
+    {
+        name: 'Jest',
+        description:
+            'Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!',
+        link: 'https://jestjs.io/',
+        image: {
+            src: '/jest.svg',
+            width: 50,
+            height: 50,
+            alt: 'Jest',
+        },
+    },
+    {
+        name: 'Testing Library',
+        description: 'Simple and complete testing utilities that encourage good testing practices',
+        link: 'https://testing-library.com/',
+        image: {
+            src: '/testing-library.png',
+            width: 50,
+            height: 50,
+            alt: 'Testing Library',
+        },
+    },
+    {
+        name: 'ESLint',
+        description: `ESLint statically analyzes your code to quickly find problems. ESLint is built into most text editors and you can run ESLint as part of your continuous integration pipeline. Many problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware so you won't experience errors introduced by traditional find-and-replace algorithms. Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project.`,
+        link: 'https://eslint.org/',
+        image: {
+            src: '/eslint.svg',
+            width: 50,
+            height: 50,
+            alt: 'ESLint',
+        },
+    },
+    {
+        name: 'Prettier',
+        description:
+            'An opinionated code formatter. Supports many languages. Integrates with most editors. Has few options',
+        link: 'https://prettier.io/',
+        image: {
+            src: '/prettier.png',
+            width: 50,
+            height: 50,
+            alt: 'Prettier',
+        },
+    },
+];
+
+export interface Tool {
+    name: string;
+    description: string;
+    link: string;
+    image?: {
+        alt: string;
+        src: string;
+        width: number;
+        height: number;
+    };
+}