fixes most of the console warnings, fixes some eslint errors, gets ri…

…d of the formik and redux-form styleguidist sections in the UI

docs/GettingStarted.md

@@ -1,4 +1,4 @@
-Tyk-ui is library of reusable presentational UI components. 
+Tyk-ui is library of reusable presentational UI components.
 
 ### **Installation**
 
@@ -45,11 +45,11 @@ $component-images-path: "~@tyk-technologies/tyk-ui/lib/images/";
 ```md
 NOTE : For projects that don't SASS but just pure css we are also exposing the compiled styles.
 ```
-### Testing on local 
+### Testing on local
 
-- You can test the changes on your local dev environment by replacing the your `@tyk-technologies/tyk-ui/lib` with newly built lib 
+- You can test the changes on your local dev environment by replacing the your `@tyk-technologies/tyk-ui/lib` with newly built lib
 
-eg 
+eg
 ```md
 cp -a lib/. /Users/me/go/src/github.com/TykTechnologies/tyk-analytics/webclient/node_modules/@tyk-technologies/tyk-ui/lib
 ```

docs/PublishingGuide.md

@@ -1,28 +1,28 @@
 *In order to publish the changes, please do the following*
 - After PR merge, make a new build and generates prod code of the library
 
-```static
+```shell static
 npm run build-prod
 ```
 
 - Increase the library version in `package.json`
 
 - Regenerate the `package-lock.json` file
 
-```static
+```shell static
 npm i
 ```
 
-```static
-git add . 
+```shell static
+git add .
 ```
 
 - Commit and Push changes
-```static
+```shell static
 git commit -m "bump version"
 ```
 
 - Publish the package to npm
-```static
-npm publish 
+```shell static
+npm publish
 ```

src/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;

src/components/Table/Readme.md

@@ -6,7 +6,7 @@ Table component depends on `value` prop which consist of following schema.
 
 ```json
 {
-  "columns": [{}], 
+  "columns": [{}],
   "rows": [{}],
   "selectable" : {},
   "pagination": {
@@ -45,7 +45,7 @@ columns[n].sortable
 ```
 - Gives sorting capabilities for to the table and can be extended to change the default sorting behavior.
 
-eg. 
+eg.
 ```json
 
 // Make table sortable
@@ -54,7 +54,7 @@ eg.
   "sortable": true
 }
 
-// Make table sortable and change the default sortable direction to Ascending 
+// Make table sortable and change the default sortable direction to Ascending
 "column" :  {
   //...
   "sortable": {
@@ -68,7 +68,7 @@ eg.
 rows[n].values
 ```
 
-- Defines the the values to be rendered for the table. You can also pass props and values using this if your `columns[n].type` is a custom component. 
+- Defines the the values to be rendered for the table. You can also pass props and values using this if your `columns[n].type` is a custom component.
 - Values is an object who's keys should match the `columns[n].id` for table to understand what values need to be rendered under what column
 - You can consider rows[n].values[{yourColumnId}] as a single cell which you can completely customize
 
@@ -347,7 +347,7 @@ const config = {
 };
 
 
-<Table 
+<Table
   value={config}
   onChange={
     (message, data, tableApi) => {
@@ -365,17 +365,17 @@ const config = {
 
 You access the table api directly to `get` and `set` table state by accessing the third arg passed to `onChange`
 
-- `api.getState` 
+- `api.getState`
 To get current table state
 
 - `api.setState`
 To get current state of table
 
 ### FAQ's
 
-#### 1. Can I attach an event to only one specific cell in the table 
+#### 1. Can I attach an event to only one specific cell in the table
 
-Yes, you can add events or custom styles to a specific cell using `events` and `styling` for the cell. 
+Yes, you can add events or custom styles to a specific cell using `events` and `styling` for the cell.
 
 Syntax
 ```js static
@@ -386,5 +386,5 @@ value.rows[index][col_id].events = {
 ```
 
 ```md
-Note : Click on `Freemium Policy (A)` in the above interactive table example and check the developer console and rows config `(value.rows[0].values.name)` for code 
+Note : Click on `Freemium Policy (A)` in the above interactive table example and check the developer console and rows config `(value.rows[0].values.name)` for code
 ```

src/form/Readme.md

@@ -0,0 +1 @@
+form components docs (wip)

src/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;
         }

src/hooks/Readme.md

@@ -0,0 +1 @@
+hooks docs (wip)

src/hooks/useComponentSize/Readme.md

@@ -0,0 +1 @@
+useComponentSize docs

src/hooks/useComponentSize/index.js

@@ -40,4 +40,5 @@ const useComponentSize = (ref) => {
   return ComponentSize;
 };
 
+/** @component */
 export default useComponentSize;

src/hooks/useEventListener/Readme.md

@@ -0,0 +1 @@
+useEventListener docs

src/hooks/useEventListener/index.js

@@ -23,4 +23,5 @@ const useEventListener = (eventName, handler, element) => {
   }, [eventName, element]);
 };
 
+/** @component */
 export default useEventListener;

src/hooks/useInterval/Readme.md

@@ -0,0 +1 @@
+useInterval docs

src/hooks/useInterval/index.js

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 
+/** @component */
 export default function useInterval(callback, delay, ...args) {
   const savedCallback = useRef();
 

src/hooks/usePrevious/Readme.md

@@ -0,0 +1 @@
+usePrevious docs

src/hooks/usePrevious/index.js

@@ -8,4 +8,5 @@ const usePrevious = (value) => {
   return ref.current;
 };
 
+/** @component */
 export default usePrevious;

src/hooks/useTimeout/Readme.md

@@ -0,0 +1 @@
+useTimeout docs

src/hooks/useTimeout/index.js

@@ -22,4 +22,5 @@ const useTimeout = (callback, delay) => {
   [delay]);
 };
 
+/** @component */
 export default useTimeout;

src/utils/debounce/Readme.md

@@ -0,0 +1,20 @@
+`debounce` "postpones" the execution of a callback after the specified amount of time in milliseconds.
+
+```js static
+debounce(callback, wait, immediate)
+```
+
+If you type in the text input below its value will be logged to the console.
+
+```js
+import DebounceExample from './styleguidist-example';
+
+const [wait, setWait] = React.useState(1000);
+<>
+  <label>
+    <span style={{ marginRight: '10px' }}>Wait:</span>
+    <input type="text" value={wait} onChange={e => setWait(e.target.value)} />
+  </label>
+  <DebounceExample wait={Number(wait)} />
+</>
+```

src/utils/debounce/styleguidist-example.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import debounce from './index';
+
+function Debounce({ func, wait, immediate }) {
+  const cbb = (e) => {
+    console.log(`Debounced log after ${wait}ms:`, e.target.value);
+  };
+  return (
+    <div>
+      <label>
+        <span style={{ marginRight: '10px' }}>Type here (logs to the console):</span>
+        <input type="text" onChange={debounce(func ?? cbb, wait, immediate)} />
+      </label>
+    </div>
+  );
+}
+
+Debounce.propTypes = {
+  func: PropTypes.func,
+  wait: PropTypes.number,
+  immediate: PropTypes.bool,
+};
+
+export default Debounce;