intelicoreact 0.0.94 → 0.0.97

package/src/Atomic/MainMenu/MainMenu.scss

@@ -1,176 +0,0 @@
-@import "~anme/scss/anme-vars";
-@import "~anme/scss/anme-mixins";
-
-.main-menu {
-  display: flex;
-  flex-direction: column;
-  width: 249px;
-  height: 100vh;
-  position: relative;
-  transition: all 0.2s ease-out;
-
-  box-sizing: border-box;
-
-  &--closed {
-    transition: all 0.2s ease-out;
-    width: 50px;
-
-    .main-menu--item {
-      padding: 12.5px 10px;
-      justify-content: center;
-
-      svg {
-        margin: 0;
-      }
-    }
-
-    .accordion--item {
-      .accordion--title-open,
-      .accordion--title-box {
-        padding: 7.5px;
-        justify-content: center;
-        transition: all 0.3s ease-out;
-
-        svg {
-          margin: 0;
-        }
-      }
-
-      .accordion--title-chevron,
-      .accordion--title {
-        display: none;
-      }
-    }
-  }
-
-  &--header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    z-index: 2;
-    height: 22px;
-    padding: 14px 26px 16px 24px;
-    background-color: #535e88;
-    &-closed {
-      padding: 15px;
-    }
-    &-btn {
-      display: flex;
-      align-items: center;
-      font-size: 24px;
-      color: #e2e6f8;
-      cursor: pointer;
-      margin-left: -5px;
-    }
-  }
-
-  &--logo {
-    background-image: url("../../../../assets/img/finturfLogo.svg");
-    background-repeat: no-repeat;
-    background-position: left;
-    height: 36px;
-    width: 118px;
-    transition: all 0.2s ease-out;
-
-    &-none {
-      height: 0;
-      width: 0;
-      opacity: 0;
-      transition: all 0.2s ease-out;
-    }
-
-    &-close {
-      background-image: url("../../../../assets/img/fiLogo.svg");
-      background-repeat: no-repeat;
-      background-position: center;
-      height: 36px;
-      width: 30px;
-    }
-  }
-
-  &--items-box {
-    padding: 10px 0;
-    height: 100%;
-    overflow-y: auto;
-    z-index: 1;
-    box-shadow: 4px 8px 16px rgba(31, 116, 153, 0.15);
-
-    @include custom-scroll2;
-
-    &-title {
-      font-size: 13px;
-      color: $color--text;
-      text-decoration: none;
-    }
-
-    &-chapter {
-      text-transform: uppercase;
-      font-size: 10px;
-      color: $color--gray-gull;
-      padding: 16px 25px 10px 25px;
-      user-select: none;
-
-      &-hidden {
-        span {
-          display: none;
-        }
-        width: 16px;
-        height: 5px;
-        padding: 0;
-        background-color: #e2e5ec;
-        border-radius: 9px;
-        margin-left: 17px;
-        margin-top: 24.5px;
-        margin-bottom: 15.5px;
-      }
-    }
-
-    svg {
-      transition: all 0.3s ease-out;
-      font-size: 16px;
-    }
-  }
-
-  &--item {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 12.5px 24px;
-    cursor: pointer;
-    white-space: nowrap;
-
-    span {
-      white-space: nowrap;
-    }
-
-    &:hover {
-      background-color: $color--gray-gentel;
-    }
-  }
-
-  &--accordion {
-    .accordion {
-      &--item {
-        border: none;
-      }
-
-      &--title-box {
-        padding: 10px 25px;
-      }
-
-      &--content-item {
-        padding: 5px 35px;
-        cursor: pointer;
-        width: calc(100% - 70px);
-
-        &:hover {
-          background-color: $color--gray-gentel;
-        }
-      }
-    }
-  }
-
-  &__icon {
-    font-size: 16px;
-  }
-}

package/src/Atomic/MainMenu/MainMenu.stories.js

