@xaypay/tui 0.0.105 → 0.0.107

package/src/components/button/index.js

@@ -1,136 +1,186 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { compereConfigs } from './../../utils';
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { compereConfigs } from './../../utils'
 
 export const Button = ({
-  icon,
-  size,
-  type,
-  font,
-  color,
-  label,
-  width,
-  height,
-  cursor,
-  weight,
-  border,
-  radius,
-  outline,
-  padding,
-  onClick,
-  disabled,
-  className,
-  boxSizing,
-  hoverColor,
-  transition,
-  contentWidth,
-  disabledColor,
-  textTransform,
-  backgroundColor,
-  disabledLineColor,
-  btnIconMarginRight,
-  backgroundHoverColor,
-  disabledBackgroundColor,
-  ...props
+    icon,
+    hoverIcon,
+    size,
+    type,
+    font,
+    color,
+    label,
+    width,
+    height,
+    cursor,
+    weight,
+    border,
+    radius,
+    outline,
+    padding,
+    onClick,
+    disabled,
+    className,
+    boxSizing,
+    hoverColor,
+    transition,
+    contentWidth,
+    disabledColor,
+    textTransform,
+    backgroundColor,
+    disabledLineColor,
+    btnIconMarginRight,
+    backgroundHoverColor,
+    disabledBackgroundColor,
+    ...props
 }) => {
+    const [isHover, setIsHover] = useState(false)
 
-  const [isHover, setIsHover] = useState(false);
+    useEffect(() => {
+        if (!label && !icon) {
+            alert('Add icon or label props on Button component')
+        }
+    }, [])
 
-  useEffect(() => {
-    if (!label && !icon) {
-      alert('Add icon or label props on Button component');
-    }
-  }, []);
+    const configStyles = compereConfigs()
+    const classProps = classnames(className)
 
-  const configStyles = compereConfigs();
-  const classProps = classnames(
-    className,
-  );
+    const handleMouseEnter = () => {
+        setIsHover(true)
+    }
 
-  const handleMouseEnter = () => {
-    setIsHover(true);
-  };
-  
-  const handleMouseLeave = () => {
-    setIsHover(false);
-  };
+    const handleMouseLeave = () => {
+        setIsHover(false)
+    }
 
-  return (
-    <button
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: '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,
-        borderRadius: radius ? radius : configStyles.BUTTON.radius,
-        boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
-        transition: transition ? transition : configStyles.BUTTON.transition,
-        border: outline ? 'none' : border ? border : configStyles.BUTTON.border,
-        width: contentWidth ? 'auto' : width ? width : configStyles.BUTTON.width,
-        cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
-        textTransform: textTransform ? textTransform : configStyles.BUTTON.textTransform,
-        backgroundColor:
-          (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.disabledBackgroundColor :
-          outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' :
-          !outline && !disabled && isHover? backgroundHoverColor ? backgroundHoverColor : configStyles.BUTTON.backgroundHoverColor :
-          backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
-        boxShadow:
-          outline ?
-            disabled ?
-            `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.disabledLineColor}` :
-            `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 : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor :
-          !outline && !disabled && isHover ? hoverColor ? hoverColor : configStyles.BUTTON.hoverColor :
-          color ? color : configStyles.BUTTON.color
-      }}
-      type={type ? type : configStyles.BUTTON.type}
-      disabled={disabled ? disabled : configStyles.BUTTON.disabled}
-      onClick={disabled ? _ => _ : type !== 'submit' ? onClick ? onClick : _ => alert('Add click event handler on Button component') : _ => _}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      className={classProps}
-      {...props}
-    >
-      {icon && icon} {label && <span style={{ marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.btnIconMarginRight : '0px' }}>{ label }</span>} {!icon && !label && 'Add icon or label prop on Button component'}
-    </button>
-  );
-};
+    return (
+        <button
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: '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,
+                borderRadius: radius ? radius : configStyles.BUTTON.radius,
+                boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
+                transition: transition ? transition : configStyles.BUTTON.transition,
+                border: outline ? 'none' : border ? border : configStyles.BUTTON.border,
+                width: contentWidth ? 'auto' : width ? width : configStyles.BUTTON.width,
+                cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
+                textTransform: textTransform ? textTransform : configStyles.BUTTON.textTransform,
+                backgroundColor:
+                    (outline || !outline) && disabled
+                        ? disabledBackgroundColor
+                            ? disabledBackgroundColor
+                            : configStyles.BUTTON.disabledBackgroundColor
+                        : outline && !disabled
+                        ? isHover
+                            ? backgroundColor
+                                ? backgroundColor
+                                : configStyles.BUTTON.backgroundColor
+                            : '#ffffff'
+                        : !outline && !disabled && isHover
+                        ? backgroundHoverColor
+                            ? backgroundHoverColor
+                            : configStyles.BUTTON.backgroundHoverColor
+                        : backgroundColor
+                        ? backgroundColor
+                        : configStyles.BUTTON.backgroundColor,
+                boxShadow: outline
+                    ? disabled
+                        ? `inset 0 0 0 2px ${
+                              disabledLineColor ? disabledLineColor : configStyles.BUTTON.disabledLineColor
+                          }`
+                        : `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
+                            : backgroundColor
+                            ? backgroundColor
+                            : configStyles.BUTTON.backgroundColor
+                        : !outline && !disabled && isHover
+                        ? hoverColor
+                            ? hoverColor
+                            : configStyles.BUTTON.hoverColor
+                        : color
+                        ? color
+                        : configStyles.BUTTON.color,
+            }}
+            type={type ? type : configStyles.BUTTON.type}
+            disabled={disabled ? disabled : configStyles.BUTTON.disabled}
+            onClick={
+                disabled
+                    ? (_) => _
+                    : type !== 'submit'
+                    ? onClick
+                        ? onClick
+                        : () => alert('Add click event handler on Button component')
+                    : (_) => _
+            }
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            className={classProps}
+            {...props}
+        >
+            {isHover && hoverIcon ? hoverIcon : icon ?? null}{' '}
+            {label && (
+                <span
+                    style={{
+                        marginLeft: icon
+                            ? btnIconMarginRight
+                                ? btnIconMarginRight
+                                : configStyles.BUTTON.btnIconMarginRight
+                            : '0px',
+                    }}
+                >
+                    {label}
+                </span>
+            )}{' '}
+            {!icon && !label && 'Add icon or label prop on Button component'}
+        </button>
+    )
+}
 
 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,
