@xaypay/tui 0.0.76 → 0.0.78

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "STORYBOOK_PATH=../../tui.config.js  start-storybook -p 6006",
+    "storybook": "STORYBOOK_PATH=../../tui.config.js start-storybook -p 6006",
     "build-storybook": "STORYBOOK_PATH=../../tui.config.js build-storybook",
-    "build-lib": "STORYBOOK_PATH=../tui.config.js rollup --config rollup.config.js",
+    "build-lib": "STORYBOOK_PATH=../tui.config.js STORYBOOK_CONFIG_PATH=../../../../tui.config.js rollup --config rollup.config.js",
     "svgr": "svgr --icon --title-prop -d src/components/icon -- src/assets/icons"
   },
   "author": "",

package/src/assets/table-settings-icon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8744 20H8.12436C7.87436 20 7.65769 19.9167 7.47436 19.75C7.29103 19.5833 7.18269 19.375 7.14936 19.125L6.84936 16.8C6.63269 16.7167 6.42869 16.6167 6.23736 16.5C6.04536 16.3833 5.85769 16.2583 5.67436 16.125L3.49936 17.025C3.26603 17.1083 3.03269 17.1167 2.79936 17.05C2.56603 16.9833 2.38269 16.8417 2.24936 16.625L0.399361 13.4C0.266027 13.1833 0.224361 12.95 0.274361 12.7C0.324361 12.45 0.449361 12.25 0.649361 12.1L2.52436 10.675C2.50769 10.5583 2.49936 10.4457 2.49936 10.337V9.662C2.49936 9.554 2.50769 9.44167 2.52436 9.325L0.649361 7.9C0.449361 7.75 0.324361 7.55 0.274361 7.3C0.224361 7.05 0.266027 6.81667 0.399361 6.6L2.24936 3.375C2.36603 3.14167 2.54503 2.99567 2.78636 2.937C3.02836 2.879 3.26603 2.89167 3.49936 2.975L5.67436 3.875C5.85769 3.74167 6.04936 3.61667 6.24936 3.5C6.44936 3.38333 6.64936 3.28333 6.84936 3.2L7.14936 0.875C7.18269 0.625 7.29103 0.416667 7.47436 0.25C7.65769 0.0833333 7.87436 0 8.12436 0H11.8744C12.1244 0 12.341 0.0833333 12.5244 0.25C12.7077 0.416667 12.816 0.625 12.8494 0.875L13.1494 3.2C13.366 3.28333 13.5704 3.38333 13.7624 3.5C13.9537 3.61667 14.141 3.74167 14.3244 3.875L16.4994 2.975C16.7327 2.89167 16.966 2.88333 17.1994 2.95C17.4327 3.01667 17.616 3.15833 17.7494 3.375L19.5994 6.6C19.7327 6.81667 19.7744 7.05 19.7244 7.3C19.6744 7.55 19.5494 7.75 19.3494 7.9L17.4744 9.325C17.491 9.44167 17.4994 9.554 17.4994 9.662V10.337C17.4994 10.4457 17.4827 10.5583 17.4494 10.675L19.3244 12.1C19.5244 12.25 19.6494 12.45 19.6994 12.7C19.7494 12.95 19.7077 13.1833 19.5744 13.4L17.7244 16.6C17.591 16.8167 17.4037 16.9627 17.1624 17.038C16.9204 17.1127 16.6827 17.1083 16.4494 17.025L14.3244 16.125C14.141 16.2583 13.9494 16.3833 13.7494 16.5C13.5494 16.6167 13.3494 16.7167 13.1494 16.8L12.8494 19.125C12.816 19.375 12.7077 19.5833 12.5244 19.75C12.341 19.9167 12.1244 20 11.8744 20ZM10.0494 13.5C11.016 13.5 11.841 13.1583 12.5244 12.475C13.2077 11.7917 13.5494 10.9667 13.5494 10C13.5494 9.03333 13.2077 8.20833 12.5244 7.525C11.841 6.84167 11.016 6.5 10.0494 6.5C9.06603 6.5 8.23669 6.84167 7.56136 7.525C6.88669 8.20833 6.54936 9.03333 6.54936 10C6.54936 10.9667 6.88669 11.7917 7.56136 12.475C8.23669 13.1583 9.06603 13.5 10.0494 13.5Z" fill="white"/>
+</svg>

package/src/components/button/button.stories.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import {Button} from './index';
+import { Button } from './index';
+
+import { ReactComponent as ReactSVG } from './../../assets/range-arrow-default.svg';
 
 export default {
     component: Button,
     title: 'Components/Button',
 };
 
