intelicoreact 0.0.31 → 0.0.41

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

@@ -1,110 +1,111 @@
 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 './Input.scss';
 
 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('input-classic', className)}>
-      {label && <Label className="input-classic-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
+  };
 
-      <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}
-        />
+  function renderInput() {
+    if (mask) {
+      return <InputMask {...uniProps} ref={inputRef} mask={mask} />;
+    }
+
+    return (
+      <>
+        <input {...uniProps} ref={inputRef} type={isNumeric ? 'number' : type} />
         {isNumeric && (
           <div className="input-classic__nums">
-            <button onClick={() => changeHandler(value - 1)} className={cn(`input-classic__num-btn`, { disabled: value === min })}>
+            <button onClick={() => handle.change(value - numStep)} 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 })}>
+            <button onClick={() => handle.change(+value + +numStep)} 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>
+  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="input-classic__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,9 +1,12 @@
 .input-classic {
   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;
   }
 
@@ -77,7 +80,8 @@
     background: none;
     cursor: pointer;
     margin-right: 4px;
-
+    visibility: hidden;
+    pointer-events: none;
     &:hover {
       opacity: 1;
     }
@@ -121,7 +125,9 @@
     background: none;
     font-size: 20px;
     user-select: none;
-
+    &.disabled {
+      opacity: 0.3;
+    }
     svg {
       margin-right: 0;
     }
@@ -131,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

@@ -4,50 +4,47 @@ import Input from './Input';
 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' }
   }
 };
 
@@ -64,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/UI/Accordion/Accordion.stories.js

@@ -5,7 +5,7 @@ import Accordion from './Accordion';
 global.lng = 'en';
 
 export default {
-  title: 'Accordion',
+  title: 'UI/Accordion',
   component: Accordion
 };
 

package/src/Atomic/UI/AdvancedTag/AdvancedTags.stories.js

@@ -4,7 +4,7 @@ import AdvancedTags from './AdvancedTags';
 global.lng = 'en';
 
 export default {
-  title: 'AdvancedTags',
+  title: 'UI/AdvancedTags',
   component: AdvancedTags
 };
 

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

@@ -4,7 +4,7 @@ import Alert from './Alert';
 global.lng = 'en';
 
 export default {
-  title: 'Alert',
+  title: 'UI/Alert',
   component: Alert,
   argTypes: {
     variant: {

package/src/Atomic/UI/Button/Button.js

@@ -1,15 +1,13 @@
 import React from 'react';
 import cn from 'classnames';
-import * as Icons from 'react-feather';
 
 import './Button.scss';
 
 const Button = ({ label, variant = 'primary', onClick, disabled, icon, className, children, style }) => {
-  const Icon = Icons[icon];
 
   return (
     <button style={style} className={cn(className, 'button', { [`button_${variant}`]: variant })} onClick={onClick} disabled={disabled}>
-      {icon && <Icon className="button__icon" />}
+      {icon}
       {label && <div className="button__text">{label}</div>}
       {!label && children ? children : null}
     </button>

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

@@ -1,10 +1,11 @@
 import React from 'react';
+import {Check} from 'react-feather';
 import Button from './Button';
 
 global.lng = 'en';
 
 export default {
-  title: 'Button',
+  title: 'UI/Button',
   component: Button,
   argTypes: {
     variant: {
@@ -30,22 +31,6 @@ export default {
         options: ['Check', 'Edit3', 'Plus', 'Tool', 'UploadCloud', 'X', 'ArrowLeft']
       }
     }
-  },
-  label: {
-    description: 'string'
-  },
-  disabled: {
-    description: 'boolean'
-  },
-  onClick: {
-    description: 'function'
-  },
-  icon: {
-    description: 'svg icon code',
-    control: {
-      type: 'select',
-      options: ['Check', 'Edit3', 'Plus', 'Tool', 'UploadCloud', 'X']
-    }
   }
 };
 
@@ -58,6 +43,6 @@ export const ButtonTemplate = Template.bind({});
 ButtonTemplate.args = {
   disabled: false,
   onClick: () => null,
-  text: 'Button',
-  icon: 'Check'
+  label: 'Button',
+  icon: <Check/>
 };

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

@@ -4,7 +4,7 @@ import Hint from './Hint';
 global.lng = 'en';
 
 export default {
-  title: 'Hint',
+  title: 'UI/Hint',
   component: Hint,
   argTypes: {
     side: {

package/src/Atomic/UI/Price/Price.js

@@ -0,0 +1,19 @@
+import React from 'react';
+const Price = ({ value, unit = '$', unitAfter, className }) => {
+  let formatted;
+  if (value.length <= 3) {
+    formatted = parseFloat(value).toFixed(2);
+  } else {
+    formatted = Number(value.toString().replace(/[+*?$^(,)]/g, '')).toLocaleString('en-US');
+  }
+
+  return (
+    <div className={`price ${className}`}>
+      {!unitAfter && unit}
+      {formatted}
+      {unitAfter && unit}
+    </div>
+  );
+};
+
+export default Price;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import Price from './Price';
+
+global.lng = 'en';
+
+export default {
+  title: 'UI/Price',
+  component: Price,
+  argTypes: {
+    value: {
+      description: 'string',
+    },
+    unit: {
+      description: 'string'
+    },
+    unitAfter: {
+      description: 'boolean'
+    }
+  }
+};
+
+const Template = args => <Price {...args} />;
+
+export const PriceTemplate = Template.bind({});
+
+PriceTemplate.args = {
+  value: '15000',
+  unit: '$',
+  unitAfter: false
+};

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

@@ -4,7 +4,7 @@ import Status from './Status';
 global.lng = 'en';
 
 export default {
-  title: 'Status',
+  title: 'UI/Status',
   component: Status,
   argTypes: {
     status: {

package/src/Functions/useClickOutside.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+export const useClickOutside = (ref, setOut, open) => {
+  function handleClickOutside(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setOut(open);
+    }
+  }
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+};

package/src/scss/main.scss

@@ -35,6 +35,6 @@ button {
 
 .main {
     &__wrap {
-        display: flex;  
+        display: flex;
     }
-}
+}