intelicoreact 0.0.6 → 0.0.9

package/src/Atomic/FormElements/NumericInput/NumericInput.js

@@ -0,0 +1,263 @@
+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';
+
+let timerOutside;
+let timerFocus;
+
+const NumericInput = ({
+  onChange,
+  disabled,
+  withDelete,
+  numStep = 1,
+  min = 0,
+  max,
+  value,
+  placeholder,
+  className,
+  onBlur,
+  onFocus,
+  onKeyUp,
+  mask,
+  maskChar,
+  formatChars,
+  error,
+  icon,
+  symbolsLimit,
+  isNotBlinkErrors,
+  blinkTime,
+  isPriceInput,
+  isFocusDefault = false
+}) => {
+  const DEFAULT_BLINK_TIME = 200;
+
+  //REFS
+  const inputRef = useRef(null);
+  const decRef = useRef(null);
+  const incRef = useRef(null);
+  const wrapRef = useRef(null);
+
+  const previousValueRef = useRef(value);
+
+  // STATES
+  const [inputValue, setInputValue] = useState(value || min || '');
+  const [inputValueFormated, setInputValueFormated] = useState(inputValue);
+  const [intMemoVal, setIntMemoVal] = useState(0);
+
+  const [isFocused, setIsFocused] = useState(false);
+  const [isEditing, setEditing] = useState(false);
+
+  const [isAttemptToChange, setIsAttemptToChange] = useState(false);
+  const [isToHighlightError, setIsToHighlightError] = useState(false);
+
+  const { onlyNumbers } = formatInput;
+  const { addCommas, removeComma } = formatInput.priceInput;
+
+  // HANDLES
+  const handle = {
+    change: (e) => {
+      let inputValue = e.target ? onlyNumbers(e.target.value) : e;
+
+      if (
+        inputValue &&
+        (decRef.current.contains(e.target) || incRef.current.contains(e.target))
+      ) {
+        inputValue = parseFloat(inputValue);
+        if (min && +min > inputValue) {
+          inputValue = min;
+        } else if (max && +max < inputValue) inputValue = max;
+      }
+      if (symbolsLimit) {
+        inputValue = inputValue.toString().substring(0, +symbolsLimit);
+      }
+      setInputValue(inputValue.toString());
+    },
+    clear: () => {
+      handle.change(min || '');
+    },
+    focus: (e) => {
+      if (isFocused) return;
+      setIsFocused(true);
+      if (onFocus) onFocus(e);
+    },
+    blur: (e) => {
+      if (!isFocused) return;
+
+      setIsFocused(false);
+      setEditing(false);
+
+      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: (e) => {
+      handle.change(intMemoVal - +numStep);
+    },
+    increment: (e) => {
+      handle.change(intMemoVal + +numStep);
+    }
+  };
+
+  //Check Outside Click
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (!wrapRef.current.contains(event.target)) {
+        setIsFocused(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside, true);
+    return () =>
+      document.removeEventListener('mousedown', handleClickOutside, true);
+  }, []);
+
+  useEffect(() => {
+    if (!isNotBlinkErrors && isAttemptToChange) {
+      setIsAttemptToChange(false);
+      setIsToHighlightError(true);
+      setTimeout(() => {
+        setIsToHighlightError(false);
+      }, blinkTime || DEFAULT_BLINK_TIME);
+    }
+  }, [isAttemptToChange]);
+
+  //On Input Value Change
+  useEffect(() => {
+    if (inputValue !== value) setIsFocused(true);
+
+    setInputValueFormated(
+      isPriceInput
+        ? isFocused
+          ? removeComma(inputValue)
+          : addCommas(inputValue)
+        : inputValue
+    );
+    setIntMemoVal(parseInt(inputValue));
+
+    if (typeof onChange === 'function') onChange(inputValue?.toString());
+  }, [inputValue]);
+
+  //On Integer Value Change
+  useEffect(() => {
+    if (isNaN(intMemoVal)) setIntMemoVal(min || 0);
+  }, [intMemoVal]);
+
+  //On Focuse Change
+  useEffect(() => {
+    setInputValueFormated(
+      isPriceInput
+        ? isFocused
+          ? removeComma(inputValue)
+          : addCommas(inputValue)
+        : inputValue
+    );
+
+    if (isFocused) {
+      if (typeof onFocus === 'function') onFocus({ target: inputRef?.current });
+      inputRef?.current?.focus();
+    } else {
+      if (typeof onBlur === 'function') onBlur({ target: inputRef?.current });
+      inputRef?.current?.blur();
+    }
+  }, [isFocused]);
+
+  useEffect(() => {
+    if (inputRef?.current && typeof isFocusDefault === 'boolean')
+      setIsFocused(isFocusDefault);
+      setEditing(isFocusDefault)
+  }, [inputRef, isFocusDefault]);
+
+  function renderInput() {
+    const uniProps = {
+      className: `input ${className || ''}`,
+      placeholder,
+      value: inputValueFormated,
+      disabled,
+      onChange: handle.change,
+      onFocus: () => {
+        setIsFocused(true);
+        setEditing(true);
+      },
+      onBlur: () => setEditing(false),
+      onKeyUp: handle.keyUp,
+      min,
+      max,
+      ...(maskChar ? { maskChar } : {}),
+      ...(formatChars ? { formatChars } : {})
+    };
+
+    return (
+      <>
+        <input {...uniProps} ref={inputRef} type='text' />
+
+        <div className='input__nums'>
+          <button
+            ref={decRef}
+            onMouseDown={(e) => handle.decrement(e)}
+            className={cn(`input__num-btn`, { disabled: +value <= min })}
+          >
+            <Minus />
+          </button>
+          <button
+            ref={incRef}
+            onMouseDown={(e) => handle.increment(e)}
+            className={cn(`input__num-btn`, { disabled: +value >= max })}
+          >
+            <Plus />
+          </button>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div
+      ref={wrapRef}
+      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: !inputValue })}
+          onClick={() => handle.clear()}
+        />
+      )}
+    </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;
+}

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

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { User } from 'react-feather';
+import NumericInput from './NumericInput';
+
+global.lng = 'en';
+
+export default {
+  title: 'Form Elements/NumericInput',
+  component: NumericInput,
+  argTypes: {
+    disabled: {
+      description: 'boolean'
+    },
+    isFocusDefault: {
+      description: 'boolean - if true, input will be focused on mount'
+    },
+    isInitialFocus: {
+      description: 'boolean - if true, the input will be focused on mount'
+    },
+    error: {
+      description: 'text - coloring input if is errored'
+    },
+    isPriceInput: {
+      description: 'boolean - if true, the input will be styled as PriceInput'
+    },
+    withDelete: {
+      description: 'boolean - add clear-cross by hover'
+    },
+    numStep: {
+      description: 'number/text - plus/minus buttons factor (default: 1)'
+    },
+    min: {
+      description: 'number/text - minimal number for numeric input'
+    },
+    max: {
+      description: 'number/text - maximal number for numeric input'
+    },
+    placeholder: {
+      description: 'text'
+    },
+    icon: { description: 'JSX' },
+    value: { description: '(* - required prop)' },
+    className: { description: 'string' },
+    mask: {
+      description:
+        'string: force input to masked https://www.npmjs.com/package/react-input-mask'
+    },
+    symbolsLimit: {
+      description: 'Set limit of symbols in input, overhead will be ignored'
+    },
+    onBlur: { description: 'custom callback on blur' },
+    onFocus: { description: 'custom callback on focus' },
+    onKeyUp: { description: 'custom callback on keyup, returns event keyCode' }
+  }
+};
+
+const Template = (args) => {
+  const [value, setValue] = useState('15000');
+  return <NumericInput {...args} value={value} onChange={setValue} />;
+};
+
+export const NumericInputTemplate = Template.bind({});
+
+NumericInputTemplate.args = {
+  disabled: false,
+  isFocusDefault: false,
+  error: '',
+  isPriceInput: false,
+  mask: '',
+  withDelete: true,
+  isNumeric: false,
+  numStep: 100,
+  min: '0',
+  max: '15000',
+  symbolsLimit: 5,
+  placeholder: 'Placeholder',
+  icon: <User />
+};

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

