@xaypay/tui 0.0.66 → 0.0.67

package/dist/index.es.js

@@ -637,17 +637,18 @@ const Input = ({
   const handleChange = event => {
     const currentValue = event.target.value;
     if (onChange) {
-      currentValue.length > maxLength ? onChange(currentValue.substr(0, maxLength)) : onChange(currentValue);
-    }
-    setInnerValue(currentValue);
-    if (type === 'tel') {
-      !phoneNumberRegex.test(parseInt(currentValue)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
-    }
-    if (maxLength) {
-      currentValue.length > maxLength ? setInnerValue(currentValue.substr(0, maxLength)) : setInnerValue(currentValue);
-    }
-    if (regexp) {
-      !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+      onChange(currentValue);
+    } else {
+      setInnerValue(currentValue);
+      if (type === 'tel') {
+        !phoneNumberRegex.test(parseInt(currentValue)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+      }
+      if (maxLength) {
+        currentValue.length > maxLength ? setInnerValue(currentValue.substr(0, maxLength)) : setInnerValue(currentValue);
+      }
+      if (regexp) {
+        !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+      }
     }
   };
   const handleMouseEnter = () => {
@@ -657,7 +658,7 @@ const Input = ({
     setIsHover(false);
   };
   useEffect(() => {
-    if (value && value !== '') {
+    if (value !== undefined && value !== null) {
       setInnerValue(value);
       if (type === 'tel') {
         !phoneNumberRegex.test(parseInt(value)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
@@ -669,7 +670,10 @@ const Input = ({
         !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
       }
     }
-  }, [value]);
+    if (onChange && (value === undefined || value === null)) {
+      alert('Please add value prop on input component');
+    }
+  }, [value, onChange]);
   useEffect(() => {
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);

package/dist/index.js

@@ -667,17 +667,18 @@ const Input = ({
   const handleChange = event => {
     const currentValue = event.target.value;
     if (onChange) {
-      currentValue.length > maxLength ? onChange(currentValue.substr(0, maxLength)) : onChange(currentValue);
-    }
-    setInnerValue(currentValue);
-    if (type === 'tel') {
-      !phoneNumberRegex.test(parseInt(currentValue)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
-    }
-    if (maxLength) {
-      currentValue.length > maxLength ? setInnerValue(currentValue.substr(0, maxLength)) : setInnerValue(currentValue);
-    }
-    if (regexp) {
-      !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+      onChange(currentValue);
+    } else {
+      setInnerValue(currentValue);
+      if (type === 'tel') {
+        !phoneNumberRegex.test(parseInt(currentValue)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+      }
+      if (maxLength) {
+        currentValue.length > maxLength ? setInnerValue(currentValue.substr(0, maxLength)) : setInnerValue(currentValue);
+      }
+      if (regexp) {
+        !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+      }
     }
   };
   const handleMouseEnter = () => {
@@ -687,7 +688,7 @@ const Input = ({
     setIsHover(false);
   };
   React.useEffect(() => {
-    if (value && value !== '') {
+    if (value !== undefined && value !== null) {
       setInnerValue(value);
       if (type === 'tel') {
         !phoneNumberRegex.test(parseInt(value)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
@@ -699,7 +700,10 @@ const Input = ({
         !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
       }
     }
-  }, [value]);
+    if (onChange && (value === undefined || value === null)) {
+      alert('Please add value prop on input component');
+    }
+  }, [value, onChange]);
   React.useEffect(() => {
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/input/index.js

@@ -98,20 +98,20 @@ export const Input = ({
     const handleChange = (event) => {
         const currentValue = event.target.value;
         if (onChange) {
-            currentValue.length > maxLength ? onChange(currentValue.substr(0, maxLength)) : onChange(currentValue);
-        }
-        
-        setInnerValue(currentValue);
-        if (type === 'tel') {
-            !phoneNumberRegex.test(parseInt(currentValue)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
-        } 
+            onChange(currentValue);
+        } else {
+            setInnerValue(currentValue);
+            if (type === 'tel') {
+                !phoneNumberRegex.test(parseInt(currentValue)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+            } 
 
-        if (maxLength) {
-            currentValue.length > maxLength ? setInnerValue(currentValue.substr(0, maxLength)) : setInnerValue(currentValue);
-        }
+            if (maxLength) {
+                currentValue.length > maxLength ? setInnerValue(currentValue.substr(0, maxLength)) : setInnerValue(currentValue);
+            }
 
-        if (regexp) {
-            !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+            if (regexp) {
+                !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+            }
         }
     };
 
@@ -124,11 +124,11 @@ export const Input = ({
     };
 
     useEffect(() => {
-        if (value && value !== '') {
+        if (value !== undefined && value !== null) {
             setInnerValue(value);
             if (type === 'tel') {
                 !phoneNumberRegex.test(parseInt(value)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
-            } 
+            }
 
             if (maxLength) {
                 value.length > maxLength ? setInnerValue(value.substr(0, maxLength)) : setInnerValue(value);
@@ -138,7 +138,11 @@ export const Input = ({
                 !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
             }
         }
-    }, [value]);
+
+        if (onChange && (value === undefined || value === null)) {
+            alert('Please add value prop on input component');
+        }
+    }, [value, onChange]);
 
     useEffect(() => {
         if (errorMessage) {

package/src/components/textarea/index.js

@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { compereConfigs } from "./../../utils";
+
+import './textarea.module.css';
+
+export const Textarea = ({
+    size,
+    label,
+    width,
+    value,
+    height,
+    resize,
+    border,
+    radius,
+    padding,
+    required,
+    onChange,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    boxSizing,
+    maxLength,
+    labelSize,
+    labelColor,
+    borderColor,
+    labelWeight,
+    placeholder,
+    labelDisplay,
+    backgroundColor,
+    borderFocusColor,
+    borderHoverColor,
+    labelRequiredColor
+}) => {
+    const [isHover, setIsHover] = useState(false);
+    const [isFocus, setIsFocus] = useState(false);
+
+    const configStyles = compereConfigs();
+
+    const handleMouseEnter = () => {
+        setIsHover(true);
+    };
+      
+    const handleMouseLeave = () => {
+        setIsHover(false);
+    };
+
+    const handleFocus = () => {
+        setIsFocus(true);
+    };
+
+    const handleBlur = () => {
+        setIsFocus(false);
+    };
+
+    useEffect(() => {
+        if (value === undefined) {
+            alert('Please add value prop on Textarea component');
+        }
+
+        if (!onChange) {
+            alert('Please add onChange function on Textarea component');
+        }
+    }, [value, onChange]);
+
+    return (
+        <>
+            {
+                label
+                ? <label
+                    style={{
+                        color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
+                        fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
+                        display: labelDisplay ? labelDisplay : configStyles.TEXTAREA.labelDisplay,
+                        fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight
+                    }}
+                  >
+                    {label}
+                    {
+                        required &&
+                        <sup style={{color: labelRequiredColor ? labelRequiredColor : configStyles.TEXTAREA.labelRequiredColor}}>*</sup>
+                    }
+                  </label>
+                : ''
+            }
+            <textarea
+                style={{
+                    outline: 'none',
+                    overflow: 'auto',
+                    fontSize: size ? size : configStyles.TEXTAREA.size,
+                    width: width ? width : configStyles.TEXTAREA.width,
+                    height: height ? height : configStyles.TEXTAREA.height,
+                    border: border ? border : configStyles.TEXTAREA.border,
+                    padding: padding ? padding : configStyles.TEXTAREA.padding,
+                    borderRadius: radius ? radius : configStyles.TEXTAREA.radius,
+                    minWidth: minWidth ? minWidth : configStyles.TEXTAREA.minWidth,
+                    maxWidth: maxWidth ? maxWidth : configStyles.TEXTAREA.maxWidth,
+                    minHeight: minHeight ? minHeight : configStyles.TEXTAREA.minHeight,
+                    maxHeight: maxHeight ? maxHeight : configStyles.TEXTAREA.maxHeight,
+                    boxSizing: boxSizing ? boxSizing : configStyles.TEXTAREA.boxSizing,
+                    backgroundColor: backgroundColor ? backgroundColor : configStyles.TEXTAREA.backgroundColor,
+                    borderColor: isFocus ? borderFocusColor ? borderFocusColor : configStyles.TEXTAREA.borderFocusColor :
+                                 isHover ? borderHoverColor ? borderHoverColor : configStyles.TEXTAREA.borderHoverColor :
+                                 borderColor ? borderColor : configStyles.TEXTAREA.borderColor,
+                    resize: resize ? resize : configStyles.TEXTAREA.resize,
+                }}
+                onBlur={handleBlur}
+                onChange={onChange}
+                onFocus={handleFocus}
+                placeholder={placeholder}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                value={
+                    maxLength ? value.length > maxLength ? value.substr(0, maxLength) : value :
+                    configStyles.TEXTAREA.maxLength ? value.length > configStyles.TEXTAREA.maxLength ? value.substr(0, configStyles.TEXTAREA.maxLength) : value :
+                    value
+                }
+            ></textarea>
+        </>
+    );
+};
+
+Textarea.propTypes = {
+    size: PropTypes.string,
+    label: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string,
+    resize: PropTypes.string,
+    border: PropTypes.string,
+    radius: PropTypes.string,
+    required: PropTypes.bool,
+    padding: PropTypes.string,
+    minWidth: PropTypes.string,
+    maxWidth: PropTypes.string,
+    boxSizing: PropTypes.string,
+    minHeight: PropTypes.string,
+    maxHeight: PropTypes.string,
+    maxLength: PropTypes.number,
+    labelSize: PropTypes.string,
+    labelColor: PropTypes.string,
+    labelWeight: PropTypes.string,
+    borderColor: PropTypes.string,
+    placeholder: PropTypes.string,
+    labelDisplay: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    borderFocusColor: PropTypes.string,
+    borderHoverColor: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    labelRequiredColor: PropTypes.string
+}

package/src/components/textarea/textarea.module.css

@@ -0,0 +1,21 @@
+textarea::-webkit-scrollbar {
+    width: 6px;
+}
+  
+textarea::-webkit-scrollbar-track {
+    background: #EEEEEE;
+    border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    -ms-border-radius: 3px;
+    -o-border-radius: 3px;
+}
+
+textarea::-webkit-scrollbar-thumb {
+    background: #D1D1D1;
+    border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    -ms-border-radius: 3px;
+    -o-border-radius: 3px;
+}

package/src/components/textarea/textarea.stories.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Textarea } from '.';
+
+export default {
+    Comment: Textarea,
+    title: 'Components/Textarea'
+}
+
+const Template = (args) => {
+    const [val, setVal] = useState('');
+
+    const handleChangeValue = (e) => {
+        setVal(e.target.value);
+    }
+
+    return (
+        <Textarea value={val} onChange={handleChangeValue} {...args} />
+    );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Label for textarea',
+    required: true,
+    size: '16px',
+    radius: '6px',
+    width: '400px',
+    noResize: false,
+    height: '134px',
+    maxLength: 1500,
+    color: '#3C393E',
+    minWidth: '200px',
+    maxWidth: '500px',
+    labelSize: '16px',
+    resize: 'vertical',
+    minHeight: '100px',
+    maxHeight: '300px',
+    border: '2px solid',
+    padding: '12px 15px',
+    labelColor: '#3C393E',
+    labelWeight: 'normal',
+    labelDisplay: 'block',
+    borderColor: '#D1D1D1',
+    boxSizing: 'border-box',
+    backgroundColor: 'white',
+    borderHoverColor: '#3C393E',
+    borderFocusColor: '#00236A',
+    labelRequiredColor: '#ee0000',
+}

package/src/stories/configuration.stories.mdx

@@ -403,3 +403,33 @@ import StackAlt from './assets/stackalt.svg';
   });
 }
 ```
+
+### Textarea
+
+```
+{
+  size: '16px',                                         // for font size
+  radius: '6px',                                        // for border radius
+  width: '400px',                                       // for width
+  resize: 'none',                                       // for resize
+  height: '134px',                                      // for height
+  maxLength: 1500,                                      // for characters maximum count
+  color: '#3C393E',                                     // for color
+  minWidth: '200px',                                    // for minimum width
+  maxWidth: '500px',                                    // for maximum width
+  labelSize: '16px',                                    // for label font size
+  minHeight: '100px',                                   // for minimum height
+  maxHeight: '300px',                                   // for maximum height
+  border: '2px solid',                                  // for border
+  padding: '12px 15px',                                 // for padding
+  labelColor: '#3C393E',                                // for label color
+  labelWeight: 'normal',                                // for label font weight
+  labelDisplay: 'block',                                // for label display
+  borderColor: '#D1D1D1',                               // for border color
+  boxSizing: 'border-box',                              // for box sizing
+  backgroundColor: 'white',                             // for background color
+  borderHoverColor: '#3C393E',                          // for border color when hover action is happaning
+  borderFocusColor: '#00236A',                          // for boredr color when focus action is happaning
+  labelRequiredColor: '#ee0000',                        // for label required mark color
+}
+```

package/src/stories/usage.stories.mdx

@@ -12,7 +12,8 @@ import buttonImage from './static/button-usage.png';
 import selectImage from './static/select-usage.png';
 import inputTooltipImage from './static/input-tooltip-usage.png';
 import toasterImage from './static/toaster-container-usage.png';
-import toastImage from './static/toaster-usage.png'
+import toastImage from './static/toaster-usage.png';
+import textareaImage from './static/textarea-usage.png';
 
 <Meta title="Intro/Usage" />
 
@@ -145,3 +146,7 @@ import toastImage from './static/toaster-usage.png'
 
 #### createToast function usage
 <img src={toastImage} alt="toaster image" />
+
+### Textarea
+
+<img src={textareaImage} alt="textarea image" />

package/tui.config.js

@@ -225,5 +225,30 @@ module.exports = {
         optionItemBoxSizing: 'border-box',                 // for option box sizing
         optionItemBackgroudColor: '#ffffff',               // for option background color
         optionItemBackgroudColorHover: 'unset',            // for option background color ( when hover )
+    },
+    // default properties for <Textarea /> component
+    TEXTAREA: {
+        size: '16px',
+        radius: '6px',
+        width: '400px',
+        height: '134px',
+        color: '#3C393E',
+        minWidth: '200px',
+        maxWidth: '500px',
+        labelSize: '16px',
+        resize: 'vertical',
+        minHeight: '100px',
+        maxHeight: '300px',
+        border: '2px solid',
+        padding: '12px 15px',
+        labelColor: '#3C393E',
+        labelWeight: 'normal',
+        labelDisplay: 'block',
+        borderColor: '#D1D1D1',
+        boxSizing: 'border-box',
+        backgroundColor: 'white',
+        borderHoverColor: '#3C393E',
+        borderFocusColor: '#00236A',
+        labelRequiredColor: '#ee0000',
     }
 };