Add linter to the scss themebuilder (#13036) (#13169)

DevExpress · May 22, 2020 · 4d89181 · 4d89181
1 parent 3d1722a
commit 4d89181
Show file tree

Hide file tree

Showing 35 changed files with 2,027 additions and 1,872 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -2,4 +2,5 @@ artifacts/*
 js/viz/docs/*
 node_modules/*
 testing/helpers/sinon/*
-/themebuilder/data/metadata/*
+themebuilder/data/metadata/*
+themebuilder-scss/**/*
diff --git a/docker-ci.sh b/docker-ci.sh
@@ -194,6 +194,9 @@ function run_test_scss {
     npx gulp generate-scss
     npm run build-themes
     node build/gulp/scss/tests/identical.test.js
+
+    cd themebuilder-scss
+    npm i && npm run build && npm run test
 }
 
 function start_runner_watchdog {

diff --git a/themebuilder-scss/.eslintignore b/themebuilder-scss/.eslintignore
@@ -0,0 +1,4 @@
+coverage
+dist
+src/data/metadata/*
+jest.config.js
diff --git a/themebuilder-scss/.eslintrc-themebuilder b/themebuilder-scss/.eslintrc-themebuilder
@@ -0,0 +1,29 @@
+{
+    "env": {
+        "es6": true,
+        "node": true
+    },
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "parserOptions": {
+        "project": "./tsconfig.json",
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "extends": [
+        "devextreme/typescript"
+    ],
+    "overrides": [
+        {
+            "files": ["tests/**/*.ts"],
+            "extends": [
+                "devextreme/jest"
+            ],
+            "parserOptions": {
+                "project": "tests/tsconfig.json"
+            }
+        }
+    ]
+}
diff --git a/themebuilder-scss/package.json b/themebuilder-scss/package.json
@@ -19,7 +19,9 @@
     "semver": "^5.6.0"
   },
   "scripts": {
-    "test": "jest --coverage --verbose --detectOpenHandles",
+    "test-code": "jest --coverage --verbose --detectOpenHandles",
+    "lint": "eslint --config .eslintrc-themebuilder .",
+    "test": "npm run lint && npm run test-code",
     "clean-metadata": "",
     "generate-metadata": "ts-node --files=true src/metadata/generate.ts",
     "build-ts": "tsc",
@@ -29,13 +31,20 @@
     "@types/clean-css": "^4.2.1",
     "@types/jest": "^25.2.1",
     "@types/node-sass": "^4.11.0",
-    "eslint": "^6.8.0",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "eslint": "^7.0.0",
+    "eslint-config-airbnb-typescript": "^7.2.1",
+    "eslint-config-devextreme": "^0.1.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jest": "^23.11.0",
+    "eslint-plugin-jest-formatting": "^1.2.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.20.0",
     "express": "^4.16.4",
     "jest": "^25.4.0",
     "less": "3.9.0",
     "sinon": "^9.0.2",
     "ts-jest": "^25.5.0",
-    "ts-mock-imports": "^1.3.0",
     "ts-node": "^8.10.1",
     "typescript": "^3.8.3"
   }

