intelicoreact 0.0.53 → 0.0.64

package/src/Atomic/FormElements/InputDateRange/dependencies.js

@@ -0,0 +1,161 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import moment from 'moment-timezone';
+
+import InputDateRange from './InputDateRange';
+
+export const useClickOutside = (hideComponent, additionalComponent) => {
+    const ref = useRef(null);
+
+    const checkCondition = target =>
+        (additionalComponent
+            ? !ref.current?.contains(target) && !additionalComponent?.contains(target)
+            : !ref.current?.contains(target));
+
+    const handleClickOutside = useCallback(
+        ({ target }) => {
+            if (checkCondition(target)) hideComponent();
+        },
+        [hideComponent],
+    );
+
+    useEffect(() => {
+        document.addEventListener('mousedown', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside, true);
+        };
+    }, []);
+
+    return ref;
+};
+
+export const useToggle = initialState => {
+    const [isToggled, setToggle] = useState(!!initialState);
+    const toggle = useCallback(() => setToggle(isOn => !isOn), []);
+    const toggleOn = useCallback(() => setToggle(true), []);
+    const toggleOff = useCallback(() => setToggle(false), []);
+
+    return {
+        isToggled,
+        toggle,
+        toggleOn,
+        toggleOff,
+    };
+};
+
+export const INTERVALS = {
+    today: {
+        label: 'today',
+        start: () => moment().startOf('day'),
+        end: () => moment().add(1, 'day').startOf('day'),
+    },
+    yesterday: {
+        label: 'yesterday',
+        start: () => moment().subtract(1, 'day').startOf('day'),
+        end: () => moment().startOf('day'),
+    },
+    thisWeek: {
+        label: 'This Week',
+        start: () => moment().startOf('week'),
+        end: () => moment().add(1, 'day').startOf('day'),
+    },
+    lastWeek: {
+        label: 'Last Week',
+        start: () => moment().subtract(1, 'week').startOf('week'),
+        end: () => moment().startOf('week'),
+    },
+    last3Days: {
+        label: 'Last 3 Days',
+        start: () => moment().subtract(2, 'day').startOf('day'),
+        end: () => moment().add(1, 'day').startOf('day'),
+    },
+    last7Days: {
+        label: 'Last 7 Days',
+        start: () => moment().subtract(6, 'day').startOf('day'),
+        end: () => moment().add(1, 'day').startOf('day'),
+    },
+    last14Days: {
+        label: 'Last 14 Days',
+        start: () => moment().subtract(13, 'day').startOf('day'),
+        end: () => moment().add(1, 'day').startOf('day'),
+    },
+    thisMonth: {
+        label: 'This Month',
+        start: () => moment().startOf('month'),
+        end: () => moment().add(1, 'day').startOf('day'),
+    },
+    lastMonth: {
+        label: 'Last Month',
+        start: () => moment().subtract(1, 'month').startOf('month'),
+        end: () => moment().startOf('month'),
+    },
+    last6Months: {
+        label: 'Last 6 Months',
+        start: () => moment().subtract(6, 'month').startOf('month'),
+        end: () => moment().startOf('month'),
+    },
+    thisYear: {
+        label: 'This Year',
+        start: () => moment().startOf('year'),
+        end: () => moment().add(1, 'day').startOf('day'),
+    },
+    lastYear: {
+        label: 'Last Year',
+        start: () => moment().subtract(1, 'year').startOf('year'),
+        end: () => moment().startOf('year'),
+    },
+    allTime: {
+        label: 'All Time',
+        start: () => null,
+        end: () => null,
+    }
+};
+export const ALL_TIME_KEY = 'allTime';
+export const CUSTOM_INTERVAL_KEY = 'customDate';
+export const CUSTOM_INTERVAL_KEY_TEXT = 'Custom Date';
+
+export const getActualDateRange = inputDateRange => {
+    const actualIntervalKey = (() => {
+        if (inputDateRange.intervalKey && inputDateRange.intervalKey !== CUSTOM_INTERVAL_KEY) {
+            return inputDateRange.intervalKey;
+        }
+        if (inputDateRange.start && inputDateRange.end) {
+            for (const [key, interval] of Object.entries(INTERVALS)) {
+                if (
+                    moment(inputDateRange.start).isSame(interval.start()) &&
+                    moment(inputDateRange.end).isSame(interval.end())
+                ) {
+                    return key;
+                }
+            }
+        }
+        return null;
+    })();
+    if (actualIntervalKey === ALL_TIME_KEY) return {
+        intervalKey: ALL_TIME_KEY,
+        start: null,
+        end: null,
+        compare: inputDateRange.compare,
+        startPrevDate: null,
+        endPrevDate:null
+    };
+    const actualValues = {
+        // intervalKey: inputDateRange.intervalKey || customIntervalKey,
+        intervalKey: actualIntervalKey || CUSTOM_INTERVAL_KEY,
+        start:
+            inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY
+                ? inputDateRange?.start
+                : INTERVALS[inputDateRange.intervalKey]?.start()?.toDate(),
+        end:
+            inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY
+                ? inputDateRange?.end
+                : INTERVALS[inputDateRange.intervalKey]?.end()?.toDate(),
+        compare: inputDateRange.compare,
+    };
+
+    if (actualValues.compare) {
+        const intervalHoursCount = moment(actualValues.end).diff(actualValues.start, 'hours');
+        actualValues.startPrevDate = moment(actualValues.start).subtract(intervalHoursCount, 'hours').toDate();
+        actualValues.endPrevDate = actualValues.start;
+    }
+    return actualValues;
+};

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

@@ -6,6 +6,25 @@ import Alert from '../../UI/Alert/Alert';
 
 global.lng = 'en';
 
