@xaypay/tui 0.0.119 → 0.0.121

package/src/components/tooltip/index.js

@@ -1,156 +0,0 @@
-import React, { useState, useEffect, createRef } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { compereConfigs } from './../../utils'
-
-import ReactInfoIcon from './../icon/Tooltip'
-
-import styles from './tooltip.module.css'
-
-export const Tooltip = ({
-    type,
-    text,
-    width,
-    color,
-    height,
-    radius,
-    fontSize,
-    className,
-    fontFamily,
-    tooltipIcon,
-    tooltipWidth,
-    tooltipRadius,
-    backgroundColor,
-    tooltipBackgroundColor,
-}) => {
-    const tooltipRef = createRef(null)
-    const [checkTooltipWidth, setCheckTooltipWidth] = useState(0)
-    const [checkTooltipHeight, setCheckTooltipHeight] = useState(0)
-    const [showTooltip, setShowTooltip] = useState(false)
-
-    const configStyles = compereConfigs()
-    const classProps = classnames(styles['tooltip-block'], className ? className : configStyles.TOOLTIP.className)
-
-    const handleShow = () => {
-        setShowTooltip(!showTooltip)
-    }
-
-    useEffect(() => {
-        if (!text) {
-            alert('Add text on tooltip')
-        }
-        tooltipRef.current &&
-            tooltipRef.current.clientWidth &&
-            tooltipRef.current.clientWidth > 0 &&
-            setCheckTooltipWidth(tooltipRef.current.clientWidth)
-        tooltipRef.current &&
-            tooltipRef.current.clientHeight &&
-            tooltipRef.current.clientHeight > 0 &&
-            setCheckTooltipHeight(tooltipRef.current.clientHeight)
-    }, [text, tooltipRef, checkTooltipWidth, checkTooltipHeight])
-
-    return (
-        <div
-            className={classProps}
-            style={{
-                width: width ? width : configStyles.TOOLTIP.width,
-                height: height ? height : configStyles.TOOLTIP.height,
-                borderRadius: radius ? radius : configStyles.TOOLTIP.radius,
-                backgroundColor: backgroundColor ? backgroundColor : configStyles.TOOLTIP.backgroundColor,
-            }}
-        >
-            {showTooltip ? (
-                <div
-                    ref={tooltipRef}
-                    className={`${styles['tooltip']}`}
-                    style={{
-                        width: tooltipWidth ? tooltipWidth : configStyles.TOOLTIP.tooltipWidth,
-                        borderRadius: tooltipRadius ? tooltipRadius : configStyles.TOOLTIP.tooltipRadius,
-                        backgroundColor: tooltipBackgroundColor
-                            ? tooltipBackgroundColor
-                            : configStyles.TOOLTIP.tooltipBackgroundColor,
-                        top:
-                            type === 'top'
-                                ? `calc(-${checkTooltipHeight + 7}px)`
-                                : type === 'bottom'
-                                ? 'calc(100% + 7px)'
-                                : type === 'left' || type === 'right'
-                                ? `calc(50% - ${checkTooltipHeight / 2}px)`
-                                : '0px',
-                        left:
-                            type === 'top' || type === 'bottom'
-                                ? `calc(50% - ${checkTooltipWidth / 2}px)`
-                                : type === 'left'
-                                ? `-${checkTooltipWidth + 7}px`
-                                : type === 'right'
-                                ? 'calc(100% + 7px)'
-                                : '0px',
-                    }}
-                >
-                    <div className={`${styles['tooltip-rel']}`}>
-                        <div
-                            className={`${styles['tooltip-decor']}`}
-                            style={{
-                                backgroundColor: tooltipBackgroundColor
-                                    ? tooltipBackgroundColor
-                                    : configStyles.TOOLTIP.tooltipBackgroundColor,
-                                left:
-                                    type === 'top' || type === 'bottom'
-                                        ? 'calc(50% - 5px)'
-                                        : type === 'right'
-                                        ? '-15px'
-                                        : type === 'left'
-                                        ? 'calc(100% + 5px)'
-                                        : '0px',
-                                top:
-                                    type === 'top'
-                                        ? 'calc(100% + 5px)'
-                                        : type === 'bottom'
-                                        ? '-15px'
-                                        : type === 'right' || type === 'left'
-                                        ? 'calc(50% - 5px)'
-                                        : '0px',
-                            }}
-                        ></div>
-                        <p
-                            style={{
-                                color: color ? color : configStyles.TOOLTIP.color,
-                                fontSize: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
-                                fontFamily: fontFamily ? fontFamily : configStyles.TOOLTIP.fontFamily,
-                            }}
-                        >
-                            {text}
-                        </p>
-                    </div>
-                </div>
-            ) : (
-                ''
-            )}
-
-            <div style={{ cursor: 'pointer' }} onClick={handleShow}>
-                {tooltipIcon ? tooltipIcon : <ReactInfoIcon />}
-            </div>
-        </div>
-    )
-}
-
-Tooltip.propTypes = {
-    type: PropTypes.string,
-    width: PropTypes.string,
-    color: PropTypes.string,
-    height: PropTypes.string,
-    radius: PropTypes.string,
-    fontSize: PropTypes.string,
-    className: PropTypes.string,
-    fontFamily: PropTypes.string,
-    tooltipWidth: PropTypes.string,
-    tooltipIcon: PropTypes.element,
-    tooltipRadius: PropTypes.string,
-    text: PropTypes.string.isRequired,
-    backgroundColor: PropTypes.string,
-    tooltipBackgroundColor: PropTypes.string,
-}
-
-Tooltip.defaultProps = {
-    type: 'top',
-}

