@xaypay/tui 0.0.55 → 0.0.57

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "build-lib": "rollup --config rollup.config.js",
+    "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",
     "svgr": "svgr --icon --title-prop --replace-attr-values '#1D1D1D=currentColor' -d src/components/icon -- src/assets"
   },
   "author": "",
@@ -41,6 +41,7 @@
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-svg": "^2.0.0",
     "sass": "^1.54.9",
     "sass-loader": "^13.0.2",
     "style-loader": "^3.3.1",

package/rollup.config.js

@@ -1,4 +1,5 @@
 // import {babel} from '@rollup/plugin-babel';
+import svg from 'rollup-plugin-svg';
 import babel from 'rollup-plugin-babel';
 import resolve from '@rollup/plugin-node-resolve';
 import external from 'rollup-plugin-peer-deps-external';
@@ -28,6 +29,7 @@ export default [
                 exclude: 'node_modules/**',
                 presets: ['@babel/preset-react'],
             }),
+            svg(),
             external(),
             resolve()
         ]

package/src/assets/icons/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.9878 8.00003C7.75456 8.00049 7.52851 7.91911 7.34892 7.77003L1.3594 2.77003C1.15554 2.60029 1.02734 2.35638 1.003 2.09196C0.978666 1.82753 1.06019 1.56425 1.22963 1.36003C1.39907 1.15581 1.64255 1.02739 1.90652 1.00301C2.17048 0.978631 2.4333 1.06029 2.63716 1.23003L7.9878 5.71003L13.3384 1.39003C13.4405 1.30697 13.558 1.24493 13.6842 1.2075C13.8103 1.17007 13.9425 1.15798 14.0733 1.17192C14.2041 1.18586 14.3309 1.22555 14.4463 1.28873C14.5618 1.3519 14.6636 1.4373 14.746 1.54003C14.8374 1.64285 14.9066 1.76348 14.9493 1.89435C14.9921 2.02523 15.0073 2.16353 14.9942 2.30059C14.9811 2.43765 14.9399 2.57053 14.8731 2.69088C14.8063 2.81124 14.7155 2.91649 14.6062 3.00003L8.6167 7.83003C8.43194 7.95555 8.21051 8.0154 7.9878 8.00003Z" fill="#3C393E"/>
+</svg>

package/src/assets/icons/close-icon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4253 0.241029L12.431 0.236144C12.6129 0.0804082 12.8468 -0.00097097 13.0861 0.00827014C13.3253 0.0175112 13.5523 0.116692 13.7216 0.285992C13.8909 0.455292 13.9901 0.682241 13.9993 0.921488C14.0085 1.16074 13.9272 1.39466 13.7714 1.57651L13.7665 1.58222L8.38622 6.96254L13.7665 12.3429L13.7714 12.3486C13.9272 12.5304 14.0085 12.7643 13.9993 13.0036C13.9901 13.2428 13.8909 13.4698 13.7216 13.6391C13.5523 13.8084 13.3253 13.9076 13.0861 13.9168C12.8468 13.926 12.6129 13.8447 12.431 13.6889L12.4253 13.684L7.04493 8.30363L1.66742 13.6738C1.58315 13.7705 1.48016 13.8492 1.36462 13.9051C1.24669 13.9622 1.11823 13.9942 0.987309 13.9993C0.85639 14.0043 0.72584 13.9823 0.603852 13.9345C0.481865 13.8867 0.371073 13.8142 0.27843 13.7216C0.185788 13.6289 0.113295 13.5181 0.0655034 13.3961C0.0177115 13.2742 -0.00434842 13.1436 0.000708381 13.0127C0.00576522 12.8818 0.0378304 12.7533 0.0948891 12.6354C0.150805 12.5198 0.229542 12.4168 0.326326 12.3325L5.70384 6.96235L0.323475 1.57461L0.318633 1.56895C0.162897 1.3871 0.0815178 1.15317 0.0907589 0.913926C0.1 0.674678 0.199181 0.447729 0.36848 0.27843C0.53778 0.10913 0.76473 0.00995005 1.00398 0.000708956C1.24322 -0.00853214 1.47715 0.0728459 1.659 0.228582L1.66476 0.233511L7.04512 5.62125L12.4253 0.241029Z" fill="#3C393E"/>
+</svg>

