Add git hooks and linters (#222)

* add husky and linting * fix
morewings · Oct 26, 2020 · cb416ea · cb416ea
1 parent 60b9ac1
commit cb416ea
Show file tree

Hide file tree

Showing 41 changed files with 1,053 additions and 244 deletions.
diff --git a/.huskyrc b/.huskyrc
@@ -0,0 +1,5 @@
+{
+  "hooks": {
+    "pre-commit": "lint-staged",
+  }
+}
diff --git a/.lintstagedrc b/.lintstagedrc
@@ -0,0 +1,10 @@
+{
+  "*.js": [
+    "eslint --fix",
+    "git add"
+  ],
+  "*.css": [
+    "stylelint --fix",
+    "git add"
+  ]
+}
diff --git a/.stylelintignore b/.stylelintignore
@@ -0,0 +1 @@
+*.png
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "function-calc-no-unspaced-operator": true,
+    "order/order": [
+      "custom-properties",
+      "declarations"
+    ],
+    "order/properties-alphabetical-order": true,
+    "selector-pseudo-class-no-unknown": [true, {
+      "ignorePseudoClasses": ["global"]
+    }]
+  },
+  "plugins": [
+    "stylelint-order"
+  ],
+  "ignoreFiles": ["**/*.snap"]
+}
diff --git a/package.json b/package.json
@@ -44,8 +44,13 @@
     "fontello-cli": "^0.5.0",
     "gatsby-plugin-postcss": "^2.3.13",
     "gatsby-plugin-root-import": "^2.0.5",
