intelicoreact 0.0.96 → 0.0.97

package/src/Atomic/FormElements/TagsDropdown/TagsDropdown.scss

@@ -1,131 +0,0 @@
-@import "../../../scss/vars";
-
-.tags-dropdown {
-  display: inline-flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-
-  &__trigger {
-    background: #ffffff;
-    border: 1px solid #e2e5ec;
-    box-sizing: border-box;
-    border-radius: 3px;
-    padding-left: 5px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  &__btn {
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-
-  &__input {
-    width: 100%;
-    background: none;
-    border: none;
-    padding-right: 2px;
-    height: 16px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  &__list {
-    position: absolute;
-    min-width: 100%;
-    top: 100%;
-    background: #ffffff;
-    border: 1px solid #e2e5ec;
-    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.25);
-    width: 148px;
-    margin-top: 4px;
-    padding: 8px 0;
-    max-height: 320px;
-    overflow-y: auto;
-    z-index: 2;
-    text-align: left;
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: $color--gray--dark;
-      border-radius: 4px;
-    }
-
-    &-item {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      padding-left: 35px;
-      position: relative;
-      cursor: pointer;
-      color: $color--dark;
-      font-size: 13px;
-      font-weight: 400;
-      line-height: 24px;
-      width: 100%;
-      height: 24px;
-
-      &:hover,
-      &_active {
-        background: $color--gray--gentle;
-      }
-
-      &_disabled {
-        opacity: 0.3;
-        pointer-events: none;
-      }
-    }
-  }
-
-  &__arrow {
-    display: flex;
-    align-items: center;
-    margin-right: 5px;
-
-    &_active {
-      transform: rotate(180deg);
-    }
-
-    svg {
-      width: 17px;
-      height: 17px;
-    }
-  }
-
-  &__active-icon {
-    align-items: center;
-    position: absolute;
-    left: 12px;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    display: none;
-    &_active {
-      display: flex;
-    }
-  }
-
-  &-group {
-    margin-top: 6px;
-    &__name {
-      font-size: 10px;
-      color: $color--gray--dark;
-      text-transform: uppercase;
-      margin-left: 17px;
-    }
-  }
-
-  &-label {
-    margin-bottom: 5px;
-  }
-}

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

@@ -1,44 +0,0 @@
-import React, { useState } from 'react';
-import TagsDropdown from './TagsDropdown';
-
-global.lng = 'en';
-export default {
-  title: 'TagsDropdown',
-  component: TagsDropdown
-};
-
-const Template = args => {
-  const { options } = args;
-
-  const [value, setValue] = useState([]);
-  return <TagsDropdown options={options} chosenOptions={value} onChange={setValue} />;
-};
-
-export const TagsDropdownTemplate = Template.bind({});
-
-TagsDropdownTemplate.args = {
-  options: [
-    { id: 1, title: 'Tags Dropdown1', value: 'drop1', disabled: false },
-    { id: 2, title: 'Tags Dropdown2', value: 'drop2', disabled: false },
-    { id: 3, title: 'Tags Dropdown3', value: 'drop3', disabled: true },
-    { id: 4, title: 'Tags Dropdown4', value: 'drop4', disabled: false },
-    { id: 5, title: 'Tags Dropdown5', value: 'drop5', disabled: false },
-    { id: 6, title: 'Tags Dropdown6', value: 'drop6', disabled: false },
-    {
-      groupName: 'Some Group',
-      list: [
-        { id: 7, title: 'Group 11', value: 'group11', disabled: false },
-        { id: 8, title: 'Group 12', value: 'group12', disabled: true },
-        { id: 9, title: 'Group 13', value: 'group13', disabled: false }
-      ]
-    },
-    {
-      groupName: 'Some Group 2',
-      list: [
-        { id: 10, title: 'Group 21', value: 'group21', disabled: false },
-        { id: 11, title: 'Group 22', value: 'group22', disabled: false },
-        { id: 12, title: 'Group 23', value: 'group23', disabled: false }
-      ]
-    }
-  ]
-};

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

@@ -1,18 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-
-import './TextSwitcher.scss';
-
-const RC = 'text-switcher';
-
-const TextSwitcher = ({ isIncluded = true, activeText = 'is', inactiveText = 'is not', onChange, className }) => {
-  return (
-    <button className={cn(RC, { [`${RC}_active`]: isIncluded }, className)} onClick={() => onChange(!isIncluded)}>
-      <span className={`${RC}__btn`}>{activeText}</span>
-      {inactiveText && <span className={cn(`${RC}__btn`, `${RC}__btn_off`)}>{inactiveText}</span>}
-      <div className={cn(`${RC}__slider`, { [`${RC}__slider_inactive`]: !isIncluded })} />
-    </button>
-  );
-};
-
-export default TextSwitcher;

package/src/Atomic/FormElements/TextSwitcher/TextSwitcher.scss

@@ -1,50 +0,0 @@
-@import '../../../scss/vars';
-
-.text-switcher {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  justify-content: center;
-  align-items: center;
-  border: 2px solid $color--error-bg;
-  border-radius: 26px;
-  padding: 2px;
-  position: relative;
-  background: #fff;
-
-  &__btn {
-    cursor: pointer;
-    min-width: 58px;
-    white-space: nowrap;
-    padding: 0 14px;
-    height: 100%;
-    text-transform: uppercase;
-    font-size: 10px;
-    color: $green;
-    position: relative;
-    z-index: 2;
-    &_off {
-      color: $color--error;
-    }
-  }
-
-  &__slider {
-    position: absolute;
-    left: 0px;
-    border-radius: 28px;
-    top: 0px;
-    bottom: 0px;
-    width: 50%;
-    z-index: 0;
-    background-color: $color--green-light;
-    transition: left .3s ease,
-                background-color .3s ease;
-    &_inactive {
-      background-color: $color--error-bg;
-      left: 50%;
-    }
-  }
-
-  &_active {
-    border-color: $color--green-light;
-  }
-}

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

@@ -1,21 +0,0 @@
-import React, { useState } from 'react';
-import TextSwitcher from './TextSwitcher';
-
-global.lng = 'en';
-export default {
-  title: 'TextSwitcher',
-  component: TextSwitcher
-};
-
-const Template = args => {
-  const [isActive, setIsActive] = useState(true);
-
-  return <TextSwitcher {...args} isActive={isActive} onChange={setIsActive} />;
-};
-
-export const TextSwitcherTemplate = Template.bind({});
-
-TextSwitcherTemplate.args = {
-  activeText: 'is',
-  inactiveText: 'some long text'
-};

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

@@ -1,19 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-
-import Label from '../Label/Label';
-
-import './Textarea.scss';
-
-const RC = 'textarea';
-
-const Textarea = ({ value, onChange, placeholder, label, hint, hintSide, isBold, disabled, className }) => {
-  return (
-    <div className={cn(`${RC}__wrap`, className)}>
-      {label && <Label className={`${RC}-label`} label={label} hint={hint} hintSide={hintSide} isBold={isBold} />}
-      <textarea className={RC} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} disabled={disabled} />
-    </div>
-  );
-};
-
-export default Textarea;

