Added JS files formatting with Prettier (#2573)

* Added Prettier and ESlint config

* Prettier formatting

* Remove obsolete files

* [CI] Added CI step

* Adjusted code highlighting

* Migration from node-sass to sass

* Added yarn.lock to gitignore

* Bumped version

Author: mnocon

.eslintignore

@@ -0,0 +1,2 @@
+**/webpack.config.js
+vendor

.eslintrc.json

@@ -1,31 +1,3 @@
 {
-    "plugins": ["prettier"],
-    "extends": ["prettier", "eslint:recommended"],
-    "env": {
-        "browser": true,
-        "commonjs": true,
-        "es6": true,
-        "node": true
-    },
-    "parser": "babel-eslint",
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true,
-            "classes": true,
-            "experimentalObjectRestSpread": true
-        },
-        "sourceType": "module"
-    },
-    "rules": {
-        "no-const-assign": "warn",
-        "no-console": "off",
-        "no-this-before-super": "warn",
-        "no-undef": "warn",
-        "no-unreachable": "warn",
-        "no-unused-vars": "warn",
-        "constructor-super": "warn",
-        "valid-typeof": "warn",
-        "no-extra-semi": "error",
-        "no-extra-boolean-cast": "off"
-    }
+    "extends": "eslint-config-ibexa/eslint"
 }

.github/workflows/build.yaml

@@ -35,6 +35,11 @@ jobs:
             - name: Run PHP CS Fixer
               run: tools/php-cs-fixer/vendor/bin/php-cs-fixer fix --config=.php-cs-fixer.php -v --show-progress=dots
 
+            - name: Run Prettier
+              run: |
+                    yarn install
+                    yarn prettier-test --write
+
             - name: Commit changes
               uses: stefanzweifel/git-auto-commit-action@v4
               with:

.gitignore

@@ -6,3 +6,6 @@ __pycache__/*
 .php-cs-fixer.cache
 composer.lock
 tools/php-cs-fixer/vendor
+node_modules/
+.yarn
+yarn.lock

.prettierignore

@@ -0,0 +1 @@
+**/webpack.config.js

code_samples/back_office/image_editor/assets/random_dot/random-dot-stem.js

@@ -29,5 +29,5 @@ ibexa.addConfig(
         icon: ibexa.helpers.icon.getIconPath('radio-button'), // Path to an icon that will be displayed in the UI
         identifier: IDENTIFIER, // The identifier must match the one from the configuration yaml file
     },
-    true
+    true,
 );

code_samples/back_office/image_editor/assets/random_dot/random-dot.js

@@ -65,5 +65,5 @@ ibexa.addConfig(
         icon: ibexa.helpers.icon.getIconPath('radio-button'),
         identifier: IDENTIFIER,
     },
-    true
+    true,
 );

code_samples/back_office/online_editor/assets/js/online_editor/buttons/date.js

@@ -6,10 +6,10 @@
     const InsertDate = {
         exec: function (editor) {
             const now = new Date();
-            editor.insertHtml( now.toString() );
+            editor.insertHtml(now.toString());
         },
     };
-    
+
     global.CKEDITOR.plugins.add('date', {
         init: (editor) => editor.addCommand('InsertDate', InsertDate),
     });

code_samples/back_office/online_editor/assets/js/online_editor/buttons/hr.js

@@ -1,8 +1,7 @@
-
 const ibexaConfigManager = require('./ibexa.webpack.config.manager.js');
 
 ibexaConfigManager.add({
     ibexaConfig,
     entryName: 'ibexa-admin-ui-layout-js',
-    newItems: [ path.resolve(__dirname, './assets/js/admin.search.autocomplete.product.js'), ],
+    newItems: [path.resolve(__dirname, './assets/js/admin.search.autocomplete.product.js')],
 });

code_samples/back_office/online_editor/assets/js/online_editor/plugins/date.js

