intelicoreact 0.0.94 → 0.0.97

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

@@ -1,161 +0,0 @@
-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: '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 && Object.keys(INTERVALS).includes(inputDateRange.intervalKey)) {
-            return inputDateRange.intervalKey;
-        } else 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 CUSTOM_INTERVAL_KEY;
-        }
-        return ALL_TIME_KEY;
-    })();
-    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()?.format('YYYY-MM-DDTHH:mm'),
-        end:
-            inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY
-                ? inputDateRange?.end
-                : INTERVALS[inputDateRange.intervalKey]?.end()?.format('YYYY-MM-DDTHH:mm'),
-        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/InputsRow/InputsRow.js

@@ -1,112 +0,0 @@
-import React, { useState } from 'react';
-import { v4 as uuid } from 'uuid';
-import { Trash2 } from 'react-feather';
-
-import Input from '../Input/Input';
-import Button from '../../UI/Button/Button';
-
-import './InputsRow.scss';
-
-const getRandomInRange = (min, max) => {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-};
-
-const handleObjectChange =
-  (updateObject, updateFunction) =>
-  (data, prop = '', isNumber) => {
-    let value;
-    if (data?.target) {
-      value = data.target.type === 'checkbox' ? data.target.checked : data.target.value;
-    } else value = data;
-
-    value = isNumber ? +value : value;
-
-    const props = prop.split('.');
-    const currentObject = props.reduce((res, chapter, index) => {
-      if (props.length !== index + 1) res = res[chapter];
-      return res;
-    }, updateObject);
-
-    currentObject[props.pop()] = value;
-    updateFunction();
-  };
-
-const InputsRow = ({ items, title, paramPlaceholder = '', valuePlaceholder = '', descriptionPlaceholder = '' }) => {
-  const initialRows = [
-    {
-      param: '',
-      value: '',
-      description: '',
-      rowId: '1'
-    },
-    {
-      param: '',
-      value: '',
-      description: '',
-      rowId: '2'
-    }
-  ];
-  const [data, setData] = useState(items || initialRows);
-  const onChange = handleObjectChange(setData, () => setData({ ...data }));
-  const [rows, setRows] = useState(data);
-
-  const handleAddRow = () => {
-    const newRow = [
-      ...rows,
-      {
-        param: '',
-        value: '',
-        description: '',
-        rowId: getRandomInRange(1, 1000)
-      }
-    ];
-    setRows(newRow);
-    onChange(newRow);
-  };
-
-  const handleArrayChange = (e, index, prop) => {
-    rows[index][prop] = e;
-    onChange(rows);
-  };
-
-  const onDelete = index => {
-    onChange([...rows.splice(index, 1)]);
-    onChange(rows);
-  };
-
-  return (
-    <div>
-      {title ? <div className="mb5">{title}</div> : null}
-
-      <div className="df">
-        <div className="inputs-row--param-label">Parameter name(key)</div>
-        <div className="inputs-row--value-label">Value</div>
-        <div className="inputs-row--description-label">Description</div>
-      </div>
-
-      {rows.map((item, index) => (
-        <div className="j4 mb5" key={item.rowId}>
-          <div className="inputs-row--input mr10">
-            <Input onChange={e => handleArrayChange(e, index, 'param')} value={item.param} placeholder={paramPlaceholder} />
-          </div>
-          <div className="inputs-row--input mr10">
-            <Input onChange={e => handleArrayChange(e, index, 'value')} value={item.value} placeholder={valuePlaceholder} />
-          </div>
-          <div className="inputs-row--input mr10">
-            <Input onChange={e => handleArrayChange(e, index, 'description')} value={item.description} placeholder={descriptionPlaceholder} />
-          </div>
-
-          {rows.length > 1 && (
-            <div onClick={() => onDelete(index)} className="inputs-row--trash">
-              <Trash2 />
-            </div>
-          )}
-        </div>
-      ))}
-
-      {rows.length < 10 && <Button onClick={handleAddRow} label="Add row" className="inputs-row--add-btn" />}
-    </div>
-  );
-};
-
-export default InputsRow;

package/src/Atomic/FormElements/InputsRow/InputsRow.scss

