intelicoreact 0.0.96 → 0.0.97

package/src/Molecular/Datepicker/Datepicker.js

@@ -1,346 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { useClickOutside } from '../../Functions/useClickOutside';
-import InputMask from 'react-input-mask';
-import moment from 'moment';
-import cn from 'classnames';
-
-import Langs from '../../../../Langs';
-import Button from '../../Atomic/UI/Button/Button';
-import Calendar from './components/Calendar';
-
-const padTime = (time) => {
-  return `${time.toString().padStart(2, '0')}:00`;
-};
-
-import './Datepicker.scss';
-import Switcher from '../../Atomic/FormElements/Switcher/Switcher';
-import Dropdown from '../../Atomic/FormElements/Dropdown/Dropdown';
-import Input from '../../Atomic/FormElements/Input/Input';
-
-const Datepicker = (props) => {
-  const { values = {}, onChange, onChangeCompare, onCancel, getSelectedMode = () => {}, onChangeInterval, isCompareHidden, limitRange } = props;
-  const { start = null, end = null, compare = false } = values;
-  const txt = Langs[global.lng];
-  const startDateInputRef = useRef(null);
-  const endDateInputRef = useRef(null);
-
-  const [startDate, setStartDate] = useState(start);
-  const [endDate, setEndDate] = useState(end);
-  const dateInterval = getSelectedMode({ start: startDate, end: endDate });
-
-  const [startDateInput, setStartDateInput] = useState(start);
-  const [endDateInput, setEndDateInput] = useState(end);
-  const [startHour, setStartHour] = useState(start ? moment(start).hour() : 0);
-  const [endHour, setEndHour] = useState(end ? moment(end).hour() : 0);
-  // eslint-disable-next-line no-unused-vars
-  const [isCompare, setIsCompare] = useState(compare);
-  const [date1, setDate1] = useState(start ? moment(start).toDate() : moment().subtract(1, 'month').toDate());
-  const [date2, setDate2] = useState(end ? moment(end).toDate() : moment().toDate());
-  const [isStartFocused, setIsStartFocused] = useState(false);
-  const [isEndFocused, setIsEndFocused] = useState(false);
-  const [hoverStatus, setHoverStatus] = useState(null);
-
-  const isNearby = useMemo(() => moment(date2).subtract(1, 'month').isSame(moment(date1), 'month'), [date1, date2]);
-
-  const isPreviousPeriodShowed = useMemo(() => isCompare && !isCompareHidden && startDate && endDate, [startDate, endDate, isCompare]);
-
-  const prevEndHour = useRef(endHour);
-
-  const getStartHourItems = () =>
-    [...Array(24).keys()].map((hour) => ({
-      label: padTime(hour),
-      value: hour,
-      disabled: moment(startDate).isSame(endDate, 'day') && endHour <= hour,
-    }));
-  const getEndHourItems = () =>
-    [...Array(24).keys()].map((hour) => ({
-      label: padTime(hour + 1),
-      value: hour === 23 ? 0 : hour + 1,
-      disabled:
-        (moment(startDate).isSame(endDate, 'day') || (moment(startDate).isSame(moment(endDate).subtract(1, 'days'), 'day') && endHour === 0)) &&
-        hour < startHour,
-    }));
-
-  const startPrevDate = useMemo(() => {
-    if (isPreviousPeriodShowed) {
-      const intervalHoursCount = moment(endDate).diff(startDate, 'hours');
-      return moment(startDate).subtract(intervalHoursCount, 'hours').toDate();
-    } else return null;
-  }, [startDate, endDate, isCompare]);
-
-  const endPrevDate = useMemo(() => {
-    if (isPreviousPeriodShowed) {
-      return startDate;
-    } else return null;
-  }, [startDate, endDate, isCompare]);
-
-  const title = useMemo(() => {
-    if (isCompare && !isCompareHidden && startDate && endDate) {
-      return `${moment(startPrevDate).format('ll')} (${moment(startPrevDate).format('HH:mm')}) - ${moment(endPrevDate).format('ll')} (${moment(
-        endPrevDate
-      ).format('HH:mm')})`;
-    } else return '';
-  }, [startDate, endDate, isCompare]);
-
-  const subtractDay = (date) => (endHour === 0 ? moment(date).subtract(1, 'days') : date);
-  const addDay = (date) => (endHour === 0 ? moment(date).add(1, 'days') : date);
-
-  useEffect(() => {
-    if (moment(startDate).isSameOrAfter(endDate)) {
-      setStartDate(moment(endDate).subtract(1, 'd').toDate());
-      setDate1(moment(endDate).subtract(1, 'd'));
-    }
-  }, [startDate]);
-
-  useEffect(() => {
-    if (moment(endDate).isSameOrBefore(startDate)) {
-      setEndDate(moment(startDate).add(1, 'd').toDate());
-      setDate2(moment(startDate).add(1, 'd'));
-    }
-  }, [endDate]);
-
-  useEffect(() => {
-    setStartDateInput(startDate);
-    setEndDateInput(endDate);
-    if (moment(startDate).isBefore(moment(endDate), 'month')) {
-      setDate1(moment(startDate));
-      setDate2(moment(endDate));
-    }
-  }, [startDate, endDate]);
-
-  useEffect(() => {
-    if (moment(date1).isSameOrAfter(moment(date2), 'month')) {
-      setDate1(moment(date2).subtract(1, 'month'));
-    }
-  }, [date1, date2]);
-
-  useEffect(() => {
-    onChangeInterval(dateInterval);
-  }, [dateInterval]);
-
-  const handleClick = (date) => {
-    prevEndHour.current = 0;
-    if (!startDate || (startDate && endDate && !(moment(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0))) {
-      setStartDate(moment(date).startOf('day').toDate());
-      setEndDate(moment(date).add(1, 'd').startOf('day').toDate());
-      setStartHour(0);
-      setEndHour(0);
-    } else if (moment(date).isBefore(moment(startDate), 'day')) {
-      setEndDate(moment(startDate).add(1, 'd').startOf('day').toDate());
-      setStartDate(moment(date).set('hour', parseInt(startHour, 10)).toDate());
-    } else if (moment(date).isAfter(moment(startDate), 'day')) {
-      setEndDate(moment(date).add(1, 'd').startOf('day').toDate());
-    }
-    setHoverStatus(null);
-  };
-
-  let timerId;
-
-  const handleHover = (date) => {
-    if (!date) {
-      timerId = setTimeout(() => {
-        setHoverStatus(null);
-      }, 400);
-      return;
-    }
-    if (timerId) clearTimeout(timerId);
-    if (moment(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0) {
-      if (moment(date).isAfter(moment(startDate), 'day')) setHoverStatus('end');
-      else if (moment(date).isBefore(moment(startDate), 'day')) setHoverStatus('start');
-      else setHoverStatus(null);
-    } else {
-      setHoverStatus('start');
-    }
-  };
-
-  const handleChangeStartHour = ({ target: { value: val } }) => {
-    setStartHour(+val);
-    setStartDate(
-      moment(startDate)
-        .set('hour', +val)
-        .toDate()
-    );
-  };
-
-  const handleChangeEndHour = ({ target: { value: val } }) => {
-    const newHour = +val;
-    setEndHour(newHour);
-    let newEndDate;
-    if (prevEndHour.current === 0 && newHour !== 0) {
-      newEndDate = moment(endDate).subtract(1, 'days');
-    } else if (prevEndHour.current !== 0 && newHour === 0) {
-      newEndDate = moment(endDate).add(1, 'days');
-    } else {
-      newEndDate = endDate;
-    }
-    prevEndHour.current = newHour;
-    setEndDate(moment(newEndDate).set('hour', newHour).toDate());
-  };
-
-  const renderButtons = () => (
-    <>
-      <Button className="plr15 mr5" onClick={() => onCancel()}>
-        {txt.buttons.cancel}
-      </Button>
-      <Button
-        className="plr20"
-        type="filled"
-        disabled={!startDate || !endDate}
-        onClick={() =>
-          onChange({
-            start: startDate,
-            end: endDate,
-            startPrevDate,
-            endPrevDate,
-            compare: isCompare,
-          })
-        }
-      >
-        {txt.buttons.apply}
-      </Button>
-    </>
-  );
-
-  const renderPreviousPeriod = () => (
-    <>
-      {txt.labels.previousPeriod}: <span className="date-picker__previous-period-interval">{title}</span>
-    </>
-  );
-
-  const handleStartDateFocus = () => {
-    setIsStartFocused(true);
-    setStartDateInput(moment(startDate).format('L'));
-  };
-
-  const handleStartDateBlur = () => {
-    let newDate;
-    if (moment(startDateInput).isValid()) {
-      newDate = moment(startDateInput).set('hour', parseInt(startHour, 10)).toDate();
-      setStartDate(newDate);
-    } else {
-      newDate = startDate;
-      setStartDateInput(newDate);
-    }
-    setIsStartFocused(false);
-    startDateInputRef.current.blur();
-    setDate1(moment(newDate).isSameOrAfter(moment(date2), 'month') ? moment(date2).subtract(1, 'month') : moment(newDate));
-  };
-
-  const handleEndDateFocus = () => {
-    setIsEndFocused(true);
-    setEndDateInput(moment(subtractDay(endDateInput)).format('L'));
-  };
-
-  const handleEndDateBlur = () => {
-    let newDate;
-    if (moment(endDateInput).isValid()) {
-      newDate = moment(endDateInput).set('hour', parseInt(endHour, 10)).toDate();
-      setEndDate(addDay(newDate));
-    } else {
-      newDate = endDate;
-      setEndDateInput(newDate);
-    }
-    setIsEndFocused(false);
-    endDateInputRef.current.blur();
-    setDate2(newDate);
-    setEndDateInput();
-  };
-
-  const handleKeyPressed = (e, handleDateBlur) => {
-    if (e.key === 'Enter') handleDateBlur();
-  };
-
-  return (
-    <div className="date-picker">
-      <div className="date-picker__header">
-        <Input
-          dataTest="datepicker_start-date-input"
-          className={cn('mr5', { 'date-picker-text-input--active': hoverStatus === 'start' })}
-          value={isStartFocused ? startDateInput : moment(startDate).format('ll')}
-          disabled={!startDate}
-          onChange={(e) => setStartDateInput(e.target.value)}
-          onFocus={handleStartDateFocus}
-          onBlur={handleStartDateBlur}
-          onKeyPress={(e) => handleKeyPressed(e, handleStartDateBlur)}
-          ref={startDateInputRef}
-        />
-        <Dropdown
-          dataTest="datepicker_start-hour-select-input"
-          onChange={handleChangeStartHour}
-          value={startHour}
-          items={getStartHourItems()}
-          disabled={!startDate}
-          short
-        />
-        <div className="pl5 pr5 date-picker__header--gray">—</div>
-        <Input
-          dataTest="datepicker_end-date-input"
-          className={cn('mr5', { 'date-picker-text-input--active': hoverStatus === 'end' })}
-          value={isEndFocused ? endDateInput : moment(subtractDay(endDate)).format('ll')}
-          disabled={!endDate}
-          onChange={(e) => setEndDateInput(e.target.value)}
-          onFocus={handleEndDateFocus}
-          onBlur={handleEndDateBlur}
-          onKeyPress={(e) => handleKeyPressed(e, handleEndDateBlur)}
-          ref={endDateInputRef}
-        />
-        <Dropdown
-          dataTest="datepicker_end-hour-select-input"
-          onChange={handleChangeEndHour}
-          value={endHour}
-          items={getEndHourItems()}
-          disabled={!endDate}
-          short
-        />
-      </div>
-      <div className="date-picker__previous-period">{isCompare && !isCompareHidden && startDate && endDate && renderPreviousPeriod()}</div>
-      <div className="date-picker__calendars">
-        <Calendar
-          date={date1}
-          setDate={setDate1}
-          allowNext={!isNearby}
-          startDate={startDate}
-          endDate={endDate}
-          startPrevDate={startPrevDate}
-          endPrevDate={endPrevDate}
-          onClick={handleClick}
-          onHover={handleHover}
-          limitRange={limitRange}
-        />
-        <Calendar
-          date={date2}
-          setDate={setDate2}
-          allowPrev={!isNearby}
-          startDate={startDate}
-          endDate={endDate}
-          startPrevDate={startPrevDate}
-          endPrevDate={endPrevDate}
-          onClick={handleClick}
-          onHover={handleHover}
-        />
-      </div>
-      <div className="date-picker__footer j46">
-        {!isCompareHidden ? (
-          <div className="j4">
-            <div className="mr5">
-              <Switcher
-                dataTest="datepicker_compare"
-                label={txt.labels.compare}
-                isSwitchOn={isCompare}
-                onChange={() => {
-                  onChangeCompare(!isCompare);
-                  setIsCompare((state) => !state);
-                }}
-              />
-            </div>
-          </div>
-        ) : (
-          <div />
-        )}
-        <div>{renderButtons()}</div>
-      </div>
-    </div>
-  );
-};
-
-export default Datepicker;

package/src/Molecular/Datepicker/Datepicker.scss

@@ -1,8 +0,0 @@
-.test {
-  width: 380px;
-}
-
-.testing {
-  border: none;
-  box-shadow: none;
-}

package/src/Molecular/Datepicker/Datepicker.stories.js

@@ -1,27 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { ref } from 'yup';
-import Datepicker from './Datepicker';
-
-global.lng = 'en';
-
-// export default {
-//   title: 'Form Elements/Datepicker',
-//   component: Datepicker,
-// };
-
-const Template = (args) => {
-  const params = {
-    minDate: args?.minDate,
-    maxDate: args?.maxDate,
-  };
-
-  return <Datepicker data={args.date} params={params} />;
-};
-
-export const DatepickerTemplate = Template.bind({});
-
-DatepickerTemplate.args = {
-  date: '10/14/2021',
-  minDate: '10/11/2021',
-  maxDate: '10/25/2021',
-};

package/src/Molecular/Datepicker/components/Calendar.js

@@ -1,118 +0,0 @@
-import cn from 'classnames';
-import moment from 'moment';
-import React, { useEffect, useMemo, useState } from 'react';
-import * as Icon from 'react-feather';
-
-const Calendar = (props) => {
-  const { 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 isRangeEnd = day && (moment(day.date).isSame(startDate, '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(
-      'calendar__day',
-      { 'calendar__day--clickable': day },
-      { 'calendar__day--disabled': isFutureDay },
-      { 'calendar__day--disabled': isPastDay },
-      { 'calendar__day--range-end': isRangeEnd },
-      { 'calendar__day--range-inside': isRangeInside },
-      { 'calendar__day--prev-range-end': isPrevRangeEnd },
-      { 'calendar__day--prev-range-inside': isPrevRangeInside }
-    );
-
-    return (
-      <div
-        key={`${week}_${dayOfWeek}`}
-        className={classNames}
-        onClick={day && !isFutureDay ? () => onClick(day.date) : 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="calendar">
-      <div className="calendar-header">
-        <div className="calendar-header__prev">
-          {allowPrev && (
-            <div onClick={handlePrev}>
-              <Icon.ChevronLeft size={16} />
-            </div>
-          )}
-        </div>
-        <div className="calendar-header__title">{title}</div>
-        <div className="calendar-header__next">
-          {allowNext && (
-            <div onClick={handleNext}>
-              <Icon.ChevronRight size={16} />
-            </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').charAt(0)}
-            </div>
-          );
-        })}
-      </div>
-      {Object.keys(days).map((week, index) => (
-        <div key={`week_${index}`} className="calendar__week">
-          {[...Array(7).keys()].map((dayOfWeek) => renderDay(week, dayOfWeek))}
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default Calendar;

package/src/Molecular/FormElements/FormElement.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import Label from '../../Atomic/FormElements/Label/Label';
-import './FormElement.scss';
-
-const RC = 'form-element';
-
-const FormElement = ({ label, required, children, error, className, hint }) => {
-  return (
-    <div className={cn(className, RC)}>
-      {label && <Label className={`${RC}__label`} label={label} hint={hint} isRequired={required} />}
-      {children}
-      {error && <span className={`${RC}__error`}>{error}</span>}
-    </div>
-  );
-};
-
-export default FormElement;

package/src/Molecular/FormElements/FormElement.scss

@@ -1,8 +0,0 @@
-.form-element__error {
-  margin-top: 2px;
-  margin-left: 1px;
-  position: absolute;
-  display: block;
-  font-size: 10px;
-  color: #f06d8d;
-}

package/src/Molecular/FormElements/FormElement.stories.js

@@ -1,59 +0,0 @@
-import React, { useState } from 'react';
-import Input from '../../Atomic/FormElements/Input/Input';
-import FormElement from './FormElement';
-
-global.lng = 'en';
-
-export default {
-  title: 'Form Elements/Form Element',
-  component: FormElement,
-  argTypes: {
-    label: {
-      description: 'string/JSX'
-    },
-    children: {
-      description: 'JSX'
-    },
-    error: {
-      description: 'string - print error if is errored'
-    },
-    required: {
-      description: 'boolean'
-    },
-    className: {
-      description: 'string'
-    },
-    hint: {
-      description: 'object {text: string, hintSide: bottom/right',
-      control: {
-        type: 'object'
-      }
-    }
-  }
-};
-
-const Template = args => {
-  return (
-    <FormElement {...args}>
-      {/* eslint-disable-next-line react/destructuring-assignment */}
-      <Input error={args.error} />
-    </FormElement>
-  );
-};
-
-export const InputTemplate = Template.bind({});
-
-InputTemplate.args = {
-  label: 'Text label',
-  error: 'error',
-  required: true,
-  hint: {
-    text: 'hint',
-    hintSide: 'bottom'
-  },
-  numStep: 1,
-  min: '0',
-  max: '5',
-  placeholder: 'Placeholder',
-  mask: ''
-};

package/src/index.js

@@ -1,3 +0,0 @@
-import Button from './Atomic/UI/Button/Button';
-
-export { Button };