intelicoreact 0.0.24 → 0.0.41

package/src/Atomic/FormElements/Header/Header.js

@@ -1,11 +1,10 @@
 import React, { useRef, useState } from 'react';
-import { FiChevronRight, FiBell, FiPower } from 'react-icons/fi';
+import { ChevronRight, Bell, Power } from 'react-feather';
 import { GoPrimitiveDot } from 'react-icons/go';
 import cn from 'classnames';
 
 import { logout, useOutsideToggle } from '../../../Functions/utils';
 import Hint from '../../UI/Hint/Hint';
-import defaultAva from '../../../../assets/images/default_ava.png';
 
 import './Header.scss';
 
@@ -30,19 +29,19 @@ const Header = ({ name = 'John', surname = 'Silver', status = 'admin', img = '',
   useOutsideToggle(userMenu, handle.closeMenu);
 
   return (
-    <header className="header">
+    <header className={cn('header', className)}>
       <div className="df">
         <Hint side="bottom" hint={hintText} className="header__hint" label={hintLabel} iconOutline />
       </div>
 
-      <div className="j6 user-menu rel">
+      <div className="j6 user-menu">
         <div onClick={() => {}} className="header--bell">
-          <FiBell className="header--bell-icon" />
-          <GoPrimitiveDot className="header--bell-notification-icon" />
+          <Bell className="header--bell-icon" />
+          <div className="header--bell-notification-icon" />
         </div>
 
         <div className="header--user-ava">
-          <img src={img || defaultAva} alt="" />
+          <img src={img} alt="" />
         </div>
 
         <div className="dfc mr10">
@@ -52,11 +51,11 @@ const Header = ({ name = 'John', surname = 'Silver', status = 'admin', img = '',
           <span className="header--user-status">{status}</span>
         </div>
 
-        <FiChevronRight onClick={handle.toggleMenu} className={cn('accordion--title-chevron', { 'accordion--title-chevron-open': isOpen })} />
+        <ChevronRight onClick={handle.toggleMenu} className={cn('accordion--title-chevron', { 'accordion--title-chevron-open': isOpen })} />
         {isOpen && (
           <div className="user-menu__dropdown" ref={userMenu}>
             <div className="user-menu__item" onClick={handle.logout}>
-              <FiPower className="mr10" /> Logout
+              <Power className="mr10" /> Logout
             </div>
           </div>
         )}

package/src/Atomic/FormElements/Header/Header.scss

@@ -1,5 +1,3 @@
-@import "../../../scss/anme/anme-vars";
-
 .header {
   display: flex;
   align-items: center;
@@ -43,12 +41,20 @@
     position: relative;
     margin-right: 22px;
     cursor: pointer;
+    width: 16px;
+    height: 16px;
+    max-width: 16px;
+    min-width: 16px;
 
     &-notification-icon {
+      content: "";
+      width: 7px;
+      height: 7px;
+      border-radius: 15px;
       position: absolute;
-      color: #f06d8d;
-      top: -8px;
-      left: 10px;
+      top: -3px;
+      right: -6px;
+      background-color: #f06d8d;
     }
   }
 
@@ -76,7 +82,12 @@
 .user-menu__item {
   padding: 5px 15px;
   cursor: pointer;
+
   &:hover {
     background: #e2e5ec;
   }
 }
+
+.user-menu {
+  position: relative;
+}

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import Header from './Header';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 
 export default {

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

@@ -1,107 +1,111 @@
 import React, { useState, useEffect, useRef } from 'react';
 import cn from 'classnames';
-import { FiMinus, FiPlus } from 'react-icons/fi';
-
-import Label from '../Label/Label';
+import { Minus, Plus } from 'react-feather';
+import InputMask from 'react-input-mask';
 
 import './Input.scss';
 
-const RC = 'input-classic';
-
 const Input = ({
-  error,
   onChange,
   disabled,
   withDelete,
   isNumeric,
-  min,
+  numStep = 1,
+  min = 0,
   max,
-  value = min,
+  value,
   placeholder,
-  hint,
-  label,
-  hintSide,
   className,
-  isLabelBold,
   type = 'text',
-  onBlur = () => {},
-  icon,
-  isRequired,
-  ...props
+  onBlur,
+  onFocus,
+  onKeyUp,
+  mask,
+  error
 }) => {
+  // STATES
   const [isFocused, setIsFocused] = useState(false);
-  const [onInputHover, setOnInputHover] = useState(false);
   const [isEditing, setEditing] = useState(false);
   const inputRef = useRef(null);
-
-  const changeHandler = inputValue => {
-    if (isNumeric || (type === 'number' && inputValue !== '')) {
-      const totalValue = Number(+inputValue);
-      if (totalValue >= (min ?? -Infinity) && totalValue <= (max ?? Infinity)) onChange(totalValue);
-      return;
-    }
-    onChange(inputValue);
-  };
-
-  const toggleEditing = () => {
-    setEditing(!isEditing);
+  // HANDLES
+  const handle = {
+    change: event => {
+      let inputValue = event.target.value;
+      if (isNumeric || (type === 'number' && inputValue !== '')) {
+        inputValue = parseFloat(inputValue) || '';
+        if (min && +min > inputValue) {
+          inputValue = min;
+        } else if (max && +max < inputValue) inputValue = max;
+      }
+      onChange(inputValue.toString());
+    },
+    toggleEdit: () => {
+      setEditing(!isEditing);
+      onChange('');
+    },
+    focus: () => {
+      setIsFocused(true);
+      if (onFocus) onFocus();
+    },
+    blur: () => {
+      setIsFocused(false);
+      setEditing(false);
+      if (onBlur) onBlur();
+    },
+    keyUp: e => (onKeyUp ? onKeyUp(e.keyCode) : null)
   };
 
   useEffect(() => {
-    if (isEditing) {
-      inputRef.current.focus();
-    }
+    if (isEditing) inputRef.current.focus();
   }, [isEditing, isFocused]);
 
-  return (
-    <div className={cn(className, RC)}>
-      {label && <Label className={`${RC}-label`} isBold={isLabelBold} label={label} hint={hint} hintSide={hintSide} isRequired={isRequired} />}
+  const uniProps = {
+    className: `input-classic ${className}`,
+    placeholder,
+    value: value || '',
+    disabled,
+    onChange: handle.change,
+    onFocus: handle.focus,
+    onBlur: handle.blur,
+    onKeyUp: handle.keyUp,
+    min,
+    max
+  };
+
+  function renderInput() {
+    if (mask) {
+      return <InputMask {...uniProps} ref={inputRef} mask={mask} />;
+    }
 
-      <div
-        onMouseEnter={() => setOnInputHover(true)}
-        onMouseLeave={() => setOnInputHover(false)}
-        className={cn(`${RC}__wrap`, { [`${RC}__wrap_focus`]: isFocused }, { [`${RC}__wrap_error`]: error }, { [`${RC}__wrap_disabled`]: disabled })}
-      >
-        <input
-          ref={inputRef}
-          className={cn(`${RC}__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}
-        />
+    return (
+      <>
+        <input {...uniProps} ref={inputRef} type={isNumeric ? 'number' : type} />
         {isNumeric && (
-          <div className={`${RC}__nums`}>
-            <button onClick={() => changeHandler(value - 1)} className={cn(`${RC}__num-btn`, { disabled: value === min })}>
-              <FiMinus />
+          <div className="input-classic__nums">
+            <button onClick={() => handle.change(value - numStep)} className={cn(`input-classic__num-btn`, { disabled: value <= min })}>
+              <Minus />
             </button>
-            <button onClick={() => changeHandler(value + 1)} className={cn(`${RC}__num-btn`, { disabled: value === max })}>
-              <FiPlus />
+            <button onClick={() => handle.change(+value + +numStep)} className={cn(`input-classic__num-btn`, { disabled: value >= max })}>
+              <Plus />
             </button>
           </div>
         )}
+      </>
+    );
+  }
 
-        {withDelete && onInputHover && !isNumeric && (
-          <button
-            className={cn(`${RC}__close`, { hidden: !value })}
-            onClick={() => {
-              toggleEditing();
-              onChange('');
-            }}
-          />
-        )}
-        {icon ?? null}
-      </div>
+  return (
+    <div
+      className={cn(
+        `input-classic__wrap`,
+        { [`input-classic__wrap_focus`]: isFocused },
+        { [`input-classic__wrap_error`]: error },
+        { [`input-classic__wrap_disabled`]: disabled }
+      )}
+    >
+      {renderInput()}
 
-      {error && <span className={`${RC}__error`}>{error}</span>}
+      {withDelete && !isNumeric && <span className={cn(`input-classic__close`, { hidden: !value })} onClick={handle.toggleEdit} />}
     </div>
   );
 };

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

@@ -1,8 +1,14 @@
-@import "../../../scss/vars";
-
 .input-classic {
   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;
@@ -12,8 +18,9 @@
     background-color: #fff;
     height: 28px;
     border-radius: 4px;
+
     &_focus {
-      border-color: $color--primary;
+      border-color: #6b81dd;
       filter: drop-shadow(0px 0px 4px rgba(93, 120, 255, 0.5));
     }
 
@@ -25,7 +32,7 @@
     }
 
     &_error {
-      border-color: $color--secondary;
+      border-color: #f06d8d;
     }
   }
 
@@ -37,7 +44,7 @@
   }
 
   &_error {
-    border-color: $color--secondary;
+    border-color: #f06d8d;
   }
 
   svg {
@@ -50,7 +57,7 @@
     box-sizing: border-box;
     font-size: 13px;
     font-weight: 400;
-    color: $color--dark;
+    color: #1e1e2d;
     border: none;
     padding: 0 5px;
     border-radius: 4px;
@@ -62,7 +69,7 @@
     position: absolute;
     display: block;
     font-size: 10px;
-    color: $color--secondary;
+    color: #f06d8d;
   }
 
   &__close {
@@ -73,7 +80,8 @@
     background: none;
     cursor: pointer;
     margin-right: 4px;
-
+    visibility: hidden;
+    pointer-events: none;
     &:hover {
       opacity: 1;
     }
@@ -88,7 +96,7 @@
       margin: auto;
       height: 14px;
       width: 2px;
-      background-color: $color--gray--dark;
+      background-color: #9aa0b9;
     }
 
     &:before {
@@ -117,7 +125,9 @@
     background: none;
     font-size: 20px;
     user-select: none;
-
+    &.disabled {
+      opacity: 0.3;
+    }
     svg {
       margin-right: 0;
     }
@@ -127,3 +137,8 @@
     margin-bottom: 5px;
   }
 }
+
+.input-classic__wrap:hover .input-classic__close {
+  visibility: visible;
+  pointer-events: all;
+}

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

@@ -1,54 +1,50 @@
 import React, { useState } from 'react';
 import Input from './Input';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
+
 export default {
-  title: 'Input',
+  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'
+      description: 'boolean',
     },
     error: {
-      description: 'text'
+      description: 'text - coloring input if is errored'
     },
     withDelete: {
-      description: 'boolean'
+      description: 'boolean - add clear-cross by hover'
     },
     isNumeric: {
-      description: 'boolean'
+      description: 'boolean - add plus/minus buttons, force input to numeric type'
+    },
+    numStep: {
+      description: 'number/text - plus/minus buttons factor (default: 1)'
     },
     min: {
-      description: 'number'
+      description: 'number/text - minimal number for numeric input'
     },
     max: {
-      description: 'number'
+      description: 'number/text - maximal number for numeric input'
     },
     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']
       }
-    }
+    },
+    value: { description: '(* - required prop)' },
+    className: { description: 'string' },
+    mask: { description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask' },
+    onBlur: { description: 'custom callback on blur' },
+    onFocus: { description: 'custom callback on focus' },
+    onKeyUp: { description: 'custom callback on keyup, returns event keyCode' }
   }
 };
 
@@ -65,10 +61,9 @@ InputTemplate.args = {
   error: '',
   withDelete: true,
   isNumeric: false,
+  numStep: 1,
   min: '0',
-  max: 5,
+  max: '5',
   placeholder: 'Placeholder',
-  label: 'label',
-  hint: 'hint',
-  hintSide: 'bottom'
+  mask: ''
 };

package/src/Atomic/FormElements/InputsRow/InputsRow.js

@@ -1,13 +1,36 @@
 import React, { useState } from 'react';
 import { v4 as uuid } from 'uuid';
-import { FiTrash2 } from 'react-icons/fi';
+import { Trash2 } from 'react-feather';
 
-import { handleObjectChange } from '../../../Functions/utils';
 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 = [
     {
@@ -34,7 +57,7 @@ const InputsRow = ({ items, title, paramPlaceholder = '', valuePlaceholder = '',
         param: '',
         value: '',
         description: '',
-        rowId: uuid()
+        rowId: getRandomInRange(1, 1000)
       }
     ];
     setRows(newRow);
@@ -75,13 +98,13 @@ const InputsRow = ({ items, title, paramPlaceholder = '', valuePlaceholder = '',
 
           {rows.length > 1 && (
             <div onClick={() => onDelete(index)} className="inputs-row--trash">
-              <FiTrash2 />
+              <Trash2 />
             </div>
           )}
         </div>
       ))}
 
-      {rows.length < 10 && <Button onClick={handleAddRow} text="Add row" className="inputs-row--add-btn" />}
+      {rows.length < 10 && <Button onClick={handleAddRow} label="Add row" className="inputs-row--add-btn" />}
     </div>
   );
 };

package/src/Atomic/FormElements/InputsRow/InputsRow.scss

@@ -1,5 +1,3 @@
-@import "../../../scss/vars";
-
 .inputs-row {
   &--input {
     width: 200px;
@@ -20,7 +18,7 @@
     border-radius: 5px;
 
     svg {
-      color: $color--secondary;
+      color: #f06d8d;
     }
   }
 

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import InputsRow from './InputsRow';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 
 export default {

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

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

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

@@ -1,8 +1,6 @@
-@import '../../../scss/vars';
-
 .label {
     display: flex;
-    color: $color--dark;
+    color: #1e1e2d;
     font-size: 13px;
 
     &_bold {

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import Label from './Label';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
+
 export default {
   title: 'Label',
   component: Label

package/src/Atomic/FormElements/Modal/Modal.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import cn from 'classnames';
-import { IoClose } from 'react-icons/io5';
+import { X } from 'react-feather';
 
 import Button from '../../UI/Button/Button';
 
-import '../../../../scss/main.scss';
 import './Modal.scss';
 
 const Modal = ({
@@ -41,23 +40,21 @@ const Modal = ({
 
       <div className={cn(className, { [`modal-${size}`]: size }, `${isOpen ? 'modal' : 'hidden'}`)}>
         <div className={cn('modal__header', { [`modal__header-${variant}`]: variant })}>
-          <span className={cn('modal__header-title', { [`modal__header-${variant}-title`]: variant })}>
-            <span>{renderModalTitle()}</span>
-          </span>
+          <span className={cn('modal__header-title', { [`modal__header-${variant}-title`]: variant })}>{renderModalTitle()}</span>
 
           <div onClick={closeModal} className={cn('modal-close-icon-box', { 'modal-close-icon-box-primary': variant === 'primary' })}>
-            <IoClose className="modal-close-icon" />
+            <X className="modal-close-icon" />
           </div>
         </div>
 
         <div className="modal__body">{children}</div>
         {!noFooter && (
           <div className="modal__footer">
-            <Button variant="dark-outline" onClick={closeModal} text={closeBtnText || 'Cancel'} />
+            <Button variant="dark-outline" onClick={closeModal} label={closeBtnText || 'Cancel'} />
             {!noConfirmBtn && (
               <Button
                 onClick={() => handleConfirm()}
-                text={confirmBtnLabel || mode?.[0].toUpperCase() + mode?.slice(1) || 'Apply'}
+                label={confirmBtnLabel || mode?.[0].toUpperCase() + mode?.slice(1) || 'Apply'}
                 className="ml5"
                 variant={confirmBtnVariant}
               />