intelicoreact 0.0.96 → 0.0.97

package/src/Atomic/FormElements/Input/Input.js

@@ -1,186 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import cn from 'classnames';
-import InputMask from 'react-input-mask';
-import { KEYBOARD_SERVICE_KEYS } from '../../../Constants/index.constants';
-import { formatInput } from '../../../Functions/inputExecutor';
-
-import './Input.scss';
-
-const Input = ({
-  onChange,
-  onBlur,
-  onFocus,
-  onKeyUp,
-  isNotBlinkErrors,
-  isPriceInput,
-  isOnlyNumber,
-  isOnlyString,
-  isTwoDigitAfterDot,
-  disabled,
-  withDelete,
-  value,
-  placeholder,
-  className,
-  type = 'text',
-  mask,
-  maskChar,
-  formatChars,
-  error,
-  icon,
-  symbolsLimit,
-  blinkTime,
-  isFocusDefault = false,
-}) => {
-  const DEFAULT_BLINK_TIME = 100;
-  // STATES
-  const [isFocused, setIsFocused] = useState(false);
-  const [isEditing, setEditing] = useState(false);
-  const inputRef = useRef(null);
-  const previousValueRef = useRef(value);
-  const [isAttemptToChange, setIsAttemptToChange] = useState(false);
-  const [isToHighlightError, setIsToHighlightError] = useState(false);
-
-  const { onlyNumbers, onlyString } = formatInput;
-  const { addCommas, removeComma } = formatInput.priceInput;
-  const isUseErrorsBlink = !isNotBlinkErrors && !mask;
-
-  // HANDLES
-  const handle = {
-    change: (e) => {
-      let inputValue = e.target ? e.target.value : e;
-      if (symbolsLimit && inputValue.length > +symbolsLimit) {
-        inputValue = inputValue.substring(0, +symbolsLimit);
-      }
-
-      if (isOnlyNumber && !isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue);
-      if (isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue, true);
-      if (isOnlyString) inputValue = onlyString(inputValue);
-
-      onChange(inputValue.toString());
-    },
-    toggleEdit: () => {
-      setEditing(!isEditing);
-      onChange('');
-    },
-    focus: (e) => {
-      setIsFocused(true);
-      if (isPriceInput && isOnlyNumber) onChange(removeComma(value));
-
-      if (onFocus) onFocus(e);
-    },
-    blur: (e) => {
-      setIsFocused(false);
-      setEditing(false);
-      if (isTwoDigitAfterDot) {
-        onChange(cutOffsingleDot(value));
-      }
-      if (isPriceInput && isOnlyNumber) {
-        onChange(addCommas(value));
-      }
-      if (onBlur) onBlur(e);
-    },
-    keyUp: (e) => {
-      if (isUseErrorsBlink) {
-        const changedValue = '' + (value ?? '');
-        const previousValue = '' + (previousValueRef.current ?? '');
-
-        const short = previousValue.length <= changedValue.length ? previousValue : changedValue;
-        const long = previousValue.length > changedValue.length ? previousValue : changedValue;
-
-        const infoAboutDifferencesSameness = short.split('').reduce(
-          (acc, symbol, idx) => {
-            if (acc.countOn && symbol === long[idx]) acc.same.push(symbol);
-            else {
-              acc.countOn = false;
-              acc.differences.push([idx, symbol]);
-            }
-            return acc;
-          },
-          { same: [], countOn: true, differences: [] }
-        );
-
-        const samePart = infoAboutDifferencesSameness.same.join('');
-        const differencesLength = infoAboutDifferencesSameness.differences.length;
-        const currentSet = changedValue.replace(samePart, '');
-
-        const getNext = (inputPartToAdd, correctedSamePart) => {
-          const partToAdd = inputPartToAdd || currentSet;
-          const currentSamePart = correctedSamePart || samePart;
-          return changedValue.includes(e.key) && e.key !== changedValue[changedValue.length - 1]
-            ? currentSamePart + (partToAdd[0] || '')
-            : changedValue;
-        };
-
-        if (!KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue)
-          setIsAttemptToChange(!(!differencesLength && e.key === changedValue[changedValue.length - 2]));
-
-        if (!previousValueRef.current || KEYBOARD_SERVICE_KEYS.includes(e.key)) previousValueRef.current = getNext();
-        else if (changedValue === samePart) previousValueRef.current = getNext(changedValue, changedValue.slice(0, -1));
-        else previousValueRef.current = getNext();
-      }
-
-      if (onKeyUp) onKeyUp(e.keyCode, e);
-    },
-  };
-
-  function cutOffsingleDot(value) {
-    return value.toString().slice(-1) === '.' ? value.slice(0, -1) : value;
-  }
-
-  useEffect(() => {
-    if (isEditing) 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,
-    ...(maskChar ? { maskChar } : {}),
-    ...(formatChars ? { formatChars } : {}),
-  };
-
-  function renderInput() {
-    if (mask) {
-      return <InputMask {...uniProps} ref={inputRef} mask={mask} />;
-    }
-
-    return <input {...uniProps} ref={inputRef} type={isPriceInput ? 'text' : type} />;
-  }
-
-  useEffect(() => {
-    if (isUseErrorsBlink && isAttemptToChange) {
-      setIsAttemptToChange(null);
-      setIsToHighlightError(true);
-      setTimeout(() => {
-        setIsToHighlightError(false);
-      }, blinkTime || DEFAULT_BLINK_TIME);
-    }
-  }, [isAttemptToChange]);
-
-  useEffect(() => {
-    if (inputRef?.current && typeof isFocusDefault === 'boolean') setIsFocused(isFocusDefault);
-    setEditing(isFocusDefault);
-  }, [inputRef, isFocusDefault]);
-
-  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 Input;

package/src/Atomic/FormElements/Input/Input.scss

@@ -1,136 +0,0 @@
-.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/Input/Input.stories.js

@@ -1,94 +0,0 @@
-import React, { useState } from 'react';
-import { User } from 'react-feather';
-import Input from './Input';
-
-global.lng = 'en';
-
-export default {
-  title: 'Form Elements/Input',
-  component: Input,
-  argTypes: {
-    disabled: {
-      description: 'boolean'
-    },
-    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'
-    },
-    isOnlyNumber: {
-      description: 'boolean - only numbers'
-    },
-    isOnlyString: {
-      description: 'boolean - only strings'
-    },
-    isTwoDigitAfterDot: {
-      description: 'boolean - only two digits after dot'
-    },
-    isFocusDefault: {
-      description: 'boolean - if true, input will be focused on mount'
-    },
-    placeholder: {
-      description: 'text'
-    },
-    type: {
-      description:
-        "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
-      control: {
-        type: 'select',
-        options: [
-          'text',
-          'number',
-          'password',
-          'color',
-          'date',
-          'datetime-local',
-          'month',
-          'time',
-          'email',
-          'range'
-        ]
-      }
-    },
-    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('');
-  return <Input {...args} value={value} onChange={setValue} />;
-};
-
-export const InputTemplate = Template.bind({});
-
-InputTemplate.args = {
-  type: 'text',
-  isFocusDefault: false,
-  isOnlyNumber: false,
-  isOnlyString: false,
-  isPriceInput: false,
-  isTwoDigitAfterDot: false,
-  disabled: false,
-  error: '',
-  mask: '',
-  withDelete: true,
-  symbolsLimit: 255,
-  placeholder: 'Placeholder',
-  icon: <User />
-};

package/src/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -1,104 +0,0 @@
-import React, { useState, useRef } from 'react';
-import moment from 'moment';
-import InputMask from 'react-input-mask';
-import cn from 'classnames';
-
-import Calendar from '../../UI/Calendar/Calendar';
-import { useClickOutside } from '../../../Functions/useClickOutside';
-
-import './InputCalendar.scss';
-
-const InputCalendar = ({
-  value,
-  minDate,
-  maxDate,
-  format = 'MM/DD/YYYY',
-  isDontLimitFuture,
-  onChange,
-  className = '',
-  placeholder = 'mm/dd/yyyy',
-  mask = '99/99/9999',
-  isListTop,
-  disabled,
-}) => {
-  const [isOpened, setIsOpened] = useState(false);
-  const calendarRef = useRef(null);
-
-  const formatedMinDate = moment(minDate).format(format) !== 'Invalid date' 
-    ? moment(minDate).format(format) 
-    : null;
-
-  const formatedMaxDate = moment(maxDate).format(format) !== 'Invalid date' 
-    ? moment(maxDate).format(format) 
-    : null;
-      
-  const momentMinDate =  moment(formatedMinDate, format).startOf('day');
-  const momentMaxDate =  moment(formatedMaxDate, format).startOf('day');
-
-  useClickOutside(calendarRef, () => setIsOpened(false));
-
-  const changeInputValue = (val) => {
-    if (onChange) onChange(val);
-  };
-
-  const changeCalendarDay = (val) => {
-    if (onChange) onChange(val);
-  };
-
-  const getCalendarValue = (value) => {
-    const date = moment(value).format('L');
-
-    if (date !== 'Invalid date') return date;
-
-    return moment(new Date()).format('L');
-  };
-
-  const handleBlur = (e) => {
-    const value = e.target.value;
-    if (moment(value).format(format) === 'Invalid date') onChange('');
-    else if (moment(value).startOf('day').isBefore(momentMinDate, 'days')) onChange(formatedMinDate);
-    else if (moment(value).endOf('day').isAfter(momentMaxDate, 'days')) onChange(formatedMaxDate);
-    else onChange(moment(value).format(format));
-  };
-
-  return (
-    <div
-      className={cn('input__wrap calendar-container', className, {
-        'calendar-container_disabled': disabled,
-      })}
-      ref={calendarRef}
-    >
-      <InputMask
-        mask={mask}
-        placeholder={placeholder}
-        value={value}
-        onChange={(e) => changeInputValue(e.target.value)}
-        className="calendar-dropdown"
-        onFocus={() => setIsOpened(true)}
-        onBlur={!isOpened ? handleBlur : () => {}}
-        onKeyUp={e => {
-          if (e.key === 'Enter') e.target.blur();
-          setIsOpened(false);
-        }}
-      />
-      {isOpened ? (
-        <Calendar
-          date={getCalendarValue(value)}
-          setDate={(newDate) => changeCalendarDay(newDate)}
-          params={{
-            format,
-            minDate: formatedMinDate, 
-            maxDate: formatedMaxDate, 
-            momentMinDate, 
-            momentMaxDate, 
-            isDontLimitFuture 
-          }}
-          isListTop={isListTop}
-          setIsOpened={setIsOpened}
-        />
-      ) : null}
-    </div>
-  );
-};
-
-export default InputCalendar;

package/src/Atomic/FormElements/InputCalendar/InputCalendar.scss

@@ -1,23 +0,0 @@
-.calendar-container {
-  min-width: 200px;
-  position: relative;
-
-  &_disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  .calendar {
-    position: absolute;
-    z-index: 9;
-    top: 100%;
-    padding: 10px 16px;
-    border: 1px solid var(--border-color);
-
-    &_list-top {
-      bottom: calc(100% + 4px);
-      top: auto;
-      box-shadow: 0 -3px 15px rgb(0 0 0 / 15%);
-    }
-  }
-}

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

@@ -1,39 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import InputCalendar from './InputCalendar';
-
-global.lng = 'en';
-
-export default {
-  title: 'Form Elements/Input Calendar',
-  component: InputCalendar,
-  argTypes: {
-    value: {
-      description: 'string (mm.dd.yyyy)',
-    },
-  },
-};
-
-const Template = (args) => {
-  const [date, setDate] = useState('');
-  const [disabled, setDisabled] = useState(false);
-
-  return (
-    <>
-      <InputCalendar {...args} value={date} onChange={(val) => setDate(val)} disabled={disabled} />
-      <div style={{ display: 'flex', flexFlow: 'row nowrap', justifyContent: 'flex-end', marginTop: '10px' }}>
-        <button style={{ border: 'solid 1px black', padding: '10px', width: '80px' }} onClick={() => setDisabled(!disabled)}>
-          {disabled ? 'Enable' : 'Disable'}
-        </button>
-      </div>
-    </>
-  );
-};
-
-export const CalendarTemplate = Template.bind({});
-
-CalendarTemplate.args = {
-  minDate: '01/10/2022',
-  maxDate: '04/20/2022',
-  // isDontLimitFuture: true,
-  // isListTop: true,
-};