+const examples = [
+  JSON.stringify({ withConfirmation: { cancel: true } }),
+  JSON.stringify({ withConfirmation: { confirm: true } }),
+  JSON.stringify({ withConfirmation: { confirm: true, cancel: true } }),
+  JSON.stringify({
+    withConfirmation: {
+      title: 'some value',
+      children: 'some value',
+      confirmBtnLabel: 'some value'
+    }
+  })
+];
+const confirmationDescrip =
+  'If you pass the "withConfirmation" property, you will be able to request confirmation of the user\'s action.\n\n' +
+  `For example, if you want to request confirmation to close a modal window, pass the property like this: ${examples[0]}\n\n` +
+  `To confirm submit, pass the property like this: with Confirmation: ${examples[1]}\n\n` +
+  `If you want confirmation for each action, pass the property like this: with Confirmation: ${examples[2]}\n\n` +
+  `If you want to control the contents of the confirmation window, pass an object with values instead of boolean values, like this:\n\n${examples[3]}\n\n`;
+
 export default {
   title: 'Modal',
   component: Modal,
@@ -27,18 +46,15 @@ export default {
         type: 'select',
         options: ['default', '290', '420', '870', '770', '950']
       }
-    }
-  },
-  type: {
-    control: {
-      type: 'select',
-      options: ['default', 'primary']
-    }
-  },
-  size: {
-    control: {
-      type: 'select',
-      options: ['default', '290', '420', '770', '870', '950']
+    },
+    type: {
+      control: {
+        type: 'select',
+        options: ['default', 'primary']
+      }
+    },
+    withConfirmation: {
+      description: confirmationDescrip
     }
   }
 };
@@ -49,8 +65,16 @@ const Template = args => {
 
   return (
     <>
-      <Button onClick={() => setIsOpen(true)} label="Show modal" />
-      <Modal closeModal={closeModal} isOpen={isOpen} {...args}>
+      <Button onClick={() => setIsOpen(true)} text="Show modal" />
+      <Modal
+        {...args}
+        closeModal={closeModal}
+        submitHandler={() => {
+          args.submitHandler();
+          closeModal();
+        }}
+        isOpen={isOpen}
+      >
         <Alert message="Alert message" variant="error" className="mb5" />
         <Alert message="Alert message" variant="warning" className="mb5" />
         <Alert message="Alert message" variant="success" className="mb5" />
@@ -61,11 +85,32 @@ const Template = args => {
 };
 
 export const ModalTemplate = Template.bind({});
+export const ModalWithConfirmation = Template.bind({});
 
-ModalTemplate.args = {
+const mainProps = {
   title: 'Modal',
   variant: 'primary',
   mode: 'edit',
   size: '',
+  confirmBtnLabel: '',
+  submitHandler: () => {
+    console.log('Hi');
+  }
+};
+
+const confirmationProps = {
+  title: '',
+  children: '',
   confirmBtnLabel: ''
 };
+
+const confirmationVariants = {
+  // confirm: { ...confirmationProps },
+  cancel: { ...confirmationProps }
+};
+
+ModalTemplate.args = { ...mainProps };
+ModalWithConfirmation.args = {
+  ...mainProps,
+  withConfirmation: { ...confirmationVariants }
+};

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

@@ -0,0 +1,143 @@
+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
+    } = 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': isFutureDay },
+            { 'range-calendar__day--disabled': isPastDay },
+            { '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 && !isFutureDay ? e => onClick(day.date, e) : null}
+                onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
+                onMouseLeave={() => onHover(null)}
+            >
+                {day && day.date.getDate()}
+            </div>
+        );
+    };
+
+    const handlePrev = () => {
+        setDate(moment(date).subtract(1, 'month').toDate());
+    };
+
+    const handleNext = () => {
+        setDate(moment(date).add(1, 'month').toDate());
+    };
+
+    return (
+        <div className={cn('range-calendar', className)}>
+            <div className="range-calendar-header">
+                <Arrow type="left" disabled={!allowPrev} onClick={handlePrev} className="range-calendar-header__prev" />
+                {/* <div className="range-calendar-header__prev">
+                    {allowPrev && (
+                        <div onClick={handlePrev}>
+                            <Arrow type="left" disabled={!allowPrev} />
+                        </div>
+                    )}
+                </div> */}
+                <div className="range-calendar-header__title">{title}</div>
+                <Arrow type="right" disabled={!allowNext} onClick={handleNext} className="range-calendar-header__next" />
+
+                {/* <div className="range-calendar-header__next">
+                    {allowNext && (
+                        <div onClick={handleNext}>
+                            <Arrow type="right" disabled={!allowNext} />
+                        </div>
+                    )}
+                </div> */}
+            </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">
+                            {moment().weekday(dayOfWeek).format('dd').charAt(0)}
+                        </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

@@ -0,0 +1,101 @@
+.range-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

@@ -0,0 +1,54 @@
+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/UI/Arrow/Arrow.js

@@ -0,0 +1,41 @@
+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} stroke-width="2" stroke-linecap="round" stroke-linejoin="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} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        )
+      }
+    </div>
+  );
+};
+
+export default Arrow;

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

@@ -0,0 +1,19 @@
+.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

@@ -0,0 +1,32 @@
+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

@@ -3,11 +3,11 @@ import cn from 'classnames';
 
 import './Button.scss';
 
-const Button = ({ label, variant = 'primary', onClick, disabled, icon, className, children, style }) => {
-
+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}>
-      {icon}
+      {!noRenderIcon && icon}
       {label && <div className="button__text">{label}</div>}
       {!label && children ? children : null}
     </button>