Skip to content

Commit 689be04

Browse files
andrewgolovanovandrewgolovanov
authored
Initial commit
0 parents  commit 689be04

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+10391
-0
lines changed

‎.commitlintrc.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"extends": ["@commitlint/config-conventional"],
3+
"rules": {
4+
"scope-enum": [
5+
2,
6+
"always",
7+
[
8+
"components",
9+
"constants",
10+
"hooks",
11+
"icons",
12+
"images",
13+
"pages",
14+
"styles",
15+
"templates",
16+
"utils"
17+
]
18+
]
19+
}
20+
}

‎.eslintrc.js

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
es6: true,
5+
},
6+
extends: [
7+
'airbnb',
8+
'airbnb/hooks',
9+
'airbnb/whitespace',
10+
'prettier',
11+
'plugin:@next/next/recommended',
12+
],
13+
globals: {
14+
Atomics: 'readonly',
15+
SharedArrayBuffer: 'readonly',
16+
},
17+
parserOptions: {
18+
ecmaFeatures: {
19+
jsx: true,
20+
},
21+
ecmaVersion: 2020,
22+
sourceType: 'module',
23+
},
24+
plugins: ['react'],
25+
rules: {
26+
// Removes "default" from "restrictedNamedExports", original rule setup — https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/es6.js#L65
27+
'no-restricted-exports': ['error', { restrictedNamedExports: ['then'] }],
28+
'no-unused-vars': 'error',
29+
'no-shadow': 'off',
30+
'no-undef': 'error',
31+
'react/prop-types': 'error',
32+
'react/no-array-index-key': 'off',
33+
'react/jsx-props-no-spreading': 'off',
34+
'react/no-danger': 'off',
35+
'react/react-in-jsx-scope': 'off',
36+
'react/forbid-prop-types': 'off',
37+
// Changes values from "function-expression" to "arrow-function", original rule setup — https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb/rules/react.js#L528
38+
'react/function-component-definition': [
39+
'error',
40+
{
41+
namedComponents: 'arrow-function',
42+
unnamedComponents: 'arrow-function',
43+
},
44+
],
45+
'react/jsx-sort-props': [
46+
'error',
47+
{
48+
callbacksLast: true,
49+
shorthandLast: true,
50+
noSortAlphabetically: true,
51+
},
52+
],
53+
'import/order': [
54+
'error',
55+
{
56+
groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object'],
57+
'newlines-between': 'always',
58+
alphabetize: {
59+
order: 'asc',
60+
caseInsensitive: true,
61+
},
62+
},
63+
],
64+
'jsx-a11y/label-has-associated-control': [
65+
'error',
66+
{
67+
required: {
68+
some: ['nesting', 'id'],
69+
},
70+
},
71+
],
72+
'jsx-a11y/label-has-for': [
73+
'error',
74+
{
75+
required: {
76+
some: ['nesting', 'id'],
77+
},
78+
},
79+
],
80+
},
81+
settings: {
82+
'import/resolver': {
83+
node: {
84+
paths: ['src'],
85+
},
86+
},
87+
},
88+
};

‎.gitignore

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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/snipsnap.code-snippets
36+
37+
#linters
38+
.stylelintcache
39+
.eslintcache
40+
41+
.idea/

‎.husky/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
_

‎.husky/commit-msg

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/bin/sh
2+
. "$(dirname "$0")/_/husky.sh"
3+
4+
npx --no-install commitlint --edit ""

‎.husky/pre-commit

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/bin/sh
2+
. "$(dirname "$0")/_/husky.sh"
3+
4+
npx --no-install lint-staged --concurrent false

‎.lintstagedrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"*.{js,jsx,html,css,md}": "prettier --write",
3+
"*.{js,jsx}": "eslint --cache --fix",
4+
}

‎.markdownlint.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"line-length": false,
3+
"ol-prefix": false
4+
}

‎.prettierignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
package.json
2+
package-lock.json

‎.prettierrc

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"printWidth": 100,
3+
"tabWidth": 2,
4+
"useTabs": false,
5+
"semi": true,
6+
"singleQuote": true,
7+
"quoteProps": "as-needed",
8+
"jsxSingleQuote": false,
9+
"trailingComma": "es5",
10+
"bracketSpacing": true,
11+
"jsxBracketSameLine": false,
12+
"arrowParens": "always",
13+
"endOfLine": "lf"
14+
}

