intelicoreact 0.0.4 → 0.0.8

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

@@ -1,33 +1,54 @@
 import React, { useState } from 'react';
 import Dropdown from './Dropdown';
 
-
 global.lng = 'en';
 export default {
   title: 'Dropdown',
-  component: Dropdown
+  component: Dropdown,
+  argTypes: {
+    className: {
+      description: 'string',
+    },
+    value: { description: 'string - current option' },
+    isSearchable: {
+      description: 'boolean - enable search',
+    },
+    onChange: { description: 'callback return selected value' },
+    entity: {
+      description: 'string',
+    },
+  },
 };
 
-const Template = args => {
-  const [value, setValue] = useState({});
+const buttonStyles={
+  border: 'solid 1px #000',
+  padding: '5px'
+};
+
+const Template = (args) => {
+  const [value, setValue] = useState('');
   return (
-    <div style={{ width: 200 }}>
-      <Dropdown {...args} value={value} onChange={setValue} />
-    </div>
+    <>
+      <div style={{ width: 200 }}>
+        <Dropdown {...args} value={value} onChange={setValue} />
+      </div>
+      <button style={buttonStyles} className='mt10' onClick={() => {console.log('click!'); setValue('')}} >Reset</button>
+    </>
   );
 };
 
 export const DropdownTemplate = Template.bind({});
 
 DropdownTemplate.args = {
+  entity: 'entity',
+  value: 'drop6',
   placeholder: 'Placeholder',
-  label: '',
   isSearchable: true,
   options: [
-    { label: 'Dropdown1', value: 'drop1' },
     { label: 'Dropdown2', value: 'drop2' },
     { label: 'Dropdown3', value: 'drop3', disabled: true },
     { label: 'Dropdown4', value: 'drop4' },
+    { label: 'Dropdown1', value: 'drop1', className: 'status status--approved' },
     { label: 'Dropdown5', value: 'drop5' },
     { label: 'Dropdown6', value: 'drop6' },
     {
@@ -35,16 +56,17 @@ DropdownTemplate.args = {
       items: [
         { label: 'Group 11', value: 'group11' },
         { label: 'Group 12', value: 'group12', disabled: true },
-        { label: 'Group 13', value: 'group13' }
-      ]
+        { label: 'Group 13', value: 'group13' },
+      ],
     },
     {
       label: 'Some Group 2',
       items: [
         { label: 'Group 21', value: 'group21' },
         { label: 'Group 22', value: 'group22' },
-        { label: 'Group 23', value: 'group23' }
-      ]
-    }
-  ]
+        { label: 'Group 23', value: 'group23' },
+      ],
+    },
+  ],
+  error: '',
 };

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

@@ -1,110 +1,167 @@
 import React, { useState, useEffect, useRef } from 'react';
 import cn from 'classnames';