@@ -1,45 +0,0 @@
-.inputs-row {
-  &--input {
-    width: 200px;
-
-    .input-classic {
-      &__wrap {
-        width: 200px;
-      }
-    }
-  }
-
-  &--trash {
-    display: flex;
-    align-items: center;
-    width: 17px;
-    cursor: pointer;
-    background: #fff;
-    border-radius: 5px;
-
-    svg {
-      color: #f06d8d;
-    }
-  }
-
-  &--param-label {
-    width: 215px;
-  }
-
-  &--value-label {
-    width: 210px;
-  }
-
-  &--param-label,
-  &--value-label,
-  &--description-label {
-    color: #9aa0b9;
-    font-size: 10px;
-    margin-bottom: 3px;
-    text-transform: uppercase;
-  }
-
-  &--add-btn:hover {
-    filter: brightness(1.1);
-  }
-}

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

@@ -1,34 +0,0 @@
-import React from 'react';
-import InputsRow from './InputsRow';
-
-global.lng = 'en';
-
-export default {
-  title: 'InputsRow',
-  component: InputsRow
-};
-
-const Template = args => <InputsRow {...args} />;
-
-export const InputsRowTemplate = Template.bind({});
-
-InputsRowTemplate.args = {
-  title: 'InputsRow title',
-  paramPlaceholder: 'Params placeholder',
-  valuePlaceholder: 'Value placeholder',
-  descriptionPlaceholder: 'Description placeholder',
-  items: [
-    {
-      param: 'x-leadgen-id',
-      value: 'QUIDDI_220',
-      description: '',
-      rowId: '1'
-    },
-    {
-      param: '',
-      value: '',
-      description: '',
-      rowId: '2'
-    }
-  ]
-};

package/src/Atomic/FormElements/Label/Label.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import Hint from '../../UI/Hint/Hint';
-import './Label.scss';
-
-const Label = ({ label, hint, isRequired }) => (
-  <span className="label">
-    {label}
-    {isRequired && <span className="label_isRequired">*</span>}
-    {hint && <Hint hint={hint.text} side={hint.hintSide} className="label-hint" />}
-  </span>
-);
-
-export default Label;

package/src/Atomic/FormElements/Label/Label.scss

@@ -1,20 +0,0 @@
-.label {
-    display: flex;
-    color: #1e1e2d;
-    font-size: 13px;
-    margin-bottom: 5px;
-    align-items: center;
-
-    &_bold {
-        font-weight: 500;
-    }
-
-    &-hint {
-        margin-left: 5px;
-    }
-
-    &_isRequired {
-      color: red;
-      margin-left: 3px;
-    }
-}

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import Label from './Label';
-
-global.lng = 'en';
-
-export default {
-  title: 'Form Elements/Label',
-  component: Label
-};
-
-const Template = args => {
-  return <Label {...args} />;
-};
-
-export const LabelTemplate = Template.bind({});
-
-LabelTemplate.args = {
-  label: 'Label text',
-  hint: {
-    text: 'Hint text',
-    hintSide: 'bottom'
-  }
-};

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