diff --git a/themebuilder-scss/src/data/bootstrap-metadata/bootstrap-metadata.ts b/themebuilder-scss/src/data/bootstrap-metadata/bootstrap-metadata.ts
@@ -1,66 +1,66 @@
 export default {
-    'base-font-family': '@font-family-sans-serif',
-    'base-accent': '@brand-primary',
-    'base-bg': '@body-bg',
-    'base-text-color': '@text-color',
-    'base-border-color': '@table-border-color',
+  'base-font-family': '@font-family-sans-serif',
+  'base-accent': '@brand-primary',
+  'base-bg': '@body-bg',
+  'base-text-color': '@text-color',
+  'base-border-color': '@table-border-color',
 
-    'base-border-radius': '@border-radius-base',
-    'base-border-radius-large': '@border-radius-large',
-    'base-border-radius-small': '@border-radius-small',
+  'base-border-radius': '@border-radius-base',
+  'base-border-radius-large': '@border-radius-large',
+  'base-border-radius-small': '@border-radius-small',
 
-    'base-success': '@brand-success',
-    'base-warning': '@brand-warning',
-    'base-danger': '@brand-danger',
+  'base-success': '@brand-success',
+  'base-warning': '@brand-warning',
+  'base-danger': '@brand-danger',
 
-    'base-link-color': '@link-color',
-    'base-hover-color': '@table-bg-hover',
+  'base-link-color': '@link-color',
+  'base-hover-color': '@table-bg-hover',
 
-    'button-normal-color': '@btn-default-color',
-    'button-normal-bg': '@btn-default-bg',
-    'button-normal-border-color': '@btn-default-border',
+  'button-normal-color': '@btn-default-color',
+  'button-normal-bg': '@btn-default-bg',
+  'button-normal-border-color': '@btn-default-border',
 
-    'button-default-color': '@btn-primary-color',
-    'button-default-bg': '@btn-primary-bg',
-    'button-default-border-color': '@btn-primary-border',
+  'button-default-color': '@btn-primary-color',
+  'button-default-bg': '@btn-primary-bg',
+  'button-default-border-color': '@btn-primary-border',
 
-    'button-success-color': '@btn-success-color',
-    'button-success-bg': '@btn-success-bg',
-    'button-success-border-color': '@btn-success-border',
+  'button-success-color': '@btn-success-color',
+  'button-success-bg': '@btn-success-bg',
+  'button-success-border-color': '@btn-success-border',
 
-    'button-danger-color': '@btn-danger-color',
-    'button-danger-bg': '@btn-danger-bg',
-    'button-danger-border-color': '@btn-danger-border',
+  'button-danger-color': '@btn-danger-color',
+  'button-danger-bg': '@btn-danger-bg',
+  'button-danger-border-color': '@btn-danger-border',
 
-    'button-border-radius': '@btn-border-radius-base',
+  'button-border-radius': '@btn-border-radius-base',
 
-    'texteditor-border-color': '@input-border',
-    'texteditor-bg': '@input-bg',
-    'texteditor-color': '@input-color',
-    'texteditor-border-radius': '@input-border-radius',
-    'texteditor-focused-border-color': '@input-border-focus',
-    'texteditor-placeholder-color': '@input-color-placeholder',
+  'texteditor-border-color': '@input-border',
+  'texteditor-bg': '@input-bg',
+  'texteditor-color': '@input-color',
+  'texteditor-border-radius': '@input-border-radius',
+  'texteditor-focused-border-color': '@input-border-focus',
+  'texteditor-placeholder-color': '@input-color-placeholder',
 
-    'pager-page-selected-bg': '@pagination-active-bg',
-    'pager-page-selected-border-color': '@pagination-active-border',
-    'pager-page-selected-color': '@pager-active-color',
-    'pager-page-border-radius': '@pager-border-radius',
+  'pager-page-selected-bg': '@pagination-active-bg',
+  'pager-page-selected-border-color': '@pagination-active-border',
+  'pager-page-selected-color': '@pager-active-color',
+  'pager-page-border-radius': '@pager-border-radius',
 
-    'tooltip-color': '@tooltip-color',
-    'tooltip-bg': '@tooltip-bg',
+  'tooltip-color': '@tooltip-color',
+  'tooltip-bg': '@tooltip-bg',
 
-    'overlay-content-bg': '@modal-content-bg',
-    'overlay-border-color': '@modal-content-border-color',
+  'overlay-content-bg': '@modal-content-bg',
+  'overlay-border-color': '@modal-content-border-color',
 
-    'progressbar-bg': '@progress-bg',
-    'progressbar-border-color': '@progress-bar-color',
-    'progressbar-range-bg': '@progress-bar-bg',
+  'progressbar-bg': '@progress-bg',
+  'progressbar-border-color': '@progress-bar-color',
+  'progressbar-range-bg': '@progress-bar-bg',
 
-    'list-border-color': '@list-group-border',
-    'list-item-hover-bg': '@list-group-hover-bg',
-    'list-item-selected-color': '@list-group-active-color',
-    'list-item-selected-bg': '@list-group-active-bg',
+  'list-border-color': '@list-group-border',
+  'list-item-hover-bg': '@list-group-hover-bg',
+  'list-item-selected-color': '@list-group-active-color',
+  'list-item-selected-bg': '@list-group-active-bg',
 
-    'badge-bg': '@badge-bg',
-    'badge-color': '@badge-color'
+  'badge-bg': '@badge-bg',
+  'badge-color': '@badge-color',
 };