package/src/components/tooltip/tooltip.module.css

@@ -1,46 +0,0 @@
-.tooltip-block {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.tooltip {
-    position: absolute;
-    z-index: 1;
-    padding: 10px;
-}
-  
-.tooltip-rel {
-    position: relative;
-    display: flex;
-    width: auto;
-    height: auto;
-    min-width: 30px;
-    min-height: 10px;
-    align-items: center;
-    justify-content: center;
-    border-radius: 5px;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    -ms-border-radius: 5px;
-    -o-border-radius: 5px;
-}
-  
-.tooltip-decor {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    z-index: -1;
-    border-radius: 2px;
-    -webkit-border-radius: 2px;
-    -moz-border-radius: 2px;
-    -ms-border-radius: 2px;
-    -o-border-radius: 2px;
-    transform: rotate(45deg);
-    -webkit-transform: rotate(45deg);
-    -moz-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    -o-transform: rotate(45deg);
-}
-  

package/src/components/tooltip/tooltip.stories.js

@@ -1,30 +0,0 @@
-import React from 'react'
-
-import { Tooltip } from './index'
-
-export default {
-    component: Tooltip,
-    title: 'Components/Tooltip',
-}
-
-const Template = (args) => {
-    return (
-        <div
-            style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: 'calc(100vh - 32px)',
-            }}
-        >
-            <Tooltip {...args} />
-        </div>
-    )
-}
-
-export const Default = Template.bind({})
-Default.args = {
-    type: 'top',
-    text: 'new tooltip',
-    tooltipWidth: '300px',
-}

package/src/components/typography/index.js

@@ -1,124 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-
-import { compereConfigs } from './../../utils'
-
-export const TypographyType = {
-    p: 'p',
-    h1: 'h1',
-    h2: 'h2',
-    h3: 'h3',
-    h4: 'h4',
-    h5: 'h5',
-    h6: 'h6',
-    span: 'span',
-}
-
-export const Typography = ({
-    size,
-    color,
-    weight,
-    radius,
-    border,
-    cursor,
-    variant,
-    onClick,
-    children,
-    textAlign,
-    fontStyle,
-    className,
-    textShadow,
-    lineHeight,
-    colorHover,
-    fontFamily,
-    textTransform,
-    textDecoration,
-    backgroundColor,
-    ...props
-}) => {
-    const configStyles = compereConfigs()
-    const classProps = classnames(className ? className : configStyles.TYPOGRAPHY.className)
-
-    const [isHover, setIsHover] = useState(false)
-    const [validVariant, setValidVariant] = useState(false)
-
-    useEffect(() => {
-        if (!Object.values(TypographyType).includes(variant)) {
-            setValidVariant(true)
-        }
-    }, [variant])
-
-    const handleMouseEnter = () => {
-        setIsHover(true)
-    }
-
-    const handleMouseLeave = () => {
-        setIsHover(false)
-    }
-
-    const tagT = React.createElement(
-        variant,
-        {
-            style: {
-                border: border ? border : configStyles.TYPOGRAPHY.border,
-                cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
-                borderRadius: radius ? radius : configStyles.TYPOGRAPHY.radius,
-                fontSize: size ? size : configStyles.TYPOGRAPHY['size' + variant],
-                fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight' + variant],
-                textShadow: textShadow ? textShadow : configStyles.TYPOGRAPHY.textShadow,
-                textAlign: textAlign ? textAlign : configStyles.TYPOGRAPHY['textAlign' + variant],
-                fontStyle: fontStyle ? fontStyle : configStyles.TYPOGRAPHY['fontStyle' + variant],
-                lineHeight: lineHeight ? lineHeight : configStyles.TYPOGRAPHY['lineHeight' + variant],
-                fontFamily: fontFamily ? fontFamily : configStyles.TYPOGRAPHY['fontFamily' + variant],
-                textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform' + variant],
-                textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration' + variant],
-                backgroundColor: backgroundColor
-                    ? backgroundColor
-                    : configStyles.TYPOGRAPHY['backgroundColor' + variant],
-                color: isHover
-                    ? colorHover
-                        ? colorHover
-                        : color
-                        ? color
-                        : configStyles.TYPOGRAPHY['color' + variant]
-                    : color
-                    ? color
-                    : configStyles.TYPOGRAPHY['color' + variant],
-            },
-            ...props,
-            className: classProps,
-            onClick: onClick ? onClick : (_) => _,
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-        },
-        [children]
-    )
-
-    return validVariant ? 'Please set Typography valid variant' : tagT
-}
-
-Typography.propTypes = {
-    color: PropTypes.string,
-    onClick: PropTypes.func,
-    weight: PropTypes.string,
-    border: PropTypes.string,
-    cursor: PropTypes.string,
-    radius: PropTypes.string,
-    textAlign: PropTypes.string,
-    className: PropTypes.string,
-    fontStyle: PropTypes.string,
-    lineHeight: PropTypes.string,
-    textShadow: PropTypes.string,
-    fontFamily: PropTypes.string,
-    colorHover: PropTypes.string,
-    textTransform: PropTypes.string,
-    textDecoration: PropTypes.string,
-    backgroundColor: PropTypes.string,
-    variant: PropTypes.oneOf(Object.values(TypographyType)),
-    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-}
-
-Typography.defaultProps = {
-    variant: 'p',
-}

