@xaypay/tui 0.0.119 → 0.0.121

package/src/components/button/index.js

@@ -1,187 +0,0 @@
-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,
-    hoverIcon,
-    hoverColor,
-    transition,
-    contentWidth,
-    disabledColor,
-    textTransform,
-    backgroundColor,
-    disabledLineColor,
-    btnIconMarginRight,
-    backgroundHoverColor,
-    disabledBackgroundColor,
-    ...props
-}) => {
-    const [isHover, setIsHover] = useState(false)
-
-    useEffect(() => {
-        if (!label && !icon) {
-            alert('Add icon or label props on Button component')
-        }
-    }, [])
-
-    const configStyles = compereConfigs()
-    const classProps = classnames(className ? className : configStyles.BUTTON.className)
-
-    const handleMouseEnter = () => {
-        setIsHover(true)
-    }
-
-    const handleMouseLeave = () => {
-        setIsHover(false)
-    }
-
-    return (
-        <button
-            style={{
-                display: 'flex',
-                outline: 'none',
-                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,
-    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.module.css

@@ -1,74 +0,0 @@
-.start-point::after {
-  content: '';
-  position: absolute;
-  top: 7.5px;
-  left: 0px;
-  width: 10px;
-  height: 10px;
-  border: 2px solid #ffffff;
-  border-radius: 6px;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  -ms-border-radius: 6px;
-  -o-border-radius: 6px;
-  background-color: #D1D1D1;
-  z-index: -1;
-}
-
-.range {
-  margin: 0px;
-  -webkit-appearance: none;
-}
-
-.range::-webkit-slider-runnable-track {
-  width: 100%;
-  -webkit-appearance: none;
-}
-
-.range-default::-webkit-slider-thumb {
-  width: 34px;
-  height: 34px;
-  cursor: ew-resize;
-  border-radius: 17px;
-  -webkit-border-radius: 17px;
-  -moz-border-radius: 17px;
-  -ms-border-radius: 17px;
-  -o-border-radius: 17px;
-  -webkit-appearance: none;
-  background-position: -5px;
-  background-size: 46px 46px;
-  background-repeat: no-repeat;
-  background-image: url('./../../assets/range-arrow-default.svg');
-}
-
-.range-error::-webkit-slider-thumb {
-  width: 34px;
-  height: 34px;
-  cursor: ew-resize;
-  border-radius: 17px;
-  -webkit-border-radius: 17px;
-  -moz-border-radius: 17px;
-  -ms-border-radius: 17px;
-  -o-border-radius: 17px;
-  -webkit-appearance: none;
-  background-position: -5px;
-  background-size: 46px 46px;
-  background-repeat: no-repeat;
-  background-image: url('./../../assets/range-arrow-error.svg');
-}
-
-.range-success::-webkit-slider-thumb {
-  width: 34px;
-  height: 34px;
-  cursor: ew-resize;
-  border-radius: 17px;
-  -webkit-border-radius: 17px;
-  -moz-border-radius: 17px;
-  -ms-border-radius: 17px;
-  -o-border-radius: 17px;
-  -webkit-appearance: none;
-  background-position: -5px;
-  background-size: 46px 46px;
-  background-repeat: no-repeat;
-  background-image: url('./../../assets/range-arrow-success.svg');
-}

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

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

package/src/components/captcha/index.js

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

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

@@ -1,76 +0,0 @@
-import React, { useState } from 'react'
-import { Checkbox, DirectionMode } from '.'
-import SvgCancel from './../icon/Cancel'
-import SvgDone from './../icon/Done'
-export default {
-    component: Checkbox,
-    title: 'Components/Checkbox',
-    argsType: {
-        direction: {
-            options: Object.values(DirectionMode),
-        },
-    },
-}
-
-const checkBoxData = [
-    {
-        id: 1,
-        label: '1 checkbox',
-        checked: true,
-        disabled: true,
-        ignoreDisabledForChecked: true,
-    },
-    {
-        id: 2,
-        label: '2 checkbox',
-        checked: true,
-    },
-    {
-        id: 3,
-        label: '3 checkbox',
-        checked: true,
-    },
-    {
-        id: 4,
-        label: '4 checkbox',
-        checked: true,
-    },
-    {
-        id: 5,
-        label: '5 checkbox',
-        checked: true,
-    },
-    {
-        id: 6,
-        label: '6 checkbox',
-        checked: true,
-    },
-];
-
-const Template = (args) => {
-    const [innerData, setInnerData] = useState(checkBoxData)
-
-    const handleGetData = (data) => {
-        console.log(data, 'data - - -')
-        setInnerData(data.checkboxArr)
-    }
-
-    return (
-        <Checkbox
-            {...args}
-            data={innerData}
-            getData={handleGetData}
-            checkedIcon={<SvgCancel />}
-            unCheckedIcon={<SvgDone />}
-            keyNames={{
-                id: 'id',
-                label: 'label',
-                checked: 'checked',
-                disabled: 'disabled',
-                ignoreDisabledForChecked: 'ignoreDisabledForChecked',
-            }}
-        />
-    )
-}
-
-export const Default = Template.bind({})

package/src/components/checkbox/index.js

@@ -1,120 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { SingleCheckbox } from './../singleCheckbox'
-import { compereConfigs } from './../../utils'
-
-export const DirectionMode = {
-    VERTICAL: 'vertical',
-    HORINZONTAL: 'horizontal',
-}
-
-export const Checkbox = ({
-    data,
-    getData,
-    keyNames,
-    className,
-    direction,
-    checkedIcon,
-    unCheckedIcon,
-    labelMarginLeft,
-    checkBoxMarginBottom,
-}) => {
-    const configStyles = compereConfigs()
-    const [innerData, setInnerData] = useState([])
-    const classProps = classnames(className ? className : configStyles.CHECKBOX.className)
-
-    const handleSendData = (_, e, index) => {
-        const dataForSend = {}
-        setInnerData((prev) =>
-            prev.map((innerItem, innerIndex) => {
-                if (innerIndex === index) {
-                    innerItem[keyNames.checked] = !innerItem[keyNames.checked]
-                    dataForSend.item = innerItem
-                    dataForSend.itemIndex = innerIndex
-                    dataForSend.itemId = innerItem[keyNames.id]
-                }
-                return innerItem
-            })
-        )
-        dataForSend.checkboxArr = innerData
-        getData && getData(dataForSend)
-    }
-
-    useEffect(() => {
-        if (Array.isArray(data)) {
-            setInnerData(data)
-        } else {
-            setInnerData([data])
-        }
-    }, [data])
-
-    return (
-        <div
-            style={{
-                width: '100%',
-                display: 'flex',
-                flexDirection: direction === 'vertical' ? 'column' : 'row',
-            }}
-            className={classProps}
-        >
-            {innerData &&
-                innerData.length > 0 &&
-                innerData.map((item, index) => {
-                    return (
-                        <div
-                            key={`TUI_${index}_checkbox`}
-                            style={{
-                                width: 'fit-content',
-                                marginBottom:
-                                    direction === 'vertical'
-                                        ? checkBoxMarginBottom
-                                            ? checkBoxMarginBottom
-                                            : configStyles.CHECKBOX.checkBoxMarginBottom
-                                        : '0px',
-                            }}
-                        >
-                            <SingleCheckbox
-                                data={item}
-                                index={index}
-                                checkedColor="#00236A"
-                                unCheckedColor="#D1D1D1"
-                                checkedIcon={checkedIcon}
-                                label={item[keyNames.label]}
-                                unCheckedIcon={unCheckedIcon}
-                                handleChecked={handleSendData}
-                                checked={item[keyNames.checked]}
-                                disabled={item[keyNames.disabled]}
-                                ignoreDisabledForChecked={item[keyNames.ignoreDisabledForChecked]}
-                                labelMarginLeft={
-                                    labelMarginLeft ? labelMarginLeft : configStyles.CHECKBOX.labelMarginLeft
-                                }
-                            />
-                        </div>
-                    )
-                })}
-        </div>
-    )
-}
-
-Checkbox.propTypes = {
-    getData: PropTypes.func,
-    keyNames: PropTypes.object,
-    checkedIcon: PropTypes.element,
-    unCheckedIcon: PropTypes.element,
-    labelMarginLeft: PropTypes.string,
-    checkBoxMarginBottom: PropTypes.string,
-    direction: PropTypes.oneOf(Object.values(DirectionMode)),
-    data: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
-}
-
-Checkbox.defaultProps = {
-    direction: 'vertical',
-    keyNames: {
-        id: 'id',
-        label: 'label',
-        checked: 'checked',
-        disabled: 'disabled',
-        ignoreDisabledForChecked: 'ignoreDisabledForChecked',
-    },
-}