Add dependency Husky, updates dependencies and config for the Eslint,…

… Prettier (#213)

* Update Eslint config

* Update Prettier config

* Add husky dependency

* Update dependencies

* Add .lintstagedrc

* Delete dependencies for storybook

* Add option for css-modules

* Fix dev-dependencies

* Add shared component Link

* Add folder for hooks

* Add global and fonts styles

* Add utilsmeta-image-path and get-text-without-paragraph

* Add static variables

* Add mixins

* Fix styles and default exports

* Refactoring utils folder

* Refactoring styles global, variables, mixins

* Delete styles for header

* Update SEO component

* Fix build

* Delete comment for variables

* Fix variables the name Breakpoints

* Fix name breakpoint variable for lg

* Refactoring Breakpoints variables

* Upgrade dependencies

* Add various fixes

* Return SEO component

* Run Prettier and ESLint on all files

* Upgrade dependencies

* Fix SEO

Co-authored-by: Maksim Gorodov <[email protected]>

.drone.yml

@@ -1,4 +1,3 @@
-
 kind: pipeline
 name: default
 
@@ -9,4 +8,4 @@ steps:
       GATSBY_DEFAULT_SITE_URL: http://localhost
     commands:
       - npm install
-      - npm run build
+      - npm run build

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     es6: true,
     node: true,
   },
-  extends: ['plugin:react/recommended', 'airbnb', 'prettier'],
+  extends: ['plugin:react/recommended', 'airbnb', 'prettier', 'prettier/react'],
   globals: {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',
@@ -13,7 +13,7 @@ module.exports = {
     ecmaFeatures: {
       jsx: true,
     },
-    ecmaVersion: 2018,
+    ecmaVersion: 2020,
     sourceType: 'module',
   },
   plugins: ['react'],
@@ -24,6 +24,31 @@ module.exports = {
         extensions: ['.js'],
       },
     ],
+    'react/no-array-index-key': 0,
+    'react/jsx-props-no-spreading': 0,
+    'react/no-danger': 0,
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: ['gatsby-config.js', 'gatsby-node.js', 'gatsby-ssr.js'],
+      },
+    ],
+    'jsx-a11y/label-has-associated-control': [
+      'error',
+      {
+        required: {
+          some: ['nesting', 'id'],
+        },
+      },
+    ],
+    'jsx-a11y/label-has-for': [
+      'error',
+      {
+        required: {
+          some: ['nesting', 'id'],
+        },
+      },
+    ],
   },
   settings: {
     'import/resolver': {

.huskyrc

@@ -0,0 +1,5 @@
+{
+  "hooks": {
+    "pre-commit": "lint-staged --concurrent false"
+  }
+}

.lintstagedrc

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

.prettierrc

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

gatsby-config.js

@@ -2,10 +2,8 @@ require('dotenv').config();
 
 module.exports = {
   siteMetadata: {
-    siteTitle:
-      'Pixel Point Gatsby Starter', // <title>
-    siteDescription:
-      'Site Description',
+    siteTitle: 'Pixel Point Gatsby Starter', // <title>
+    siteDescription: 'Site Description',
     // pathPrefix: "",
     siteImage: '/images/sample-image.png',
     siteLanguage: 'en',
@@ -49,9 +47,10 @@ module.exports = {
           {
             test: /\.inline.svg$/,
             svgoConfig: {
-              plugins: [{
-                removeViewBox: false,
-              },
+              plugins: [
+                {
+                  removeViewBox: false,
+                },
               ],
             },
           },
@@ -60,9 +59,11 @@ module.exports = {
           {
             test: /\.svg$/,
             svgoConfig: {
-              plugins: [{
-                removeViewBox: false,
-              }],
+              plugins: [
+                {
+                  removeViewBox: false,
+                },
+              ],
             },
           },
         ],
@@ -73,6 +74,9 @@ module.exports = {
       resolve: 'gatsby-plugin-sass',
       options: {
         data: '@import "./src/styles/variables.scss" , "./src/styles/mixins.scss";',
+        cssLoaderOptions: {
+          camelCase: true,
+        },
       },
     },
     // this (optional) plugin enables Progressive Web App + Offline functionality