intelicoreact 0.0.96 → 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'
-  }
-};