@xaypay/tui 0.0.75 → 0.0.77

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.75",
+  "version": "0.0.77",
   "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/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
 }) => {
@@ -153,28 +156,32 @@ export const Input = ({
             setInnerErrorMessage('');
         }
 
-        if (value !== undefined && value !== null) {
-            setInnerValue(value);
-            if (type === 'tel') {
-                if (!phoneNumberRegex.test(value)) {
-                    telErrorMessage && setInnerErrorMessage(telErrorMessage);
-                    setInnerValue('');
-                } else {
-                    setInnerErrorMessage('');
-                    if (value.length > 8) {
-                        setInnerValue(value.substr(0, 8));
+        if (value !== undefined) {
+            if (value === null) {
+                setInnerValue('');
+            } else {
+                setInnerValue(value);
+                if (type === 'tel') {
+                    if (!phoneNumberRegex.test(value)) {
+                        telErrorMessage && setInnerErrorMessage(telErrorMessage);
+                        setInnerValue('');
                     } else {
-                        setInnerValue(value);
+                        setInnerErrorMessage('');
+                        if (value.length > 8) {
+                            setInnerValue(value.substr(0, 8));
+                        } else {
+                            setInnerValue(value);
+                        }
                     }
-                }
-            } 
+                } 
 
-            if (maxLength && value.length > maxLength && type !== 'tel') {
-                setInnerValue(value.substr(0, maxLength));
-            }
+                if (maxLength && value.length > maxLength && type !== 'tel') {
+                    setInnerValue(value.substr(0, maxLength));
+                }
 
-            if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
-                !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('')
+                if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+                    !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('')
+                }
             }
         }
     }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage]);
@@ -239,7 +246,14 @@ 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:
+                                    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,
@@ -327,7 +341,6 @@ Input.propTypes = {
     name: PropTypes.string,
     change: PropTypes.func,
     color: PropTypes.string,
-    value: PropTypes.string,
     width: PropTypes.string,
     label: PropTypes.string,
     required: PropTypes.bool,
@@ -348,6 +361,7 @@ Input.propTypes = {
     maxLength: PropTypes.number,
     errorColor: PropTypes.string,
     labelColor: PropTypes.string,
+    borderRight: PropTypes.string,
     placeholder: PropTypes.string,
     errorZindex: PropTypes.string,
     errorBottom: PropTypes.string,
@@ -365,14 +379,17 @@ 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),
     type: PropTypes.oneOf(Object.values(InputTypes)),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
 };
 
 Input.defaultProps = {

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;