@@ -1,91 +0,0 @@
-import React from 'react';
-
-import MainMenu from './MainMenu';
-
-global.lng = 'en';
-
-export default {
-  title: 'MainMenu',
-  component: MainMenu
-};
-
-const Template = args => <MainMenu {...args} />;
-
-export const MainMenuTemplate = Template.bind({});
-
-MainMenuTemplate.args = {
-  items: {
-    main: [
-      {
-        title: 'Dashboard',
-        icon: 'Airplay',
-        className: 'color--green-haze main-menu__icon'
-        // link: '/'
-      },
-      {
-        title: 'Consumers',
-        icon: 'User',
-        className: 'color--primary main-menu__icon'
-        // link: '/consumers/'
-      }
-    ],
-    mainMenu: [
-      {
-        title: 'Ticket Desk',
-        icon: 'Tag',
-        className: 'color--froly',
-        children: []
-      },
-      {
-        title: 'Accounting',
-        icon: 'DollarSign',
-        className: 'color--sea-buckthorn',
-        children: []
-      },
-      {
-        title: 'Users',
-        icon: 'Users',
-        className: 'color--gray-gull',
-        children: []
-      },
-      {
-        title: 'Settings',
-        icon: 'Sliders',
-        className: 'color--primary'
-      }
-    ],
-    partners: [
-      {
-        title: 'Merchants',
-        icon: 'ShoppingBag',
-        className: 'color--froly'
-        // link: '/merchants/'
-      },
-      {
-        title: 'Lenders',
-        icon: 'Briefcase',
-        className: 'color--green-haze'
-        // link: '/lenders/'
-      },
-      {
-        title: 'Lender Ping Tree',
-        icon: 'Shuffle',
-        className: 'color--primary'
-        // link: '/ping-tree/'
-      }
-    ],
-    other: [
-      {
-        title: 'Reports',
-        icon: 'PieChart',
-        className: 'color--gray-gull'
-        // link: '/reports/'
-      },
-      {
-        title: 'Tools',
-        icon: 'Tool',
-        className: 'color--sea-buckthorn'
-      }
-    ]
-  }
-};

package/src/Atomic/UI/Accordion/Accordion.js

@@ -1,45 +0,0 @@
-import React, { useState } from 'react';
-import cn from 'classnames';
-import * as Icons from 'react-feather';
-import { NavLink } from 'react-router-dom';
-
-import AccordionItem from './AccordionItem';
-import { handleObjectChange } from '../../../Functions/utils';
-
-import './Accordion.scss';
-import '../../MainMenu/MainMenu.scss';
-
-const Accordion = ({ items, className, itemClassName, isMenuHovered, isOpen }) => {
-  const [data, setData] = useState(items);
-
-  const onChange = handleObjectChange(setData, () => setData([...data]));
-
-  const handleArrayChange = (e, index, prop) => {
-    data[index][prop] = e;
-    onChange(data);
-  };
-
-  return (
-    <div className={cn('accordion', className)}>
-      {items?.map((item, index) => {
-        const Icon = Icons[item.icon];
-        return item.link ? (
-          <NavLink key={index} to={item.link} className={cn('main-menu--item main-menu--items-box-title')}>
-            {item?.icon && <Icon className={cn('mr5', item?.className)} />}
-            <span className={cn({ hidden: !isOpen && !isMenuHovered })}>{item?.title || 'Link'}</span>
-          </NavLink>
-        ) : (
-          <AccordionItem
-            key={index}
-            className={itemClassName}
-            item={item}
-            isOpen={item.isOpen}
-            onClick={e => handleArrayChange(e, index, 'isOpen')}
-          />
-        );
-      })}
-    </div>
-  );
-};
-
-export default Accordion;

package/src/Atomic/UI/Accordion/Accordion.scss

@@ -1,73 +0,0 @@
-@import '~anme/scss/anme-vars';
-@import '~anme/scss/anme-mixins';
-
-.accordion {
-    &--item {
-        border: 1px solid $color--border;
-
-        &:not(:first-child) {
-            border-top: none;
-        }
-    }
-
-    &--title-box {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        cursor: pointer;
-        padding: 10px 15px;
-        height: 20px;
-
-        &:hover {
-            background-color: $color--gray-gentel;
-        }
-    }
-
-    &--title {
-        font-size: 13px;
-        user-select: none;
-        color: $color--text;
-
-        &-chevron {
-            transition: all 0.2s ease-out;
-            min-height: 16px;
-            min-width: 16px;
-            &-open {
-                transition: all 0.2s ease-out;
-                transform: rotate(90deg);
-            }
-        }
-    }
-
-    &--content {
-        background: #fff;
-        transition: all 0.25s ease-out;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: flex-start;
-        overflow: hidden;
-        font-size: 13px;
-        opacity: 0;
-        max-height: 1000px;
-
-        &-is-open {
-            transition: all 0.25s ease-out;
-            padding: 10px 15px;
-            opacity: 1;
-        }
-
-        &-item {
-            padding: 7.5px 20px;
-            width: calc(100% - 40px);
-
-            a {
-                font-size: 13px;
-                font-weight: 300;
-                color: #1e1e2d;
-            }
-        }
-
-        @include custom-scroll;
-    }
-}

