@xaypay/tui 0.0.52 → 0.0.54

package/src/components/tooltip/index.js

@@ -0,0 +1,120 @@
+import React, { useState, useEffect, createRef } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { compereConfigs } from "./../../utils";
+
+// import ReactInfoIcon from './../../assets/icons/tooltip.svg';
+
+import styles from "./tooltip.module.css";
+
+export const Tooltip = ({
+    type,
+    text,
+    width,
+    color,
+    tIcon,
+    height,
+    bgColor,
+    fontSize,
+    tBgColor,
+    className,
+    fontFamily,
+    borderRadius,
+    tBorderRadius
+}) => {
+    const tooltipRef = createRef(null);
+    const [tooltipWidth, setTooltipWidth] = useState(0);
+    const [tooltipHeight, setTooltipHeight] = useState(0);
+    const [showTooltip, setShowTooltip] = useState(false);
+
+    const configStyles = compereConfigs();
+    const classProps = classnames(
+        styles['tooltip'],
+        className
+    );
+
+    useEffect(_ => {
+        if (!type && !text) {
+          alert('Add type and text on tooltip');
+        } else if (!type) {
+          alert('Add type on tooltip');
+        } else if (!text) {
+          alert('Add text on tooltip');
+        }
+        tooltipRef.current && tooltipRef.current.clientWidth && tooltipRef.current.clientWidth > 0 && setTooltipWidth(tooltipRef.current.clientWidth);
+        tooltipRef.current && tooltipRef.current.clientHeight && tooltipRef.current.clientHeight > 0 && setTooltipHeight(tooltipRef.current.clientHeight);
+    }, [type, text, tooltipWidth, tooltipRef]);
+
+    const handleShow = () => {
+        setShowTooltip(!showTooltip);
+    };
+
+    return (
+        <div
+            className={`${styles['tooltip-block']}`}
+            style={{
+                width: width ? width : configStyles.TOOLTIP.width,
+                height: height ? height : configStyles.TOOLTIP.height,
+                backgroundColor: bgColor ? bgColor : configStyles.TOOLTIP.bgColor,
+            }}
+        >
+            {
+                showTooltip ?
+                <div
+                    ref={tooltipRef}
+                    className={classProps}
+                    style={{
+                        backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.tBgColor,
+                        borderRadius: tBorderRadius ? tBorderRadius : configStyles.TOOLTIP.tBorderRadius,
+                        top: type === 'top' ? `calc(-${tooltipHeight + 7}px)` : type === 'bottom' ? 'calc(100% + 7px)' : type === 'left' || type === 'right' ? `calc(50% - ${tooltipHeight / 2}px)` : '0px',
+                        left: type === 'top' || type === 'bottom' ? `calc(50% - ${tooltipWidth / 2}px)` : type === 'left' ? `-${tooltipWidth + 7}px` : type === 'right' ? 'calc(100% + 7px)' : '0px'
+                    }}
+                >
+                    <div
+                        className={`${styles['tooltip-rel']}`}
+                    >
+                        <div
+                            className={`${styles['tooltip-decor']}`}
+                            style={{
+                                backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.bgColor,
+                                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,
+                                lineHeight: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
+                                fontFamily: fontFamily ? fontFamily : configStyles.TOOLTIP.fontFamily
+                            }}
+                        >
+                            { text }
+                        </p>
+                    </div>
+                </div>
+                : ''
+            }
+            
+            <div style={{cursor: 'pointer'}} onClick={handleShow}>
+                {/* {tIcon ? tIcon : <img src={ReactInfoIcon} alt="ReactInfoIcon" />} */}
+            </div>
+        </div>
+    );
+};
+
+Tooltip.propTypes = {
+    width: PropTypes.string,
+    color: PropTypes.string,
+    tIcon: PropTypes.element,
+    height: PropTypes.string,
+    bgColor: PropTypes.string,
+    tBgColor: PropTypes.string,
+    fontSize: PropTypes.string,
+    className: PropTypes.string,
+    fontFamily: PropTypes.string,
+    borderRadius: PropTypes.string,
+    tBorderRadius: PropTypes.string,
+    type: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+};

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

@@ -0,0 +1,46 @@
+.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: 50px;
+    min-height: 20px;
+    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

@@ -0,0 +1,30 @@
+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: 'bottom',
+    text: 'new tooltip'
+}
+  

