intelicoreact 0.0.94 → 0.0.97

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

@@ -1,72 +0,0 @@
-.advanced-tags {
-    display: inline-flex;
-    background-color: #e2e5ec;
-    height: 24px;
-    align-items: center;
-    justify-content: center;
-    border-radius: 2px;
-    padding: 2px 8px;
-    margin-right: 4px;
-    font-size: 10px;
-    position: relative;
-    margin-top: 2.5px;
-    margin-bottom: 2.5px;
-
-    &--error {
-        background-color: #fce2e8;
-    }
-
-    &--warning-icon {
-        min-height: 16px;
-        min-width: 16px;
-        font-size: 17px;
-        color: #f06d8d;
-    }
-
-    &__warn-text {
-        position: absolute;
-        background-color: #6b81dd;
-        color: #fff;
-        font-size: 10px;
-        line-height: 16px;
-        border-radius: 4px;
-        max-width: 250px;
-        min-width: 80px;
-        padding: 8px;
-        z-index: 2;
-
-        &:before {
-            content: '';
-            position: absolute;
-            width: 8.5px;
-            height: 8.5px;
-            background-color: #6b81dd;
-            transform: rotate(45deg);
-        }
-
-        &--warnLeft {
-            top: 30px;
-            left: 4px;
-
-            &:before {
-                left: 8px;
-                top: -4px;
-            }
-        }
-
-        &--warnRight {
-            top: 30px;
-
-            &:before {
-                right: 10px;
-                top: -4px;
-            }
-        }
-    }
-
-    &--showMore {
-        background-color: #ffedc8;
-        cursor: pointer;
-        user-select: none;
-    }
-}

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

@@ -1,49 +0,0 @@
-import React from 'react';
-import AdvancedTags from './AdvancedTags';
-
-global.lng = 'en';
-
-export default {
-  title: 'UI/AdvancedTags',
-  component: AdvancedTags
-};
-
-const Template = ({ tags }) => <AdvancedTags items={tags} />;
-
-export const AdvancedTagTemplate = Template.bind({});
-
-AdvancedTagTemplate.args = {
-  tags: [
-    {
-      tagId: 1,
-      labelLeft: 'Left',
-      labelRight: 'Right',
-      active: 3,
-      pause: 1,
-      merchants: 5
-    },
-    {
-      tagId: 2,
-      labelLeft: 'Left',
-      active: 2,
-      pause: 0,
-      merchants: 2
-    },
-    {
-      tagId: 3,
-      labelRight: 'Right',
-      active: 3,
-      merchants: 5
-    },
-    {
-      tagId: 4,
-      labelLeft: 'Left',
-      labelRight: 'Right',
-      active: 0,
-      pause: 0,
-      warnLeft: true,
-      warnLeftMsg: 'Warn left message',
-      warnRightMsg: 'Warn right message'
-    }
-  ]
-};

package/src/Atomic/UI/Alert/Alert.js

