Skip to content
This repository was archived by the owner on Oct 15, 2021. It is now read-only.

Commit e341cd8

Browse files
keonikkeonik
committed
example app
0 parents  commit e341cd8

29 files changed

+12018
-0
lines changed

‎.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["next/babel"]
3+
}

‎.eslintignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.next/
2+
node_modules/
3+
charts/
4+
prisma/

‎.eslintrc

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"parser": "@typescript-eslint/parser",
3+
"parserOptions": {
4+
"ecmaFeatures": {
5+
"jsx": true
6+
},
7+
"project": "./tsconfig.json",
8+
"ecmaVersion": 2020,
9+
"sourceType": "module"
10+
},
11+
"extends": ["prettier", "eslint:recommended", "plugin:@typescript-eslint/recommended"],
12+
"plugins": ["prettier", "@typescript-eslint"],
13+
"rules": {
14+
"react/react-in-jsx-scope": "off",
15+
// all prettier file errors
16+
"prettier/prettier": "error",
17+
"@typescript-eslint/explicit-module-boundary-types": 0,
18+
"@typescript-eslint/ban-ts-ignore": 0,
19+
"@typescript-eslint/ban-ts-comment": 0
20+
},
21+
"globals": {
22+
"React": "writable"
23+
},
24+
"overrides": [
25+
{
26+
"files": ["*.js"],
27+
"parser": "babel-eslint"
28+
}
29+
]
30+
}

‎.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# misc
7+
.DS_Store
8+
.env.local
9+
.env.development.local
10+
.env.test.local
11+
.env.production.local
12+
13+
npm-debug.log*
14+
yarn-debug.log*
15+
yarn-error.log*
16+
17+
# Next.js
18+
/.next
19+
20+
# testing
21+
/coverage

‎.prettierignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.next/
2+
node_modules/
3+
charts/
4+
prisma/migrations/
5+
prisma/schema.prisma
6+
CHANGELOG.md
7+
coverage/

‎.prettierrc

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"printWidth": 120,
3+
"singleQuote": true,
4+
"trailingComma": "es5",
5+
"useTabs": false,
6+
"proseWrap": "never",
7+
"semi": true,
8+
"tabWidth": 4,
9+
"overrides": [
10+
{
11+
"files": "*.md",
12+
"options": {
13+
"printWidth": 70,
14+
"useTabs": false,
15+
"semi": false,
16+
"trailingComma": "none"
17+
}
18+
}
19+
]
20+
}