package/src/Atomic/FormElements/Textarea/Textarea.scss

@@ -1,35 +0,0 @@
-@import "../../../scss/vars";
-@import "~anme/scss/anme-mixins";
-
-.textarea {
-  border: 1px solid #e2e5ec;
-  background-color: #fff;
-  min-height: 99px;
-  min-width: 223px;
-  width: 100%;
-  outline: none;
-  resize: none;
-  padding: 5px 9px;
-  box-sizing: border-box;
-  font-size: 12px;
-  font-weight: 400;
-  font-family: Roboto, sans-serif;
-
-  &:focus {
-    border-color: $color--primary;
-    filter: drop-shadow(0px 0px 4px rgba(93, 120, 255, 0.5));
-  }
-
-  &:disabled {
-    background: #f7f8fa;
-    opacity: 0.5;
-    border-color: #a6acb1;
-    pointer-events: none;
-  }
-
-  &-label {
-    margin-bottom: 5px;
-  }
-
-  @include custom-scroll;
-}

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

@@ -1,24 +0,0 @@
-import React, { useState } from 'react';
-import Textarea from './Textarea';
-
-global.lng = 'en';
-export default {
-  title: 'Textarea',
-  component: Textarea
-};
-
-const Template = args => {
-  const [value, setValue] = useState('');
-  return <Textarea {...args} value={value} onChange={setValue} />;
-};
-
-export const TextareaTemplate = Template.bind({});
-
-TextareaTemplate.args = {
-  disabled: false,
-  isBold: true,
-  placeholder: 'Placeholder',
-  label: 'label',
-  hint: 'hint',
-  hintSide: 'bottom'
-};