package/src/components/typography/index.js

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import styles from './typography.module.css';
-import styled from "styled-components";
+
+import { compereConfigs } from "./../../utils";
 
 export const TypographyType = {
+	p: 'p',
 	h1: 'h1',
 	h2: 'h2',
 	h3: 'h3',
@@ -12,45 +13,65 @@ export const TypographyType = {
 	h5: 'h5',
 	h6: 'h6',
 	span: 'span',
-	p: 'p',
-	i: 'i',
 };
 
+export const Typography = ({
+	size,
+	color,
+	weight,
+	onClick,
+	variant,
+	children,
+	className,
+	...props
+}) => {
+	const configStyles = compereConfigs();
+	const classProps = classnames(className);
 
+	const [validVariant, setValidVariant] = useState(false);
+	const [style, setStyle] = useState({
+		fontSize: size ? size : configStyles.TYPOGRAPHY['fSize'+variant],
+		fontWeight: weight ? weight : configStyles.TYPOGRAPHY['fWeight'+variant]
+	});
 
-export const Typography = ({onClick, variant, className, color, bold, children, ...props }) => {
-	const classProps = classnames(className,'sizes-rem',bold ? 'bold': '');
-	const CustomTag = variant;
-	
-	// const Tag = ({ className, children }) => (
-	// 	<CustomTag
-	// 		className={className}
-	// 		{...props}
-	// 	>
-	// 		{children}
-	// 	</CustomTag>
-	// );
+	useEffect(() => {
+		if (!Object.values(TypographyType).includes(variant)) {
+			setValidVariant(true);
+		}
+	}, [variant]);
 
-	const StyledTypograpy = styled(CustomTag)`
-		${color ? 'color: '+color+';' : '' }
-		${bold ? 'font-weight: bold;' : '' }
-	`;
+	useEffect(() => {
+		if (color) {
+			setStyle(prev => {
+				return {
+					...prev,
+					color: color
+				}
+			})
+		}
+	}, [color]);
+
+	const tagT = React.createElement(
+		variant,
+		{
+			style,
+			...props,
+			className: classProps,
+			onClick: onClick ? onClick : _ => _,
+		},
+		[children]
+	);
 
 	return (
-		<StyledTypograpy className={classProps} onClick={onClick}> {children} </StyledTypograpy>
+		validVariant ? 'Please set Typography valid variant' : tagT
 	);
 };
 
 Typography.propTypes = {
-   variant: PropTypes.oneOf(Object.values(TypographyType)),
-   className: PropTypes.string,
-   bold: PropTypes.bool,
-   color: PropTypes.string,
-   onClick: PropTypes.func
-};
-
-Typography.defaultProps = {
-	variant: 'h1',
-	onClick: ()=> {
-	}
+	size: PropTypes.string,
+	color: PropTypes.string,
+	weight: PropTypes.string,
+	onClick: PropTypes.func,
+	className: PropTypes.string,
+	variant: PropTypes.oneOf(Object.values(TypographyType)).isRequired,
 };

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

@@ -1,4 +1,4 @@
-h1 {
+/* h1 {
     text-transform: uppercase;
     font-size: 70px;
     line-height: 78px;
@@ -54,9 +54,4 @@ span {
     line-height: 16px;
     font-weight: 500;
     color: #3C393E;
-}
-
-i {
-    font-family: icomoon;
-    font-style: inherit;
-}
+} */

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

@@ -8,24 +8,11 @@ export default {
 
 const staticTag = ['h1','h2','h3','h4','h5','h6','span','p']
 
-const Template = (args) => <>
-    <Typography {...args} >Dynamic Typography</Typography>
+export const Template = (args) => <>
+    <Typography {...args} variant="h1">Dynamic Typography</Typography>
 	{
 		staticTag.map((tag,key) => {
-			return <Typography key={key} variant={tag} >{tag}</Typography>;
+			return <Typography key={key} variant={tag} color={"#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase()}>{tag}</Typography>;
 		})
 	}
-    {/* <Typography variant="h1" >Test</Typography>
-    <Typography variant="h1" >Test</Typography>
-    <Typography variant="h1" >Test</Typography>
-    <Typography variant="h1" >Test</Typography>
-    <Typography variant="h1" >Test</Typography>
-    <Typography variant="h1" >Test</Typography> */}
 </>;
-
-export const Default = Template.bind({});
-Default.args = {
-    variant: 'h1',
-    onClick: ()=> {
-	}
-};

package/src/index.js

@@ -1,14 +1,15 @@
-export * from './components/button';
-export * from './components/typography';
-export * from './components/autocomplate';
-export * from './components/checkbox';
-export * from './components/icon/Icon';
+export * from './components/file';
+export * from './components/table';
+export * from './components/modal';
 export * from './components/input';
-export * from './components/pagination';
 export * from './components/radio';
+export * from './components/button';
+export * from './components/select';
+export * from './components/tooltip';
 export * from './components/captcha';
 export * from './components/stepper';
-export * from './components/select';
-export * from './components/file';
-export * from './components/modal';
-export * from './components/table';
+export * from './components/checkbox';
+export * from './components/icon/Icon';
+export * from './components/typography';
+export * from './components/pagination';
+export * from './components/autocomplate';

package/src/utils/index.js

@@ -0,0 +1,21 @@
+const _ = require('lodash');
+
+export const compereConfigs = () => {
+    let projectConfig = {};
+    let packageConfig = {};
+
+    try {
+        packageConfig = require('../tui.config.js');
+    } catch (error) {
+        // console.log(error, 'Package: tui.config.js file is not define');
+    }
+
+    try {
+        projectConfig = require('../../../../tui.config.js');
+    } catch (error) {
+        projectConfig = {};
+        // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
+    }
+
+    return _.merge(packageConfig, projectConfig);
+};

package/tui.config.js

@@ -0,0 +1,62 @@
+module.exports = {
+    BUTTON: {
+        width: '100%',
+        type: 'button',
+        height: '46px',
+        color: 'white',
+        border: 'none',
+        disabled: false,
+        fontSize: '16px',
+        cursor: 'pointer',
+        borderRadius: '6px',
+        contentWidth: false,
+        padding: '12px 20px',
+        boxSizing: 'border-box',
+        bgColor: 'rgba(0, 35, 106, 1)',
+        disabledThemeColor: 'rgba(60, 57, 62, 1)',
+        disabledThemeLineColor: 'rgba(60, 57, 62, 1)',
+        disabledThemeBgColor: 'rgba(238, 238, 238, 1)',
+        transition: 'background-color 240ms, color 240ms'
+    },
+    INPUT: {
+        type: 'text',
+        width: '100%',
+        radius: '6px',
+        height: '46px',
+        required: false,
+        disabled: false,
+        fontSize: '16px',
+        bgColor: 'white',
+        iconWidth: '64px',
+        autoComplete: 'off',
+        tooltipLeft: '-73px',
+        padding: '12px 15px',
+        boxSizing: 'border-box',
+        color: 'rgb(60, 57, 62)',
+        tooltipTop: 'calc(-50% - 30px)',
+        boxShadow: '0 0 0 2px #d1d1d1',
+        boxShadowHover: '0 0 0 2px #3c393e'
+    },
+    TOOLTIP: {
+        width: '46px',
+        height: '46px'
+    },
+    TYPOGRAPHY: {
+        fSizep: '13px',
+        fSizeh1: '70px',
+        fSizeh2: '50px',
+        fSizeh3: '38px',
+        fSizeh4: '24px',
+        fSizeh5: '20px',
+        fSizeh6: '14px',
+        fWeightp: '500',
+        fWeighth1: '400',
+        fWeighth2: '400',
+        fWeighth3: '400',
+        fWeighth4: '600',
+        fWeighth5: '600',
+        fWeighth6: '600',
+        fSizespan: '12px',
+        fWeightspan: '500',
+    }
+};

package/src/components/button/button.module.css

@@ -1,66 +0,0 @@
-.btn {
-    text-transform: none;
-    font-size: 16px;
-    line-height: 20px;
-    padding: 12px 20px;
-    border-radius: 6px;
-    border: none;
-    outline: none;
-    box-sizing: border-box;
-    transition: background-color 240ms, color 240ms;
-    overflow: hidden;
-    cursor: pointer;
-    min-height: 46px;
-    max-height: 46px;
-}
-
-.btn.full-size {
-    width: 100%;
-}
-
-.btn.content-size {
-    width: auto;
-}
-
-.btn.size-default {
-    
-}
-
-.btn.type-filled {
-    background-color: rgba(0, 35, 106, 1);
-    color: rgba(255, 255, 255, 1);
-}
-
-.btn.type-filled:hover {
-    background-color: rgba(0, 23, 69, 1);
-}
-
-.btn.type-filled:disabled {
-    background-color: rgba(238, 238, 238, 1);
-    color: rgba(60, 57, 62, 1);
-    pointer-events: none;
-}
-
-.btn.type-filled.with-icon {
-
-}
-
-.btn.type-outline {
-    background-color: rgba(255, 255, 255, 1);
-    box-shadow: 0 0 0 2px rgba(0, 35, 106, 1) inset;
-}
-
-.btn.type-outline:hover {
-    color: rgba(255, 255, 255, 1);
-    background-color: rgba(0, 23, 69, 1);
-}
-
-.btn.type-outline:disabled {
-    color: rgba(60, 57, 62, 1);
-    box-shadow: 0 0 0 2px rgba(238, 238, 238, 1) inset;
-    pointer-events: none;
-}
-
-.btn.type-outline.with-icon {
-
-}