intelicoreact 0.0.4 → 0.0.8

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 && 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/Label/Label.js

@@ -1,13 +1,12 @@
 import React from 'react';
-import cn from 'classnames';
 import Hint from '../../UI/Hint/Hint';
 import './Label.scss';
 
-const Label = ({ label, isBold, hint, hintSide, className, isRequired }) => (
-  <span className={cn(`label`, { [`label_bold`]: isBold }, className)}>
+const Label = ({ label, hint, isRequired }) => (
+  <span className="label">
     {label}
     {isRequired && <span className="label_isRequired">*</span>}
-    {hint && <Hint hint={hint} side={hintSide} className="label-hint" />}
+    {hint && <Hint hint={hint.text} side={hint.hintSide} className="label-hint" />}
   </span>
 );
 

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

@@ -2,6 +2,8 @@
     display: flex;
     color: #1e1e2d;
     font-size: 13px;
+    margin-bottom: 5px;
+    align-items: center;
 
     &_bold {
         font-weight: 500;

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

@@ -4,7 +4,7 @@ import Label from './Label';
 global.lng = 'en';
 
 export default {
-  title: 'Label',
+  title: 'Form Elements/Label',
   component: Label
 };
 
@@ -16,7 +16,8 @@ export const LabelTemplate = Template.bind({});
 
 LabelTemplate.args = {
   label: 'Label text',
-  hint: 'Hint text',
-  hintSide: 'bottom',
-  isBold: true
+  hint: {
+    text: 'Hint text',
+    hintSide: 'bottom'
+  }
 };

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/NumericInput/NumericInput.js

@@ -0,0 +1,220 @@
+import React, { useState, useEffect, useRef } from 'react';
+import cn from 'classnames';
+import { Minus, Plus } from 'react-feather';
+import InputMask from 'react-input-mask';
+import { KEYBOARD_SERVICE_KEYS } from '../../../Constants/index.constants';
+import { formatInput } from '../../../Functions/inputExecutor';
+
+import './NumericInput.scss';
+
+const NumericInput = ({
+  onChange,
+  disabled,
+  withDelete,
+  numStep = 1,
+  min = 0,
+  max,
+  value,
+  placeholder,
+  className,
+  type = 'number',
+  onBlur,
+  onFocus,
+  onKeyUp,
+  mask,
+  maskChar,
+  formatChars,
+  error,
+  icon,
+  symbolsLimit,
+  isNotBlinkErrors,
+  blinkTime,
+  isPriceInput
+}) => {
+  const DEFAULT_BLINK_TIME = 200;
+  // STATES
+  const [isFocused, setIsFocused] = useState(false);
+  const [isEditing, setEditing] = useState(false);
+  const inputRef = useRef(null);
+  const decRef = useRef(null);
+  const incRef = useRef(null);
+  const previousValueRef = useRef(value);
+  const [isAttemptToChange, setIsAttemptToChange] = useState(false);
+  const [isToHighlightError, setIsToHighlightError] = useState(false);
+
+  const [intMemoVal, setIntMemoVal] = useState(0);
+
+  const { onlyNumbers } = formatInput;
+  const { addCommas, removeComma } = formatInput.priceInput;
+
+  // HANDLES
+  const handle = {
+    change: (e) => {
+      let inputValue = e.target ? onlyNumbers(e.target.value) : e;
+      if (inputValue !== '') {
+        inputValue = parseFloat(inputValue) || '';
+        if (min && +min > inputValue) {
+          inputValue = min;
+        } else if (max && +max < inputValue) inputValue = max;
+      }
+      if (symbolsLimit) {
+        inputValue = inputValue.toString().substring(0, +symbolsLimit);
+      }
+
+      setIntMemoVal(parseFloat(inputValue));
+      onChange(inputValue.toString());
+    },
+    toggleEdit: () => {
+      setEditing(!isEditing);
+      onChange('');
+    },
+    focus: (e) => {
+      setIsFocused(true);
+      if (isPriceInput) onChange(removeComma(value));
+      if (onFocus) onFocus(e);
+    },
+    blur: (e) => {
+      setIsFocused(false);
+      setEditing(false);
+      if (isPriceInput) {
+        if (!isFinite(value)) {
+          value = intMemoVal;
+        }
+        onChange(addCommas(value));
+      }
+
+      if (onBlur) onBlur(e);
+    },
+    keyUp: (e) => {
+      if (!isNotBlinkErrors) {
+        const changedValue = '' + (value ?? '');
+        const previousValue = '' + (previousValueRef.current ?? '');
+        const currentSet = (() => {
+          if (previousValue.length < changedValue.length)
+            return value
+              .toString()
+              .slice(previousValue.length - changedValue.length);
+          else return changedValue.toString().includes(e.key) ? e.key : '';
+        })();
+
+        if (
+          !KEYBOARD_SERVICE_KEYS.includes(e.key) &&
+          changedValue === previousValue
+        )
+          setIsAttemptToChange(true);
+
+        if (KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet)
+          previousValueRef.current = value;
+        else previousValueRef.current = previousValue + currentSet[0];
+      }
+
+      if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
+    },
+    decrement: () => {
+      handle.change(intMemoVal - +numStep);
+    },
+    increment: () => {
+      handle.change(intMemoVal + +numStep);
+    }
+  };
+
+  const handleClickOutside = (event) => {
+    if (
+      inputRef.current &&
+      !inputRef.current.contains(event.target) &&
+      !decRef.current.contains(event.target) &&
+      !incRef.current.contains(event.target)
+    ) {
+      setTimeout(() => {
+        inputRef.current.focus();
+        inputRef.current.blur();
+      }, 0);
+    }
+  };
+
+  useEffect(() => {
+    if (!isNotBlinkErrors && isAttemptToChange) {
+      setIsAttemptToChange(false);
+      setIsToHighlightError(true);
+      setTimeout(() => {
+        setIsToHighlightError(false);
+      }, blinkTime || DEFAULT_BLINK_TIME);
+    }
+  }, [isAttemptToChange]);
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, true);
+    return () =>
+      document.removeEventListener('click', handleClickOutside, true);
+  }, []);
+
+  useEffect(() => {
+    if (isNaN(intMemoVal)) setIntMemoVal(min || '');
+  }, [intMemoVal]);
+
+  useEffect(() => {
+    if (isEditing || isFocused) inputRef.current.focus();
+  }, [isEditing, isFocused]);
+
+  const uniProps = {
+    className: `input ${className}`,
+    placeholder,
+    value: value || '',
+    disabled,
+    onChange: handle.change,
+    onFocus: handle.focus,
+    onBlur: handle.blur,
+    onKeyUp: handle.keyUp,
+    min,
+    max,
+    ...(maskChar ? { maskChar } : {}),
+    ...(formatChars ? { formatChars } : {})
+  };
+
+  function renderInput() {
+    return (
+      <>
+        <input {...uniProps} ref={inputRef} type={type} />
+
+        <div className='input__nums'>
+          <button
+            ref={decRef}
+            onClick={() => handle.decrement()}
+            className={cn(`input__num-btn`, { disabled: +value <= min })}
+          >
+            <Minus />
+          </button>
+          <button
+            ref={incRef}
+            onClick={() => handle.increment()}
+            className={cn(`input__num-btn`, { disabled: +value >= max })}
+          >
+            <Plus />
+          </button>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        `input__wrap`,
+        { [`input__wrap_focus`]: isFocused },
+        { [`input__wrap_error`]: error || isToHighlightError },
+        { [`input__wrap_disabled`]: disabled }
+      )}
+    >
+      {renderInput()}
+      {icon}
+      {withDelete && (
+        <span
+          className={cn(`input__close`, { hidden: !value })}
+          onClick={handle.toggleEdit}
+        />
+      )}
+    </div>
+  );
+};
+
+export default NumericInput;