package/src/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.js

@@ -1,66 +0,0 @@
-import React, { useState } from 'react';
-import cn from 'classnames';
-
-import CheckboxInput from '../CheckboxInput/CheckboxInput';
-import { handleObjectChange } from '../../../Functions/utils';
-
-import './TieredCheckboxes.scss';
-
-const TieredCheckboxes = ({ items, className }) => {
-  const [data, setData] = useState(items);
-  const [checkAll, setCheckAll] = useState(false);
-  const [checkedItems, setCheckedItems] = useState([]);
-  const [isThirdStatement, setIsThirdStatement] = useState(false);
-
-  const onChange = handleObjectChange(setData, () => setData([...data]));
-
-  const handleArrayChange = (e, index, childIndex) => {
-    // change children checkboxes
-    if (childIndex || childIndex === 0) {
-      data[index].children[childIndex].value = e;
-      if (data[index].children.filter(item => item.value === true).length === data[index].children.length) {
-        data[index].value = true;
-        setIsThirdStatement(false);
-      } else if (data[index].children.filter(item => item.value === true).length === 0) {
-        setIsThirdStatement(false);
-      } else {
-        setIsThirdStatement(true);
-        data[index].value = false;
-      }
-
-      // change parent checkboxes
-    } else {
-      data[index].children.forEach(elem => {
-        elem.value = e;
-      });
-      data[index].value = e;
-      setCheckAll(true);
-      setCheckedItems(data[index]);
-      setIsThirdStatement(false);
-    }
-    onChange(data);
-  };
-
-  return (
-    <div className={cn('tiered-checkboxes', className)}>
-      {data.map((parent, index) => (
-        <div key={parent.id} className="tiered-checkboxes--parents">
-          <CheckboxInput
-            isThirdStatement={isThirdStatement}
-            label={parent.label}
-            value={data[index].children.length === checkedItems.length ? checkAll : parent.value}
-            onChange={e => handleArrayChange(e, index)}
-          />
-          {parent.children &&
-            parent.children.map((child, childIndex) => (
-              <div key={child.id} className="tiered-checkboxes--children">
-                <CheckboxInput label={child.label} value={child.value} onChange={e => handleArrayChange(e, index, childIndex)} />
-              </div>
-            ))}
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default TieredCheckboxes;

package/src/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.scss

@@ -1,10 +0,0 @@
-.tiered-checkboxes {
-  &--parents {
-    margin-bottom: 25px;
-  }
-
-  &--children {
-    margin-top: 10px;
-    margin-left: 10px;
-  }
-}

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

@@ -1,57 +0,0 @@
-import React from 'react';
-import TieredCheckboxes from './TieredCheckboxes';
-
-global.lng = 'en';
-
-export default {
-  title: 'TieredCheckboxes',
-  component: TieredCheckboxes
-};
-
-const Template = args => <TieredCheckboxes {...args} />;
-
-export const TieredCheckboxesTemplate = Template.bind({});
-
-TieredCheckboxesTemplate.args = {
-  items: [
-    {
-      id: 1,
-      label: 'Level 1',
-      value: false,
-      children: [
-        {
-          id: 1,
-          label: 'Level 2',
-          value: true
-        },
-        {
-          id: 2,
-          label: 'Level 2',
-          value: false
-        },
-        {
-          id: 3,
-          label: 'Level 2',
-          value: false
-        }
-      ]
-    },
-    {
-      id: 2,
-      label: 'Level 1',
-      value: false,
-      children: [
-        {
-          id: 1,
-          label: 'Level 2',
-          value: false
-        },
-        {
-          id: 2,
-          label: 'Level 2',
-          value: true
-        }
-      ]
-    }
-  ]
-};

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

@@ -1,55 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import cn from 'classnames';
-import moment from 'moment';
-
-import useToggle from '../../../Functions/useToggle';
-import Label from '../Label/Label';
-import Input from '../Input/Input';
-
-import './TimeRange.scss';
-
-const TimeRange = ({ className, from, to, labelFrom, labelTo }) => {
-  const [startTime, setStartTime] = useState(from);
-  const [endTime, setEndTime] = useState(to);
-
-  // eslint-disable-next-line no-unused-vars
-  const { isToggled: isStartTimeValidate, toggleOn: setIsStartTimeValidate } = useToggle();
-  // eslint-disable-next-line no-unused-vars
-  const { isToggled: isEndTimeValidate, toggleOn: setIsEndTimeValidate } = useToggle();
-
-  const isStartTimeValid = useMemo(() => moment(startTime, 'HH:mm', true).isValid(), [startTime]);
-  const isEndTimeValid = useMemo(() => moment(endTime, 'HH:mm', true).isValid(), [endTime]);
-
-  const blurTimeHandler = (time, setFunc) => {
-    const formattedTime = time ? moment(time, 'HH:mm').format('HH:mm') : '';
-    setFunc(formattedTime);
-  };
-
-  return (
-    <div className={cn(className, 'time-range')}>
-      <div className="time-range__range">
-        <Label label={labelFrom || 'Between'} />
-        <Input
-          className="time-range__input"
-          value={startTime}
-          onChange={value => setStartTime(value)}
-          placeholder="00:00"
-          onBlur={() => blurTimeHandler(startTime, setStartTime)}
-          error={isStartTimeValidate || !isStartTimeValid ? 'HH:MM format' : ''}
-        />
-
-        <Label label={labelTo || 'and'} />
-        <Input
-          className="time-range__input"
-          value={endTime}
-          onChange={value => setEndTime(value)}
-          placeholder="00:00"
-          onBlur={() => blurTimeHandler(endTime, setEndTime)}
-          error={isEndTimeValidate || !isEndTimeValid ? 'HH:MM format' : ''}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default TimeRange;

package/src/Atomic/FormElements/TimeRange/TimeRange.scss

@@ -1,17 +0,0 @@
-.time-range {
-
-  &__input .form-input {
-    width: 60px;
-  }
-
-  &__range {
-    margin: 8px 0 13px 0;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-
-    & > *:not(:last-child) {
-      margin-right: 16px;
-    }
-  }
-}

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

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import TimeRange from './TimeRange';
-
-global.lng = 'en';
-
-export default {
-  title: 'TimeRange',
-  component: TimeRange
-};
-
-const Template = args => <TimeRange {...args} />;
-
-export const TimeRangeTemplate = Template.bind({});
-
-TimeRangeTemplate.args = {
-  from: '12:00',
-  to: '13:00',
-  labelFrom: '',
-  labelTo: ''
-};

package/src/Atomic/MainMenu/MainMenu.js

@@ -1,112 +0,0 @@
-import React, { useState } from 'react';
-import cn from 'classnames';
-import * as Icons from 'react-feather';
-import { NavLink } from 'react-router-dom';
-
-import Langs from '../../../../Langs';
-import Accordion from '../UI/Accordion/Accordion';
-
-import './MainMenu.scss';
-
-const classNames = require('classnames');
-
-const MainMenu = props => {
-  const { items, className } = props;
-  const txt = Langs[global.lng];
-  const [isOpen, setIsOpen] = useState(true);
-  const [isMenuHovered, setIsMenuHovered] = useState(false);
-  const [isMenuIconHovered, setIsMenuIconHovered] = useState(false);
-
-  const chapterClass = classNames('main-menu--items-box-chapter', { 'main-menu--items-box-chapter-hidden': !isOpen && !isMenuHovered });
-  const accordionClass = classNames('main-menu--accordion', { 'main-menu--accordion-hidden': !isOpen && !isMenuHovered });
-  const itemsBoxClass = classNames('main-menu--items-box', { 'main-menu--items-box-closed': !isOpen && !isMenuHovered });
-  const mainMenuClass = classNames('main-menu', className, { 'main-menu--closed': !isOpen && !isMenuHovered });
-
-  const onMenuHover = () => {
-    if (!isOpen) {
-      setIsMenuHovered(!isMenuHovered);
-      items.mainMenu.forEach(item => {
-        item.isOpen = false;
-      });
-      items.partners.forEach(item => {
-        item.isOpen = false;
-      });
-      items.other.forEach(item => {
-        item.isOpen = false;
-      });
-    }
-  };
-
-  const onCloseMenu = () => {
-    setIsOpen(!isOpen);
-    items.mainMenu.forEach(item => {
-      item.isOpen = false;
-    });
-    items.partners.forEach(item => {
-      item.isOpen = false;
-    });
-    items.other.forEach(item => {
-      item.isOpen = false;
-    });
-  };
-
-  const changeMenuIcon = () => {
-    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;
-  };
-
-  return (
-    <div className={mainMenuClass} onMouseEnter={() => onMenuHover()} onMouseLeave={() => setIsMenuHovered(false)}>
-      <div className={cn('main-menu--header', { 'main-menu--header-closed': !isOpen && !isMenuHovered })}>
-        <div className={cn('main-menu--logo', { 'main-menu--logo-none': !isOpen && !isMenuHovered })} />
-        <div className="main-menu--header-btn" onClick={() => onCloseMenu()}>
-          <div className="j5" onMouseEnter={() => setIsMenuIconHovered(true)} onMouseLeave={() => setIsMenuIconHovered(false)}>
-            {changeMenuIcon()}
-          </div>
-        </div>
-      </div>
-
-      <div className={itemsBoxClass}>
-        <div className={cn('main-menu--items-box-main')}>
-          {items.main.map((item, index) => {
-            const Icon = Icons[item.icon];
-            return item.link ? (
-              <NavLink to={item.link} key={index} className={cn('main-menu--items-box-title')}>
-                <div className="main-menu--item">
-                  <div className="df">
-                    <Icon className={cn('mr5', item.className)} />
-                  </div>
-                  <span className={cn({ hidden: !isOpen && !isMenuHovered })}>{item?.title || 'Link'}</span>
-                </div>
-              </NavLink>
-            ) : (
-              <span key={index} className={cn('main-menu--items-box-title', { hidden: !isOpen && !isMenuHovered })}>
-                {txt?.titles[item?.title]}
-              </span>
-            );
-          })}
-        </div>
-
-        <div className={chapterClass}>
-          <span>Main menu</span>
-        </div>
-        <Accordion className={accordionClass} items={items.mainMenu} onClick={() => {}} />
-
-        <div className={chapterClass}>
-          <span>Partners</span>
-        </div>
-        <Accordion isOpen={isOpen} isMenuHovered={isMenuHovered} className={accordionClass} items={items.partners} onClick={() => {}} />
-
-        <div className={chapterClass}>
-          <span>Other</span>
-        </div>
-        <Accordion className={accordionClass} isOpen={isOpen} isMenuHovered={isMenuHovered} items={items.other} onClick={() => {}} />
-      </div>
-    </div>
-  );
-};
-
-export default MainMenu;