package/src/components/typography/typography.module.css

@@ -1,57 +0,0 @@
-/* h1 {
-    text-transform: uppercase;
-    font-size: 70px;
-    line-height: 78px;
-    font-weight: 400;
-}
-
-h2 {
-    text-transform: uppercase;
-    font-size: 50px;
-    line-height: 56px;
-    font-weight: 400;
-}
-
-h3 {
-    text-transform: uppercase;
-    font-size: 38px;
-    line-height: 44px;
-    font-weight: 400;
-}
-
-h4 {
-    text-transform: uppercase;
-    font-size: 24px;
-    line-height: 28px;
-    font-weight: 600;
-}
-
-h5 {
-    text-transform: uppercase;
-    font-size: 20px;
-    line-height: 26px;
-    font-weight: 600;
-}
-
-h6 {
-    text-transform: none;
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 600;
-}
-
-p {
-    text-transform: none;
-    font-size: 13px;
-    line-height: 18px;
-    font-weight: 500;
-    color: #3C393E;
-}
-
-span {
-    text-transform: none;
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 500;
-    color: #3C393E;
-} */

package/src/components/typography/typography.stories.js

@@ -1,22 +0,0 @@
-import React from 'react'
-import { Typography } from './index'
-
-export default {
-    component: Typography,
-    title: 'Components/Typography',
-}
-
-const staticTag = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'p']
-
-export const Template = (args) => (
-    <>
-        <Typography {...args}>Dynamic Typography</Typography>
-        {staticTag.map((tag, key) => {
-            return (
-                <Typography {...args} key={key} variant={tag} color="#a3d177">
-                    {tag}
-                </Typography>
-            )
-        })}
-    </>
-)

package/src/index.js

@@ -1,19 +0,0 @@
-export * from './components/file'
-export * from './components/table'
-export * from './components/modal'
-export * from './components/input'
-export * from './components/radio'
-export * from './components/button'
-export * from './components/select'
-export * from './components/toaster'
-export * from './components/tooltip'
-export * from './components/captcha'
-export * from './components/stepper'
-export * from './components/newFile'
-export * from './components/checkbox'
-export * from './components/textarea'
-export * from './components/icon/Icon'
-export * from './components/typography'
-export * from './components/pagination'
-export * from './components/autocomplate'
-export * from './components/newAutocomplete'

package/src/stories/Introduction.stories.mdx

