intelicoreact 0.0.3 → 0.0.7

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

@@ -1,97 +1,138 @@
 import React, { useState, useRef, useEffect } from 'react';
 import cn from 'classnames';
-import { FiCheck, FiChevronDown, FiChevronUp } from 'react-feather';
+import { Check, ChevronDown, ChevronUp } from 'react-feather';
 import Label from '../Label/Label';
 
 import './Dropdown.scss';
 
 const RC = 'dropdown';
 
-const Dropdown = ({ options, value, onChange, placeholder, className, label, isLabelBold, hint, hintSide, isSearchable }) => {
+const Dropdown = ({ options, value, error, onChange, placeholder, className, isSearchable, entity }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchValue, setSearchValue] = useState('');
   const dropdownRef = useRef(null);
 
   const filteredGroups = options
-    .filter(item => item.items?.length)
-    .map(item => ({ ...item, items: item.items.filter(el => el?.label?.toLowerCase().includes(searchValue?.toLowerCase() || '')) }))
-    .filter(item => item.items?.length > 0);
+    .filter((item) => item.items?.length)
+    .map((item) => ({ ...item, items: item.items.filter((el) => el?.label?.toLowerCase().includes(searchValue?.toLowerCase() || '')) }))
+    .filter((item) => item.items?.length > 0);
 
   const filteredItems = options
-    .filter(item => !item.items?.length)
-    .filter(item => item?.label?.toLowerCase().includes(searchValue?.toLowerCase() || ''));
-
-  const filteredOptions = [...filteredItems, ...filteredGroups];
+    .filter((item) => !item.items?.length)
+    .filter((item) => item?.label?.toLowerCase().includes(searchValue?.toLowerCase() || ''));
+
+  let filteredOptions = [...filteredItems, ...filteredGroups];
+
+  const modalBtnTrigger = entity && entity !== '' && typeof entity === 'string';
+  //decorator
+  const getDepends = (modalBtnTrigger, item) => {
+    const newOnChange = (item) => {
+      if (item.value === 'open_modal') {
+        onChange('open_modal');
+      } else {
+        onChangeHandler(item);
+      }
+    };
+
+    //add pseudo option
+    const newOptions = [
+      {
+        label: 'New ' + entity,
+        value: 'open_modal',
+        className: 'dropdown__list-item--modal',
+      },
+      ...filteredOptions,
+    ];
+
+    return {
+      onChange: (item) => (modalBtnTrigger ? newOnChange(item) : onChangeHandler(item)),
+      options: modalBtnTrigger ? newOptions : options,
+    };
+  };
 
-  const handleClickOutside = event => {
+  const handleClickOutside = (event) => {
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
       setIsOpen(false);
       setSearchValue(null);
     }
   };
 
-  const onChangeHandler = item => {
+  const onChangeHandler = (item) => {
     setIsOpen(false);
     setSearchValue(null);
     onChange(item.value);
   };
 
-  const onSearchHandler = name => {
+  const onSearchHandler = (name) => {
     setSearchValue(name);
   };
 
-  const hightlightedText = text =>
-    searchValue ? text?.replace(new RegExp(searchValue, 'i'), match => `<span class="bg--yellow">${match}</span>`) : text;
+  const hightlightedText = (text) =>
+    searchValue ? text?.replace(new RegExp(searchValue, 'i'), (match) => `<span class="bg--yellow">${match}</span>`) : text;
+
+  const depend = getDepends(modalBtnTrigger);
 
-  const getMarkupForElement = item =>
+  const getMarkupForElement = (item) =>
     item.label.toLowerCase().includes(searchValue?.toLowerCase() || '') ? (
       <button
         key={item.value}
-        onClick={() => onChangeHandler(item)}
+        onClick={() => depend.onChange(item)}
         className={cn(`${RC}__list-item`, { [`${RC}__list-item_active`]: item.value === value }, { [`${RC}__list-item_disabled`]: item.disabled })}
       >
         <span className={cn(`${RC}__active-icon`, { [`${RC}__active-icon_active`]: item.value === value })}>
-          <FiCheck />
+          <Check />
         </span>
-        <div dangerouslySetInnerHTML={{ __html: hightlightedText(item.label) }} />
+        <div className={item.className || ''} dangerouslySetInnerHTML={{ __html: hightlightedText(item.label) }} />
       </button>
     ) : null;
 
   useEffect(() => {
+    if (!value) setSearchValue(null);
     document.addEventListener('click', handleClickOutside, true);
     return () => document.removeEventListener('click', handleClickOutside, true);
-  });
+  }, [value]);
 
-  const filteredOptionList = filteredOption =>
+  const filteredOptionList = (filteredOption) =>
     filteredOption.items?.length > 0 ? (
       <div key={filteredOption.value} className={`${RC}-group`}>
         <div className={`${RC}-group__name`}>{filteredOption.label}</div>
-        {filteredOption.items.map(el => getMarkupForElement(el))}
+        {filteredOption.items.map((el) => getMarkupForElement(el))}
       </div>
     ) : null;
 
   const selectedLabel =
-    options.find(el => el.value === value)?.label || options.reduce((acc, item) => acc || item.items?.find(el => el.value === value)?.label, null);
+    options.find((el) => el.value === value)?.label ||
+    options.reduce((acc, item) => acc || item.items?.find((el) => el.value === value)?.label, null);
 
   return (
     <div className={cn(RC, className)} ref={dropdownRef}>
-      {label && <Label className={`${RC}-label`} isBold={isLabelBold} label={label} hint={hint} hintSide={hintSide} />}
-      <button className={`${RC}__trigger`} onClick={() => setIsOpen(!isOpen)}>
+      <button
+        className={`${RC}__trigger input__wrap ${!value ? 'placeholder' : ''} ${error ? 'error' : ''}`}
+        onClick={() => (!isSearchable ? setIsOpen(!isOpen) : null)}
+      >
         {isSearchable ? (
           <input
             className={`${RC}__input`}
-            value={searchValue ?? selectedLabel}
-            onChange={e => onSearchHandler(e.target.value)}
+            value={searchValue || filteredOptions.find(el => el.value === value)?.label  || ''}
+            onChange={(e) => {
+              onSearchHandler(e.target.value)
+            }}
             placeholder={placeholder}
+            onFocus={e => {
+              e.target.select();
+              setIsOpen(true);
+            }}
           />
         ) : (
-          selectedLabel || placeholder
+          <span className="text">{selectedLabel || placeholder}</span>
         )}
-        <span className={cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen })}>{isOpen ? <FiChevronUp /> : <FiChevronDown />}</span>
+        <span className={cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen })} onClick={() => setIsOpen(!isOpen)}>
+          {isOpen ? <ChevronUp /> : <ChevronDown />}
+        </span>
       </button>
       {isOpen && filteredOptions.length > 0 && (
         <div className={`${RC}__list`}>
-          {filteredOptions.map(filteredOption =>
+          {depend.options.map((filteredOption) =>
             filteredOption.items?.length ? filteredOptionList(filteredOption) : getMarkupForElement(filteredOption)
           )}
         </div>

package/src/Atomic/FormElements/Dropdown/Dropdown.scss

@@ -5,6 +5,7 @@
   flex-direction: column;
   position: relative;
   width: 100%;
+  border-radius: 7px;
 
   &__trigger {
     background: #ffffff;
@@ -13,7 +14,6 @@
     border-radius: 3px;
     width: 100%;
     height: 28px;
-    display: flex;
     align-items: center;
     cursor: pointer;
     padding-left: 9px;
@@ -26,9 +26,12 @@
     position: relative;
     text-align: left;
 
-    &_error {
+    &.error {
       border-color: $color--secondary;
     }
+    &.placeholder .text {
+      opacity: 0.7;
+    }
   }
 
   &__input {
@@ -71,6 +74,8 @@
       display: flex;
       align-items: center;
       //justify-content: center;
+      border: none;
+      background: transparent;
       padding: 0 20px 0 30px;
       position: relative;
       cursor: pointer;
@@ -81,7 +86,24 @@
       width: 100%;
       height: 24px;
       white-space: nowrap;
-
+      overflow-x: hidden;
+
+      &--modal {
+        color: #1f7499;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.2px;
+        position: relative;
+        &:after {
+          content: "";
+          position: absolute;
+          bottom: -2px;
+          height: 1px;
+          width: 300%;
+          transform: translateX(-50%);
+          background-color: #e8e9ec;
+        }
+      }
       &:hover,
       &_active {
         background: $color--gray--gentle;
@@ -101,6 +123,7 @@
     display: flex;
     align-items: center;
     width: 16px;
+    height: 16px;
     position: absolute;
     right: 4px;
     top: 50%;

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

@@ -1,34 +1,54 @@
 import React, { useState } from 'react';
 import Dropdown from './Dropdown';
 
-import '../../../../scss/main.scss';
-
 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' },
     {
@@ -36,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/Header/Header.js

@@ -1,11 +1,10 @@
 import React, { useRef, useState } from 'react';
-import { FiChevronRight, FiBell, FiPower } from 'react-feather';
+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,117 @@
 import React, { useState, useEffect, useRef } from 'react';
 import cn from 'classnames';
-import { FiMinus, FiPlus } from 'react-feather';
-
-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 = () => {},
+  onBlur,
+  onFocus,
+  onKeyUp,
+  mask,
+  maskChar,
+  formatChars,
+  error,
   icon,
-  isRequired,
-  ...props
+  symbolsLimit,
 }) => {
+  // 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: e => {
+      let inputValue = e.target ? e.target.value : e;
+      if (isNumeric || (type === 'number' && inputValue !== '')) {
+        inputValue = parseFloat(inputValue) || '';
+        if (min && +min > inputValue) {
+          inputValue = min;
+        } else if (max && +max < inputValue) inputValue = max;
+      } else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
+      onChange(inputValue.toString());
+    },
+    toggleEdit: () => {
+      setEditing(!isEditing);
+      onChange('');
+    },
+    focus: e => {
+      setIsFocused(true);
+      if (onFocus) onFocus(e);
+    },
+    blur: e => {
+      setIsFocused(false);
+      setEditing(false);
+      if (onBlur) onBlur(e);
+    },
+    keyUp: e => (onKeyUp ? onKeyUp(e.keyCode, event) : 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 ${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() {
+    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__nums">
+            <button onClick={() => handle.change(value - numStep)} className={cn(`input__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__num-btn`, { disabled: value >= max })}>
+              <Plus />
             </button>
           </div>
         )}
+      </>
+    );
+  }
 
-        {withDelete && onInputHover && !isNumeric && (
-          <button
-            className={cn(`${RC}__close`, { hidden: !value })}
-            onClick={() => {
-              toggleEditing();
-              onChange('');
-            }}
-          />
-        )}
-        {icon ?? null}
-      </div>
-
-      {error && <span className={`${RC}__error`}>{error}</span>}
+  return (
+    <div
+      className={cn(
+        `input__wrap`,
+        { [`input__wrap_focus`]: isFocused },
+        { [`input__wrap_error`]: error },
+        { [`input__wrap_disabled`]: disabled }
+      )}
+    >
+      {renderInput()}
+      {icon}
+      {withDelete && !isNumeric && <span className={cn(`input__close`, { hidden: !value })} onClick={handle.toggleEdit} />}
     </div>
   );
 };