package/src/Atomic/UI/Accordion/Accordion.stories.js

@@ -1,78 +0,0 @@
-import React from 'react';
-
-import Accordion from './Accordion';
-
-global.lng = 'en';
-
-export default {
-  title: 'UI/Accordion',
-  component: Accordion
-};
-
-const Template = args => <Accordion {...args} />;
-
-export const AccordionTemplate = Template.bind({});
-
-AccordionTemplate.args = {
-  items: [
-    {
-      id: 1,
-      title: 'tools',
-      icon: 'Tool',
-      className: 'color--sea-buckthorn',
-      isOpen: true,
-      children: [
-        {
-          id: 1,
-          title: 'tools',
-          link: '#s'
-        },
-        {
-          id: 2,
-          title: 'tools',
-          link: '#s'
-        },
-        {
-          id: 3,
-          title: 'tools',
-          link: '#s'
-        }
-      ]
-    },
-    {
-      id: 2,
-      title: 'lenders',
-      icon: 'Briefcase',
-      className: 'color--green-haze',
-      isOpen: false,
-      children: [
-        {
-          id: 1,
-          title: 'lenders',
-          link: '#s'
-        }
-      ]
-    },
-    {
-      id: 3,
-      title: 'settings',
-      icon: 'Sliders',
-      className: 'color--primary',
-      isOpen: false,
-      status: {
-        active: 1,
-        pause: 3,
-        status: 'active',
-        disabled: false,
-        type: 'number'
-      },
-      children: [
-        {
-          id: 1,
-          title: 'settings',
-          link: '#s'
-        }
-      ]
-    }
-  ]
-};

package/src/Atomic/UI/Accordion/AccordionItem.js

@@ -1,92 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import cn from 'classnames';
-import * as Icons from 'react-feather';
-import { NavLink } from 'react-router-dom';
-
-import Status from '../Status/Status';
-
-import './Accordion.scss';
-
-const AccordionItem = ({ item, onClick, isOpen, className, children, noChevron }) => {
-  const Icon = Icons[item.icon];
-  const [maxHeight, setMaxHeight] = useState(0);
-  const ref = useRef(null);
-
-  const getItemsHeight = () => {
-    let itemHeight = 0;
-    ref.current.childNodes.forEach(el => {
-      itemHeight += el.offsetHeight;
-    });
-
-    return itemHeight + 20;
-  };
-
-  useEffect(() => {
-    setMaxHeight(isOpen ? getItemsHeight() : 0);
-  }, [isOpen]);
-
-  // https://i.imgur.com/TaScp0h.png
-  const calculateStatusCount = () => {
-    return item?.rows?.reduce(
-      // sum rows
-      (acc, row) => {
-        const result = row.cols.reduce(
-          // sum cols
-          (accum, col) => ({
-            active: accum.active + (col.status === 'active' ? 1 : 0),
-            pause: accum.pause + (col.status === 'pause' ? 1 : 0)
-          }),
-          { active: 0, pause: 0 }
-        );
-
-        return {
-          // rows result + cols result
-          active: acc.active + result.active,
-          pause: acc.pause + result.pause
-        };
-      },
-      { active: 0, pause: 0 }
-    );
-  };
-
-  return (
-    <div className={cn('accordion--item', className)}>
-      <div className={cn('accordion--title-box', { 'accordion--title-open': isOpen })} onClick={() => onClick(!isOpen)}>
-        <div className="j4 no-wrap">
-          {item?.icon && <Icon className={cn('mr5', item?.className)} />}
-          <span className="accordion--title">{item.title || 'Menu Chapter'}</span>
-        </div>
-
-        <div className="j6 accordion-title__right-box">
-          {item.status && (
-            <div className="mr5">
-              <Status
-                type={item?.status.type}
-                value={item?.status.value}
-                status={item?.status.status}
-                active={calculateStatusCount()?.active}
-                pause={calculateStatusCount()?.pause}
-              />
-            </div>
-          )}
-
-          {!noChevron && <Icons.ChevronRight className={cn('accordion--title-chevron', { 'accordion--title-chevron-open': isOpen })} />}
-        </div>
-      </div>
-
-      <div ref={ref} style={{ maxHeight }} className={cn('accordion--content', { 'accordion--content-is-open': isOpen })}>
-        {item.children
-          ? item.children.map(el => {
-              return (
-                <NavLink to={el.link} key={el.id} className="accordion--content-item accordion--menu-link">
-                  {el?.title || 'Menu item'}
-                </NavLink>
-              );
-            })
-          : children}
-      </div>
-    </div>
-  );
-};
-
-export default AccordionItem;