@@ -1,14 +1,16 @@
 (function (global, doc, ibexa, Routing) {
     const renderItem = (result, searchText) => {
         const globalSearch = doc.querySelector('.ibexa-global-search');
-        const {highlightText} = ibexa.helpers.highlight;
-        const autocompleteHighlightTemplate = globalSearch.querySelector('.ibexa-global-search__autocomplete-list').dataset.templateHighlight;
-        const {getContentTypeIconUrl, getContentTypeName} = ibexa.helpers.contentType;
+        const { highlightText } = ibexa.helpers.highlight;
+        const autocompleteHighlightTemplate = globalSearch.querySelector('.ibexa-global-search__autocomplete-list').dataset
+            .templateHighlight;
+        const { getContentTypeIconUrl, getContentTypeName } = ibexa.helpers.contentType;
 
-        const autocompleteItemTemplate = globalSearch.querySelector('.ibexa-global-search__autocomplete-product-template').dataset.templateItem;
+        const autocompleteItemTemplate = globalSearch.querySelector('.ibexa-global-search__autocomplete-product-template').dataset
+            .templateItem;
 
         return autocompleteItemTemplate
-            .replace('{{ productHref }}', Routing.generate('ibexa.product_catalog.product.view', {productCode: result.productCode}))
+            .replace('{{ productHref }}', Routing.generate('ibexa.product_catalog.product.view', { productCode: result.productCode }))
             .replace('{{ productName }}', highlightText(searchText, result.name, autocompleteHighlightTemplate))
             .replace('{{ productCode }}', result.productCode)
             .replace('{{ productTypeIconHref }}', getContentTypeIconUrl(result.productTypeIdentifier))

code_samples/back_office/search/append_to_webpack.config.js

@@ -22,7 +22,7 @@ ibexa.addConfig(
             icon: '/bundles/ibexaadminui/img/ibexa-icons.svg#image',
         },
     ],
-    true
+    true,
 );
 
 export default ImageTabModule;

code_samples/back_office/search/assets/js/admin.search.autocomplete.product.js

@@ -3,19 +3,15 @@
         const richtext = new ibexa.BaseRichText();
 
         // Enable editor in all ibexa-data-source divs
-        doc.querySelectorAll('.ibexa-data-source').forEach(
-            (ibexaDataSource) => {
-                const richtextContainer = ibexaDataSource.querySelector(
-                    '.ibexa-data-source__richtext'
-                );
+        doc.querySelectorAll('.ibexa-data-source').forEach((ibexaDataSource) => {
+            const richtextContainer = ibexaDataSource.querySelector('.ibexa-data-source__richtext');
 
-                if (richtextContainer.classList.contains('ck')) {
-                    return;
-                }
-
-                richtext.init(richtextContainer);
+            if (richtextContainer.classList.contains('ck')) {
+                return;
             }
-        );
+
+            richtext.init(richtextContainer);
+        });
     });
 
     const openUdw = (config) => {

code_samples/back_office/udw/assets/js/image-tab/components/image.js

@@ -1,4 +1,4 @@
-import Calculator from "/assets/page-builder/components/Calculator";
+import Calculator from '/assets/page-builder/components/Calculator';
 
 export default {
     Calculator: Calculator,

code_samples/back_office/udw/assets/js/image-tab/image.tab.module.js

@@ -110,7 +110,7 @@ To allow template override and ease HTML writing, the example is also loading a
 
 Here is a complete `assets/js/admin.search.autocomplete.product.js` from the product suggestion example:
 
-``` js hl_lines="8"
+``` js hl_lines="9"
 [[= include_file('code_samples/back_office/search/assets/js/admin.search.autocomplete.product.js') =]]
 ```
 

code_samples/forms/custom_form_attribute/assets/js/formbuilder-richtext-checkbox.js

@@ -4,9 +4,17 @@
   "main": "index.js",
   "repository": "[email protected]:ibexa/documentation-developer.git",
   "scripts": {
-     "scss": "node-sass --watch scss -o docs/css"
+    "scss": "sass --watch scss:docs/css",
+    "test": "yarn prettier-test && yarn eslint-test",
+    "fix": "yarn prettier-test --write && yarn eslint-test --fix",
+    "eslint-test": "eslint \"./code_samples/**/*.js\"",
+    "prettier-test": "yarn prettier \"./code_samples/**/*.{js,scss}\" --check"
+  },
+  "prettier": "eslint-config-ibexa/prettier",
+  "devDependencies": {
+    "eslint-config-ibexa": "https://github.com/ibexa/eslint-config-ibexa.git#~v1.1.1"
   },
   "dependencies": {
-    "node-sass": "^9.0.0"
+    "sass": "^1.82.0"
   }
 }