+    "husky": "^4.3.0",
+    "lint-staged": "^10.4.2",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.1.2"
+    "prettier": "^2.1.2",
+    "stylelint": "^13.7.2",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-order": "^4.1.0"
   },
   "keywords": [
     "gatsby"
@@ -58,9 +63,11 @@
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 0",
     "fix:js": "npx eslint --fix ./src/",
     "lint:js": "npx eslint ./src/",
+    "lint:style": "npx stylelint ./src/",
+    "fix:style": "npx stylelint ./src/ --fix",
     "edit:fonts": "npx fontello-cli open --config ./fontello/config.json"
   },
   "repository": {

diff --git a/src/components/Column/Column.module.css b/src/components/Column/Column.module.css
@@ -1,42 +1,46 @@
-.column{
+.column {
   --paddingHorizontal: calc(3 * var(--baseUnit));
   --paddingVertical: calc(4 * var(--baseUnit));
+
+  background-clip: border-box;
+  background-color: var(--backgroundLowColor);
+  border-radius: var(--baseBorderRadius);
   display: flex;
   flex-direction: column;
-  margin: calc(6 * var(--baseUnit)) 0;
-  border-radius: var(--baseBorderRadius);
-  background-clip: border-box;
   height: var(--columnHeight);
+  margin: calc(6 * var(--baseUnit)) 0;
   overflow: auto;
-  background-color: var(--backgroundLowColor);
   padding: var(--paddingVertical) 0 0;
 }
 
 .header {
+  align-items: center;
   display: flex;
   flex-direction: column;
-  align-items: center;
   margin-bottom: calc(4 * var(--baseUnit));
-  & .icon{
+
+  & .icon {
     color: var(--accentColor);
     font-size: 22px;
     line-height: 1;
   }
-  & .text{
-    max-width: 80%;
-    margin: 0 auto;
+
+  & .text {
     font-size: 16px;
-    text-transform: uppercase;
-    letter-spacing: .8px;
     font-weight: 300;
-    white-space: nowrap;
+    letter-spacing: 0.8px;
+    margin: 0 auto;
+    max-width: 80%;
     overflow: hidden;
     text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
   }
 }
 
 .nodes {
   --marginBottom: calc(4 * var(--baseUnit));
+
   flex: 1;
   margin: 0 0 var(--marginBottom);
   overflow: auto;

diff --git a/src/components/ConfirmationDeleteNode/ConfirmationDeleteNode.module.css b/src/components/ConfirmationDeleteNode/ConfirmationDeleteNode.module.css
@@ -1,17 +1,17 @@
 .confirmation {
-  width: var(--modalWidth);
   border-radius: var(--baseUnit);
   overflow: hidden;
+  width: var(--modalWidth);
 }
 
 .main {
-  display: flex;
-  padding: calc(3 * var(--baseUnit));
   align-items: flex-start;
   background: var(--backgroundFullColor);
+  display: flex;
+  padding: calc(3 * var(--baseUnit));
 }
 
-.left{
+.left {
   margin-right: calc(2 * var(--baseUnit));
 }
 
@@ -25,8 +25,8 @@
 }
 
 .right {
+  color: var(--darkColor);
   font-size: 16px;
-  line-height: 1.5;
   font-weight: 300;
-  color: var(--darkColor);
+  line-height: 1.5;
 }
diff --git a/src/components/ConfirmationDeleteStructure/ConfirmationDeleteStructure.module.css b/src/components/ConfirmationDeleteStructure/ConfirmationDeleteStructure.module.css
@@ -1,17 +1,17 @@
 .confirmation {
-  width: var(--modalWidth);
   border-radius: var(--baseUnit);
   overflow: hidden;
+  width: var(--modalWidth);
 }
 
 .main {
-  display: flex;
-  padding: calc(3 * var(--baseUnit));
   align-items: flex-start;
   background: var(--backgroundFullColor);
+  display: flex;
+  padding: calc(3 * var(--baseUnit));
 }
 
-.left{
+.left {
   margin-right: calc(2 * var(--baseUnit));
 }
 
@@ -21,10 +21,10 @@
 }
 
 .right {
+  color: var(--darkColor);
   font-size: 16px;
-  line-height: 1.5;
   font-weight: 300;
-  color: var(--darkColor);
+  line-height: 1.5;
 }
 
 .button {

diff --git a/src/components/CreateNode/CreateNode.module.css b/src/components/CreateNode/CreateNode.module.css
@@ -1,23 +1,24 @@
 .createNode {
-  width: var(--modalWidth);
   border-radius: var(--baseUnit);
   overflow: hidden;
+  width: var(--modalWidth);
 }
 
 .main {
   background: var(--backgroundFullColor);
 }
 
-.header{
+.header {
   padding: calc(6 * var(--baseUnit)) calc(6 * var(--baseUnit)) calc(4 * var(--baseUnit));
+
   & h2 {
-    font-size: 24px;
-    text-transform: uppercase;
-    letter-spacing: 1.2px;
     color: var(--darkColor);
-    margin-right: calc(2 * var(--baseUnit));
     display: inline-block;
+    font-size: 24px;
+    letter-spacing: 1.2px;
     margin-bottom: 0;
+    margin-right: calc(2 * var(--baseUnit));
+    text-transform: uppercase;
   }
 }
 

diff --git a/src/components/EditNode/EditNode.module.css b/src/components/EditNode/EditNode.module.css
@@ -1,24 +1,26 @@
 .editNode {
-  width: var(--modalWidth);
   border-radius: var(--baseUnit);
   overflow: hidden;
+  width: var(--modalWidth);
 }
 
 .main {
   background: var(--backgroundFullColor);
 }
 
-.header{
+.header {
   padding: calc(6 * var(--baseUnit)) calc(6 * var(--baseUnit)) calc(4 * var(--baseUnit));
+
   & h2 {
-    font-size: 24px;
-    text-transform: uppercase;
-    letter-spacing: 1.2px;
     color: var(--darkColor);
-    margin-right: calc(2 * var(--baseUnit));
     display: inline-block;
+    font-size: 24px;
+    letter-spacing: 1.2px;
     margin-bottom: 0;
+    margin-right: calc(2 * var(--baseUnit));
+    text-transform: uppercase;
   }
+
   & small {
     font-size: 16px;
     font-weight: 300;

diff --git a/src/components/FloatingActions/FloatingActions.module.css b/src/components/FloatingActions/FloatingActions.module.css
@@ -1,17 +1,19 @@
 .floatingActions {
   --marginValue: calc(8 * var(--baseUnit));
   --paddingValue: calc(4 * var(--baseUnit));
-  position: fixed;
-  right: var(--marginValue);
-  bottom: calc(var(--footerHeight) + var(--marginValue));
-  padding: var(--paddingValue) 0;
+
+  align-items: center;
   background: var(--backgroundMiddleColor);
+  border: 1px solid transparent;
   border-radius: var(--baseUnit);
-  width: calc(12 * var(--baseUnit));
+  bottom: calc(var(--footerHeight) + var(--marginValue));
   display: flex;
   flex-direction: column;
-  align-items: center;
-  border: 1px solid transparent;
+  padding: var(--paddingValue) 0;
+  position: fixed;
+  right: var(--marginValue);
+  width: calc(12 * var(--baseUnit));
+
   &:hover {
     border: 1px solid var(--actionColor);
   }
@@ -24,8 +26,8 @@
 }
 
 .divider {
-  height: 1px;
   background: var(--bgColor);
-  width: 100%;
+  height: 1px;
   margin-bottom: calc(2 * var(--baseUnit));
+  width: 100%;
 }
diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
@@ -1,4 +1,4 @@
 .footer {
+  background-color: var(--backgroundLowColor);
   height: var(--footerHeight);
-  background-color: var(--backgroundLowColor)
 }
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
@@ -1,4 +1,4 @@
-.header{
+.header {
   background-color: var(--backgroundLowColor);
   padding: 9px 0;
 }
@@ -7,43 +7,44 @@
   display: flex;
 }
 
-.brand{
-  display: flex;
+.brand {
   align-items: center;
+  display: flex;
 }
 
-.logo{
+.logo {
+  color: var(--accentColor);
   font-size: 36px;
   line-height: 30px;
-  color: var(--accentColor);
 }
 
-.name{
+.name {
+  color: var(--darkColor);
+  cursor: default;
   font-size: 24px;
-  text-transform: uppercase;
   font-weight: 300;
   letter-spacing: 2.24px;
-  color: var(--darkColor);
   margin-left: 18px;
-  cursor: default;
+  text-transform: uppercase;
   user-select: none;
 }
 
-.navigation{
-  display: flex;
+.navigation {
   align-items: center;
+  display: flex;
   justify-content: space-between;
   margin-left: auto;
 }
 
 .navItem {
   margin: 0 calc(2 * var(--baseUnit));
+
   &:last-child {
     margin-right: 0;
   }
 }
 
-.githubLink{
+.githubLink {
   color: var(--darkColor);
   font-size: 24px;
 }
diff --git a/src/components/Layout/Layout.module.css b/src/components/Layout/Layout.module.css
@@ -1,10 +1,10 @@
-.layout{
+.layout {
   background-color: var(--bgColor);
   display: flex;
   flex-direction: column;
 }
 
-.main{
+.main {
+  flex: 1;
   min-height: calc(100vh - var(--headerHeight) - var(--footerHeight));
-  flex: 1
 }
diff --git a/src/components/Layout/global.css b/src/components/Layout/global.css
@@ -1,3 +1,3 @@
-body{
+body {
   font-family: 'IBM Plex Sans', serif;
-}
+}