@@ -1,69 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { X } from 'react-feather';
-
-import Button from '../../UI/Button/Button';
-
-import './Modal.scss';
-
-const Modal = ({
-  isOpen,
-  onConfirm,
-  closeModal,
-  children,
-  className,
-  title,
-  variant,
-  mode,
-  size,
-  confirmBtnLabel,
-  noConfirmBtn,
-  noFooter,
-  confirmBtnVariant = 'primary',
-  closeBtnText
-}) => {
-  if (!isOpen) return null;
-
-  const renderModalTitle = () => {
-    if (mode && mode !== 'default') return `${mode?.[0].toUpperCase() + mode?.slice(1)} ${title}`;
-    return title;
-  };
-
-  const handleConfirm = () => {
-    if (onConfirm) onConfirm();
-    closeModal();
-  };
-
-  return (
-    <div className="modal-box j5">
-      <div className={isOpen ? 'modal-overlay' : 'hidden'} onClick={closeModal} />
-
-      <div className={cn(className, { [`modal-${size}`]: size }, `${isOpen ? 'modal' : 'hidden'}`)}>
-        <div className={cn('modal__header', { [`modal__header-${variant}`]: variant })}>
-          <span className={cn('modal__header-title', { [`modal__header-${variant}-title`]: variant })}>{renderModalTitle()}</span>
-
-          <div onClick={closeModal} className={cn('modal-close-icon-box', { 'modal-close-icon-box-primary': variant === 'primary' })}>
-            <X className="modal-close-icon" />
-          </div>
-        </div>
-
-        <div className="modal__body">{children}</div>
-        {!noFooter && (
-          <div className="modal__footer">
-            <Button variant="dark-outline" onClick={closeModal} label={closeBtnText || 'Cancel'} />
-            {!noConfirmBtn && (
-              <Button
-                onClick={() => handleConfirm()}
-                label={confirmBtnLabel || mode?.[0].toUpperCase() + mode?.slice(1) || 'Apply'}
-                className="ml5"
-                variant={confirmBtnVariant}
-              />
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Modal;

package/src/Atomic/FormElements/Modal/Modal.scss

@@ -1,230 +0,0 @@
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transition: opacity 0.2s ease;
-  background-color: black;
-  opacity: 0.5;
-  z-index: 4;
-}
-
-.modal {
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  width: 600px;
-  left: calc(50% - 300px);
-  margin: 0 auto;
-  background-color: #fff;
-  border-radius: 5px;
-  z-index: 5;
-  box-shadow: 0 20px 20px rgb(0 0 0 / 20%);
-
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 15px;
-    border-bottom: 1px solid #e2e5ec;
-    background-color: #f7fafc;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-
-    &-primary {
-      background-color: #6b81dd;
-
-      &-title {
-        color: #ffff !important;
-        font-weight: 400;
-      }
-    }
-
-    &-title {
-      font-size: 16px;
-      font-weight: 400;
-      color: #6b81dd;
-    }
-  }
-
-  &__body {
-    background-color: #f7fafc;
-    padding: 15px;
-    max-height: calc(100vh - 150px);
-    overflow-y: auto;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-
-    scrollbar-color: rgb(186, 194, 201) rgba(0, 0, 0, 0) !important;
-    scrollbar-width: thin !important;
-
-    scrollbar {
-      -moz-appearance: none !important;
-    }
-    scrollbarbutton {
-      -moz-appearance: none !important;
-    }
-    thumb {
-      -moz-appearance: none !important;
-    }
-    scrollcorner {
-      -moz-appearance: none !important;
-      resize: both;
-    }
-    // overflow-y: overlay;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      -webkit-border-radius: 3px;
-      border-radius: 3px;
-      background: #bac2c9;
-
-      &:hover {
-        background: #9aa0b9;
-      }
-    }
-
-    &::-webkit-scrollbar:horizontal {
-      height: 8px;
-    }
-
-    &::-webkit-scrollbar-track:horizontal {
-      background: inherit;
-    }
-
-    &::-webkit-scrollbar-thumb:horizontal {
-      -webkit-border-radius: 6px;
-      border-radius: 6px;
-      background: #bac2c9;
-      background-clip: padding-box;
-      border: 2px solid rgba(0, 0, 0, 0);
-
-      &:hover {
-        background: #9aa0b9;
-        border: 1px solid rgba(0, 0, 0, 0);
-        background-clip: padding-box;
-      }
-    }
-  }
-
-  &__footer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 10px 15px;
-    border-top: 1px solid #e2e5ec;
-    background-color: #f7fafc;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-
-    &--inbody {
-      padding-bottom: 0;
-    }
-  }
-
-  &-290 {
-    width: 290px;
-    left: calc(50% - 145px);
-  }
-
-  &-420 {
-    width: 420px;
-    left: calc(50% - 210px);
-  }
-
-  &-770 {
-    width: 770px;
-    left: calc(50% - 385px);
-  }
-
-  &-870 {
-    width: 870px;
-    left: calc(50% - 435px);
-  }
-
-  &-950 {
-    width: 950px;
-    left: calc(50% - 475px);
-  }
-
-  &-1024 {
-    width: 1024px;
-    left: calc(50% - 510px);
-  }
-}
-.modal__footer--noborder {
-  border-top: none;
-}
-.modal-box {
-  z-index: 100;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.consumer-info-modal {
-  .modal__body {
-    min-height: 200px;
-    padding: 0 15px;
-  }
-}
-
-.modal-close-icon-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: inherit;
-  border-top-right-radius: 5px;
-  width: 40px;
-  height: 39px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  cursor: pointer;
-
-  &:hover {
-    opacity: 0.6;
-  }
-
-  &-primary {
-    color: #ffff;
-
-    &:hover {
-      background-color: #5162d4;
-      opacity: 1;
-    }
-  }
-}
-
-.modal-close-icon {
-  width: 20px;
-  min-width: 20px;
-  height: 20px;
-}
-
-.modal-text-card {
-  text-align: left;
-  padding: 15px 0;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 20px;
-}
-
-.included-selector-modal {
-  .table {
-    min-height: 400px;
-    max-height: 500px;
-  }
-}
-
-.reports-settings-modal-box {
-  .modal__body {
-    padding: 0;
-  }
-}