intelicoreact 0.0.95 → 0.0.98

package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js

@@ -1,152 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import cn from 'classnames';
-import moment from 'moment-timezone';
-
-import Arrow from '../../UI/Arrow/Arrow';
-
-import './RangeCalendar.scss';
-
-const RangeCalendar = (props) => {
-  const {
-    className,
-    date,
-    setDate,
-    startDate,
-    endDate,
-    allowPrev = true,
-    allowNext = true,
-    onClick = () => {},
-    onHover = () => {},
-    startPrevDate,
-    endPrevDate,
-    limitRange,
-    isShortWeekNames,
-    minDate,
-    maxDate,
-    momentMinDate,
-    momentMaxDate,
-    isDontLimitFuture,
-  } = props;
-
-  const [days, setDays] = useState({});
-
-  const title = useMemo(() => `${moment(date).format('MMM')} ${moment(date).format('YYYY')}`, [date]);
-
-  useEffect(() => {
-    const result = {};
-    const day = moment(date).startOf('month');
-    const daysInMonth = day.daysInMonth();
-    for (let d = 0; d < daysInMonth; d += 1) {
-      let week = day.week();
-      if (day.month() === 11 && week === 1) week = 53;
-      if (day.month() === 0 && week === 53) week = 0;
-      if (!Object.prototype.hasOwnProperty.call(result, week)) {
-        result[week] = {};
-      }
-      result[week][day.weekday()] = { date: day.toDate() };
-      day.add(1, 'd');
-    }
-    setDays(result);
-  }, [date]);
-
-  const renderDay = (week, dayOfWeek) => {
-    const day = days[week][dayOfWeek];
-    const isFutureDay = day && moment(day.date).isAfter(moment(), 'day');
-    const isPastDay = limitRange ? day && moment(day.date).isBefore(moment().subtract(limitRange, 'days'), 'day') : null;
-    const isRangeStart = day && moment(day.date).isSame(startDate, 'day');
-    const isRangeEnd = day && moment(day.date).isSame(moment(endDate).subtract(1, 'hour'), 'day');
-    const isRangeInside =
-      day &&
-      startDate &&
-      endDate &&
-      moment(day.date).isAfter(startDate, 'day') &&
-      moment(day.date).isBefore(moment(endDate).subtract(1, 'hour'), 'day');
-    const isPrevRangeEnd =
-      day && (moment(day.date).isSame(startPrevDate, 'day') || moment(day.date).isSame(moment(endPrevDate).subtract(1, 'day'), 'day'));
-    const isPrevRangeInside =
-      day &&
-      startPrevDate &&
-      endPrevDate &&
-      moment(day.date).isAfter(startPrevDate, 'day') &&
-      moment(day.date).isBefore(moment(endPrevDate).subtract(1, 'day'), 'day');
-    const classNames = cn(
-      'range-calendar__day',
-      { 'range-calendar__day--clickable': day },
-      {
-        'range-calendar__day--disabled':
-          isPastDay ||
-          (minDate && moment(day?.date).isBefore(minDate, 'day')) ||
-          (!isDontLimitFuture && (maxDate ? moment(day?.date).isAfter(momentMaxDate) : isFutureDay)),
-      },
-      { 'range-calendar__day--range-start': isRangeStart },
-      { 'range-calendar__day--range-end': isRangeEnd },
-      { 'range-calendar__day--range-inside': isRangeInside },
-      { 'range-calendar__day--prev-range-end': isPrevRangeEnd },
-      { 'range-calendar__day--prev-range-inside': isPrevRangeInside }
-    );
-
-    return (
-      <div
-        key={`${week}_${dayOfWeek}`}
-        className={classNames}
-        onClick={day ? (e) => onClick(day.date, e) : null}
-        onMouseOver={day ? () => onHover(day.date) : null}
-        onMouseLeave={() => onHover(null)}
-      >
-        <span className="calendar__day-num">{day && day.date.getDate()}</span>
-      </div>
-    );
-  };
-
-  const handlePrev = () => {
-    setDate(moment(date).subtract(1, 'month').toDate());
-  };
-
-  const handleNext = () => {
-    setDate(moment(date).add(1, 'month').toDate());
-  };
-
-  const getFormatedWeekName = (input) => (isShortWeekNames ? input.charAt(0) : input);
-
-  return (
-    <div className={cn('range-calendar', className)}>
-      <div className="range-calendar-header">
-        <Arrow
-          type="left"
-          disabled={!allowPrev || (minDate && moment(date).startOf('month').isSameOrBefore(momentMinDate, 'months'))}
-          onClick={handlePrev}
-          className="range-calendar-header__prev"
-        />
-        <div className="range-calendar-header__title">{title}</div>
-        <Arrow
-          type="right"
-          disabled={
-            !allowNext ||
-            (
-              !isDontLimitFuture &&
-              moment(date).startOf('month').isSameOrAfter(maxDate ? momentMaxDate : moment().add(1, 'day').startOf('day'), 'months')
-            )
-          }
-          onClick={handleNext}
-          className="range-calendar-header__next"
-        />
-      </div>
-      <div className="range-calendar__week range-calendar__week-title">
-        {[...Array(7).keys()].map((dayOfWeek) => {
-          return (
-            <div key={`day-of-week_${dayOfWeek}`} className="range-calendar__day range-calendar__day--title">
-              {getFormatedWeekName(moment().weekday(dayOfWeek).format('dd'))}
-            </div>
-          );
-        })}
-      </div>
-      {Object.keys(days).map((week, index) => (
-        <div key={`week_${index}`} className="range-calendar__week">
-          {[...Array(7).keys()].map((dayOfWeek) => renderDay(week, dayOfWeek))}
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default RangeCalendar;

package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss

@@ -1,101 +0,0 @@
-.range-calendar, .calendar {
-  width: 195px;
-  min-height: 195px;
-  display: flex;
-  flex-direction: column;
-  user-select: none;
-
-  &-header {
-    height: 24px;
-    margin-bottom: 12px;
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    &__title {
-      line-height: 20px;
-      font-weight: 500;
-      text-align: center;
-      flex-grow: 1;
-      color: #000000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &__next, &__prev {
-      width: 16px;
-      height: 16px;
-      //background-color: #E2E6F8;
-      border-radius: 5px;
-      color: #171D33;
-    }
-  }
-
-  &__week {
-    display: flex;
-  }
-
-  &__day {
-    font-size: 13px;
-    line-height: 20px;
-    margin: 1px 0;
-    flex-grow: 1;
-    flex-basis: 0;
-    text-align: center;
-    padding: 1px 6px;
-    user-select: none;
-
-    &--clickable {
-      cursor: pointer;
-
-      &:hover {
-        background: #E2E6F8;
-      }
-    }
-
-    &--disabled {
-      cursor: default;
-      color: #9aa0b9;
-      pointer-events: none;
-
-      &:hover {
-        background: inherit;
-      }
-    }
-
-    &--range-start, &--range-end {
-      background: #6B81DD;
-      color: white;
-      border-radius: 4px;
-
-      &:hover {
-        background: #6B81DD;
-      }
-    }
-
-    &--range-inside {
-      background: #E2E6F8;
-    }
-
-    &--prev-range-end {
-      background: #E2E5EC;
-      border-radius: 4px;
-    }
-
-    &--prev-range-inside {
-      background: #F7F8FA;
-    }
-
-    &--title {
-      font-size: 10px;
-      color: #9AA0B9;
-      font-weight: normal;
-
-      &:hover {
-        background: inherit;
-      }
-    }
-  }
-}

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

@@ -1,54 +0,0 @@
-import React, {useState, useMemo, useRef, useEffect} from 'react';
-import moment from 'moment-timezone';
-
-import RangeCalendar from './RangeCalendar';
-
-global.lng = 'en';
-
-export default {
-  title: 'RangeCalendar',
-  component: RangeCalendar,
-};
-
-const Template = args => {
-  const [dateOfRenderedMonth, setDateOfRenderedMonth] = useState(moment().subtract(1, 'month').toDate());
-
-  const [startDate, setStartDate] = useState(dateOfRenderedMonth);
-  const [endDate, setEndDate] = useState(dateOfRenderedMonth);
-  const isFirstClickRef = useRef(false);
-
-  const handleClick = date => {
-    if (
-        !startDate ||
-        (startDate && endDate && !(moment(startDate).add(1, 'd').isSame(endDate, 'day')))
-    ) {
-        setStartDate(moment(date).startOf('day').toDate());
-        setEndDate(moment(date).add(1, 'd').startOf('day').toDate());
-    } else if (moment(date).isBefore(moment(startDate), 'day')) {
-        setEndDate(moment(startDate).add(1, 'd').startOf('day').toDate());
-        setStartDate(moment(date).set('hour', parseInt(0, 10)).toDate());
-    } else if (moment(date).isAfter(moment(startDate), 'day')) {
-        setEndDate(moment(date).add(1, 'd').startOf('day').toDate());
-    }
-  };
-
-  return <RangeCalendar 
-    {...args} 
-    date={dateOfRenderedMonth}
-    setDate={setDateOfRenderedMonth}
-    // allowNext={true}
-    // allowPrev={true}
-    startDate={startDate}
-    endDate={endDate}
-    // startPrevDate={startPrevDate}
-    // endPrevDate={endPrevDate}
-    onClick={handleClick}
-    // onHover={handleHover}
-  />
-};
-
-export const RangeCalendarTemplate = Template.bind({});
-
-RangeCalendarTemplate.args = {
-  limitRange: 60
-};

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

@@ -1,41 +0,0 @@
-import React, { useState } from 'react';
-import cn from 'classnames';
-
-import Input from '../Input/Input';
-import Label from '../Label/Label';
-
-import './RangeInputs.scss';
-
-const RangeInputs = ({ label, hint, items, className, onChange, isRequired }) => {
-  const [error, setError] = useState('');
-
-  const handleChange = (prop, value) => {
-    onChange({ ...items, [prop]: value });
-  };
-
-  const rangeValidation = () => {
-    if ((items?.from && items?.to && items?.from > items?.to) || !items?.to) {
-      setError('Invalid range');
-    } else {
-      setError('');
-    }
-  };
-
-  return (
-    <div className={cn('range-inputs', className)}>
-      {label && <Label isRequired={isRequired} className="range-inputs--label mb5" label={label} hint={hint} />}
-      <div className="j4">
-        <div className="j4 w50">
-          <span className="range-inputs__input-label">From</span>
-          <Input type="number" value={items?.from} className="mr15" onChange={value => handleChange('from', value)} onBlur={rangeValidation} />
-        </div>
-        <div className="j4 w50">
-          <span className="range-inputs__input-label">To</span>
-          <Input type="number" value={items?.to} onChange={value => handleChange('to', value)} onBlur={rangeValidation} error={error} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default RangeInputs;

package/src/Atomic/FormElements/RangeInputs/RangeInputs.scss

@@ -1,20 +0,0 @@
-.range-inputs {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  flex-direction: column;
-
-  &--label {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    font-weight: 500;
-    font-size: 12px;
-  }
-
-  &__input-label {
-    font-size: 12px;
-    line-height: 24px;
-    margin-right: 16px;
-  }
-}

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import RangeInputs from './RangeInputs';
-
-import './RangeInputs.scss';
-
-global.lng = 'en';
-export default {
-  title: 'RangeInputs',
-  component: RangeInputs
-};
-
-const Template = args => {
-  return <RangeInputs {...args} />;
-};
-
-export const RangeInputsTemplate = Template.bind({});
-
-RangeInputsTemplate.args = {
-  label: 'loanAmount',
-  from: 0,
-  to: 0,
-  hint: 'Hint'
-};

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-
-import Hint from '../../UI/Hint/Hint';
-
-import './Switcher.scss';
-
-const RC = 'switcher';
-
-const Switcher = ({ label, className, isActive, disabled, onChange, boldLabel, hint }) => {
-  return (
-    <div className={`${RC}__wrap`}>
-      <button className={cn(RC, className, { [`${RC}_disabled`]: disabled })} onClick={() => onChange(!isActive)}>
-        <div className={cn(`${RC}__button`, { [`${RC}__button_active`]: isActive })}>
-          <div className={`${RC}__ball`} />
-        </div>
-        {label && <span className={cn(`${RC}__label`, { [`${RC}__label_bold`]: boldLabel })}>{label}</span>}
-      </button>
-      {hint && <Hint className={`${RC}__hint`} hint={hint} />}
-    </div>
-  );
-};
-
-export default Switcher;

package/src/Atomic/FormElements/Switcher/Switcher.scss

@@ -1,56 +0,0 @@
-@import "../../../scss/vars";
-
-.switcher {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-
-  &_disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  &__button {
-    background-color: rgba($color--gray, 0.5);
-    border-radius: 8px;
-    width: 26px;
-    height: 16px;
-    padding: 1px;
-    box-sizing: border-box;
-
-    &_active {
-      background-color: $color--primary;
-      .switcher__ball {
-        transform: translateX(calc(100% - 4px));
-      }
-    }
-  }
-
-  &__ball {
-    height: 14px;
-    width: 14px;
-    background-color: #fff;
-    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
-    border-radius: 50%;
-    transition: transform 0.2s ease;
-  }
-
-  &__label {
-    font-size: 12px;
-    margin-left: 4px;
-    user-select: none;
-    font-weight: 400;
-    &_bold {
-      font-weight: 500;
-    }
-  }
-
-  &__wrap {
-    display: inline-flex;
-    align-items: center;
-  }
-
-  &__hint {
-    margin-left: 5px;
-  }
-}

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

@@ -1,22 +0,0 @@
-import React, { useState } from 'react';
-import Switcher from './Switcher';
-
-global.lng = 'en';
-export default {
-  title: 'Switcher',
-  component: Switcher
-};
-
-const Template = args => {
-  const [isActive, setIsActive] = useState(false);
-
-  return <Switcher {...args} isActive={isActive} onChange={setIsActive} />;
-};
-
-export const SwitcherTemplate = Template.bind({});
-
-SwitcherTemplate.args = {
-  label: 'Test label',
-  disabled: false,
-  boldLabel: true
-};

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

@@ -1,47 +0,0 @@
-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 '../../../UI/Status/Status';
-import Tag from '../../Tag/Tag';
-import TdPriority from '../TdTypes/TdPriority';
-import TdWeight from '../TdTypes/TdWeight';
-
-// eslint-disable-next-line import/no-cycle
-import Table from '../Table';
-
-import '../Table.scss';
-
-const TdCell = ({ type, item, rowIndex, onChange, cardLength, changePriority, getAdviceWeight, onActionClick, rowItem, isDeleted }) => {
-  const [isAccordionOpen, setIsAccordionOpen] = useState(item.isOpen);
-
-  const percent = item.type === 'weight' && getAdviceWeight(isDeleted ? 0 : item.value);
-
-  switch (type) {
-    case 'accordion':
-      return (
-        <AccordionItem className={item.itemClassName} item={item} isOpen={isAccordionOpen} onClick={e => setIsAccordionOpen(e)}>
-          <Table rows={item.rows} className="accordion--table" />
-        </AccordionItem>
-      );
-    case 'actions':
-      return <TdActions rowItem={rowItem} actions={item} onChange={onChange} onActionClick={onActionClick} />;
-    case 'advancedTags':
-      return <AdvancedTags items={item} />;
-    case 'link':
-      return <a href={item.link}>{item.label}</a>;
-    case 'priority':
-      return <TdPriority rowIndex={rowIndex} cardLength={cardLength} onClick={changePriority} />;
-    case 'status':
-      return <Status className={item.className} label={item.label} status={item.status} />;
-    case 'tags':
-      return item.map((tag, index) => <Tag key={index} label={tag.label} />);
-    case 'weight':
-      return <TdWeight value={item.value} percent={percent} onChange={value => onChange({ ...item, value })} />;
-    default:
-      return <span className={item.className}>{item.value}</span>;
-  }
-};
-
-export default TdCell;

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

@@ -1,33 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-
-
-import '../Table.scss';
-import Langs from '../../../../../../Langs';
-
-const TdHeader = ({ item }) => {
-  const txt = Langs[global.lng];
-
-  switch (item.type) {
-    case 'double':
-      return (
-        <th>
-          <div className="j46">
-            <div className="">{txt.labels[item.left] || item.left}</div>
-            <div className="">{txt.labels[item.right] || item.right}</div>
-          </div>
-        </th>
-      );
-    default:
-      return (
-        <th className={cn(item.className)}>
-          <div className={cn({ df: item.button })}>
-            <div className="mr5">{txt.labels[item.label] || item.label}</div>
-            {item.button && <div className="cards-table__btn">{txt.buttons[item.button] || item.button}</div>}
-          </div>
-        </th>
-      );
-  }
-};
-
-export default TdHeader;

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

@@ -1,84 +0,0 @@
-import React, { useState } from 'react';
-import cn from 'classnames';
-
-import { handleObjectChange } from '../../../../Functions/utils';
-import TdCell from './TdCell';
-import TdRange from '../TdTypes/TdRange';
-import Modal from '../../Modal/Modal';
-
-import '../Table.scss';
-
-const TdRow = ({
-  item,
-  onChange,
-  rowIndex,
-  cardStatus,
-  range,
-  type,
-  rowSpan,
-  colSpan,
-  cardLength,
-  changePriority,
-  getAdviceWeight,
-  onActionClick,
-  isDeleted
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleChange = handleObjectChange(item, () => onChange({ ...item }));
-
-  return (
-    <>
-      <tr>
-        {type && rowSpan && (
-          <td className="rel" rowSpan={rowSpan + 1}>
-            <span className={cn(type && `cards-table__score cards-table__score-${cardStatus}`)}>
-              <TdRange item={range} />
-            </span>
-          </td>
-        )}
-
-        {Object.entries(item).map(([key, value]) =>
-          key === 'id' || key === 'isDeleted' ? null : (
-            <td
-              key={key}
-              className={cn('cards-table__body-item', {
-                'cards-table__accordion': value.type === 'accordion'
-              })}
-            >
-              <TdCell
-                onActionClick={onActionClick}
-                changePriority={changePriority}
-                cardLength={cardLength}
-                rowIndex={rowIndex}
-                rowItem={item}
-                type={key}
-                item={value}
-                onChange={newValue => handleChange(newValue, key)}
-                getAdviceWeight={getAdviceWeight}
-                isDeleted={isDeleted}
-              />
-            </td>
-          )
-        )}
-      </tr>
-
-      {type && colSpan ? (
-        <tr>
-          <td />
-          <td colSpan={colSpan}>
-            <span className="cards-table__title-select-lender-btn" onClick={() => setIsOpen(true)}>
-              Select Lender
-            </span>
-
-            <Modal closeModal={() => setIsOpen(false)} isOpen={isOpen} title="Choose Lender" size="420">
-              test
-            </Modal>
-          </td>
-        </tr>
-      ) : null}
-    </>
-  );
-};
-
-export default TdRow;