@@ -1,210 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-import Code from "./assets/code-brackets.svg";
-import Colors from "./assets/colors.svg";
-import Comments from "./assets/comments.svg";
-import Direction from "./assets/direction.svg";
-import Flow from "./assets/flow.svg";
-import Plugin from "./assets/plugin.svg";
-import Repo from "./assets/repo.svg";
-import StackAlt from "./assets/stackalt.svg";
-
-<Meta title="Intro/Introduction" />
-
-<style>
-    {`
-    .subheading {
-      --mediumdark: '#999999';
-      font-weight: 900;
-      font-size: 13px;
-      color: #999;
-      letter-spacing: 6px;
-      line-height: 24px;
-      text-transform: uppercase;
-      margin-bottom: 12px;
-      margin-top: 40px;
-    }
-
-    .link-list {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 0fr;
-      row-gap: 10px;
-    }
-
-    @media (min-width: 620px) {
-      .link-list {
-        row-gap: 20px;
-        column-gap: 20px;
-        grid-template-columns: 1fr 1fr;
-      }
-    }
-
-    @media all and (-ms-high-contrast:none) {
-    .link-list {
-        display: -ms-grid;
-        -ms-grid-columns: 1fr 0fr;
-        -ms-grid-rows: 1fr 0fr;
-      }
-    }
-
-    .link-item {
-      display: block;
-      padding: 20px 30px 20px 15px;
-      border: 1px solid #00000010;
-      border-radius: 5px;
-      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-      color: #333333;
-      display: flex;
-      align-items: flex-start;
-    }
-
-    .link-item:hover {
-      border-color: #1EA7FD50;
-      transform: translate3d(0, -3px, 0);
-      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-    }
-
-    .link-item:active {
-      border-color: #1EA7FD;
-      transform: translate3d(0, 0, 0);
-    }
-
-    .link-item strong {
-      font-weight: 700;
-      display: block;
-      margin-bottom: 2px;
-    }
-
-    .link-item img {
-      height: 40px;
-      width: 40px;
-      margin-right: 15px;
-      flex: none;
-    }
-
-    .link-item span {
-      font-size: 14px;
-      line-height: 20px;
-    }
-
-    .tip {
-      display: inline-block;
-      border-radius: 1em;
-      font-size: 11px;
-      line-height: 12px;
-      font-weight: 700;
-      background: #E7FDD8;
-      color: #66BF3C;
-      padding: 4px 12px;
-      margin-right: 10px;
-      vertical-align: top;
-    }
-
-    .tip-wrapper {
-      font-size: 13px;
-      line-height: 20px;
-      margin-top: 40px;
-      margin-bottom: 40px;
-    }
-
-    .tip-wrapper code {
-      font-size: 12px;
-      display: inline-block;
-    }
-  `}
-</style>
-
-# Welcome to TUI
-
-TUI provides a lot of UI components to enrich your web applications, and we will improve components experience consistently
-
-TUI is fully configurable. You can change color, size, border and etc... Yes. You can configurable what you want. box-shadow on hover as well )))) 
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-    <a className="link-item" href="https://storybook.js.org/docs/react/addons/addon-types" target="_blank">
-        <img src={Plugin} alt="plugin" />
-        <span>
-            <strong>Presets for popular tools</strong>
-            Easy setup for TypeScript, SCSS and more.
-        </span>
-    </a>
-    <a className="link-item" href="../?path=/story/intro-configuration--page">
-        <img src={StackAlt} alt="Build" />
-        <span>
-            <strong>Build configuration</strong>
-            How to customize TUI
-        </span>
-    </a>
-    
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-    <a className="link-item" href="../?path=/docs/intro-documentation--page">
-        <img src={Repo} alt="repo" />
-        <span>
-            <strong>TUI documentation</strong>
-            Configure, customize, and extend
-        </span>
-    </a>
-    <a className="link-item" href="http://gitlab.yerevan.am/rubo/tui" target="_blank">
-        <img src={Code} alt="code" />
-        <span>
-            <strong>GitHub project</strong>
-            View the source and add issues
-        </span>
-    </a>
-</div>
-
-<div className="link-list">
-    <a className="link-item" href="../?path=/docs/intro-usage--page">
-        <img src={Code} alt="code" />
-        <span>
-            <strong>TUI usage</strong>
-            Configure, customize, and extend
-        </span>
-    </a>
-</div>
-
-<!--
-<a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-        <img src={Direction} alt="direction" />
-        <span>
-            <strong>In-depth guides</strong>
-            Best practices from leading teams
-        </span>
-    </a>
-<a className="link-item" href="https://discord.gg/storybook" target="_blank">
-        <img src={Comments} alt="comments" />
-        <span>
-            <strong>Discord chat</strong>
-            Chat with maintainers and the community
-        </span>
-    </a> 
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>stories/Introduction.stories.mdx</code>
-</div>
-
-<a className="link-item" href="https://storybook.js.org/docs/react/configure/styling-and-css" target="_blank">
-        <img src={Colors} alt="colors" />
-        <span>
-            <strong>Styling</strong>
-            How to load and configure CSS libraries
-        </span>
-    </a>
-    <a
-        className="link-item"
-        href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-        target="_blank"
-    >
-        <img src={Flow} alt="flow" />
-        <span>
-            <strong>Data</strong>
-            Providers and mocking for data libraries
-        </span>
-    </a>
--->

package/src/stories/assets/code-brackets.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>