-  border: PropTypes.string,
-  disabled: PropTypes.bool,
-  radius: PropTypes.string,
-  padding: PropTypes.string,
-  boxSizing: PropTypes.string,
-  className: PropTypes.string,
-  hoverColor: PropTypes.string,
-  transition: PropTypes.string,
-  contentWidth: PropTypes.bool,
-  textTransform: PropTypes.string,
-  disabledColor: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  disabledLineColor: PropTypes.string,
-  btnIconMarginRight: PropTypes.string,
-  backgroundHoverColor: PropTypes.string,
-  disabledBackgroundColor: PropTypes.string
-};
+    type: PropTypes.string,
+    size: PropTypes.string,
+    font: PropTypes.string,
+    icon: PropTypes.element,
+    hoverIcon: 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,
+    border: PropTypes.string,
+    disabled: PropTypes.bool,
+    radius: PropTypes.string,
+    padding: PropTypes.string,
+    boxSizing: PropTypes.string,
+    className: PropTypes.string,
+    hoverColor: PropTypes.string,
+    transition: PropTypes.string,
+    contentWidth: PropTypes.bool,
+    textTransform: PropTypes.string,
+    disabledColor: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    disabledLineColor: PropTypes.string,
+    btnIconMarginRight: PropTypes.string,
+    backgroundHoverColor: PropTypes.string,
+    disabledBackgroundColor: PropTypes.string,
+}

package/src/components/captcha/captcha.stories.js

@@ -1,17 +1,21 @@
-import React from 'react';
-import { Captcha } from './index';
+import React from 'react'
+import { Captcha } from './index'
 
 export default {
     component: Captcha,
     title: 'Components/Captcha',
-};
+}
 
-const Template = (args) => <Captcha label='Captcha' {...args}>Default</Captcha>;
+const Template = (args) => (
+    <Captcha label="Captcha" {...args}>
+        Default
+    </Captcha>
+)
 
-export const Default = Template.bind({});
+export const Default = Template.bind({})
 Default.args = {
     range: 72,
     getRange: (range) => {
-        console.log('Range is ' + range);
-    }
-};
+        console.log('Range is ' + range)
+    },
+}

package/src/components/captcha/index.js

@@ -1,55 +1,54 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
 
-import { compereConfigs } from './../../utils';
+import { compereConfigs } from './../../utils'
 
-import SvgCaptchaArrowUp from './../icon/CaptchaArrowUp';
-import SvgCaptchaArrowDown from './../icon/CaptchaArrowDown';
+import SvgCaptchaArrowUp from './../icon/CaptchaArrowUp'
+import SvgCaptchaArrowDown from './../icon/CaptchaArrowDown'
 
