IBX-2677: As a developer I want to have prettier and eslint style che…

…ck/fix (#393)

* init

* added prettier script

* added all scripts

* prettier fixes

* reorder package.json props

* added scss run

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-    "extends": "eslint-config-ibexa"
+    "extends": "eslint-config-ibexa/eslint"
 }

.github/workflows/frontend-ci.yaml

@@ -4,12 +4,14 @@ on:
     push:
         paths:
             - "**.js"
+            - "**.scss"
         branches:
             - main
             - '[0-9]+.[0-9]+'
     pull_request:
         paths:
             - "**.js"
+            - "**.scss"
 
 jobs:
     frontend-test:

package.json

@@ -2,12 +2,15 @@
     "name": "admin-ui",
     "repository": "git@github.com:ibexa/admin-ui.git",
     "private": true,
+    "prettier": "eslint-config-ibexa/prettier",
     "dependencies": {},
     "devDependencies": {
-        "eslint-config-ibexa": "https://github.com/ibexa/eslint-config-ibexa.git"
+        "eslint-config-ibexa": "https://github.com/ibexa/eslint-config-ibexa.git#v1.0.0"
     },
     "scripts": {
-        "test": "yarn eslint-test",
-        "eslint-test": "eslint \"./src/bundle/Resources/**/*.js\" \"./src/bundle/ui-dev/**/*.js\""
+        "test": "yarn prettier-test && yarn eslint-test",
+        "fix": "yarn prettier-test --write && yarn eslint-test --fix",
+        "eslint-test": "eslint \"./src/bundle/Resources/**/*.js\" \"./src/bundle/ui-dev/**/*.js\"",
+        "prettier-test": "yarn prettier \"./src/bundle/Resources/**/*.{js,scss}\" \"./src/bundle/ui-dev/**/*.js\" --check"
     }
 }

src/bundle/Resources/public/scss/_custom.scss

@@ -178,7 +178,7 @@ $grays: (
     600: $ibexa-color-light-500,
     700: $ibexa-color-light,
     800: $ibexa-color-light,
-    900: $ibexa-color-dark-300
+    900: $ibexa-color-dark-300,
 );
 
 $blue: $ibexa-color-primary;
@@ -193,19 +193,19 @@ $purple: #6f42c1 !default;
 $cyan: #17a2b8 !default;
 
 $colors: (
-    "blue": $ibexa-color-primary,
-    "red": $ibexa-color-primary,
-    "orange": $ibexa-color-primary,
-    "yellow": $ibexa-color-warning,
-    "green": $ibexa-color-success,
-    "teal": $ibexa-color-white,
-    "white": $ibexa-color-white,
-    "gray": $ibexa-color-dark-300,
-    "gray-dark": $pink,
-    "indigo": $indigo,
-    "purple": $purple,
-    "pink": $pink,
-    "cyan": $cyan
+    'blue': $ibexa-color-primary,
+    'red': $ibexa-color-primary,
+    'orange': $ibexa-color-primary,
+    'yellow': $ibexa-color-warning,
+    'green': $ibexa-color-success,
+    'teal': $ibexa-color-white,
+    'white': $ibexa-color-white,
+    'gray': $ibexa-color-dark-300,
+    'gray-dark': $pink,
+    'indigo': $indigo,
+    'purple': $purple,
+    'pink': $pink,
+    'cyan': $cyan,
 );
 
 $theme-colors: (
@@ -216,7 +216,7 @@ $theme-colors: (
     danger: $ibexa-color-danger,
     light: $ibexa-color-light-200,
     dark: $ibexa-color-dark,
-    info: $cyan
+    info: $cyan,
 );
 
 // Typography
@@ -314,7 +314,7 @@ $container-max-widths: (
     sm: 540px,
     md: 720px,
     lg: 960px,
-    xl: 1470px
+    xl: 1470px,
 ) !default;
 
 //Inputs

src/bundle/Resources/public/scss/_flatpickr.scss

@@ -1,7 +1,7 @@
 .ibexa-content-view .flatpickr-calendar {
     &.animate.open {
         -webkit-animation: eZfpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
-                animation: eZfpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+        animation: eZfpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
     }
 }
 
@@ -19,7 +19,7 @@
     from {
         opacity: 0;
     }
-    
+
     to {
         opacity: 1;
     }

src/bundle/Resources/public/scss/_list-search.scss

@@ -13,7 +13,7 @@
             display: flex;
         }
 