‎README.md

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
# Pixel Point Next.js Tailwind Starter
2+
3+
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).
4+
5+
## Table of Contents
6+
7+
- [Getting Started](#getting-started)
8+
- [Usage](#usage)
9+
- [Learn more](#learn-more)
10+
- [Build the website](#deploy-on-vercel)
11+
- [Project Structure](#project-structure)
12+
- [Code Style](#code-style)
13+
- [ESLint](#eslint)
14+
- [Prettier](#prettier)
15+
- [VS Code](#vs-code)
16+
17+
## Getting Started
18+
19+
1. Clone this repository or hit "Use this template" button
20+
21+
```bash
22+
git clone [email protected]:pixel-point/nextjs-tailwind-starter.git
23+
```
24+
25+
2. Install dependencies
26+
27+
```bash
28+
npm install
29+
```
30+
31+
## Usage
32+
33+
```bash
34+
npm run dev
35+
```
36+
37+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
38+
39+
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
40+
41+
### Learn More
42+
43+
To learn more about Next.js, take a look at the following resources:
44+
45+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
46+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
47+
48+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
49+
50+
### Deploy on Vercel
51+
52+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
53+
54+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
55+
56+
## Project Structure
57+
58+
```text
59+
├── public
60+
├── src
61+
│ ├── components
62+
│ │ ├── pages — React components that are being used specifically on a certain page
63+
│ │ └── shared — React components that are being used across the whole website
64+
│ ├── hooks
65+
│ ├── images
66+
│ ├── pages
67+
│ ├── styles
68+
│ ├── utils
69+
├── next.config.js — Main configuration file for a Next.js site. Read more about it [here](https://nextjs.org/docs/api-reference/next.config.js/introduction)
70+
├── postcss.config.js — Main configuration file of PostCSS. [Read more about it here](https://tailwindcss.com/docs/configuration#generating-a-post-css-configuration-file)
71+
└── tailwind.config.js — Main configuration file for Tailwind CSS [Read more about it here](https://tailwindcss.com/docs/configuration)
72+
```
73+
74+
## Component Folder Structure
75+
76+
### Each component includes
77+
78+
1. Main JavaScript File
79+
2. Index File
80+
81+
### Each component optionally may include
82+
83+
1. Folder with images and icons
84+
2. Folder with data
85+
86+
Also, each component may include another component that follows all above listed rules.
87+
88+
### Example structure
89+
90+
```bash
91+
component
92+
├── nested-component
93+
│ ├── data
94+
│ │ └── nested-component-lottie-data.json
95+
│ ├── images
96+
│ │ ├── nested-component-image.jpg
97+
│ │ ├── nested-component-inline-svg.inline.svg
98+
│ │ └── nested-component-url-svg.url.svg
99+
│ ├── nested-component.js
100+
│ └── index.js
101+
├── data
102+
│ └── component-lottie-data.json
103+
├── images
104+
│ ├── component-image.jpg
105+
│ ├── component-inline-svg.inline.svg
106+
│ └── component-url-svg.url.svg
107+
├── component.js
108+
└── index.js
109+
```
110+
111+
## Code Style
112+
113+
### ESLint
114+
115+
[ESLint](https://eslint.org/) helps find and fix code style issues and force developers to follow same rules. Current configuration is based on [Airbnb style guide](https://github.com/airbnb/javascript).
116+
117+
Additional commands:
118+
119+
```bash
120+
npm run lint
121+
```
122+
123+
Run it to check the current status of eslint issues across project.
124+
125+
```bash
126+
npm run lint:fix
127+
```
128+
129+
Run it to fix all possible issues.
130+
131+
### Prettier
132+
133+
[Prettier](https://prettier.io/) helps to format code based on defined rules. [Difference between Prettier and ESLint](https://prettier.io/docs/en/comparison.html).
134+
135+
Additional commands:
136+
137+
```bash
138+
npm run format
139+
```
140+
141+
Run it to format all files across the project.
142+
143+
### VS Code
144+
145+
Following extensions required to simplify the process of keeping the same code style across the project:
146+
147+
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
148+
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
149+
150+
After installation enable "ESLint on save" by adding to your VS Code settings.json the following line:
151+
152+
```json
153+
"editor.codeActionsOnSave": {
154+
"source.fixAll.eslint": true
155+
}
156+
```
157+
158+
You can navigate to settings.json by using Command Pallete (CMD+Shift+P) and then type "Open settings.json".
159+
160+
To enable Prettier go to Preferences -> Settings -> type "Format". Then check that you have esbenp.prettier-vscode as default formatter, and also enable "Format On Save".
161+
162+
Reload VS Code and auto-format will work for you.

‎jsconfig.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": "src",
4+
"jsx": "react"
5+
}
6+
}

0 commit comments

Comments
 (0)