package/src/components/autocomplate/index.js

@@ -1,23 +1,26 @@
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
+import { compereConfigs } from "./../../utils";
 import styles from "./autocomplate.module.css";
 
 export const Autocomplate = ({
-  className,
   label,
+  value,
   required,
   disabled,
-  jsonOptionsData,
-  jsonSelectedOptionsData,
+  keyNames,
   onChange,
-  value,
+  className,
   searchCount,
   placeHolder,
-  keyNames,
   errorMesage,
+  autoComplete,
+  jsonOptionsData,
+  jsonSelectedOptionsData,
   ...props
 }) => {
+  const configStyles = compereConfigs();
   const classProps = classnames(styles.searchBox, className);
   const parseSelectedOptionsData =
     jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : { name: '', id: '' };
@@ -27,10 +30,6 @@ export const Autocomplate = ({
   const [showOptions, setShowOptions] = useState(false);
   const parseOptionsData =
     jsonOptionsData ? JSON.parse(jsonOptionsData) : [];
-  useEffect(() => {
-    setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name])
-    setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id])
-  }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]])
 
   const handleChange = (e) => {
     const currentInputValue = e.currentTarget.value;
@@ -89,6 +88,11 @@ export const Autocomplate = ({
     }
   }
 
+  useEffect(() => {
+    setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name])
+    setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id])
+  }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]])
+
   return (
     <>
       {label ? <label className={`${styles['autocomplate-title']} autocomplate-title-rem`}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</label> : ""}
@@ -96,6 +100,7 @@ export const Autocomplate = ({
         <input
           id={inputId}
           type="text"
+          autoComplete={autoComplete ? autoComplete : configStyles.INPUT.autoComplete}
           className={`${styles['autocomplate-content-top']} autocomplate-content-top-rem ${errorMesage ? styles.errorBorder : ''}`}
           disabled={disabled}
           onChange={handleChange}
@@ -112,21 +117,21 @@ export const Autocomplate = ({
 };
 
 Autocomplate.propTypes = {
-  className: PropTypes.string,
   label: PropTypes.string,
-  placeHolder: PropTypes.string,
-  required: PropTypes.bool,
   disabled: PropTypes.bool,
-  jsonOptionsData: PropTypes.string,
-  jsonSelectedOptionsData: PropTypes.string,
+  required: PropTypes.bool,
   onChange: PropTypes.func,
   value: PropTypes.string,
-  searchCount: PropTypes.number,
   keyNames: PropTypes.object,
+  className: PropTypes.string,
+  searchCount: PropTypes.number,
   errorMesage: PropTypes.string,
+  placeHolder: PropTypes.string,
+  autoComplete: PropTypes.string,
+  jsonOptionsData: PropTypes.string,
+  jsonSelectedOptionsData: PropTypes.string,
 };
 
-
 Autocomplate.defaultProps = {
   required: false,
-};
+};

package/src/components/button/index.js

@@ -17,7 +17,6 @@ export const Button = ({
   radius,
   outline,
   padding,
-  bgColor,
   onClick,
   disabled,
   className,
@@ -26,8 +25,9 @@ export const Button = ({
   contentWidth,
   disabledColor,
   textTransform,
-  disabledBgColor,
+  backgroundColor,
   disabledLineColor,
+  disabledBackgroundColor,
   ...props
 }) => {
 
@@ -68,17 +68,17 @@ export const Button = ({
         cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
         textTransform: textTransform ? textTransform : configStyles.BUTTON.textTransform,
         backgroundColor:
-          (outline || !outline) && disabled ? disabledBgColor ? disabledBgColor : configStyles.BUTTON.disabledBgColor :
-          outline && !disabled ? isHover ? bgColor ? bgColor : configStyles.BUTTON.bgColor : '#ffffff' : bgColor ? bgColor : configStyles.BUTTON.bgColor,
+          (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.disabledBackgroundColor :
+          outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
         boxShadow:
           outline ?
             disabled ?
             `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.disabledLineColor}` :
-            `inset 0 0 0 2px ${bgColor ? bgColor : configStyles.BUTTON.bgColor}` :
+            `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor}` :
           'none',
         color:          
           (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor :
-          outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : bgColor ? bgColor : configStyles.BUTTON.bgColor : color ? color : configStyles.BUTTON.color
+          outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : color ? color : configStyles.BUTTON.color
       }}
       type={type ? type : configStyles.BUTTON.type}
       disabled={disabled ? disabled : configStyles.BUTTON.disabled}
@@ -108,14 +108,14 @@ Button.propTypes = {
   disabled: PropTypes.bool,
   radius: PropTypes.string,
   padding: PropTypes.string,
-  bgColor: PropTypes.string,
   boxSizing: PropTypes.string,
   className: PropTypes.string,
   transition: PropTypes.string,
   contentWidth: PropTypes.bool,
   textTransform: PropTypes.string,
   disabledColor: PropTypes.string,
-  disabledBgColor: PropTypes.string,
+  backgroundColor: PropTypes.string,
   label: PropTypes.string.isRequired,
   disabledLineColor: PropTypes.string,
+  disabledBackgroundColor: PropTypes.string
 };

package/src/components/file/index.js

@@ -62,6 +62,13 @@ export const File = ({
     document.querySelector(`.${name}`).value = "";
   };
 
+  useEffect(() => {
+    return () => {
+      setError('');
+      setImage(null);
+    }
+  }, []);
+
   return (
       <>
         <p className={`${styles['file-form-title']} ile-form-title-rem`}>

package/src/components/input/index.js

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
-import { Typography } from "../typography";
 import { compereConfigs } from "./../../utils";
 import styled, { keyframes, css } from 'styled-components';
 
@@ -60,7 +59,6 @@ export const Input = ({
 }) => {
     const [show, setShow] = useState(false);
     const [isHover, setIsHover] = useState(false);
-    const [tooltipStatus, setTooltipStatus] = useState(false);
     
     const random = Math.floor((Math.random() * 1000) + 1);
     const configStyles = compereConfigs();
@@ -68,18 +66,6 @@ export const Input = ({
         className ? className : configStyles.INPUT.className
     );
 
-    const handleChange = (event) => {
-        onChange ? onChange(event.target.value) : _ => _;
-    };
-
-    const handleMouseEnter = () => {
-        setIsHover(true);
-    };
-      
-    const handleMouseLeave = () => {
-        setIsHover(false);
-    };
-    
     const errorShow = keyframes`
         100% {
             bottom: '-20px';
@@ -98,6 +84,18 @@ export const Input = ({
     const P = styled.p`
         animation: ${errorAnimation ? animation : 'none'};
     `;
+
+    const handleChange = (event) => {
+        onChange ? onChange(event.target.value) : _ => _;
+    };
+
+    const handleMouseEnter = () => {
+        setIsHover(true);
+    };
+      
+    const handleMouseLeave = () => {
+        setIsHover(false);
+    };
     
     return (
         <div className={`${styles["input-wrap"]}`}>
@@ -120,6 +118,7 @@ export const Input = ({
             <div
                 className={`${styles["input-content"]}`}
                 style={{
+                    width: width ? width : configStyles.INPUT.width,
                     borderRadius: radius ? radius : configStyles.INPUT.radius,
                     boxShadow: errorMessage ? errorColor ?  `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
                 }}
@@ -211,11 +210,8 @@ export const Input = ({
                 }
             </div>
             {
-                tooltip ? <Typography variant="p" onClick={()=> setTooltipStatus(!tooltipStatus)}>
-                    ⓘ
-                </Typography> : null
+                tooltip ? tooltip : ''
             }
-            {tooltipStatus ? <p>{tooltip}</p> : null}
             {
                 errorMessage ?
                     <P