package/src/Atomic/UI/AdvancedTag/AdvTag.js

@@ -1,81 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import cn from 'classnames';
-import { AlertTriangle } from 'react-feather';
-
-import './AdvancedTags.scss';
-
-const classNames = require('classnames');
-
-const AdvTag = ({ item, className }) => {
-  if (!item) return null;
-
-  const { labelLeft, labelRight, active = 0, pause = 0, merchants, warnLeft, warnLeftMsg, warnRightMsg } = item;
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [clickedWarning, setClickedWarning] = useState('');
-  const hintRef = useRef(null);
-
-  const activeNumberClass = classNames('strong', { 'color--pause': active === 0 }, { 'color--green-haze': active > 0 });
-  const pauseNumberClass = classNames('strong', { 'color--pause': pause === 0 }, { 'color--light-red': pause > 0 });
-  const advancedTagClass = classNames('advanced-tags', { 'advanced-tags--error': warnLeft || !merchants }, className);
-
-  const onWarningClick = warn => {
-    setIsOpen(true);
-    setClickedWarning(warn);
-  };
-
-  const handleClickOutside = event => {
-    if (hintRef.current && !hintRef.current.contains(event.target)) {
-      setIsOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('click', handleClickOutside, true);
-    return () => document.removeEventListener('click', handleClickOutside, true);
-  });
-
-  return (
-    <div className={advancedTagClass} ref={hintRef}>
-      {warnLeft && (
-        <div className="pointer" onMouseEnter={() => onWarningClick('warnLeft')} onMouseLeave={() => setIsOpen(false)}>
-          <AlertTriangle className="advanced-tags--warning-icon mr5" />
-        </div>
-      )}
-
-      {labelLeft && <span className="mr5">{labelLeft}</span>}
-      {labelRight && <span>{labelRight}</span>}
-
-      {item.type !== 'simple' ? <span className="ml5 mr5">|</span> : null}
-      {item.type !== 'simple' ? (
-        <div className="df">
-          <span className={activeNumberClass}>{active}</span>
-          <span className="strong color--pause">/</span>
-          <span className={pauseNumberClass}>{pause}</span>
-        </div>
-      ) : null}
-
-      {item.type !== 'simple' ? <span className="ml5 mr5">|</span> : null}
-
-      {merchants ? (
-        <span>{merchants}</span>
-      ) : (
-        item.type !== 'simple' && (
-          <div className="pointer" onMouseEnter={() => onWarningClick('warnRight')} onMouseLeave={() => setIsOpen(false)}>
-            <AlertTriangle className="advanced-tags--warning-icon" />
-          </div>
-        )
-      )}
-
-      {isOpen && warnLeftMsg && clickedWarning === 'warnLeft' ? (
-        <span className={cn('advanced-tags__warn-text', 'advanced-tags__warn-text--warnLeft')}>{warnLeftMsg}</span>
-      ) : null}
-
-      {isOpen && warnRightMsg && clickedWarning === 'warnRight' ? (
-        <span className={cn('advanced-tags__warn-text', 'advanced-tags__warn-text--warnRight')}>{warnRightMsg}</span>
-      ) : null}
-    </div>
-  );
-};
-
-export default AdvTag;

package/src/Atomic/UI/AdvancedTag/AdvancedTags.js

@@ -1,32 +0,0 @@
-import React, { useState } from 'react';
-import cn from 'classnames';
-
-import AdvTag from './AdvTag';
-
-const AdvancedTags = ({ items, className }) => {
-  if (!items) return null;
-
-  const [showedItems, setShowedItems] = useState([items[0], items[1]]);
-  const [showMore, setShowMore] = useState(true);
-
-  const onShowMoreClick = () => {
-    setShowedItems(showMore ? items : [items[0], items[1]]);
-    setShowMore(!showMore);
-  };
-
-  return (
-    <div className={cn(className, 'j4 wrap')}>
-      {showedItems?.map((item, index) => (
-        <AdvTag key={index} item={item} />
-      ))}
-
-      {items.length >= 3 && (
-        <span onClick={() => onShowMoreClick()} className="advanced-tags advanced-tags--showMore">
-          {showMore ? `+${items.length - showedItems.length}` : '...'}
-        </span>
-      )}
-    </div>
-  );
-};
-
-export default AdvancedTags;