-import styles from './captcha.module.css';
+import styles from './captcha.module.css'
 
 export const Captcha = ({ size, color, range, label, getRange }) => {
+    const [rangeNumber, setRangeNumber] = useState(0)
+    const [rangeProgress, setRangeProgress] = useState(0)
 
-    const [rangeNumber, setRangeNumber] = useState(0);
-    const [rangeProgress, setRangeProgress] = useState(0);
-
-    const configStyles = compereConfigs();
+    const configStyles = compereConfigs()
 
     const handleRange = (e) => {
-        const value = e.target.value;
-        getRange(value);
-        setRangeProgress(value);
-    };
+        const value = e.target.value
+        getRange(value)
+        setRangeProgress(value)
+    }
 
     useEffect(() => {
         if (range === undefined || range === null) {
-            alert('Please add range property on Captcha component');
+            alert('Please add range property on Captcha component')
         }
         if (!getRange) {
-            alert('Please add getRange property on Captcha component');
+            alert('Please add getRange property on Captcha component')
         }
         if (range >= 100) {
-            setRangeNumber(100);
+            setRangeNumber(100)
         } else if (range <= 0) {
-            setRangeNumber(0);
+            setRangeNumber(0)
         } else {
-            const roundedRange = Math.ceil(range / 5) * 5;
-            setRangeNumber(Math.min(roundedRange, 100));
+            const roundedRange = Math.ceil(range / 5) * 5
+            setRangeNumber(Math.min(roundedRange, 100))
         }
-    }, [range, getRange]);
-
-    
+    }, [range, getRange])
 
     return (
         <>
-            {
-                label && <p
+            {label && (
+                <p
                     style={{
                         fontSize: size ? size : configStyles.Captcha.size,
-                        color: color ? color : configStyles.Captcha.color
+                        color: color ? color : configStyles.Captcha.color,
                     }}
-                >{ label }</p>
-            }
+                >
+                    {label}
+                </p>
+            )}
             <div
                 style={{
                     width: '100%',
@@ -77,7 +76,7 @@ export const Captcha = ({ size, color, range, label, getRange }) => {
                         width: '100%',
                         height: '30px',
                         alignItems: 'center',
-                        zIndex: 1
+                        zIndex: 1,
                     }}
                     className={styles['start-point']}
                 >
@@ -88,33 +87,32 @@ export const Captcha = ({ size, color, range, label, getRange }) => {
                             right: '0px',
                             width: '100%',
                             height: '4px',
-                            borderRadius: '2px',
                             backgroundColor: '#EEEEEE',
                             borderRadius: '10px',
-                            zIndex: -2
+                            zIndex: -2,
                         }}
                     ></div>
                     <input
                         min={0}
                         step={5}
                         max={100}
-                        type='range'
+                        type="range"
                         value={rangeProgress}
                         style={{
                             height: '4px',
                             width: '100%',
                             borderRadius: '2px',
                             cursor: 'pointer',
-                            backgroundColor: 'transparent'
+                            backgroundColor: 'transparent',
                         }}
                         className={`
                             ${styles['range']}
                             ${
-                                +rangeProgress === rangeNumber ?
-                                styles['range-success'] :
-                                +rangeProgress !== rangeNumber && +rangeProgress > 0 ?
-                                styles['range-error'] :
-                                styles['range-default']
+                                +rangeProgress === rangeNumber
+                                    ? styles['range-success']
+                                    : +rangeProgress !== rangeNumber && +rangeProgress > 0
+                                    ? styles['range-error']
+                                    : styles['range-default']
                             }
                         `}
                         onInput={handleRange}
@@ -128,13 +126,12 @@ export const Captcha = ({ size, color, range, label, getRange }) => {
                             height: '4px',
                             borderRadius: '2px',
                             backgroundColor:
-                                +rangeProgress === rangeNumber ?
-                                '#0DA574' :
-                                +rangeProgress !== rangeNumber && +rangeProgress > 0 ?
-                                '#EE0000' :
-                                'transparent' ,
-                            borderRadius: '2px',
-                            zIndex: -1
+                                +rangeProgress === rangeNumber
+                                    ? '#0DA574'
+                                    : +rangeProgress !== rangeNumber && +rangeProgress > 0
+                                    ? '#EE0000'
+                                    : 'transparent',
+                            zIndex: -1,
                         }}
                     ></div>
                 </div>
@@ -144,18 +141,18 @@ export const Captcha = ({ size, color, range, label, getRange }) => {
                         bottom: '0px',
                         height: '15px',
                         left: `calc(${rangeNumber}% - 6px)`,
-                        transform: 'translate(-50% -50%)'
+                        transform: 'translate(-50% -50%)',
                     }}
                 >
                     <SvgCaptchaArrowUp />
                 </div>
             </div>
         </>
-    );
-};
+    )
+}
 
 Captcha.propTypes = {
     label: PropTypes.string,
     range: PropTypes.number.isRequired,
-    getRange: PropTypes.func.isRequired
-};
+    getRange: PropTypes.func.isRequired,
+}

package/src/components/checkbox/checkbox.stories.js

@@ -1,10 +1,10 @@
-import React from "react";
-import { Checkbox } from ".";
+import React from 'react'
+import { Checkbox } from '.'
 export default {
-  component: Checkbox,
-  title: "Components/Checkbox",
-};
+    component: Checkbox,
+    title: 'Components/Checkbox',
+}
 
-const Template = (args) => <Checkbox {...args} />;
+const Template = (args) => <Checkbox {...args} />
 
-export const CheckboxButton = Template.bind({});
+export const CheckboxButton = Template.bind({})