-import { Minus, Plus } from 'react-feather';
-
-import Label from '../Label/Label';
+import InputMask from 'react-input-mask';
+import { KEYBOARD_SERVICE_KEYS } from '../../../Constants/index.constants';
+import { formatInput } from '../../../Functions/inputExecutor';
 
 import './Input.scss';
 
 const Input = ({
-  error,
   onChange,
+  onBlur,
+  onFocus,
+  onKeyUp,
+  isNotBlinkErrors,
+  isPriceInput,
+  isOnlyNumber,
+  isOnlyString,
+  isTwoDigitAfterDot,
   disabled,
   withDelete,
-  isNumeric,
-  min,
-  max,
-  value = min,
+  value,
   placeholder,
-  hint,
-  label,
-  hintSide,
   className,
-  isLabelBold,
   type = 'text',
-  onBlur = () => {},
+  mask,
+  maskChar,
+  formatChars,
+  error,
   icon,
-  isRequired,
-  ...props
+  symbolsLimit,
+  blinkTime
 }) => {
+  const DEFAULT_BLINK_TIME = 100;
+  // STATES
   const [isFocused, setIsFocused] = useState(false);
-  const [onInputHover, setOnInputHover] = 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;
+  // 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 && !isTwoDigitAfterDot)
+        onChange(removeComma(value));
+
+      if (onFocus) onFocus(e);
+    },
+    blur: (e) => {
+      setIsFocused(false);
+      setEditing(false);
+      if (isPriceInput && isOnlyNumber && !isTwoDigitAfterDot) {
+        onChange(addCommas(value));
+      }
+      if (isTwoDigitAfterDot && !isPriceInput) {
+        onChange(cutOffsingleDot(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.slice(previousValue.length - changedValue.length);
+          else return changedValue.includes(e.key) ? e.key : '';
+        })();
+
+        if (
+          !KEYBOARD_SERVICE_KEYS.includes(e.key) &&
+          changedValue === previousValue
+        )
+          setIsAttemptToChange(true);
+
+        console.log(changedValue, previousValue);
+        if (KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet)
+          previousValueRef.current = value;
+        else previousValueRef.current = previousValue + currentSet[0];
+      }
 
-  const changeHandler = inputValue => {
-    if (isNumeric || (type === 'number' && inputValue !== '')) {
-      const totalValue = Number(+inputValue);
-      if (totalValue >= (min ?? -Infinity) && totalValue <= (max ?? Infinity)) onChange(totalValue);
-      return;
+      if (onKeyUp) onKeyUp(e.keyCode, e);
     }
-    onChange(inputValue);
   };
 
-  const toggleEditing = () => {
-    setEditing(!isEditing);
+  function cutOffsingleDot(value) {
+    return value.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 (isEditing) {
-      inputRef.current.focus();
+    if (!isNotBlinkErrors && isAttemptToChange) {
+      setIsAttemptToChange(null);
+      setIsToHighlightError(true);
+      setTimeout(() => {
+        setIsToHighlightError(false);
+      }, blinkTime || DEFAULT_BLINK_TIME);
     }
-  }, [isEditing, isFocused]);
+  }, [isAttemptToChange]);
 
   return (
-    <div className={cn('input-classic', className)}>
-      {label && <Label className="input-classic-label" isBold={isLabelBold} label={label} hint={hint} hintSide={hintSide} isRequired={isRequired} />}
-
-      <div
-        onMouseEnter={() => setOnInputHover(true)}
-        onMouseLeave={() => setOnInputHover(false)}
-        className={cn(
-          `input-classic__wrap`,
-          { [`input-classic__wrap_focus`]: isFocused },
-          { [`input-classic__wrap_error`]: error },
-          { [`input-classic__wrap_disabled`]: disabled }
-        )}
-      >
-        <input
-          ref={inputRef}
-          className="input-classic__input"
-          type={isNumeric ? 'number' : type}
-          onChange={e => changeHandler(e.target.value)}
-          value={value || ''}
-          disabled={disabled}
-          onBlur={() => {
-            setIsFocused(false);
-            setEditing(false);
-            onBlur();
-          }}
-          onFocus={() => setIsFocused(true)}
-          placeholder={placeholder}
-          {...props}
+    <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}
         />
-        {isNumeric && (
-          <div className="input-classic__nums">
-            <button onClick={() => changeHandler(value - 1)} className={cn(`input-classic__num-btn`, { disabled: value === min })}>
-              <Minus />
-            </button>
-            <button onClick={() => changeHandler(value + 1)} className={cn(`input-classic__num-btn`, { disabled: value === max })}>
-              <Plus />
-            </button>
-          </div>
-        )}
-
-        {withDelete && onInputHover && !isNumeric && (
-          <button
-            className={cn(`input-classic__close`, { hidden: !value })}
-            onClick={() => {
-              toggleEditing();
-              onChange('');
-            }}
-          />
-        )}
-        {icon ?? null}
-      </div>
-
-      {error && <span className="input-classic__error">{error}</span>}
+      )}
     </div>
   );
 };

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

@@ -1,9 +1,12 @@
-.input-classic {
+.input {
   position: relative;
   word-break: break-all;
-
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
+  border: none;
+  background: none;
+  padding: 0 10px;
+  width: 100%;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
       -webkit-appearance: none;
   }
 
@@ -60,15 +63,6 @@
     border-radius: 4px;
   }
 
-  &__error {
-    margin-top: 2px;
-    margin-left: 1px;
-    position: absolute;
-    display: block;
-    font-size: 10px;
-    color: #f06d8d;
-  }
-
   &__close {
     position: relative;
     opacity: 0.6;
@@ -77,7 +71,8 @@
     background: none;
     cursor: pointer;
     margin-right: 4px;
-
+    visibility: hidden;
+    pointer-events: none;
     &:hover {
       opacity: 1;
     }
@@ -121,7 +116,9 @@
     background: none;
     font-size: 20px;
     user-select: none;
-
+    &.disabled {
+      opacity: 0.3;
+    }
     svg {
       margin-right: 0;
     }
@@ -131,3 +128,9 @@
     margin-bottom: 5px;
   }
 }