@@ -1,23 +0,0 @@
-import React, { useState } from 'react';
-import cn from 'classnames';
-import { X } from 'react-feather';
-
-import './Alert.scss';
-
-const Alert = ({ message, icon, variant, className, children, noDismiss }) => {
-  const [onClose, setOnClose] = useState(false);
-
-  return (
-    <div className={cn(className, { hidden: onClose }, `alert alert--${variant || 'warning'}`)}>
-      {icon}
-      <div>{children || message}</div>
-      {!noDismiss && (
-        <div className="alert__close-btn">
-          <X onClick={() => setOnClose(!onClose)} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Alert;

package/src/Atomic/UI/Alert/Alert.scss

@@ -1,65 +0,0 @@
-.alert {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 15px;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-  width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-
-  &--error {
-    color: #f06d8d;
-    background-color: #fce2e8;
-    border-left: 2px solid #f06d8d;
-  }
-
-  &--warning {
-    color: #f59a2f;
-    background-color: #ffedc8;
-    border-left: 2px solid #f59a2f;
-  }
-
-  &--success {
-    color: #00b031;
-    background-color: #e4f3e8;
-    border-left: 2px solid #00b031;
-  }
-
-  &--info {
-    color: #6b81dd;
-    background-color: #e2e6f8;
-    border-left: 2px solid #6b81dd;
-  }
-
-  &__close-btn {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    min-width: 15px;
-    cursor: pointer;
-    user-select: none;
-    margin-left: 10px;
-  }
-
-  &--title {
-    background-color: #ebeff2;
-    border-radius: 4px;
-    height: 37px;
-    font-weight: 400;
-    color: #1E1E2D;
-    font-size: 13px;
-    text-transform: uppercase;
-
-    .alert__close-btn {
-      display: none;
-    }
-  }
-
-  svg {
-    width: 16px;
-    height: 16px;
-    min-width: 16px;
-  }
-}

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

@@ -1,34 +0,0 @@
-import React from 'react';
-import Alert from './Alert';
-
-global.lng = 'en';
-
-export default {
-  title: 'UI/Alert',
-  component: Alert,
-  argTypes: {
-    variant: {
-      description: 'string: ["error", "warning", "success", "info"]',
-      control: {
-        type: 'select',
-        options: ['error', 'warning', 'success', 'info']
-      }
-    },
-    message: {
-      description: 'string'
-    }
-  },
-  message: {
-    description: 'string'
-  }
-};
-
-const Template = args => <Alert {...args} />;
-
-export const AlertTemplate = Template.bind({});
-
-AlertTemplate.args = {
-  message:
-    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-  variant: ''
-};

package/src/Atomic/UI/Arrow/Arrow.js

@@ -1,41 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import cn from 'classnames';
-
-import { getStyles } from '../../../Functions/utils';
-
-import './Arrow.scss';
-
-const Arrow = ({type, className, onClick, disabled}) => {
-  if (!type || (type !== 'left' && type !== 'right')) return null;
-  const ref = useRef();
-  const [color, setColor] = useState('black');
-
-  useEffect(() => {
-    if (ref.current) {
-      setColor(getStyles(ref.current, 'color'));
-    };
-  }, [ref.current]);
-
-  return (
-    <div
-      ref={ref}
-      className={cn('arrow', `arrow_${type}`, className, {
-        'arrow_disabled': disabled
-      })}
-      onClick={onClick} >
-      {type !== 'right'
-        ? (
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M15 18L9 12L15 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-          </svg>
-        ) : (
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M9 18L15 12L9 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-          </svg>
-        )
-      }
-    </div>
-  );
-};
-
-export default Arrow;

package/src/Atomic/UI/Arrow/Arrow.scss

@@ -1,19 +0,0 @@
-.arrow {
-  width: 24px;
-  height: 24px;
-
-  &_disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-}
-
-.arrow>svg {
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-
-
-

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

@@ -1,32 +0,0 @@
-import React from 'react';
-import {Check} from 'react-feather';
-import Arrow from './Arrow';
-
-global.lng = 'en';
-
-export default {
-  title: 'UI/Arrow',
-  component: Arrow,
-  argTypes: {
-    type: {
-      description: 'string: ["left", "right"]',
-      control: {
-        type: 'select',
-        options: ['left', 'right']
-      }
-    }
-  }
-};
-
-const Template = args => {
-  const { className, onClick } = args;
-  return <Arrow {...args} />;
-};
-
-export const ArrowTemplate = Template.bind({});
-
-ArrowTemplate.args = {
-  type: 'left',
-  className: 'externall-class-name',
-  onClick: ev => console.log(ev.target.className)
-};

package/src/Atomic/UI/Button/Button.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-
-import './Button.scss';
-
-const Button = ({ label, variant = 'primary', onClick, disabled, icon, className, children, style, noIcon }) => {
-  const noRenderIcon = noIcon || variant === "ellipse-apply" || variant === "ellipse-cancel";
-  return (
-    <button style={style} className={cn(className, 'button', { [`button_${variant}`]: variant })} onClick={onClick} disabled={disabled}>
-      {!noRenderIcon && icon}
-      {label && <div className="button__text">{label}</div>}
-      {!label && children ? children : null}
-    </button>
-  );
-};
-
-export default Button;

package/src/Atomic/UI/Button/Button.scss

@@ -1,108 +0,0 @@
-.button {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 13px;
-  line-height: 20px;
-  border-radius: 3px;
-  padding: 3px 10px;
-  cursor: pointer;
-  box-sizing: border-box;
-  text-align: center;
-  user-select: none;
-  height: 28px;
-  white-space: nowrap;
-  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
-
-  &:disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
-    &_dark-outline {
-        border: 1px solid #bac2c9;
-        color: #1E1E2DFF;
-
-        &:hover {
-            background-color: #F2F2F8FF;
-        }
-    }
-
-    &_primary {
-        border: 1px solid #6B81DDFF;
-        background-color: #6B81DDFF;
-        color: #fff;
-        &:hover {
-            filter: brightness(1.1);
-        }
-    }
-
-    &_secondary {
-        border: 1px solid #BAC2C9FF;
-        background-color: #BAC2C9FF;
-        color: #fff;
-        &:hover {
-            filter: brightness(1.1);
-        }
-    }
-
-    &_ellipse-apply{
-      padding: 8px 16px;
-      border-radius: 40px;
-      background: #1F7499;
-      font-family: 'Sarabun';
-      font-style: normal;
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
-      letter-spacing: 0.1px;
-      color: #FFFFFF;
-    }
-
-    &_ellipse-cancel{
-      padding: 8px 18px;
-      border-radius: 32px;
-      font-family: Sarabun;
-      font-style: normal;
-      font-weight: normal;
-      font-size: 14px;
-      line-height: 20px;
-      letter-spacing: 0.2px;
-      color: #1F7499;
-    }
-
-  &_link {
-    color: #6b81dd;
-    box-shadow: none;
-
-    svg {
-      display: none;
-    }
-  }
-
-  &_success {
-    background-color: #7ac48c;
-    border: 1px solid #7ac48c;
-    color: #fff;
-
-    &:hover {
-      filter: brightness(1.1);
-    }
-  }
-
-  &__text {
-    width: 100%;
-    text-align: center;
-  }
-
-  &:active {
-    filter: brightness(1.1);
-  }
-
-  &__icon {
-    width: 20px;
-    height: 25px;
-    margin-right: 5px;
-    min-width: 15px;
-  }
-}

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

@@ -1,49 +0,0 @@
-import React from 'react';
-import {Check} from 'react-feather';
-import Button from './Button';
-
-global.lng = 'en';
-
-export default {
-  title: 'UI/Button',
-  component: Button,
-  argTypes: {
-    variant: {
-      description: 'string: ["primary", "secondary", "dark-outline", "ellipse-apply", "ellipse-cancel"]',
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary', 'dark-outline', 'link', 'ellipse-apply', 'ellipse-cancel']
-      }
-    },
-    label: {
-      description: 'string'
-    },
-    disabled: {
-      description: 'boolean'
-    },
-    onClick: {
-      description: 'function'
-    },
-    icon: {
-      description: 'svg icon code',
-      control: {
-        type: 'select',
-        options: ['Check', 'Edit3', 'Plus', 'Tool', 'UploadCloud', 'X', 'ArrowLeft']
-      }
-    }
-  }
-};
-
-const Template = args => {
-  return <Button {...args} />;
-};
-
-export const ButtonTemplate = Template.bind({});
-
-ButtonTemplate.args = {
-  disabled: false,
-  onClick: () => null,
-  label: 'Button',
-  icon: <Check/>,
-  
-};

package/src/Atomic/UI/Calendar/Calendar.js

@@ -1,180 +0,0 @@
-import React, { useEffect, useMemo, useState, useRef } from 'react';
-import cn from 'classnames';
-import moment from 'moment';
-import InputMask from 'react-input-mask';
-import { ChevronLeft, ChevronRight } from 'react-feather';
-import './Calendar.scss';
-
-export default function (props) {
-  const { date, setDate, setIsOpened, allowPrev = true, allowNext = true, params, className, isDontLimitFuture, isListTop } = props;
-  // const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
-  const { minDate, maxDate } = params;
-  const [days, setDays] = useState({});
-  const [showDate, setShowDate] = useState(date);
-  const [isChangeYear, setIsChangeYear] = useState(false);
-  const [inputYearValue, setInputYearValue] = useState(moment(showDate).format('YYYY'));
-  const yearInputRef = useRef(null);
-
-  const selectedDay = moment(showDate);
-  const isError = 'Invalid date';
-
-  // const title = useMemo(
-  //   () => (selectedDay.format('MMM') === isError ? isError : `${selectedDay.format('MMM')} ${moment(showDate).format('YYYY')}`),
-  //   [date, showDate]
-  // );
-
-  const showMonth = useMemo(() => moment(showDate).format('MMM'), [date, showDate]);
-  const showYear = useMemo(() => moment(showDate).format('YYYY'), [date, showDate]);
-
-  useEffect(() => {
-    const result = {};
-    const day = selectedDay.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);
-  }, [showDate]);
-
-  const renderDay = (week, dayOfWeek) => {
-    const day = days[week][dayOfWeek];
-    if (!day) return <div className="calendar__day" />;
-    const isFutureDay = day && maxDate ? moment(day.date).isAfter(moment(maxDate || ''), 'day') : moment(day.date).isAfter(moment(), 'day');
-    const isBeforeDay = day && moment(day.date).isBefore(moment(minDate || ''), 'day');
-
-    const classNames = cn(
-      'calendar__day',
-      { 'calendar__day--clickable': day },
-      { 'calendar__day--disabled': !isDontLimitFuture && isFutureDay },
-      { 'calendar__day--disabled': isBeforeDay },
-      { 'calendar__day--selected': moment(date).format() === moment(day.date).format() }
-    );
-
-    return (
-      <div
-        key={`${week}_${dayOfWeek}`}
-        className={classNames}
-        onClick={
-          day && (isDontLimitFuture || !isFutureDay)
-            ? () => {
-                setDate(moment(day.date).format('L'));
-                setIsOpened(false);
-              }
-            : null
-        }
-        // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
-        // onMouseLeave={() => onHover(null)}
-      >
-        {day && day.date.getDate()}
-      </div>
-    );
-  };
-
-  const handlePrev = () => {
-    setShowDate(moment(showDate).subtract(1, 'month').format('L'));
-  };
-
-  const handleNext = () => {
-    setShowDate(moment(showDate).add(1, 'month').format('L'));
-  };
-
-  const closeYearInput = () => {
-    const newDate = (() => {
-      const dateArr = showDate.split('/');
-      const oldYear = dateArr[2];
-      dateArr[2] = inputYearValue;
-      return moment(dateArr.join('/')).format('MM/DD/YYYY') === isError ? showDate : moment(dateArr.join('/')).format('MM/DD/YYYY');
-    })();
-    let resultDate = newDate;
-    if (minDate && moment(minDate) > moment(newDate)) resultDate = moment(showDate).format('MM/DD/YYYY');
-    else if (maxDate && moment(maxDate) < moment(newDate)) resultDate = moment(showDate).format('MM/DD/YYYY');
-
-    setIsChangeYear(false);
-    setShowDate(resultDate);
-    setInputYearValue(resultDate);
-  };
-
-  useEffect(() => {
-    if (isChangeYear && yearInputRef.current) {
-      const input = yearInputRef.current.getElementsByTagName('input')[0];
-      setInputYearValue(showYear);
-      setTimeout(() => {
-        input.focus();
-        input.select();
-      }, 0);
-    }
-  }, [isChangeYear]);
-
-  return (
-    <div
-      className={cn('calendar', className, {
-        'calendar_list-top': isListTop,
-      })}
-    >
-      <div className="calendar-header">
-        <div className="calendar-header__prev">
-          {allowPrev && (
-            <div onClick={handlePrev}>
-              <ChevronLeft />
-            </div>
-          )}
-        </div>
-        <div className={cn('calendar-header__title')} ref={yearInputRef}>
-          <span className="calendar-header__title-month">{`${showMonth} `}</span>
-          <span
-            className={cn('calendar-header__title-year', {
-              'calendar-header__title-year_change-mode': isChangeYear,
-            })}
-            onClick={() => setIsChangeYear(true)}
-          >
-            {isChangeYear ? (
-              <InputMask
-                className="calendar-header__title-year-change-input"
-                value={inputYearValue}
-                mask="9999"
-                onBlur={(e) => closeYearInput()}
-                onKeyUp={(e) => {
-                  if (e.key === 'Escape') setIsChangeYear(false);
-                  if (e.key === 'Enter') closeYearInput();
-                }}
-                onChange={(e) => setInputYearValue(e.target.value)}
-              />
-            ) : (
-              `${showYear}`
-            )}
-          </span>
-        </div>
-        <div className="calendar-header__next">
-          {allowNext && (
-            <div onClick={handleNext}>
-              <ChevronRight />
-            </div>
-          )}
-        </div>
-      </div>
-      <div className="calendar__week">
-        {[...Array(7).keys()].map((dayOfWeek) => {
-          return (
-            <div key={`day-of-week_${dayOfWeek}`} className="calendar__day calendar__day--title">
-              {moment().weekday(dayOfWeek).format('dd')}
-            </div>
-          );
-        })}
-      </div>
-      {Object.keys(days).map((week, index) => (
-        <div key={`week_${index}`} className="calendar__week">
-          {[...Array(7).keys()].map((dayOfWeek) => (
-            <React.Fragment key={`calendar-day--${dayOfWeek}`}>{renderDay(week, dayOfWeek)}</React.Fragment>
-          ))}
-        </div>
-      ))}
-    </div>
-  );
-}