@@ -19,7 +19,8 @@ const RangeCalendar = props => {
         onHover = () => {},
         startPrevDate,
         endPrevDate,
-        limitRange
+        limitRange,
+        isShortWeekNames
     } = props;
 
     const [days, setDays] = useState({});
@@ -87,7 +88,7 @@ const RangeCalendar = props => {
                 onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
                 onMouseLeave={() => onHover(null)}
             >
-                {day && day.date.getDate()}
+              <span className="calendar__day-num">{day && day.date.getDate()}</span>
             </div>
         );
     };
@@ -100,6 +101,8 @@ const RangeCalendar = props => {
         setDate(moment(date).add(1, 'month').toDate());
     };
 
+    const getFormatedWeekName = input => isShortWeekNames ? input.charAt(0) : input;
+
     return (
         <div className={cn('range-calendar', className)}>
             <div className="range-calendar-header">
@@ -126,7 +129,7 @@ const RangeCalendar = props => {
                 {[...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)}
+                            {getFormatedWeekName(moment().weekday(dayOfWeek).format('dd'))}
                         </div>
                     );
                 })}

package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss

@@ -1,4 +1,4 @@
-.range-calendar {
+.range-calendar, .calendar {
   width: 195px;
   min-height: 195px;
   display: flex;
@@ -12,7 +12,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-  
+
     &__title {
       line-height: 20px;
       font-weight: 500;
@@ -27,7 +27,7 @@
     &__next, &__prev {
       width: 16px;
       height: 16px;
-      background-color: #E2E6F8;
+      //background-color: #E2E6F8;
       border-radius: 5px;
       color: #171D33;
     }
@@ -98,4 +98,4 @@
       }
     }
   }
