intelicoreact 0.0.94 → 0.0.97

package/src/Atomic/FormElements/Dropdown/Dropdown.js

@@ -1,178 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import cn from 'classnames';
-import { Check, ChevronDown, ChevronUp } from 'react-feather';
-
-import DropdownLoader from './components/DropdownLoader';
-
-import './Dropdown.scss';
-
-const RC = 'dropdown';
-
-const Dropdown = ({ options = [], value, error, disabled, onChange, placeholder, className, isSearchable, entity, scrollReactionObj, isListTop }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchValue, setSearchValue] = useState();
-  const dropdownRef = useRef(null);
-  const dropdownListRef = useRef(null);
-
-  if (!options) return null;
-  const filteredGroups = options
-    .filter((item) => item.items?.length)
-    .map((item) => ({ ...item, items: item.items.filter((el) => el?.label?.toLowerCase().includes(searchValue?.toLowerCase() || '')) }))
-    .filter((item) => item.items?.length > 0);
-
-  const filteredItems = options
-    .filter((item) => !item.items?.length)
-    .filter((item) => item?.label?.toLowerCase().includes(searchValue?.toLowerCase() || ''));
-
-  const filteredOptions = [...filteredItems, ...filteredGroups];
-
-  const modalBtnTrigger = entity && entity !== '' && typeof entity === 'string';
-  const onChangeHandler = (item) => {
-    setIsOpen(false);
-    setSearchValue(null);
-    onChange(item.value);
-  };
-  // decorator
-  const getDepends = (getDependsTrigger) => {
-    const newOnChange = (e) => {
-      if (e.value === 'open_modal') {
-        onChange('open_modal');
-      } else {
-        onChangeHandler(e);
-      }
-    };
-
-    // add pseudo option
-    const newOptions = [
-      {
-        label: `New ${entity}`,
-        value: 'open_modal',
-        className: 'dropdown__list-item--modal',
-      },
-      ...filteredOptions,
-    ];
-
-    return {
-      onChange: (changeItem) => (getDependsTrigger ? newOnChange(changeItem) : onChangeHandler(changeItem)),
-      options: getDependsTrigger ? newOptions : options,
-    };
-  };
-
-  const handleClickOutside = (event) => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-      setIsOpen(false);
-      setSearchValue(null);
-    }
-  };
-
-  const onSearchHandler = (name) => {
-    setSearchValue(name);
-  };
-
-  const hightlightedText = (text) =>
-    searchValue ? text?.replace(new RegExp(searchValue, 'i'), (match) => `<span class="bg--yellow">${match}</span>`) : text;
-
-  const depend = getDepends(modalBtnTrigger);
-
-  const getMarkupForElement = (item) =>
-    item.label.toLowerCase().includes(searchValue?.toLowerCase() || '') ? (
-      <button
-        key={item.value}
-        onClick={() => depend.onChange(item)}
-        className={cn(`${RC}__list-item`, { [`${RC}__list-item_active`]: item.value === value }, { [`${RC}__list-item_disabled`]: item.disabled })}
-      >
-        <span className={cn(`${RC}__active-icon`, { [`${RC}__active-icon_active`]: item.value === value })}>
-          <Check />
-        </span>
-        <div className={item.className || ''} dangerouslySetInnerHTML={{ __html: hightlightedText(item.label) }} />
-      </button>
-    ) : null;
-
-  const filteredOptionList = (filteredOption) =>
-    filteredOption.items?.length > 0 ? (
-      <div key={filteredOption.value} className={`${RC}-group`}>
-        <div className={`${RC}-group__name`}>{filteredOption.label}</div>
-        {filteredOption.items.map((el) => getMarkupForElement(el))}
-      </div>
-    ) : null;
-
-  const selectedLabel =
-    options.find((el) => el.value === value)?.label ||
-    options.reduce((acc, item) => acc || item.items?.find((el) => el.value === value)?.label, null);
-
-  const doScrollCallback = useCallback(
-    (e) => {
-      const { callback, isWithAnyScrolling } = scrollReactionObj;
-      if (callback && typeof callback === 'function') {
-        if (isWithAnyScrolling) callback(e);
-        else if (e.target.clientHeight + e.target.scrollTop >= e.target.scrollHeight) callback(e);
-      }
-    },
-    [filteredOptions]
-  );
-
-  useEffect(() => {
-    if (!value) setSearchValue(null);
-    document.addEventListener('click', handleClickOutside, true);
-    return () => document.removeEventListener('click', handleClickOutside, true);
-  }, [value]);
-
-  useEffect(() => {
-    if (scrollReactionObj && typeof scrollReactionObj === 'object' && isOpen && dropdownListRef && dropdownListRef.current) {
-      dropdownListRef.current.addEventListener('scroll', doScrollCallback);
-    }
-    return () => {
-      if (scrollReactionObj && typeof scrollReactionObj === 'object') removeEventListener('scroll', doScrollCallback);
-    };
-  }, [isOpen, dropdownListRef]);
-
-  return (
-    <div
-      className={cn(RC, className, {
-        disabled: disabled,
-      })}
-      ref={dropdownRef}
-    >
-      <button
-        className={`${RC}__trigger input__wrap ${!value ? 'placeholder' : ''} ${error ? 'error' : ''}`}
-        onClick={() => (!isSearchable ? setIsOpen(!isOpen) : null)}
-      >
-        {isSearchable ? (
-          <input
-            className={`${RC}__input`}
-            value={searchValue || selectedLabel || ''}
-            onChange={(e) => {
-              onSearchHandler(e.target.value);
-            }}
-            placeholder={placeholder}
-            onFocus={(e) => {
-              e.target.select();
-              setIsOpen(true);
-            }}
-          />
-        ) : (
-          <span className="text">{selectedLabel || placeholder}</span>
-        )}
-        <span className={cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen })} onClick={() => setIsOpen(!isOpen)}>
-          {isOpen ? <ChevronUp /> : <ChevronDown />}
-        </span>
-      </button>
-
-      {isOpen && filteredOptions.length > 0 && (
-        <div
-          className={cn(`${RC}__list`, {
-            [`${RC}__list-top`]: isListTop,
-          })}
-          ref={dropdownListRef}
-        >
-          {depend.options.map((filteredOption) =>
-            filteredOption.items?.length ? filteredOptionList(filteredOption) : getMarkupForElement(filteredOption)
-          )}
-          {disabled && isOpen && <DropdownLoader />}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Dropdown;

package/src/Atomic/FormElements/Dropdown/Dropdown.scss

@@ -1,192 +0,0 @@
-@import "../../../scss/vars";
-
-.dropdown {
-  display: inline-flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  border-radius: 7px;
-
-  &__trigger {
-    background: #ffffff;
-    border: 1px solid #e2e5ec;
-    box-sizing: border-box;
-    border-radius: 3px;
-    width: 100%;
-    height: 28px;
-    align-items: center;
-    cursor: pointer;
-    padding-left: 9px;
-    padding-right: 16px;
-    font-weight: 400;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    display: block;
-    position: relative;
-    text-align: left;
-
-    &.error {
-      border-color: $color--secondary;
-    }
-    &.placeholder .text {
-      opacity: 0.7;
-    }
-  }
-
-  &__input {
-    width: 100%;
-    background: none;
-    border: none;
-    padding: 0 15px 0 0;
-    height: 16px;
-    text-overflow: ellipsis;
-    font-weight: 400;
-  }
-
-  &__list {
-    position: relative;
-    background: #ffffff;
-    border: 1px solid #e2e5ec;
-    box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
-    min-width: 100%;
-    margin-top: 4px;
-    padding: 5px 0;
-    max-height: 320px;
-    overflow-y: auto;
-    position: absolute;
-    top: 100%;
-    z-index: 6;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: $color--gray--dark;
-      border-radius: 4px;
-    }
-
-    &-top {
-      bottom: calc(100% + 4px);
-      top: auto;
-      box-shadow: 0 -3px 10px rgb(0 0 0 / 15%);
-    }
-
-    &-item {
-      display: flex;
-      align-items: center;
-      //justify-content: center;
-      border: none;
-      background: transparent;
-      padding: 0 20px 0 30px;
-      position: relative;
-      cursor: pointer;
-      color: $color--dark;
-      font-size: 13px;
-      font-weight: 400;
-      line-height: 24px;
-      width: 100%;
-      height: 24px;
-      white-space: nowrap;
-      overflow-x: hidden;
-
-      &--modal {
-        color: #1f7499;
-        font-size: 14px;
-        line-height: 20px;
-        letter-spacing: 0.2px;
-        position: relative;
-        &:after {
-          content: "";
-          position: absolute;
-          bottom: -2px;
-          height: 1px;
-          width: 300%;
-          transform: translateX(-50%);
-          background-color: #e8e9ec;
-        }
-      }
-      &:hover,
-      &_active {
-        background: $color--gray--gentle;
-      }
-      &_disabled {
-        opacity: 0.3;
-        pointer-events: none;
-      }
-    }
-
-    &--with-label {
-      top: 45px;
-    }
-  }
-
-  &__arrow {
-    display: flex;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    right: 4px;
-    top: 50%;
-    transform: translate(0, -50%);
-
-    & svg {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
-  &__active-icon {
-    align-items: center;
-    position: absolute;
-    left: 9px;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    display: none;
-
-    &_active {
-      display: flex;
-
-      & svg {
-        width: 16px;
-        height: 16px;
-      }
-    }
-  }
-
-  &-group {
-    margin-top: 10px;
-    &__name {
-      font-size: 10px;
-      color: $color--gray--dark;
-      text-transform: uppercase;
-      margin-left: 17px;
-      margin-bottom: 6px;
-    }
-  }
-
-  &-label {
-    margin-bottom: 5px;
-  }
-
-  &__error {
-    top: 50px;
-    left: 2px;
-    position: absolute;
-    display: block;
-    font-size: 10px;
-    color: $color--secondary;
-  }
-
-  &.disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-}

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

@@ -1,87 +0,0 @@
-import React, { useState } from 'react';
-import Dropdown from './Dropdown';
-
-global.lng = 'en';
-export default {
-  title: 'Dropdown',
-  component: Dropdown,
-  argTypes: {
-    className: {
-      description: 'string',
-    },
-    value: { description: 'string - current option' },
-    isSearchable: {
-      description: 'boolean - enable search',
-    },
-    onChange: { description: 'callback return selected value' },
-    entity: {
-      description: 'string',
-    },
-  },
-};
-
-const blockStyles = {
-  display: 'flex',
-  flexFlow: 'row no-wrap',
-  alignItems: 'center',
-};
-
-const buttonStyles = {
-  border: 'solid 1px #000',
-  padding: '5px',
-  margin: '0 0 0 50px',
-};
-
-const Template = (args) => {
-  const [value, setValue] = useState(args.value);
-  const [disabled, setDisabled] = useState(false);
-  return (
-    <div style={blockStyles}>
-      <div key="dropdown" style={{ width: 200 }}>
-        <Dropdown {...args} value={value} onChange={setValue} disabled={disabled} scrollReactionObj={{ callback: (e) => setDisabled(true) }} />
-      </div>
-      <button key="reset" style={buttonStyles} className="mt10" onClick={() => setValue('')}>
-        Reset
-      </button>
-
-      <button key="enable/disable" style={buttonStyles} className="mt10" onClick={() => setDisabled(!disabled)}>
-        {disabled ? 'enable' : 'disable'}
-      </button>
-    </div>
-  );
-};
-
-export const DropdownTemplate = Template.bind({});
-
-DropdownTemplate.args = {
-  // isListTop: true,
-  entity: 'entity',
-  value: 'drop6',
-  placeholder: 'Placeholder',
-  isSearchable: true,
-  options: [
-    { label: 'Dropdown2', value: 'drop2' },
-    { label: 'Dropdown3', value: 'drop3', disabled: true },
-    { label: 'Dropdown4', value: 'drop4' },
-    { label: 'Dropdown1', value: 'drop1', className: 'status status--approved' },
-    { label: 'Dropdown5', value: 'drop5' },
-    { label: 'Dropdown6', value: 'drop6' },
-    {
-      label: 'Some Group',
-      items: [
-        { label: 'Group 11', value: 'group11' },
-        { label: 'Group 12', value: 'group12', disabled: true },
-        { label: 'Group 13', value: 'group13' },
-      ],
-    },
-    {
-      label: 'Some Group 2',
-      items: [
-        { label: 'Group 21', value: 'group21' },
-        { label: 'Group 22', value: 'group22' },
-        { label: 'Group 23', value: 'group23' },
-      ],
-    },
-  ],
-  error: '',
-};

package/src/Atomic/FormElements/Dropdown/components/DropdownLoader.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import './DropdownLoader.scss';
-
-const DropdownLoader = function ({ variant }) {
-  return (
-    <div className="dropdown-loader-box j5">
-      <div className={`lds-ring${variant === 'little' ? ' lds-ring_little' : ''}`}>
-        <div />
-        <div />
-        <div />
-        <div />
-      </div>
-    </div>
-  );
-};
-
-export default DropdownLoader;

package/src/Atomic/FormElements/Header/Header.js

@@ -1,67 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { ChevronRight, Bell, Power } from 'react-feather';
-import { GoPrimitiveDot } from 'react-icons/go';
-import cn from 'classnames';
-
-import { logout, useOutsideToggle } from '../../../Functions/utils';
-import Hint from '../../UI/Hint/Hint';
-
-import './Header.scss';
-
-const Header = ({ name = 'John', surname = 'Silver', status = 'admin', img = '', hintLabel = 'Help', hintText = 'Hint text' }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const userMenu = useRef(null);
-
-  const handle = {
-    toggleMenu: () => {
-      if (!isOpen) setIsOpen(!isOpen);
-    },
-    closeMenu: () => {
-      setTimeout(() => setIsOpen(false), 50);
-    },
-    logout: () => {
-      handle.toggleMenu();
-      logout();
-    }
-  };
-
-  useOutsideToggle(userMenu, handle.closeMenu);
-
-  return (
-    <header className={cn('header', className)}>
-      <div className="df">
-        <Hint side="bottom" hint={hintText} className="header__hint" label={hintLabel} iconOutline />
-      </div>
-
-      <div className="j6 user-menu">
-        <div onClick={() => {}} className="header--bell">
-          <Bell className="header--bell-icon" />
-          <div className="header--bell-notification-icon" />
-        </div>
-
-        <div className="header--user-ava">
-          <img src={img} alt="" />
-        </div>
-
-        <div className="dfc mr10">
-          <span className="header--user-name">
-            {name} {surname}
-          </span>
-          <span className="header--user-status">{status}</span>
-        </div>
-
-        <ChevronRight onClick={handle.toggleMenu} className={cn('accordion--title-chevron', { 'accordion--title-chevron-open': isOpen })} />
-        {isOpen && (
-          <div className="user-menu__dropdown" ref={userMenu}>
-            <div className="user-menu__item" onClick={handle.logout}>
-              <Power className="mr10" /> Logout
-            </div>
-          </div>
-        )}
-      </div>
-    </header>
-  );
-};
-
-export default Header;

package/src/Atomic/FormElements/Header/Header.scss

@@ -1,93 +0,0 @@
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 11.5px 24px;
-  box-shadow: 0 4px 16px rgba(31, 116, 153, 0.15);
-  box-sizing: border-box;
-
-  &--user-name {
-    font-size: 12px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    max-width: 150px;
-  }
-
-  &--user-status {
-    font-size: 10px;
-    color: #9aa0b9;
-  }
-
-  &--user-ava {
-    overflow: hidden;
-    text-align: center;
-    width: 30px;
-    height: 30px;
-    border-radius: 20px;
-    margin-right: 8px;
-
-    img {
-      width: 30px;
-    }
-  }
-
-  &--chevron-icon:hover {
-    cursor: pointer;
-  }
-
-  &--bell {
-    display: flex;
-    position: relative;
-    margin-right: 22px;
-    cursor: pointer;
-    width: 16px;
-    height: 16px;
-    max-width: 16px;
-    min-width: 16px;
-
-    &-notification-icon {
-      content: "";
-      width: 7px;
-      height: 7px;
-      border-radius: 15px;
-      position: absolute;
-      top: -3px;
-      right: -6px;
-      background-color: #f06d8d;
-    }
-  }
-
-  &__hint {
-    .hint__button {
-      color: #6b81dd;
-      .hint__label {
-        margin-left: 5px;
-      }
-    }
-  }
-}
-
-.user-menu__dropdown {
-  position: absolute;
-  width: 100%;
-  top: 100%;
-  background: #fff;
-  border: 1px solid #e2e5ec;
-  box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
-  padding: 10px 0;
-  z-index: 50;
-}
-
-.user-menu__item {
-  padding: 5px 15px;
-  cursor: pointer;
-
-  &:hover {
-    background: #e2e5ec;
-  }
-}
-
-.user-menu {
-  position: relative;
-}

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import Header from './Header';
-
-global.lng = 'en';
-
-export default {
-  title: 'Header',
-  component: Header,
-  argTypes: {
-    status: {
-      control: {
-        type: 'select',
-        options: ['admin', 'user']
-      }
-    }
-  }
-};
-
-const Template = args => <Header {...args} />;
-
-export const HeaderTemplate = Template.bind({});
-
-HeaderTemplate.args = {
-  name: 'Jesse',
-  surname: 'James',
-  status: 'admin',
-  img: 'http://mediad.publicbroadcasting.net/p/shared/npr/styles/x_large/nprshared/201805/212379250.jpg',
-  hintText: 'Hint text',
-  hintLabel: 'Help'
-};