update node modules and update webpack and styleguidist configurations

.eslintrc

@@ -1,30 +1,29 @@
 {
-  "parser": "babel-eslint",
-  "extends": "airbnb",
-  "plugins": ["react-hooks", "cypress"],
+  "parser": "@babel/eslint-parser",
+  "extends": ["airbnb", "plugin:cypress/recommended"],
+  "plugins": ["react-hooks"],
   "rules": {
     "no-use-before-define": ["error", { "functions": false }],
     "react-hooks/rules-of-hooks": "error",
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-    "react/require-default-props": false,
-    "jsx-a11y/label-has-for": false,
-    "jsx-a11y/label-has-associated-control": false,
-    "jsx-a11y/no-autofocus": false,
-    "jsx-a11y/no-noninteractive-element-interactions": false,
-    "jsx-a11y/anchor-is-valid": false,
-    "no-console": 0,
-    "import/prefer-default-export": 0,
+    "react/jsx-props-no-spreading": "off",
+    "react/require-default-props": "off",
+    "jsx-a11y/label-has-for": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "jsx-a11y/no-autofocus": "off",
+    "jsx-a11y/no-noninteractive-element-interactions": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "no-console": "off",
+    "import/prefer-default-export": "off",
     "indent": ["error", 2, {
       "ignoredNodes": ["TemplateLiteral"]
     }]
   },
-  "globals": {
-    "window": true,
-    "document": true,
-    "Cypress": true,
-    "cy": true,
-    "describe": true,
-    "it": true,
-    "expect": true
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2021
   }
 }

.github/workflows/run-tests.yml

@@ -32,7 +32,7 @@ jobs:
     - name: install
       run: npm config set //registry.npmjs.org/:_authToken "${{ secrets. NPM_TOKEN }}" && npm install
     - name: test
-      run: npm run cy:run
+      run: npm test
     - name: SonarCloud Scan
       uses: sonarsource/sonarcloud-github-action@master
       with:

.github/workflows/sonarcloud.yml

@@ -14,7 +14,7 @@ jobs:
     - name: install
       run: npm config set //registry.npmjs.org/:_authToken "${{ secrets. NPM_TOKEN }}" && npm install
     - name: test
-      run: npm run cy:run
+      run: npm test
     - name: SonarCloud Scan
       uses: sonarsource/sonarcloud-github-action@master
       with:

.npmrc

@@ -0,0 +1 @@
+save-prefix=""

README.md

@@ -17,7 +17,7 @@ $component-images-path: "~@tyk-technologies/tyk-ui/lib/images/";
 @import '~@tyk-technologies/tyk-ui/lib/sass/index';
 ```
 *NOTE*:
-For projects that don't SASS but just pure css we are also exposing the compiled styles.
+For projects that don't use SASS but just pure css we are also exposing the compiled styles.
 ```html
 <link rel="stylesheet" type="text/css" href="node_modules/@tyk-technologies/tyk-ui/tyk-ui.css">
 ```

lib/sass/common/sass/mixins.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @function theme-color($key: 'primary', $variant: 'base') {
   $map: map-get($theme-colors, $key);
   @return map-get($map, $variant);
@@ -50,12 +52,12 @@
 @mixin grid-loop($name) {
   @for $i from 0 through $grid-columns {
     .tyk-col--#{$name}-#{$i} {
-      flex-basis: calc(#{percentage($i / $grid-columns)} - #{$grid-gutter});
-      max-width: calc(#{percentage($i / $grid-columns)} - #{$grid-gutter});
+      flex-basis: calc(#{percentage(math.div($i, $grid-columns))} - #{$grid-gutter});
+      max-width: calc(#{percentage(math.div($i, $grid-columns))} - #{$grid-gutter});
     }
 
     .tyk-col--offset-#{$name}-#{$i} {
-      margin-left: percentage($i / $grid-columns);
+      margin-left: percentage(math.div($i, $grid-columns));
     }
   }
 }
@@ -95,7 +97,7 @@
       opacity: 0.8;
     }
   }
-  
+
   &.tyk-form-group--addon-left {
     .tyk-input-group__addon {
       border-bottom: 2px solid $border-color;

lib/sass/form/components/EditableList2/sass/EditableList2.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .editable-list {
   &__header {
     align-items: center;
@@ -75,7 +77,7 @@
       &--size-#{$i} {
         display: flex;
         flex-grow: #{$i + 1};
-        $my_width: #{$i/12*100%};
+        $my_width: #{math.div($i, 12) * 100%};
         width: $my_width;
       }
     }
@@ -97,7 +99,7 @@
       &--read-only {
         color: theme-color("default", "light");
         align-items: center;
-        
+
         .tyk-button {
           margin-top: 0;
         }