diff --git a/themebuilder-scss/src/data/bootstrap-metadata/bootstrap4-metadata.ts b/themebuilder-scss/src/data/bootstrap-metadata/bootstrap4-metadata.ts
@@ -1,60 +1,60 @@
 export default {
-    'base-font-family': '$font-family-sans-serif',
-    'base-accent': '$primary',
-    'base-bg': '$body-bg',
-    'base-text-color': '$body-color',
-    'base-border-color': '$table-border-color',
+  'base-font-family': '$font-family-sans-serif',
+  'base-accent': '$primary',
+  'base-bg': '$body-bg',
+  'base-text-color': '$body-color',
+  'base-border-color': '$table-border-color',
 
-    'base-border-radius': '$border-radius',
-    'base-border-radius-large': '$border-radius-lg',
-    'base-border-radius-small': '$border-radius-sm',
+  'base-border-radius': '$border-radius',
+  'base-border-radius-large': '$border-radius-lg',
+  'base-border-radius-small': '$border-radius-sm',
 
-    'base-success': '$success',
-    'base-warning': '$warning',
-    'base-danger': '$danger',
+  'base-success': '$success',
+  'base-warning': '$warning',
+  'base-danger': '$danger',
 
-    'base-link-color': '$link-color',
-    'base-hover-color': '$table-hover-bg',
+  'base-link-color': '$link-color',
+  'base-hover-color': '$table-hover-bg',
 
-    'button-normal-bg': '$light',
-    'button-normal-border-color': '$light',
+  'button-normal-bg': '$light',
+  'button-normal-border-color': '$light',
 
-    'button-default-bg': '$primary',
-    'button-default-border-color': '$primary',
+  'button-default-bg': '$primary',
+  'button-default-border-color': '$primary',
 
-    'button-success-bg': '$success',
-    'button-success-border-color': '$success',
+  'button-success-bg': '$success',
+  'button-success-border-color': '$success',
 
-    'button-danger-bg': '$danger',
-    'button-danger-border-color': '$danger',
+  'button-danger-bg': '$danger',
+  'button-danger-border-color': '$danger',
 
-    'button-border-radius': '$btn-border-radius',
+  'button-border-radius': '$btn-border-radius',
 
-    'texteditor-border-color': '$input-border-color',
-    'texteditor-bg': '$input-bg',
-    'texteditor-color': '$input-color',
-    'texteditor-border-radius': '$input-border-radius',
-    'texteditor-focused-border-color': '$input-focus-border-color',
-    'texteditor-placeholder-color': '$input-placeholder-color',
+  'texteditor-border-color': '$input-border-color',
+  'texteditor-bg': '$input-bg',
+  'texteditor-color': '$input-color',
+  'texteditor-border-radius': '$input-border-radius',
+  'texteditor-focused-border-color': '$input-focus-border-color',
+  'texteditor-placeholder-color': '$input-placeholder-color',
 
-    'pager-page-selected-bg': '$pagination-active-bg',
-    'pager-page-selected-border-color': '$pagination-active-border-color',
-    'pager-page-selected-color': '$pagination-active-color',
+  'pager-page-selected-bg': '$pagination-active-bg',
+  'pager-page-selected-border-color': '$pagination-active-border-color',
+  'pager-page-selected-color': '$pagination-active-color',
 
-    'tooltip-color': '$tooltip-color',
-    'tooltip-bg': '$tooltip-bg',
+  'tooltip-color': '$tooltip-color',
+  'tooltip-bg': '$tooltip-bg',
 
-    'overlay-content-bg': '$modal-content-bg',
-    'overlay-border-color': '$modal-content-border-color',
+  'overlay-content-bg': '$modal-content-bg',
+  'overlay-border-color': '$modal-content-border-color',
 
-    'progressbar-bg': '$progress-bg',
-    'progressbar-border-color': '$progress-bar-color',
-    'progressbar-range-bg': '$progress-bar-bg',
+  'progressbar-bg': '$progress-bg',
+  'progressbar-border-color': '$progress-bar-color',
+  'progressbar-range-bg': '$progress-bar-bg',
 
-    'list-border-color': '$list-group-border-color',
-    'list-item-hover-bg': '$list-group-hover-bg',
-    'list-item-selected-color': '$list-group-active-color',
-    'list-item-selected-bg': '$list-group-active-bg',
+  'list-border-color': '$list-group-border-color',
+  'list-item-hover-bg': '$list-group-hover-bg',
+  'list-item-selected-color': '$list-group-active-color',
+  'list-item-selected-bg': '$list-group-active-bg',
 
-    'badge-bg': '$primary'
+  'badge-bg': '$primary',
 };