package/src/Atomic/FormElements/NumericInput/NumericInput.scss

@@ -0,0 +1,135 @@
+.input {
+  position: relative;
+  word-break: break-all;
+  border: none;
+  background: none;
+  padding: 0 10px;
+  width: 100%;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+
+  &__wrap {
+    display: flex;
+    align-items: center;
+    border: 1px solid #e2e5ec;
+    box-sizing: border-box;
+    background-color: #fff;
+    height: 28px;
+    border-radius: 4px;
+
+    &_focus {
+      border-color: #6b81dd;
+      filter: drop-shadow(0px 0px 4px rgba(93, 120, 255, 0.5));
+    }
+
+    &_disabled {
+      background: #f7f8fa;
+      opacity: 0.5;
+      border-color: #a6acb1;
+      pointer-events: none;
+    }
+
+    &_error {
+      border-color: #f06d8d;
+    }
+  }
+
+  &_disabled {
+    background: #f7f8fa;
+    opacity: 0.5;
+    border-color: #a6acb1;
+    pointer-events: none;
+  }
+
+  &_error {
+    border-color: #f06d8d;
+  }
+
+  svg {
+    margin-right: 4px;
+  }
+
+  &__input {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    font-size: 13px;
+    font-weight: 400;
+    color: #1e1e2d;
+    border: none;
+    padding: 0 5px;
+    border-radius: 4px;
+  }
+
+  &__close {
+    position: relative;
+    opacity: 0.6;
+    width: 14px;
+    height: 14px;
+    background: none;
+    cursor: pointer;
+    margin-right: 4px;
+    visibility: hidden;
+    pointer-events: none;
+    &:hover {
+      opacity: 1;
+    }
+
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      height: 14px;
+      width: 2px;
+      background-color: #9aa0b9;
+    }
+
+    &:before {
+      transform: rotate(45deg);
+    }
+
+    &:after {
+      transform: rotate(-45deg);
+    }
+  }
+
+  &__nums {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  &__num-btn {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 24px;
+    border-left: 1px solid #e2e5ec;
+    background: none;
+    font-size: 20px;
+    user-select: none;
+    &.disabled {
+      opacity: 0.3;
+    }
+    svg {
+      margin-right: 0;
+    }
+  }
+
+  &-label {
+    margin-bottom: 5px;
+  }
+}
+
+.input__wrap:hover .input__close {
+  visibility: visible;
+  pointer-events: all;
+}