Initial commit

.commitlintrc.json

@@ -0,0 +1,20 @@
+{
+  "extends": ["@commitlint/config-conventional"],
+  "rules": {
+    "scope-enum": [
+      2,
+      "always",
+      [
+        "components",
+        "constants",
+        "hooks",
+        "icons",
+        "images",
+        "pages",
+        "styles",
+        "templates",
+        "utils"
+      ]
+    ]
+  }
+}

.eslintrc.js

@@ -0,0 +1,88 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: [
+    'airbnb',
+    'airbnb/hooks',
+    'airbnb/whitespace',
+    'prettier',
+    'plugin:@next/next/recommended',
+  ],
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: {
+    // Removes "default" from "restrictedNamedExports", original rule setup — https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/es6.js#L65
+    'no-restricted-exports': ['error', { restrictedNamedExports: ['then'] }],
+    'no-unused-vars': 'error',
+    'no-shadow': 'off',
+    'no-undef': 'error',
+    'react/prop-types': 'error',
+    'react/no-array-index-key': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'react/no-danger': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/forbid-prop-types': 'off',
+    // 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
+    'react/function-component-definition': [
+      'error',
+      {
+        namedComponents: 'arrow-function',
+        unnamedComponents: 'arrow-function',
+      },
+    ],
+    'react/jsx-sort-props': [
+      'error',
+      {
+        callbacksLast: true,
+        shorthandLast: true,
+        noSortAlphabetically: true,
+      },
+    ],
+    'import/order': [
+      'error',
+      {
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+      },
+    ],
+    'jsx-a11y/label-has-associated-control': [
+      'error',
+      {
+        required: {
+          some: ['nesting', 'id'],
+        },
+      },
+    ],
+    'jsx-a11y/label-has-for': [
+      'error',
+      {
+        required: {
+          some: ['nesting', 'id'],
+        },
+      },
+    ],
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        paths: ['src'],
+      },
+    },
+  },
+};

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+.vscode/snipsnap.code-snippets
+
+#linters
+.stylelintcache
+.eslintcache
+
+.idea/

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit ""

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install lint-staged --concurrent false

.lintstagedrc

@@ -0,0 +1,4 @@
+{
+  "*.{js,jsx,html,css,md}": "prettier --write",
+  "*.{js,jsx}": "eslint --cache --fix",
+}

.markdownlint.json

@@ -0,0 +1,4 @@
+{
+  "line-length": false,
+  "ol-prefix": false
+}

.prettierignore

@@ -0,0 +1,2 @@
+package.json
+package-lock.json

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}

README.md

@@ -0,0 +1,162 @@
+# Pixel Point Next.js Tailwind Starter
+
+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).
+
+## Table of Contents
+
+- [Getting Started](#getting-started)
+- [Usage](#usage)
+  - [Learn more](#learn-more)
+  - [Build the website](#deploy-on-vercel)
+- [Project Structure](#project-structure)
+- [Code Style](#code-style)
+  - [ESLint](#eslint)
+  - [Prettier](#prettier)
+  - [VS Code](#vs-code)
+
+## Getting Started
+
+1. Clone this repository or hit "Use this template" button
+
+```bash
+git clone [email protected]:pixel-point/nextjs-tailwind-starter.git
+```
+
+2. Install dependencies
+
+```bash
+npm install
+```
+
+## Usage
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+### Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+### Deploy on Vercel
+
+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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+## Project Structure
+
+```text
+├── public
+├── src
+│   ├── components
+│   │  ├── pages — React components that are being used specifically on a certain page
+│   │  └── shared — React components that are being used across the whole website
+│   ├── hooks
+│   ├── images
+│   ├── pages
+│   ├── styles
+│   ├── utils
+├── 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)
+├── postcss.config.js — Main configuration file of PostCSS. [Read more about it here](https://tailwindcss.com/docs/configuration#generating-a-post-css-configuration-file)
+└── tailwind.config.js — Main configuration file for Tailwind CSS [Read more about it here](https://tailwindcss.com/docs/configuration)
+```
+
+## Component Folder Structure
+
+### Each component includes
+
+1. Main JavaScript File
+2. Index File
+
+### Each component optionally may include
+
+1. Folder with images and icons
+2. Folder with data
+
+Also, each component may include another component that follows all above listed rules.
+
+### Example structure
+
+```bash
+component
+├── nested-component
+│  ├── data
+│  │  └── nested-component-lottie-data.json
+│  ├── images
+│  │  ├── nested-component-image.jpg
+│  │  ├── nested-component-inline-svg.inline.svg
+│  │  └── nested-component-url-svg.url.svg
+│  ├── nested-component.js
+│  └── index.js
+├── data
+│  └── component-lottie-data.json
+├── images
+│  ├── component-image.jpg
+│  ├── component-inline-svg.inline.svg
+│  └── component-url-svg.url.svg
+├── component.js
+└── index.js
+```
+
+## Code Style
+
+### ESLint
+
+[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).
+
+Additional commands:
+
+```bash
+npm run lint
+```
+
+Run it to check the current status of eslint issues across project.
+
+```bash
+npm run lint:fix
+```
+
+Run it to fix all possible issues.
+
+### Prettier
+
+[Prettier](https://prettier.io/) helps to format code based on defined rules. [Difference between Prettier and ESLint](https://prettier.io/docs/en/comparison.html).
+
+Additional commands:
+
+```bash
+npm run format
+```
+
+Run it to format all files across the project.
+
+### VS Code
+
+Following extensions required to simplify the process of keeping the same code style across the project:
+
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+
+After installation enable "ESLint on save" by adding to your VS Code settings.json the following line:
+
+```json
+"editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+}
+```
+
+You can navigate to settings.json by using Command Pallete (CMD+Shift+P) and then type "Open settings.json".
+
+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".
+
+Reload VS Code and auto-format will work for you.

jsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "jsx": "react"
+  }
+}