-        input[type="search"],
+        input[type='search'],
         .ibexa-input-text-wrapper {
             width: calculateRem(410px);
         }

src/bundle/Resources/public/scss/_tag-view-select.scss

@@ -50,7 +50,6 @@
                     }
                 }
 
-
                 &__selected-item-tag-ellipsize {
                     display: inline-block;
                 }

src/bundle/Resources/public/scss/mixins/_general.scss

@@ -1,11 +1,11 @@
 @mixin container-box-shadow-right {
-    box-shadow: calculateRem(12px) 0 calculateRem(12px) calculateRem(-12px) rgba(34,34,34,0.25);
+    box-shadow: calculateRem(12px) 0 calculateRem(12px) calculateRem(-12px) rgba(34, 34, 34, 0.25);
 }
 
 @mixin container-box-shadow-left {
-    box-shadow: calculateRem(-12px) 0 calculateRem(12px) calculateRem(-12px) rgba(34,34,34,0.25);
+    box-shadow: calculateRem(-12px) 0 calculateRem(12px) calculateRem(-12px) rgba(34, 34, 34, 0.25);
 }
 
 @mixin container-box-shadow {
-    box-shadow: 0 0 calculateRem(12px) calculateRem(-4px) rgba(34,34,34,0.25);
+    box-shadow: 0 0 calculateRem(12px) calculateRem(-4px) rgba(34, 34, 34, 0.25);
 }

src/bundle/Resources/public/scss/polyfill/_div.import.scss

@@ -1 +1 @@
-@forward "sass:math" show div;
+@forward 'sass:math' show div;

src/bundle/Resources/public/scss/polyfill/_div.scss

@@ -1,3 +1,3 @@
 @function div($number1, $number2) {
-  @return $number1 / $number2;
+    @return $number1 / $number2;
 }

src/bundle/Resources/public/scss/ui/modules/content-tree/_list.item.scss

@@ -155,7 +155,8 @@
         color: $ibexa-color-dark;
         text-decoration: underline;
         font-size: $ibexa-text-font-size-medium;
-        transition: background $ibexa-admin-transition-duration $ibexa-admin-transition, color $ibexa-admin-transition-duration $ibexa-admin-transition;
+        transition: background $ibexa-admin-transition-duration $ibexa-admin-transition,
+            color $ibexa-admin-transition-duration $ibexa-admin-transition;
 
         .ibexa-icon {
             fill: $ibexa-color-dark;

src/bundle/Resources/public/scss/ui/modules/content-tree/_list.scss

@@ -6,6 +6,6 @@
     &__no-items-message {
         padding: calculateRem(10px);
         font-size: $ibexa-text-font-size-small;
-        color:$ibexa-color-dark-400;
+        color: $ibexa-color-dark-400;
     }
 }

src/bundle/Resources/public/scss/ui/modules/universal-discovery/_selected.locations.scss

@@ -17,7 +17,6 @@
         justify-content: space-between;
         align-items: center;
         padding: calculateRem(12px) calculateRem(12px) calculateRem(12px) calculateRem(32px);
-
     }
 
     &__selection-counter {

src/bundle/Resources/public/scss/ui/modules/universal-discovery/_tab.selector.scss

@@ -31,7 +31,6 @@
                 height: calculateRem(1.5px);
                 width: calculateRem(24px);
                 background-color: $ibexa-color-dark-200;
-
             }
         }
     }

src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-list/css/upload.list.component.css

@@ -8,4 +8,4 @@
 
 .c-upload-list .c-upload-list-item + .c-upload-list-item {
     border-top: 1px solid #a8c8d5;
-}
+}