@xaypay/tui 0.0.119 → 0.0.121

package/src/components/input/input.module.css

@@ -1,51 +0,0 @@
-.input-wrap {
-    width: 100%;
-    position: relative;
-}
-
-.input-content {
-    display: flex;
-    width: 100%;
-    appearance: none !important;
-    -webkit-appearance: none !important;
-}
-
-input:-webkit-autofill,
-input:-webkit-autofill:hover, 
-input:-webkit-autofill:focus, 
-input:-webkit-autofill:active  {
-    background-color: inherit !important;
-}
-
-input::-ms-reveal,
-input::-ms-clear {
-    display: none;
-}
-
-.error-message-show {
-    animation-name: error-show;
-    animation-fill-mode: forwards;
-}
-
-/* Works for Chrome, Safari, Edge, Opera */
-.inp-num::-webkit-outer-spin-button,
-.inp-num::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Works for Firefox */
-.inp-num[type="number"] {
-  -moz-appearance: textfield;
-}
-
-@keyframes error-show {
-    100% {
-        bottom: -20px;
-        transform: scale3d(1,1,1);
-        -webkit-transform: scale3d(1,1,1);
-        -moz-transform: scale3d(1,1,1);
-        -ms-transform: scale3d(1,1,1);
-        -o-transform: scale3d(1,1,1);
-    }
-}

package/src/components/input/input.stories.js

@@ -1,26 +0,0 @@
-import React, { useState } from 'react'
-import { Input, InputTypes } from './index'
-
-export default {
-    component: Input,
-    title: 'Components/Input',
-    argsType: {
-        change: {
-            control: { type: 'function' },
-        },
-    },
-}
-
-const Template = (args) => {
-    const [newVal, setNewVal] = useState('5.0100')
-    const handleChange = (val) => {
-        setNewVal(val)
-    }
-
-    return <Input value={newVal} change={handleChange} {...args} />
-}
-
-export const Default = Template.bind({})
-Default.args = {
-    type: InputTypes.TEXT,
-}

package/src/components/modal/index.js