-const Template = (args) => <Button label='Button' {...args}/>;
+const Template = (args) => <Button label='Button' icon={<ReactSVG />} {...args}/>;
 
 export const Default = Template.bind({});

package/src/components/button/index.js

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { compereConfigs } from './../../utils';
 
 export const Button = ({
+  icon,
   size,
   type,
   font,
@@ -34,8 +35,8 @@ export const Button = ({
   const [isHover, setIsHover] = useState(false);
 
   useEffect(() => {
-    if (!label) {
-      alert('Button component: label prop is required, please add it!!!');
+    if (!label && !icon) {
+      alert('Add icon or label props on Button component');
     }
   }, []);
 
@@ -55,11 +56,14 @@ export const Button = ({
   return (
     <button
       style={{
+        display: 'flex',
+        alignItems: 'center',
         fontSize: size ? size : configStyles.BUTTON.size,
         fontFamily: font ? font : configStyles.BUTTON.font,
         height: height ? height : configStyles.BUTTON.height,
         fontWeight: weight ? weight : configStyles.BUTTON.weight,
         padding: padding ? padding : configStyles.BUTTON.padding,
+        justifyContent: icon && label? 'space-between' : 'center',
         borderRadius: radius ? radius : configStyles.BUTTON.radius,
         boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
         transition: transition ? transition : configStyles.BUTTON.transition,
@@ -88,7 +92,7 @@ export const Button = ({
       className={classProps}
       {...props}
     >
-      {label}
+      {icon && icon} {label && label} {!icon && !label && 'Add icon or label prop on Button component'}
     </button>
   );
 };
@@ -97,10 +101,12 @@ Button.propTypes = {
   type: PropTypes.string,
   size: PropTypes.string,
   font: PropTypes.string,
+  icon: PropTypes.element,
   color: PropTypes.string,
   width: PropTypes.string,
   outline: PropTypes.bool,
   onClick: PropTypes.func,
+  label: PropTypes.string,
   weight: PropTypes.string,
   height: PropTypes.string,
   cursor: PropTypes.string,
@@ -115,7 +121,6 @@ Button.propTypes = {
   textTransform: PropTypes.string,
   disabledColor: PropTypes.string,
   backgroundColor: PropTypes.string,
-  label: PropTypes.string.isRequired,
   disabledLineColor: PropTypes.string,
   disabledBackgroundColor: PropTypes.string
 };

package/src/components/captcha/index.js

@@ -38,6 +38,8 @@ export const Captcha = ({ size, color, range, label, getRange }) => {
         }
     }, [range, getRange]);
 
+    
+
     return (
         <>
             {

package/src/components/input/index.js

@@ -45,6 +45,7 @@ export const Input = ({
     maxLength,
     labelColor,
     errorColor,
+    borderRight,
     placeholder,
     errorZindex,
     errorBottom,
@@ -62,9 +63,11 @@ export const Input = ({
     labelLineHeight,
     backgroundColor,
     telErrorMessage,
+    borderRightColor,
     labelMarginBottom,
     regexpErrorMessage,
     phoneJustifyContent,
+    borderRightColorHover,
     errorAnimationDuration,
     ...props
 }) => {
@@ -97,6 +100,8 @@ export const Input = ({
 
     const handleChange = (event) => {
         const currentValue = event.target.value;
+
+        let prevValue = innerValue;
         
         setInnerValue(currentValue);
         if (change) {
@@ -105,8 +110,19 @@ export const Input = ({
         
         if (type === 'tel') {
             if (!phoneNumberRegex.test(currentValue)) {
-                telErrorMessage && setInnerErrorMessage(telErrorMessage);
-                setInnerValue('');
+                if (currentValue === '') {
+                    setInnerErrorMessage('');
+                    setInnerValue('');
+                    if (change) {
+                        change('');
+                    }
+                } else {
+                    telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
+                    setInnerValue(prevValue);
+                    if (change) {
+                        change(prevValue);
+                    }
+                }
             } else {
                 setInnerErrorMessage('');
                 if (currentValue.length > 8) {
@@ -160,7 +176,11 @@ export const Input = ({
                 setInnerValue(value);
                 if (type === 'tel') {
                     if (!phoneNumberRegex.test(value)) {
-                        telErrorMessage && setInnerErrorMessage(telErrorMessage);
+                        if (value === '') {
+                            setInnerErrorMessage('');
+                        } else {
+                            telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
+                        }
                         setInnerValue('');
                     } else {
                         setInnerErrorMessage('');
@@ -181,7 +201,7 @@ export const Input = ({
                 }
             }
         }
-    }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage]);
+    }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage]);
     
     return (
         <div className={`${styles["input-wrap"]}`}>
@@ -243,7 +263,15 @@ export const Input = ({
                                 borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
                                 borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
                                 display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
+                                borderRight: borderRight ? borderRight : configStyles.INPUT.borderRight,
                                 alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
+                                borderColor:
+                                    innerErrorMessage ? errorColor ? errorColor : configStyles.INPUT.errorColor :
+                                    isHover
+                                        ?
+                                            borderRightColorHover ? borderRightColorHover : configStyles.INPUT.borderRightColorHover
+                                        :
+                                            borderRightColor ? borderRightColor : configStyles.INPUT.borderRightColor,
                                 color: innerErrorMessage  && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
                                 justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
                                 backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
@@ -351,6 +379,7 @@ Input.propTypes = {
     maxLength: PropTypes.number,
     errorColor: PropTypes.string,
     labelColor: PropTypes.string,
+    borderRight: PropTypes.string,
     placeholder: PropTypes.string,
     errorZindex: PropTypes.string,
     errorBottom: PropTypes.string,
@@ -368,10 +397,12 @@ Input.propTypes = {
     phoneAlignItems: PropTypes.string,
     errorLineHeight: PropTypes.string,
     labelLineHeight: PropTypes.string,
+    borderRightColor: PropTypes.string,
     labelMarginBottom: PropTypes.string,
     regexpErrorMessage: PropTypes.string,
     regexp: PropTypes.instanceOf(RegExp),
     phoneJustifyContent: PropTypes.string,
+    borderRightColorHover: PropTypes.string,
     errorAnimationDuration: PropTypes.string,
     leftIcon: PropTypes.arrayOf(PropTypes.element),
     rightIcon: PropTypes.arrayOf(PropTypes.element),

package/src/components/input/input.stories.js

@@ -15,8 +15,8 @@ const Template = (args) => {
   const [newVal, setNewVal] = useState('');
   const handleChange = (val) => {
     setNewVal(val);
-    console.log(val);
   };
+
   return <Input value={newVal} change={handleChange} {...args} />;
 }
 

package/src/components/newAutocomplete/index.js

@@ -47,7 +47,6 @@ export const NewAutocomplete = ({
     contentTopDirection,
     contentTopBoxSizing,
     contentTopLineHeight,
-    contentTopBorderColor,
     contentBottomMaxWidth,
     contentBottomOverflow,
     contentBottomPosition,
@@ -66,8 +65,8 @@ export const NewAutocomplete = ({
     contentBottomRowAlignItems,
     contentBottomRowTransition,
     contentBottomRowHoverColor,
-    contentTopBorderHoverColor,
-    contentTopBorderActiveColor,
+    contentTopBorderHover,
+    contentTopBorderActive,
     contentBottomInnerOverflowY,
     contentBottomInnerOverflowX,
     contentBottomInnerMaxHeight,
@@ -312,13 +311,14 @@ export const NewAutocomplete = ({
                     placeholder={placeHolder ? placeHolder : ''}
                     autoComplete={autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete}
                     style={{
+                        border: 'none',
+                        outline: 'none',
                         maxWidth: '100%',
                         transition: 'all 240ms',
                         cursor: disabled ? 'not-allowed' : 'auto',
                         color: contentTopColor ? contentTopColor : configStyles.NEWAUTOCOMPLETE.contentTopColor,
                         fontSize: contentTopSize ? contentTopSize : configStyles.NEWAUTOCOMPLETE.contentTopSize,
                         height: contentTopHeight ? contentTopHeight : configStyles.NEWAUTOCOMPLETE.contentTopHeight,
-                        border: contentTopBorder ? contentTopBorder : configStyles.NEWAUTOCOMPLETE.contentTopBorder,
                         padding: contentTopPadding ? contentTopPadding : configStyles.NEWAUTOCOMPLETE.contentTopPadding,
                         display: contentTopDisplay ? contentTopDisplay : configStyles.NEWAUTOCOMPLETE.contentTopDisplay,
                         fontWeight: contentTopWeight ? contentTopWeight : configStyles.NEWAUTOCOMPLETE.contentTopWeight,
@@ -326,11 +326,11 @@ export const NewAutocomplete = ({
                         boxSizing: contentTopBoxSizing ? contentTopBoxSizing : configStyles.NEWAUTOCOMPLETE.contentTopBoxSizing,
                         lineHeight: contentTopLineHeight ? contentTopLineHeight : configStyles.NEWAUTOCOMPLETE.contentTopLineHeight,
                         flexDirection: contentTopDirection ? contentTopDirection : configStyles.NEWAUTOCOMPLETE.contentTopDirection,
-                        borderColor:
-                            errorMessage ? errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor :
-                            isFocus ? contentTopBorderActiveColor ? contentTopBorderActiveColor : configStyles.NEWAUTOCOMPLETE.contentTopBorderActiveColor :
-                            isHover ? contentTopBorderHoverColor ? contentTopBorderHoverColor : configStyles.NEWAUTOCOMPLETE.contentTopBorderHoverColor :
-                            contentTopBorderColor ? contentTopBorderColor : configStyles.NEWAUTOCOMPLETE.contentTopBorderColor,
+                        boxShadow:
+                            errorMessage ? errorColor ?  `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.NEWAUTOCOMPLETE.errorColor}` :
+                            isFocus ? contentTopBorderActive ? contentTopBorderActive : configStyles.NEWAUTOCOMPLETE.contentTopBorderActive :
+                            isHover ? contentTopBorderHover ? contentTopBorderHover : configStyles.NEWAUTOCOMPLETE.contentTopBorderHover :
+                            contentTopBorder ? contentTopBorder : configStyles.NEWAUTOCOMPLETE.contentTopBorder,
                     }}
                     {...props}
                 />
@@ -401,7 +401,7 @@ NewAutocomplete.propTypes = {
     contentBottomZindex: PropTypes.number,
     contentBottomRadius: PropTypes.string,
     contentTopLineHeight: PropTypes.string,
-    contentTopBorderColor: PropTypes.string,
+    contentTopBorderHover: PropTypes.string,
     contentBottomRowColor: PropTypes.string,
     contentBottomMaxWidth: PropTypes.string,
     contentBottomOverflow: PropTypes.string,
@@ -410,6 +410,7 @@ NewAutocomplete.propTypes = {
     contentBottomBoxShadow: PropTypes.string,
     contentBottomRowHeight: PropTypes.string,
     contentBottomRowCursor: PropTypes.string,
+    contentTopBorderActive: PropTypes.string,
     contentBottomRowDisplay: PropTypes.string,
     contentBottomRowPadding: PropTypes.string,
     contentBottomRowFontSize: PropTypes.string,
@@ -420,8 +421,6 @@ NewAutocomplete.propTypes = {
     contentBottomRowAlignItems: PropTypes.string,
     contentBottomRowTransition: PropTypes.string,
     contentBottomRowHoverColor: PropTypes.string,
-    contentTopBorderHoverColor: PropTypes.string,
-    contentTopBorderActiveColor: PropTypes.string,
     contentBottomInnerOverflowY: PropTypes.string,
     contentBottomInnerOverflowX: PropTypes.string,
     contentBottomInnerMaxHeight: PropTypes.string,

package/src/components/newFile/index.js

@@ -85,7 +85,7 @@ export const NewFile = ({
 
     const handleRemoveFile = () => {
         setImage(null);
-        removeFile(singleFile);
+        removeFile && removeFile(singleFile);
     };
 
     const handleChange = (e) => {
@@ -201,7 +201,11 @@ export const NewFile = ({
         if (multiple) {
             setSingleFile(null);
         }
-    }, [multiple, filesArray && filesArray.length, defaultData]);
+
+        if (multiple && !removeFile) {
+            alert('Please add removeFile prop on NewFile component, it is a require in multiple mode');
+        }
+    }, [multiple, removeFile, filesArray && filesArray.length, defaultData]);
 
     useEffect(() => {
         if (errorMessage) {
@@ -215,11 +219,7 @@ export const NewFile = ({
         if (!change) {
             alert('Please add change prop on File component');                    
         }
-
-        if (!removeFile) {
-            alert('Please add removeFile prop on File component');                    
-        }
-    }, [change, removeFile]);
+    }, [change]);
 
     return (
         <div
@@ -413,7 +413,7 @@ export const NewFile = ({
                         status={item.status}
                         size={item.file.size}
                         name={item.file.name}
-                        removeFile={removeFile}
+                        removeFile={removeFile ? removeFile : _ => _}
                         radius={radius ? radius : configStyles.File.radius}
                         fileFormat={item.file.type.split('/')[1].toLowerCase()}
                         progressColor={progressColor ? progressColor : configStyles.File.progressColor}
@@ -449,6 +449,7 @@ NewFile.propTypes = {
     upload: PropTypes.string,
     weight: PropTypes.number,
     maxSize: PropTypes.number,
+    removeFile: PropTypes.func,
     errorSize: PropTypes.string,
     labelSize: PropTypes.string,
     labelColor: PropTypes.string,
@@ -475,7 +476,6 @@ NewFile.propTypes = {
     progressTrackColor: PropTypes.string,
     fileAreaImageWidth: PropTypes.string,
     listItemErrorColor: PropTypes.string,
-    removeFile: PropTypes.func.isRequired,
     fileAreaImageHeight: PropTypes.string,
     progressFailedColor: PropTypes.string,
     progressSuccessColor: PropTypes.string,
@@ -489,6 +489,6 @@ NewFile.propTypes = {
 };
 
 NewFile.defaultProps = {
-    maxSize: 50,
+    maxSize: 10,
     fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };

package/src/components/select/index.js

@@ -39,7 +39,6 @@ export const Select = ({
     selectedColor,
     selectedRadius,
     selectedMinHeight,
-    selectedBorder,
     selectedPadding,
     selectedFontSize,
     selectedBoxSizing,
@@ -47,7 +46,6 @@ export const Select = ({
     selectedLineHeight,
     selectedHoverColor,
     selectedTransition,
-    selectedBorderColor,
 
     optionsBoxShadow,
     optionsBorderRadius,
@@ -65,6 +63,9 @@ export const Select = ({
     optionItemMarginBottom,
     optionItemBackgroudColor,
     optionItemBackgroudColorHover,
+
+    boxShadow,
+    boxShadowHover
 }) => {
     const ref = useRef();
     
@@ -222,7 +223,6 @@ export const Select = ({
                         style={{
                             cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
                             minHeight: selectedMinHeight ? selectedMinHeight : configStyles.SELECT.selectedMinHeight,
-                            border: selectedBorder ? selectedBorder : configStyles.SELECT.selectedBorder,
                             padding: selectedPadding ? selectedPadding : configStyles.SELECT.selectedPadding,
                             borderRadius: selectedRadius ? selectedRadius : configStyles.SELECT.selectedRadius,
                             fontSize: selectedFontSize ? selectedFontSize : configStyles.SELECT.selectedFontSize,
@@ -230,7 +230,7 @@ export const Select = ({
                             fontWeight: selectedFontWeight ? selectedFontWeight : configStyles.SELECT.selectedFontWeight,
                             lineHeight: selectedLineHeight ? selectedLineHeight : configStyles.SELECT.selectedLineHeight,
                             transition: selectedTransition ? selectedTransition : configStyles.SELECT.selectedTransition,
-                            borderColor: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : selectedBorderColor ? selectedBorderColor : configStyles.SELECT.selectedBorderColor
+                            boxShadow: errorMessage ? errorColor ?  `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.SELECT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.SELECT.boxShadowHover : boxShadow ? boxShadow : configStyles.SELECT.boxShadow
                         }}
                         onClick={disabled ? _ => _ : _ => handleOpenClose()}
                         onMouseEnter={disabled ? _ => _ : _ => handleMouseEnter()}
@@ -378,7 +378,6 @@ Select.propTypes = {
     errorSize: PropTypes.string,
     errorColor: PropTypes.string,
     selectedColor: PropTypes.string,
-    selectedBorder: PropTypes.string,
     selectedRadius: PropTypes.string,
     selectedMinHeight: PropTypes.string,
     selectedPadding: PropTypes.string,
@@ -388,7 +387,6 @@ Select.propTypes = {
     selectedFontWeight: PropTypes.string,
     selectedLineHeight: PropTypes.string,
     selectedTransition: PropTypes.string,
-    selectedBorderColor: PropTypes.string,
 
     optionsBoxShadow: PropTypes.string,
     optionsBorderRadius: PropTypes.string,
@@ -406,4 +404,7 @@ Select.propTypes = {
     optionItemMarginBottom: PropTypes.string,
     optionItemBackgroudColor: PropTypes.string,
     optionItemBackgroudColorHover: PropTypes.string,
+
+    boxShadow: PropTypes.string,
+    boxShadowHover: PropTypes.string,
 };

package/src/components/select/select.module.css

@@ -16,7 +16,7 @@
     position: absolute;
     width: 100%;
     left: 0px;
-    z-index: 1;
+    z-index: 9;
     max-height: 0;
     overflow: hidden;
     animation: select-show 640ms linear forwards;