-}
+}

package/src/Atomic/FormElements/Table/Table.scss

@@ -1,4 +1,4 @@
-@import '../../../scss/anme/anme-vars';
+@import '~anme/scss/anme-vars';
 
 .table-header {
     &--weight-actions {

package/src/Atomic/FormElements/Textarea/Textarea.scss

@@ -1,5 +1,5 @@
 @import "../../../scss/vars";
-@import "../../../scss/anme/anme-mixins";
+@import "~anme/scss/anme-mixins";
 
 .textarea {
   border: 1px solid #e2e5ec;

package/src/Atomic/MainMenu/MainMenu.scss

@@ -1,5 +1,5 @@
-@import "../../scss/anme/anme-vars";
-@import "../../scss/anme/anme-mixins";
+@import "~anme/scss/anme-vars";
+@import "~anme/scss/anme-mixins";
 
 .main-menu {
   display: flex;

package/src/Atomic/UI/Accordion/Accordion.scss

@@ -1,5 +1,5 @@
-@import '../../../scss/anme/anme-vars';
-@import '../../../scss/anme/anme-mixins';
+@import '~anme/scss/anme-vars';
+@import '~anme/scss/anme-mixins';
 
 .accordion {
     &--item {

package/src/Atomic/UI/Arrow/Arrow.js

@@ -17,20 +17,20 @@ const Arrow = ({type, className, onClick, disabled}) => {
   }, [ref.current]);
 
   return (
-    <div 
+    <div
       ref={ref}
       className={cn('arrow', `arrow_${type}`, className, {
         'arrow_disabled': disabled
       })}
       onClick={onClick} >
-      {type !== 'right' 
+      {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"/>
+            <path d="M15 18L9 12L15 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="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"/>
+            <path d="M9 18L15 12L9 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
           </svg>
         )
       }

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

@@ -1,9 +1,6 @@
 .arrow {
   width: 24px;
   height: 24px;
-  color: #1F7499;
-  // cursor: pointer;
-  // border: 1px solid #EAF2FF;
 
   &_disabled {
     pointer-events: none;

package/src/Atomic/UI/Calendar/Calendar.js

@@ -5,8 +5,8 @@ import { ChevronLeft, ChevronRight } from 'react-feather';
 import './Calendar.scss';
 
 export default function (props) {
-  const { date, setDate, allowPrev = true, allowNext = true, params } = props;
-  const { minDate, maxDate } = params;
+  const { date, setDate, allowPrev = true, allowNext = true, params, className } = props;
+  const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
   const [days, setDays] = useState({});
   const [showDate, setShowDate] = useState(date);
 
@@ -70,7 +70,7 @@ export default function (props) {
   };
 
   return (
-    <div className="calendar">
+    <div className={`calendar ${className ? className : ""}`}>
       <div className="calendar-header">
         <div className="calendar-header__prev">
           {allowPrev && (
@@ -92,7 +92,7 @@ export default function (props) {
         {[...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)}
+              {moment().weekday(dayOfWeek).format('dd')}
             </div>
           );
         })}

package/src/Atomic/UI/Calendar/Calendar.scss

@@ -425,7 +425,17 @@
 //     box-shadow: 0 0 3px 0 rgb(0 123 255 / 50%);
 //   }
 // }
+.calendar-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
+  &__prev,
+  &__next{
+    display: flex;
+    height: auto;
+  }
+}
 .calendar {
   background: #ffffff;
     border: 1px solid #e2e5ec;
@@ -507,15 +517,21 @@
   }
 
   &-container {
-    width: 200px;
+    min-width: 200px;
+    position: relative;
+    .calendar {
+      position: absolute;
+      z-index: 9;
+      top: 100%;
+      padding: 10px 16px;
+      border: 1px solid var(--border-color);
+    }
   }
 
   &-dropdown {
     appearance: none;
     background-color: white;
     cursor: pointer;
-    color: gray;
-
     width: 100%;
     height: 28px;
 

package/src/Atomic/UI/Calendar/Calendar.stories.js

@@ -4,7 +4,7 @@ import Calendar from './Calendar';
 global.lng = 'en';
 
 export default {
-  title: 'UI/Calendar',
+  title: 'Calendar',
   component: Calendar,
 };
 
@@ -20,4 +20,5 @@ CalendarTemplate.args = {
   date: '12/03/2021',
   params: {},
   setDate: () => null,
+  className: ''
 };