@@ -1,436 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-
-import { compereConfigs, hasOwnerProperty } from './../../utils'
-import styles from './modal.module.css'
-
-import SvgNext from './../icon/Next'
-import SvgPrev from './../icon/Prev'
-import SvgZoom from './../icon/Zoom'
-import SvgCloseIcon from './../icon/CloseIcon'
-import SvgCloseSlide from './../icon/CloseSlide'
-
-export const Modal = ({
-    type,
-    data,
-    width,
-    radius,
-    height,
-    padding,
-    setShow,
-    zoomIcon,
-    selected,
-    children,
-    minWidth,
-    minHeight,
-    className,
-    mMaxWidth,
-    alignItems,
-    mMaxHeight,
-    headerText,
-    imageWidth,
-    headerSize,
-    imageHeight,
-    headerColor,
-    borderStyle,
-    borderWidth,
-    borderColor,
-    imageMargin,
-    showZoomIcon,
-    outsideClose,
-    headerWeight,
-    headerHeight,
-    imageMaxWidth,
-    justifyContent,
-    imageWrapWidth,
-    backgroundColor,
-    imageWrapHeight,
-    grayDecorHeight,
-    layerBackgroundColor,
-}) => {
-    const [select, setSelect] = useState(0)
-    const [isHover, setIsHover] = useState(false)
-    const [innerData, setInnerData] = useState([])
-
-    const configStyles = compereConfigs()
-    const classProps = classnames(className ? className : configStyles.MODAL.className)
-
-    const handleCloseModal = () => {
-        setShow(false)
-    }
-
-    const handleStopClosing = (e) => {
-        e.stopPropagation()
-    }
-
-    const handleGoTo = (goTo) => {
-        if (goTo === 'next') {
-            if (select >= data.length - 1) {
-                setSelect(0)
-            } else {
-                setSelect(select + 1)
-            }
-        } else {
-            if (select <= 0) {
-                setSelect(data.length - 1)
-            } else {
-                setSelect(select - 1)
-            }
-        }
-    }
-
-    const handleESC = (e) => {
-        if (e.key === 'Escape') {
-            handleCloseModal()
-        }
-    }
-
-    const handleOpenInNewTab = (url) => {
-        const imageLink = document.createElement('a')
-        ;(imageLink.href = url), (imageLink.target = '_blank')
-        imageLink.click()
-    }
-
-    const handleMouseEnter = () => {
-        setIsHover(true)
-    }
-
-    const handleMouseLeave = () => {
-        setIsHover(false)
-    }
-
-    useEffect(() => {
-        if (type === 'images') {
-            if (data) {
-                if (data.length === 0) {
-                    alert('Please fill data prop')
-                } else {
-                    setInnerData(data)
-                }
-            } else {
-                alert('Please add data prop on Modal component')
-            }
-        }
-    }, [type, data, data?.length])
-
-    useEffect(() => {
-        if (selected) {
-            if (selected <= 0) {
-                setSelect(0)
-            } else if (selected >= data.length - 1) {
-                setSelect(data.length - 1)
-            } else {
-                setSelect(selected)
-            }
-        }
-    }, [selected])
-
-    useEffect(() => {
-        document.addEventListener('keydown', handleESC, false)
-        return () => {
-            setSelect(0)
-            setInnerData([])
-            document.removeEventListener('keydown', handleESC, false)
-        }
-    }, [])
-
-    return (
-        <div
-            className={classProps}
-            onClick={outsideClose || configStyles.MODAL.outsideClose ? handleCloseModal : (_) => _}
-            style={{
-                top: '0px',
-                left: '0px',
-                zIndex: 999,
-                width: '100%',
-                height: '100vh',
-                position: 'fixed',
-                backgroundColor: layerBackgroundColor ? layerBackgroundColor : configStyles.MODAL.layerBackgroundColor,
-            }}
-        >
-            <div
-                style={{
-                    position: 'relative',
-                    display: 'flex',
-                    width: '100%',
-                    height: '100vh',
-                    alignItems: alignItems ? alignItems : configStyles.MODAL.alignItems,
-                    justifyContent: justifyContent ? justifyContent : configStyles.MODAL.justifyContent,
-                }}
-            >
-                <div
-                    className={`${styles['animation__modal']}`}
-                    onClick={handleStopClosing}
-                    style={{
-                        position: 'relative',
-                        boxSizing: 'border-box',
-                        display: type === 'content' ? 'grid' : 'block',
-                        width: width ? width : configStyles.MODAL.width,
-                        overflow: type === 'content' ? 'auto' : 'hidden',
-                        height: height ? height : configStyles.MODAL.height,
-                        gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
-                        borderRadius: radius ? radius : configStyles.MODAL.radius,
-                        maxWidth: mMaxWidth ? mMaxWidth : configStyles.MODAL.mMaxWidth,
-                        maxHeight: mMaxHeight ? mMaxHeight : configStyles.MODAL.mMaxHeight,
-                        minWidth: type === 'content' ? (minWidth ? minWidth : configStyles.MODAL.minWidth) : '',
-                        backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor,
-                        minHeight: type === 'content' ? (minHeight ? minHeight : configStyles.MODAL.minHeight) : '',
-                    }}
-                >
-                    {type === 'content' && (
-                        <div
-                            style={{
-                                width: '100%',
-                                minWidth: '0',
-                                display: 'flex',
-                                alignItems: 'center',
-                                boxSizing: 'border-box',
-                                backgroundColor: '#FBFBFB',
-                                padding: padding ? padding : configStyles.MODAL.padding,
-                                height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
-                                justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
-                            }}
-                        >
-                            {headerText && type === 'content' && (
-                                <p
-                                    style={{
-                                        flex: '1',
-                                        overflow: 'hidden',
-                                        whiteSpace: 'nowrap',
-                                        textOverflow: 'ellipsis',
-                                        margin: '0px 16px 0px 0px',
-                                        fontSize: headerSize ? headerSize : configStyles.MODAL.headerSize,
-                                        color: headerColor ? headerColor : configStyles.MODAL.headerColor,
-                                        fontWeight: headerWeight ? headerWeight : configStyles.MODAL.headerWeight,
-                                    }}
-                                >
-                                    {headerText}
-                                </p>
-                            )}
-                            <div
-                                onClick={handleCloseModal}
-                                style={{
-                                    width: '14px',
-                                    height: '14px',
-                                    cursor: 'pointer',
-                                }}
-                            >
-                                <SvgCloseIcon />
-                            </div>
-                        </div>
-                    )}
-
-                    <div
-                        style={{
-                            display: 'flex',
-                            width: '100%',
-                            height: '100%',
-                            position: 'relative',
-                            alignItems: 'center',
-                            boxSizing: 'border-box',
-                            justifyContent: 'center',
-                            overflow: type === 'content' ? 'auto' : 'hidden',
-                            borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
-                            borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
-                            borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor,
-                        }}
-                        onMouseEnter={handleMouseEnter}
-                        onMouseLeave={handleMouseLeave}
-                    >
-                        {type === 'content' ? (
-                            children ? (
-                                children
-                            ) : (
-                                ''
-                            )
-                        ) : (
-                            <>
-                                <div
-                                    style={{
-                                        position: 'absolute',
-                                        top: '0px',
-                                        left: '0px',
-                                        width: '100%',
-                                        borderTopLeftRadius: '6px',
-                                        borderTopRightRadius: '6px',
-                                        height: grayDecorHeight ? grayDecorHeight : configStyles.MODAL.grayDecorHeight,
-                                        backgroundImage: 'linear-gradient(rgb(60, 57, 62), rgba(60, 57, 62, 0))',
-                                    }}
-                                >
-                                    <button
-                                        onClick={handleCloseModal}
-                                        style={{
-                                            position: 'absolute',
-                                            zIndex: '1',
-                                            top: '20px',
-                                            width: '18px',
-                                            right: '20px',
-                                            height: '18px',
-                                            border: 'none',
-                                            padding: '0px',
-                                            outline: 'none',
-                                            cursor: 'pointer',
-                                            backgroundColor: 'transparent',
-                                        }}
-                                    >
-                                        <SvgCloseSlide />
-                                    </button>
-                                </div>
-                                <div
-                                    style={{
-                                        width: imageWrapWidth ? imageWrapWidth : configStyles.MODAL.imageWrapWidth,
-                                        height: imageWrapHeight ? imageWrapHeight : configStyles.MODAL.imageWrapHeight,
-                                    }}
-                                >
-                                    {innerData &&
-                                        innerData.length > 0 &&
-                                        innerData.map((item, index) => {
-                                            if (select === index) {
-                                                if (!hasOwnerProperty(item, 'url')) {
-                                                    alert('Please add url property in data prop on each element')
-                                                } else {
-                                                    return (
-                                                        <span key={`${item.url}_${item.id ? item.id : '007'}_${index}`}>
-                                                            <img
-                                                                style={{
-                                                                    display: 'block',
-                                                                    objectFit: 'cover',
-                                                                    objectPosition: 'center',
-                                                                    margin: imageMargin
-                                                                        ? imageMargin
-                                                                        : configStyles.MODAL.imageMargin,
-                                                                    borderRadius: radius
-                                                                        ? radius
-                                                                        : configStyles.MODAL.radius,
-                                                                    width: imageWidth
-                                                                        ? imageWidth
-                                                                        : configStyles.MODAL.imageWidth,
-                                                                    height: imageHeight
-                                                                        ? imageHeight
-                                                                        : configStyles.MODAL.imageHeight,
-                                                                    maxWidth: imageMaxWidth
-                                                                        ? imageMaxWidth
-                                                                        : configStyles.MODAL.imageMaxWidth,
-                                                                }}
-                                                                src={item.url}
-                                                            />
-                                                            {isHover && showZoomIcon ? (
-                                                                <div
-                                                                    style={{
-                                                                        top: '0px',
-                                                                        left: '0px',
-                                                                        zIndex: '10',
-                                                                        right: '0px',
-                                                                        bottom: '0px',
-                                                                        margin: 'auto',
-                                                                        display: 'flex',
-                                                                        maxWidth: '40px',
-                                                                        maxHeight: '40px',
-                                                                        cursor: 'pointer',
-                                                                        overflow: 'hidden',
-                                                                        position: 'absolute',
-                                                                        alignItems: 'center',
-                                                                        justifyContent: 'center',
-                                                                    }}
-                                                                    onClick={() => handleOpenInNewTab(item.url)}
-                                                                >
-                                                                    {zoomIcon ? zoomIcon : <SvgZoom />}
-                                                                </div>
-                                                            ) : (
-                                                                ''
-                                                            )}
-                                                        </span>
-                                                    )
-                                                }
-                                            }
-                                        })}
-
-                                    {innerData && innerData.length > 1 && (
-                                        <>
-                                            <button
-                                                onClick={() => handleGoTo('prev')}
-                                                style={{
-                                                    position: 'absolute',
-                                                    left: '14px',
-                                                    width: '24px',
-                                                    height: '24px',
-                                                    padding: '0px',
-                                                    border: 'none',
-                                                    outline: 'none',
-                                                    cursor: 'pointer',
-                                                    top: 'calc(50% - 12px)',
-                                                    backgroundColor: 'transparent',
-                                                }}
-                                            >
-                                                <SvgPrev />
-                                            </button>
-                                            <button
-                                                onClick={() => handleGoTo('next')}
-                                                style={{
-                                                    position: 'absolute',
-                                                    width: '24px',
-                                                    right: '14px',
-                                                    height: '24px',
-                                                    border: 'none',
-                                                    padding: '0px',
-                                                    outline: 'none',
-                                                    cursor: 'pointer',
-                                                    top: 'calc(50% - 12px)',
-                                                    backgroundColor: 'transparent',
-                                                }}
-                                            >
-                                                <SvgNext />
-                                            </button>
-                                        </>
-                                    )}
-                                </div>
-                            </>
-                        )}
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-Modal.propTypes = {
-    data: PropTypes.array,
-    type: PropTypes.string,
-    setShow: PropTypes.func,
-    width: PropTypes.string,
-    radius: PropTypes.string,
-    height: PropTypes.string,
-    padding: PropTypes.string,
-    selected: PropTypes.number,
-    minWidth: PropTypes.string,
-    mMaxWidth: PropTypes.string,
-    minHeight: PropTypes.string,
-    className: PropTypes.string,
-    zoomIcon: PropTypes.element,
-    alignItems: PropTypes.string,
-    mMaxHeight: PropTypes.string,
-    headerText: PropTypes.string,
-    imageWidth: PropTypes.string,
-    headerSize: PropTypes.string,
-    outsideClose: PropTypes.bool,
-    showZoomIcon: PropTypes.bool,
-    imageMargin: PropTypes.string,
-    borderStyle: PropTypes.string,
-    borderWidth: PropTypes.string,
-    headerColor: PropTypes.string,
-    imageHeight: PropTypes.string,
-    headerWeight: PropTypes.string,
-    headerHeight: PropTypes.string,
-    imageMaxWidth: PropTypes.string,
-    justifyContent: PropTypes.string,
-    imageWrapWidth: PropTypes.string,
-    backgroundColor: PropTypes.string,
-    grayDecorHeight: PropTypes.string,
-    imageWrapHeight: PropTypes.string,
-    layerBackgroundColor: PropTypes.string,
-}
-
-Modal.defaultProps = {
-    type: 'content',
-}

package/src/components/modal/modal.module.css

@@ -1,22 +0,0 @@
-.animation__modal {
-    animation: show-popup 150ms;
-    -webkit-animation: show-popup 150ms;
-}
-
-@keyframes show-popup {
-    0% {
-        transform: translate3d(0, -50%, 0);
-        -webkit-transform: translate3d(0, -50%, 0);
-        -moz-transform: translate3d(0, -50%, 0);
-        -ms-transform: translate3d(0, -50%, 0);
-        -o-transform: translate3d(0, -50%, 0);
-    }
-    100% {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-        -webkit-transform: translate3d(0, 0, 0);
-        -moz-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        -o-transform: translate3d(0, 0, 0);
-    }
-}

package/src/components/modal/modal.stories.js

@@ -1,88 +0,0 @@
-import React, { useState } from 'react'
-import { Modal } from './index'
-
-export default {
-    component: Modal,
-    title: 'Components/Modal',
-}
-
-const Template = ({ className }) => {
-    const [show, setShow] = useState(false)
-    const [type, setType] = useState('content')
-    const data = [
-        {
-            url: 'https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg&fm=jpg',
-            id: 1,
-        },
-        {
-            url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS8LHEGxt49kfpf7asGDZd5rnTjQMD0HF2WtJ3wKEDww&s',
-            id: 2,
-        },
-        {
-            url: 'https://s.alamy.com/kdawwlsweh27/2LtummpjO849eQ83yGGiUN/316e62a71020a924f9f663b6ca6b7eda/Fresh_Stock_Content.jpg?fm=jpg&q=100',
-            id: 3,
-        },
-        {
-            url: 'https://media.istockphoto.com/id/533899788/photo/mount-ararat-from-armenia.jpg?s=612x612&w=0&k=20&c=dB48gVwJq4UGCzdLpOsxDv9DniGQIOBdmli28zUXu0A=',
-            id: 4,
-        },
-        {
-            url: 'https://media.istockphoto.com/id/500221043/photo/cascade-yerevan.jpg?s=612x612&w=0&k=20&c=vaULCkIZaIbetZlkFnP20ELnD8cyhlc9cRsvt-X5YAk=',
-            id: 5,
-        },
-        {
-            url: 'https://images.unsplash.com/photo-1512850183-6d7990f42385?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8dmVydGljYWx8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
-            id: 6,
-        },
-        {
-            url: './../../assets/figma-image.png',
-            id: 7,
-        },
-    ]
-
-    const handleClick = () => {
-        setShow(true)
-    }
-
-    const handleChangeType = () => {
-        if (type === 'content') {
-            setType('images')
-        } else {
-            setType('content')
-        }
-    }
-
-    return (
-        <>
-            <button
-                onClick={handleClick}
-                style={{ cursor: 'pointer', padding: '8px', fontSize: '16px', marginRight: '10px' }}
-            >
-                Click
-            </button>
-            <button onClick={handleChangeType} style={{ cursor: 'pointer', padding: '8px', fontSize: '16px' }}>
-                Change type to {type === 'content' ? 'images' : 'content'}
-            </button>
-            {show && (
-                <Modal type={type} selected={0} showZoomIcon data={data} setShow={setShow} className={className}>
-                    <div
-                        style={{
-                            width: '400px',
-                            height: '500px',
-                            backgroundColor: 'red',
-                        }}
-                    >
-                        just test
-                    </div>
-                </Modal>
-            )}
-        </>
-    )
-}
-
-export const Default = Template.bind({})
-
-Default.args = {
-    headerText: 'Modal header text',
-    className: 'Modal',
-}