+
+.input__wrap:hover .input__close {
+  visibility: visible;
+  pointer-events: all;
+}
+

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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { User } from 'react-feather';
 import Input from './Input';
 
 global.lng = 'en';
@@ -7,51 +8,66 @@ export default {
   title: 'Form Elements/Input',
   component: Input,
   argTypes: {
-    hintSide: {
-      description: 'string: ["right", "bottom", "top", "left"]',
-      control: {
-        type: 'select',
-        options: ['right', 'bottom', 'top', 'left']
-      }
-    },
-    hint: {
-      description: 'string'
-    },
     disabled: {
       description: 'boolean'
     },
     error: {
-      description: 'text'
+      description: 'text - coloring input if is errored'
+    },
+    isPriceInput: {
+      description: 'boolean - if true, the input will be styled as PriceInput'
     },
     withDelete: {
-      description: 'boolean'
+      description: 'boolean - add clear-cross by hover'
     },
-    isNumeric: {
-      description: 'boolean'
+    isOnlyNumber: {
+      description: 'boolean - only numbers'
     },
-    min: {
-      description: 'number'
+    isOnlyString: {
+      description: 'boolean - only strings'
     },
-    max: {
-      description: 'number'
+    isTwoDigitAfterDot: {
+      description: 'boolean - only two digits after dot'
     },
     placeholder: {
       description: 'text'
     },
-    label: {
-      description: 'text'
-    },
     type: {
-      description: 'string: any input type',
+      description:
+        "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
       control: {
         type: 'select',
-        options: ['text', 'number']
+        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 Template = (args) => {
   const [value, setValue] = useState('');
   return <Input {...args} value={value} onChange={setValue} />;
 };
@@ -60,14 +76,15 @@ export const InputTemplate = Template.bind({});
 
 InputTemplate.args = {
   type: 'text',
+  isOnlyNumber: false,
+  isOnlyString: false,
+  isPriceInput: false,
+  isTwoDigitAfterDot: false,
   disabled: false,
   error: '',
+  mask: '',
   withDelete: true,
-  isNumeric: false,
-  min: '0',
-  max: 5,
+  symbolsLimit: 255,
   placeholder: 'Placeholder',
-  label: 'label',
-  hint: 'hint',
-  hintSide: 'bottom'
+  icon: <User />
 };

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

@@ -0,0 +1,43 @@
+import React, { useState, useRef } from 'react';
+import moment from 'moment';
+import InputMask from 'react-input-mask';
+import Calendar from '../../UI/Calendar/Calendar';
+import { useClickOutside } from '../../../Functions/useClickOutside';
+
+const InputCalendar = ({ data, params }) => {
+  const [date, setDate] = useState(data);
+  const [inputValue, setInputValue] = useState(date);
+  const [isOpened, setIsOpened] = useState(false);
+  const calendarRef = useRef(null);
+
+  useClickOutside(calendarRef, () => setIsOpened(false));
+
+  const changeInputValue = value => {
+    if (!value.includes('_') && value) {
+      setDate(moment(value).format('L'));
+      setInputValue(moment(value).format('L'));
+    } else {
+      setInputValue(value);
+    }
+  };
+
+  const changeCalendarDay = value => {
+    setDate(value);
+    setInputValue(value);
+  };
+
+  return (
+    <div className="calendar-container" ref={calendarRef}>
+      <InputMask
+        mask="99/99/9999"
+        value={inputValue}
+        onChange={e => changeInputValue(e.target.value)}
+        className="calendar-dropdown"
+        onFocus={() => setIsOpened(!isOpened)}
+      />
+      {isOpened ? <Calendar date={date} setDate={(newDate) => changeCalendarDay(newDate)} params={params} /> : null}
+    </div>
+  );
+};
+
+export default InputCalendar;

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

@@ -0,0 +1,27 @@
+import React, { useRef, useState } from 'react';
+import { ref } from 'yup';
+import InputCalendar from './InputCalendar';
+
+global.lng = 'en';
+
+export default {
+  title: 'Form Elements/InputCalendar',
+  component: InputCalendar,
+};
+
+const Template = (args) => {
+  const params = {
+    minDate: args?.minDate,
+    maxDate: args?.maxDate,
+  };
+
+  return <InputCalendar data={args.date} params={params} />;
+};
+
+export const Calendar = Template.bind({});
+
+Calendar.args = {
+  date: '10/14/2021',
+  minDate: '10/11/2021',
+  maxDate: '10/25/2021',
+};