intelicoreact 0.0.24 → 0.0.41

package/src/Atomic/FormElements/Modal/Modal.scss

@@ -1,6 +1,3 @@
-@import "../../../scss/anme/anme-vars";
-@import "../../../scss/anme/anme-mixins";
-
 .modal-overlay {
   position: fixed;
   top: 0;
@@ -36,7 +33,7 @@
     border-top-right-radius: 4px;
 
     &-primary {
-      background-color: $color--primary;
+      background-color: #6b81dd;
 
       &-title {
         color: #ffff !important;
@@ -47,7 +44,7 @@
     &-title {
       font-size: 16px;
       font-weight: 400;
-      color: $color--primary;
+      color: #6b81dd;
     }
   }
 
@@ -59,7 +56,59 @@
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
 
-    @include custom-scroll2;
+    scrollbar-color: rgb(186, 194, 201) rgba(0, 0, 0, 0) !important;
+    scrollbar-width: thin !important;
+
+    scrollbar {
+      -moz-appearance: none !important;
+    }
+    scrollbarbutton {
+      -moz-appearance: none !important;
+    }
+    thumb {
+      -moz-appearance: none !important;
+    }
+    scrollcorner {
+      -moz-appearance: none !important;
+      resize: both;
+    }
+    // overflow-y: overlay;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
+      background: #bac2c9;
+
+      &:hover {
+        background: #9aa0b9;
+      }
+    }
+
+    &::-webkit-scrollbar:horizontal {
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track:horizontal {
+      background: inherit;
+    }
+
+    &::-webkit-scrollbar-thumb:horizontal {
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: #bac2c9;
+      background-clip: padding-box;
+      border: 2px solid rgba(0, 0, 0, 0);
+
+      &:hover {
+        background: #9aa0b9;
+        border: 1px solid rgba(0, 0, 0, 0);
+        background-clip: padding-box;
+      }
+    }
   }
 
   &__footer {
@@ -87,6 +136,11 @@
     left: calc(50% - 210px);
   }
 
+  &-770 {
+    width: 770px;
+    left: calc(50% - 385px);
+  }
+
   &-870 {
     width: 870px;
     left: calc(50% - 435px);
@@ -163,7 +217,7 @@
 }
 
 .included-selector-modal {
-  .simple-table {
+  .table {
     min-height: 400px;
     max-height: 500px;
   }

package/src/Atomic/FormElements/Modal/Modal.stories.js

@@ -25,7 +25,7 @@ export default {
     size: {
       control: {
         type: 'select',
-        options: ['default', '290', '420', '870', '950']
+        options: ['default', '290', '420', '870', '770', '950']
       }
     }
   },
@@ -38,7 +38,7 @@ export default {
   size: {
     control: {
       type: 'select',
-      options: ['default', '290', '420', '870', '950']
+      options: ['default', '290', '420', '770', '870', '950']
     }
   }
 };
@@ -49,7 +49,7 @@ const Template = args => {
 
   return (
     <>
-      <Button onClick={() => setIsOpen(true)} text="Show modal" />
+      <Button onClick={() => setIsOpen(true)} label="Show modal" />
       <Modal closeModal={closeModal} isOpen={isOpen} {...args}>
         <Alert message="Alert message" variant="error" className="mb5" />
         <Alert message="Alert message" variant="warning" className="mb5" />

package/src/Atomic/FormElements/MultiSelect/MultiSelect.js

@@ -5,8 +5,6 @@ import CheckboxInput from '../CheckboxInput/CheckboxInput';
 
 import './MultiSelect.scss';
 
-const RC = 'multiselect';
-
 const MultiSelect = ({ options, chosenOptions, onChange }) => {
   const [searchValue, setSearchValue] = useState('');
 
@@ -21,16 +19,16 @@ const MultiSelect = ({ options, chosenOptions, onChange }) => {
   const filteredOptions = options.filter(({ label }) => label.toLowerCase().includes(searchValue.toLowerCase()));
 
   return (
-    <div className={RC}>
+    <div className="multiselect">
       <Input value={searchValue} onChange={value => setSearchValue(value)} placeholder="Search" />
-      <div className={`${RC}__list`}>
+      <div className="multiselect__list">
         {filteredOptions.map(({ label, value, id }) => (
           <CheckboxInput
             key={id}
             value={chosenOptions.includes(value)}
             label={label}
             onChange={state => checkHandler(state, value)}
-            className={`${RC}__item`}
+            className="multiselect__item"
           />
         ))}
       </div>

package/src/Atomic/FormElements/MultiSelect/MultiSelect.scss

@@ -1,10 +1,8 @@
-@import "../../../scss/vars";
-
 .multiselect {
   display: inline-flex;
   flex-direction: column;
   background-color: #fff;
-  border: 1px solid $color--gray--light;
+  border: 1px solid #e2e5ec;
   border-radius: 4px;
   padding: 8px 10px;
 

package/src/Atomic/FormElements/MultiSelect/MultiSelect.stories.js

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import MultiSelect from './MultiSelect';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
+
 export default {
   title: 'MultiSelect',
   component: MultiSelect

package/src/Atomic/FormElements/NavLine/NavLine.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import cn from 'classnames';
-import * as Icons from 'react-icons/fi';
+import * as Icons from 'react-feather';
 
 import './NavLine.scss';
 
@@ -34,7 +34,7 @@ const NavLine = ({ root, activeTab, variant, onChange, className, items, childre
               </div>
             </span>
           ) : (
-            <Link
+            <NavLink
               to={`${root}${item.tabId}/`}
               key={`tab__${item.tabId}`}
               className={cn(
@@ -54,7 +54,7 @@ const NavLine = ({ root, activeTab, variant, onChange, className, items, childre
                 <span className={cn({ 'nav-line__item--label': variant !== 'simple' })}>{item.label}</span>
                 {item.count !== undefined ? <span className="nav-line--count ml5">({item.count || 0})</span> : null}
               </div>
-            </Link>
+            </NavLink>
           );
         })}
       </div>

package/src/Atomic/FormElements/NavLine/NavLine.scss

@@ -1,5 +1,3 @@
-@import "../../../scss/anme/anme-vars";
-
 .nav-line {
   &__inner {
     display: flex;
@@ -41,8 +39,8 @@
       font-weight: 500;
       border-top: 2px solid #6b81dd;
       cursor: default;
-      border-left: 1px solid $color--border;
-      border-right: 1px solid $color--border;
+      border-left: 1px solid #cfcfcf;
+      border-right: 1px solid #cfcfcf;
       text-decoration: none;
     }
   }
@@ -52,7 +50,7 @@
     flex-wrap: wrap;
     padding: 24px 32px;
     font-size: 13px;
-    border-top: 1px solid $color--border;
+    border-top: 1px solid #cfcfcf;
     margin-left: -32px;
     margin-right: -32px;
     background-color: #f7fafc;
@@ -76,7 +74,7 @@
     cursor: pointer;
     font-size: 13px;
     color: #1e1e2d;
-    border-bottom: 1px solid $color--border;
+    border-bottom: 1px solid #cfcfcf;
     user-select: none;
     margin-bottom: -1px;
     border-bottom: 2px solid transparent;

package/src/Atomic/FormElements/NavLine/NavLine.stories.js

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
+import { BrowserRouter } from 'react-router-dom';
+
 import NavLine from './NavLine';
 import Alert from '../../UI/Alert/Alert';
-import Status from '../Status/Status';
-
-import '../../../../scss/main.scss';
+import Status from '../../UI/Status/Status';
 
 global.lng = 'en';
 
@@ -28,9 +28,11 @@ const Template = args => {
   const [activeTab, setActiveTab] = useState(initialTab);
 
   return (
-    <NavLine {...args} activeTab={activeTab} onChange={setActiveTab}>
-      {navLineContent[activeTab]}
-    </NavLine>
+    <BrowserRouter>
+      <NavLine {...args} activeTab={activeTab} onChange={setActiveTab}>
+        {navLineContent[activeTab]}
+      </NavLine>
+    </BrowserRouter>
   );
 };
 
@@ -43,24 +45,30 @@ NavLineSimpleTemplate.args = {
   isLocal: false,
   items: [
     {
-      tabId: 'general'
+      tabId: 'general',
+      label: 'Tab1'
     },
     {
-      tabId: 'payments'
+      tabId: 'payments',
+      label: 'Tab2'
     },
     {
-      tabId: 'filters'
+      tabId: 'filters',
+      label: 'Tab3'
     },
     {
       tabId: 'offers',
+      label: 'Tab4',
       count: 2
     },
     {
       tabId: 'merchants',
+      label: 'Tab5',
       count: 15
     },
     {
-      tabId: 'integration'
+      tabId: 'integration',
+      label: 'Tab6'
     },
     {
       tabId: 'tab',
@@ -76,23 +84,25 @@ NavLineTemplate.args = {
   items: [
     {
       tabId: 'customDetails',
-      icon: 'FiGift'
+      label: 'Tab1',
+      icon: 'Gift'
     },
     {
       tabId: 'postsLog',
-      icon: 'FiGift',
+      label: 'Tab2',
+      icon: 'Gift',
       count: 43
     },
     {
       tabId: 'tab1',
       label: 'disabled tab',
-      icon: 'FiGift',
+      icon: 'Gift',
       status: 'disabled'
     },
     {
       tabId: 'tab2',
       label: 'tab 2',
-      icon: 'FiGift'
+      icon: 'Gift'
     }
   ]
 };

package/src/Atomic/FormElements/RadioInput/RadioInput.stories.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import RadioInput from './RadioInput';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 export default {
   title: 'RadioInput',

package/src/Atomic/FormElements/RangeInputs/RangeInputs.stories.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import RangeInputs from './RangeInputs';
 
-import '../../../../scss/main.scss';
 import './RangeInputs.scss';
 
 global.lng = 'en';

package/src/Atomic/FormElements/Switcher/Switcher.stories.js

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import Switcher from './Switcher';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 export default {
   title: 'Switcher',

package/src/Atomic/FormElements/Table/Partials/TdCell.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import AccordionItem from '../../../UI/Accordion/AccordionItem';
 import { TdActions } from '../TdTypes/TdActions';
 import AdvancedTags from '../../../UI/AdvancedTag/AdvancedTags';
-import Status from '../../Status/Status';
+import Status from '../../../UI/Status/Status';
 import Tag from '../../Tag/Tag';
 import TdPriority from '../TdTypes/TdPriority';
 import TdWeight from '../TdTypes/TdWeight';

package/src/Atomic/FormElements/Table/Partials/TdHeader.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import cn from 'classnames';
 
-import Langs from '../../../../../Langs';
 
 import '../Table.scss';
+import Langs from '../../../../../../Langs';
 
 const TdHeader = ({ item }) => {
   const txt = Langs[global.lng];

package/src/Atomic/FormElements/Table/TdTypes/TdActions.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import * as Icons from 'react-icons/fi';
+import * as Icons from 'react-feather';
 
 import Switcher from '../../Switcher/Switcher';
 
@@ -23,25 +23,25 @@ export const TdActions = ({ actions, onChange, onActionClick, rowItem }) => {
           case 'download':
             return (
               <div key={index} className="td-actions--item td-actions--download" onClick={() => {}}>
-                <Icons.FiDownload />
+                <Icons.Download />
               </div>
             );
           case 'edit':
             return (
               <div key={index} className="td-actions--item td-actions--edit" onClick={() => {}}>
-                <Icons.FiEdit3 />
+                <Icons.Edit3 />
               </div>
             );
           case 'delete':
             return (
               <div key={index} className="td-actions--item td-actions--delete" onClick={() => onActionClick('delete', rowItem)}>
-                <Icons.FiTrash2 />
+                <Icons.Trash2 />
               </div>
             );
           case 'undo':
             return (
               <div key={index} className="td-actions--item td-actions--undo" onClick={() => onActionClick('undo', rowItem)}>
-                <Icons.FiRotateCcw />
+                <Icons.RotateCcw />
               </div>
             );
           case 'switcher':

package/src/Atomic/FormElements/Table/TdTypes/TdPriority.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-import { FiArrowDown, FiArrowUp } from 'react-icons/fi';
+import { ArrowDown, ArrowUp } from 'react-feather';
 
 import '../Table.scss';
 
@@ -10,8 +10,8 @@ const TdPriority = ({ onClick, rowIndex, cardLength }) => {
     <div className="cards-table__priority">
       <span className="mr5">{rowIndex + 1}</span>
       <div className="df">
-        <FiArrowDown onClick={() => onClick(rowIndex)} className={cn('table--icon', { disabled: rowIndex + 1 === cardLength })} />
-        <FiArrowUp onClick={() => onClick(rowIndex, true)} className={cn('table--icon', { disabled: rowIndex === 0 })} />
+        <ArrowDown onClick={() => onClick(rowIndex)} className={cn('table--icon', { disabled: rowIndex + 1 === cardLength })} />
+        <ArrowUp onClick={() => onClick(rowIndex, true)} className={cn('table--icon', { disabled: rowIndex === 0 })} />
       </div>
     </div>
   );

package/src/Atomic/FormElements/Table/TdTypes/TdTypes.scss

@@ -1,5 +1,3 @@
-@import '../../../scss/anme/anme-vars';
-
 .td-actions {
     &--item {
         display: flex;
@@ -16,19 +14,19 @@
     }
 
     &--delete {
-        color: $color--froly !important;
+        color: #F06D8DFF !important;
     }
 
     &--undo {
-        color: $color--froly !important;
+        color: #F06D8DFF !important;
     }
 
     &--edit {
-        color: $color--primary !important;
+        color: #6B81DDFF !important;
     }
 
     &--download {
-        color: $color--primary;
+        color: #6B81DDFF;
     }
 }
 

package/src/Atomic/FormElements/Table/TdTypes/TdWeight.js

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 
-import { KEY_CODE } from '../../../../../JS/Constants/index.constants';
-import useToggle from '../../../../../JS/Functions/useToggle';
+import { KEY_CODE } from '../../../../../../JS/Constants/index.constants';
+import useToggle from '../../../../../../JS/Functions/useToggle';
 import Input from '../../Input/Input';
 
 import '../Table.scss';

package/src/Atomic/FormElements/Tag/Tag.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import { IoWarningOutline } from 'react-icons/io5';
-import { FiX } from 'react-icons/fi';
+import { X } from 'react-feather';
 
 import './Tag.scss';
 
@@ -14,7 +14,7 @@ const Tag = ({ className, label, warning, removeItem, name }) => {
 
       {removeItem && (
         <button onClick={() => removeItem()} className="tag__button">
-          <FiX className="color--text" />
+          <X className="color--text" />
         </button>
       )}
     </div>

package/src/Atomic/FormElements/Tag/Tag.stories.js

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import Tag from './Tag';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 export default {
   title: 'Tag',

package/src/Atomic/FormElements/TagsDropdown/TagsDropdown.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import cn from 'classnames';
-import { FiChevronDown, FiCheck } from 'react-icons/fi';
+import { ChevronDown, Check } from 'react-feather';
 
 import Tag from '../Tag/Tag';
 import Label from '../Label/Label';
@@ -56,7 +56,7 @@ const TagsDropdown = ({ options, chosenOptions, onChange, className, tagClassnam
         )}
       >
         <span className={cn(`${RC}__active-icon`, { [`${RC}__active-icon_active`]: chosenOptions.some(el => el.value === item.value) })}>
-          <FiCheck className="color--text" />
+          <Check className="color--text" />
         </span>
         {item.title}
       </button>
@@ -83,7 +83,7 @@ const TagsDropdown = ({ options, chosenOptions, onChange, className, tagClassnam
             onKeyDown={e => onKeyPress(e, searchValue)}
           />
           <span className={cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen })}>
-            <FiChevronDown className="color--text" />
+            <ChevronDown className="color--text" />
           </span>
         </button>
       </div>

package/src/Atomic/FormElements/TagsDropdown/TagsDropdown.stories.js

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import TagsDropdown from './TagsDropdown';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 export default {
   title: 'TagsDropdown',

package/src/Atomic/FormElements/TextSwitcher/TextSwitcher.stories.js

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import TextSwitcher from './TextSwitcher';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 export default {
   title: 'TextSwitcher',

package/src/Atomic/FormElements/Textarea/Textarea.stories.js

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import Textarea from './Textarea';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 export default {
   title: 'Textarea',

package/src/Atomic/FormElements/TimeRange/TimeRange.js

@@ -2,7 +2,7 @@ import React, { useState, useMemo } from 'react';
 import cn from 'classnames';
 import moment from 'moment';
 
-import useToggle from '../../../../JS/Functions/useToggle';
+import useToggle from '../../../Functions/useToggle';
 import Label from '../Label/Label';
 import Input from '../Input/Input';
 

package/src/Atomic/FormElements/TimeRange/TimeRange.stories.js

@@ -2,8 +2,6 @@ import React from 'react';
 
 import TimeRange from './TimeRange';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 
 export default {

package/src/Atomic/MainMenu/MainMenu.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import cn from 'classnames';
-import * as Icons from 'react-icons/fi';
+import * as Icons from 'react-feather';
 import { NavLink } from 'react-router-dom';
 
 import Langs from '../../../../Langs';
@@ -51,9 +51,9 @@ const MainMenu = props => {
   };
 
   const changeMenuIcon = () => {
-    if (isOpen && !isMenuIconHovered) return <Icons.FiMenu />;
-    if (isOpen && isMenuIconHovered) return <Icons.FiChevronLeft />;
-    if (!isOpen && isMenuHovered) return <Icons.FiChevronRight />;
+    if (isOpen && !isMenuIconHovered) return <Icons.Menu />;
+    if (isOpen && isMenuIconHovered) return <Icons.ChevronLeft />;
+    if (!isOpen && isMenuHovered) return <Icons.ChevronRight />;
     if (!isOpen) return <div className="main-menu--logo-close" />;
     return null;
   };