‎README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Next.js Example app
2+
3+
Includes TypeScript, Material UI, ESLint, Jest, and React Testing Library
4+
5+
## Deploy your own
6+
7+
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
8+
9+
[![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)
10+
11+
## How to use
12+
13+
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:
14+
15+
```bash
16+
npx create-next-app --example nextjs-typescript-material-eslint-jest https://github.com/MileTwo/nextjs-typescript-material-ui-eslint-jest
17+
# or
18+
yarn create next-app --example nextjs-typescript-material-eslint-jest https://github.com/MileTwo/nextjs-typescript-material-ui-eslint-jest
19+
```
20+
21+
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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import type { Config } from '@jest/types';
2+
3+
// Sync object
4+
const config: Config.InitialOptions = {
5+
collectCoverage: true,
6+
setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
7+
testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
8+
transform: {
9+
'^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
10+
'\\.(css|less|scss|sass)$': 'identity-obj-proxy',
11+
},
12+
verbose: true,
13+
};
14+
15+
export default config;

‎lib/theme.ts

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { createMuiTheme, responsiveFontSizes, ThemeOptions } from '@material-ui/core/styles';
2+
3+
import '@material-ui/core/styles';
4+
5+
declare module '@material-ui/core/styles/createPalette' {
6+
interface Palette {
7+
priority: Palette['primary'];
8+
gray: Palette['primary'];
9+
shadow: Palette['primary'];
10+
}
11+
interface PaletteOptions {
12+
priority: PaletteOptions['primary'];
13+
gray: PaletteOptions['primary'];
14+
shadow: PaletteOptions['primary'];
15+
}
16+
}
17+
18+
declare module '@material-ui/core/styles/createTypography' {
19+
interface Typography {
20+
fontWeightHeavy: number;
21+
}
22+
interface TypographyOptions {
23+
fontWeightHeavy: number;
24+
}
25+
}
26+
27+
const THEME: ThemeOptions = {
28+
typography: {
29+
fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(','),
30+
fontWeightLight: 100,
31+
fontWeightMedium: 300,
32+
fontWeightRegular: 400,
33+
fontWeightHeavy: 500,
34+
fontWeightBold: 700,
35+
h1: {
36+
fontSize: '2.5rem',
37+
fontWeight: 500,
38+
},
39+
h2: {
40+
fontSize: '2rem',
41+
fontWeight: 500,
42+
},
43+
h3: {
44+
fontSize: '1.8rem',
45+
fontWeight: 500,
46+
},
47+
h4: {
48+
fontSize: '1.6rem',
49+
fontWeight: 500,
50+
},
51+
h5: {
52+
fontSize: '1.4rem',
53+
fontWeight: 500,
54+
},
55+
h6: {
56+
fontSize: '1.2rem',
57+
fontWeight: 500,
58+
},
59+
body1: {
60+
fontSize: '1rem',
61+
fontWeight: 400,
62+
},
63+
body2: {
64+
fontSize: '.8rem',
65+
fontWeight: 400,
66+
},
67+
},
68+
palette: {
69+
primary: {
70+
light: '#d0df63',
71+
main: '#016848',
72+
dark: '#003b21',
73+
},
74+
secondary: {
75+
light: '#577984',
76+
main: '#1a3a44',
77+
dark: '#00151d',
78+
contrastText: '#d8ddea',
79+
},
80+
priority: {
81+
light: '#2f78c5',
82+
main: '#d35400',
83+
dark: '#8b0000',
84+
},
85+
gray: {
86+
light: '#EEEEEE',
87+
main: '#888888',
88+
dark: '#212121',
89+
contrastText: '#5a5a5a',
90+
},
91+
shadow: {
92+
main: 'rgba(1, 104, 72, 0.16)',
93+
},
94+
},
95+
};
96+
97+
const theme = responsiveFontSizes(createMuiTheme(THEME));
98+
99+
export default theme;

‎lib/tools.ts

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
export const tools: Tool[] = [
2+
{
3+
name: 'TypeScript',
4+
description:
5+
'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.',
6+
link: 'https://www.typescriptlang.org/',
7+
image: {
8+
src: '/typescript.svg',
9+
width: 48,
10+
height: 50,
11+
alt: 'TypeScript',
12+
},
13+
},
14+
{
15+
name: 'Material UI',
16+
description:
17+
'React components for faster and easier web development. Build your own design system, or start with Material Design.',
18+
link: 'https://material-ui.com/',
19+
image: { src: '/material-ui.svg', width: 50, height: 50, alt: 'Material UI' },
20+
},
21+
{
22+
name: 'Jest',
23+
description:
24+
'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!',
25+
link: 'https://jestjs.io/',
26+
image: {
27+
src: '/jest.svg',
28+
width: 50,
29+
height: 50,
30+
alt: 'Jest',
31+
},
32+
},
33+
{
34+
name: 'Testing Library',
35+
description: 'Simple and complete testing utilities that encourage good testing practices',
36+
link: 'https://testing-library.com/',
37+
image: {
38+
src: '/testing-library.png',
39+
width: 50,
40+
height: 50,
41+
alt: 'Testing Library',
42+
},
43+
},
44+
{
45+
name: 'ESLint',
46+
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.`,
47+
link: 'https://eslint.org/',
48+
image: {
49+
src: '/eslint.svg',
50+
width: 50,
51+
height: 50,
52+
alt: 'ESLint',
53+
},
54+
},
55+
{
56+
name: 'Prettier',
57+
description:
58+
'An opinionated code formatter. Supports many languages. Integrates with most editors. Has few options',
59+
link: 'https://prettier.io/',
60+
image: {
61+
src: '/prettier.png',
62+
width: 50,
63+
height: 50,
64+
alt: 'Prettier',
65+
},
66+
},
67+
];
68+
69+
export interface Tool {
70+
name: string;
71+
description: string;
72+
link: string;
73+
image?: {
74+
alt: string;
75+
src: string;
76+
width: number;
77+
height: number;
78+
};
79+
}

‎next-env.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/types/global" />

0 commit comments

Comments
 (0)