@xaypay/tui 0.0.55 → 0.0.57

package/src/components/tooltip/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { compereConfigs } from "./../../utils";
 
-// import ReactInfoIcon from './../../assets/icons/tooltip.svg';
+import ReactInfoIcon from './../../assets/icons/tooltip.svg';
 
 import styles from "./tooltip.module.css";
 
@@ -12,19 +12,20 @@ export const Tooltip = ({
     text,
     width,
     color,
-    tIcon,
     height,
-    bgColor,
+    radius,
     fontSize,
-    tBgColor,
     className,
     fontFamily,
-    borderRadius,
-    tBorderRadius
+    tooltipIcon,
+    tooltipWidth,
+    tooltipRadius,
+    backgroundColor,
+    tooltipBackgroundColor
 }) => {
     const tooltipRef = createRef(null);
-    const [tooltipWidth, setTooltipWidth] = useState(0);
-    const [tooltipHeight, setTooltipHeight] = useState(0);
+    const [checkTooltipWidth, setCheckTooltipWidth] = useState(0);
+    const [checkTooltipHeight, setCheckTooltipHeight] = useState(0);
     const [showTooltip, setShowTooltip] = useState(false);
 
     const configStyles = compereConfigs();
@@ -33,29 +34,26 @@ export const 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);
     };
 
+    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={`${styles['tooltip-block']}`}
             style={{
                 width: width ? width : configStyles.TOOLTIP.width,
                 height: height ? height : configStyles.TOOLTIP.height,
-                backgroundColor: bgColor ? bgColor : configStyles.TOOLTIP.bgColor,
+                borderRadius: radius ? radius : configStyles.TOOLTIP.radius,
+                backgroundColor: backgroundColor ? backgroundColor : configStyles.TOOLTIP.backgroundColor,
             }}
         >
             {
@@ -64,10 +62,11 @@ export const Tooltip = ({
                     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'
+                        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
@@ -76,7 +75,7 @@ export const Tooltip = ({
                         <div
                             className={`${styles['tooltip-decor']}`}
                             style={{
-                                backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.bgColor,
+                                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'
                             }}
@@ -85,7 +84,6 @@ export const Tooltip = ({
                             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
                             }}
                         >
@@ -97,24 +95,29 @@ export const Tooltip = ({
             }
             
             <div style={{cursor: 'pointer'}} onClick={handleShow}>
-                {/* {tIcon ? tIcon : <img src={ReactInfoIcon} alt="ReactInfoIcon" />} */}
+                {tooltipIcon ? tooltipIcon : <img src={ReactInfoIcon} />}
             </div>
         </div>
     );
 };
 
 Tooltip.propTypes = {
+    type: PropTypes.string,
     width: PropTypes.string,
     color: PropTypes.string,
-    tIcon: PropTypes.element,
     height: PropTypes.string,
-    bgColor: PropTypes.string,
-    tBgColor: PropTypes.string,
+    radius: PropTypes.string,
     fontSize: PropTypes.string,
     className: PropTypes.string,
     fontFamily: PropTypes.string,
-    borderRadius: PropTypes.string,
-    tBorderRadius: PropTypes.string,
-    type: PropTypes.string.isRequired,
+    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

@@ -16,8 +16,8 @@
     display: flex;
     width: auto;
     height: auto;
-    min-width: 50px;
-    min-height: 20px;
+    min-width: 30px;
+    min-height: 10px;
     align-items: center;
     justify-content: center;
     border-radius: 5px;

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

@@ -24,7 +24,8 @@ const Template = (args) => {
 
 export const Default = Template.bind({});
 Default.args = {
-    type: 'bottom',
-    text: 'new tooltip'
+    type: 'top',
+    text: 'new tooltip',
+    tooltipWidth: '300px'
 }
   

package/src/components/typography/index.js

@@ -25,7 +25,6 @@ export const Typography = ({
 	margin,
 	padding,
 	variant,
-	bgColor,
 	onClick,
 	children,
 	textAlign,
@@ -37,6 +36,7 @@ export const Typography = ({
 	fontFamily,
 	textTransform,
 	textDecoration,
+	backgroundColor,
 	...props
 }) => {
 	const configStyles = compereConfigs();
@@ -44,25 +44,6 @@ export const Typography = ({
 
 	const [isHover, setIsHover] = useState(false);
 	const [validVariant, setValidVariant] = useState(false);
-	const [style, setStyle] = useState({
-		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],
-		margin: margin ? margin : configStyles.TYPOGRAPHY['margin'+variant],
-		fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight'+variant],
-		padding: padding ? padding : configStyles.TYPOGRAPHY['padding'+variant],
-		textShadow: textShadow ? textShadow : configStyles.TYPOGRAPHY.textShadow,
-		textAlign: textAlign ? textAlign : configStyles.TYPOGRAPHY['textAlign'+variant],
-		backgroundColor: bgColor ? bgColor : configStyles.TYPOGRAPHY['bgColor'+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],
-		color: isHover ? colorHover ? colorHover : configStyles.TYPOGRAPHY['colorHover'+variant] : color ? color : configStyles.TYPOGRAPHY['color'+variant],
-
-	});
 
 	useEffect(() => {
 		if (!Object.values(TypographyType).includes(variant)) {
@@ -70,17 +51,6 @@ export const Typography = ({
 		}
 	}, [variant]);
 
-	useEffect(() => {
-		if (color) {
-			setStyle(prev => {
-				return {
-					...prev,
-					color: color
-				}
-			})
-		}
-	}, [color]);
-
 	const handleMouseEnter = () => {
 		setIsHover(true);
 	};
@@ -92,7 +62,24 @@ export const Typography = ({
 	const tagT = React.createElement(
 		variant,
 		{
-			style,
+			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],
+				margin: margin ? margin : configStyles.TYPOGRAPHY['margin'+variant],
+				fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight'+variant],
+				padding: padding ? padding : configStyles.TYPOGRAPHY['padding'+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 : configStyles.TYPOGRAPHY['colorHover'+variant] : color ? color : configStyles.TYPOGRAPHY['color'+variant],
+			},
 			...props,
 			className: classProps,
 			onClick: onClick ? onClick : _ => _,
@@ -117,7 +104,6 @@ Typography.propTypes = {
 	cursor: PropTypes.string,
 	margin: PropTypes.string,
 	radius: PropTypes.string,
-	bgColor: PropTypes.string,
 	padding: PropTypes.string,
 	textAlign: PropTypes.string,
 	className: PropTypes.string,
@@ -128,5 +114,10 @@ Typography.propTypes = {
 	colorHover: PropTypes.string,
 	textTransform: PropTypes.string,
 	textDecoration: PropTypes.string,
-	variant: PropTypes.oneOf(Object.values(TypographyType)).isRequired,
-};
+	backgroundColor: PropTypes.string,
+	variant: PropTypes.oneOf(Object.values(TypographyType)),
+};
+
+Typography.defaultProps = {
+	variant: 'p'
+};

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

@@ -9,7 +9,7 @@ export default {
 const staticTag = ['h1','h2','h3','h4','h5','h6','span','p']
 
 export const Template = (args) => <>
-    <Typography {...args}>Dynamic Typography</Typography>
+    <Typography {...args} >Dynamic Typography</Typography>
 	{
 		staticTag.map((tag,key) => {
 			return <Typography

package/src/stories/Introduction.stories.mdx

@@ -159,6 +159,16 @@ TUI is fully configurable. You can change color, size, border and etc... Yes. Yo
     </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" />

package/src/stories/configuration.stories.mdx

@@ -139,10 +139,10 @@ import StackAlt from './assets/stackalt.svg';
     padding: '12px 20px',                              // for padding
     textTransform: 'none',                             // for text transform
     boxSizing: 'border-box',                           // for box sizing
-    bgColor: 'rgba(0, 35, 106, 1)',                    // for background color
     disabledColor: 'rgba(60, 57, 62, 1)',              // for color in disabled mode
+    backgroundColor: 'rgba(0, 35, 106, 1)',            // for background color
     disabledLineColor: 'rgba(60, 57, 62, 1)',          // for border color (outline) in disabled mode
-    disabledBgColor: 'rgba(238, 238, 238, 1)',         // for background color in disabled mode
+    disabledBackgroundColor: 'rgba(238, 238, 238, 1)', // for background color in disabled mode
     transition: 'background-color 240ms, color 240ms', // for transition
 },
 ```
@@ -157,7 +157,6 @@ import StackAlt from './assets/stackalt.svg';
     radius: '0px',                                     // for input and also (if there exist left or right icons) icons block border-radius
     className: '',                                     // for input classname (you can set custom class for your custom css)
     height: '46px',                                    // for height
-    tooltip: false,                                    // for tooltip
     required: false,                                   // for showing required mark on label (it meens input is required)
     disabled: false,                                   // for disabled
     errorLeft: '0px',                                  // for error message position from left (work when errorPosition prop is 'absolute')
@@ -188,6 +187,24 @@ import StackAlt from './assets/stackalt.svg';
 }
 ```
 
+### Tooltip
+```
+{
+    type: 'top',                                       // for tooltip type (top, right, bottom, left)
+    width: '46px',                                     // for tooltip parent block width
+    radius: '0px',                                     // for tooltip parent block border radius
+    className: '',                                     // for tooltip className (maybe you want to add your custom class for your custom css)
+    color: 'white',                                    // for tooltip color
+    height: '46px',                                    // for tooltip parent block height
+    fontSize: '14px',                                  // for tooltip font size
+    tooltipRadius: '3px',                              // for tooltip border radius
+    tooltipWidth: '100px',                             // for tooltip width
+    backgroundColor: 'transparent',                    // for tooltip parent block background color (maybe you want to see it)
+    fontFamily: 'Arial, sans-serif',                   // for tooltip font family
+    tooltipBackgroundColor: '#03a9f4'                  // for tooltip backgrond color
+}
+```
+
 ### Typography
 
 ```
@@ -260,14 +277,14 @@ import StackAlt from './assets/stackalt.svg';
     colorHoverh6: '#3C393E',                           // for variant h6 color in hover mode
     colorHoverspan: '#3C393E',                         // for variant span color in hover mode
 
-    bgColorp: 'transparent',                           // for variant p background color
-    bgColorh1: 'transparent',                          // for variant h1 background color
-    bgColorh2: 'transparent',                          // for variant h2 background color
-    bgColorh3: 'transparent',                          // for variant h3 background color
-    bgColorh4: 'transparent',                          // for variant h4 background color
-    bgColorh5: 'transparent',                          // for variant h5 background color
-    bgColorh6: 'transparent',                          // for variant h6 background color
-    bgColorspan: 'transparent',                        // for variant span background color
+    backgroundColorp: 'transparent',                   // for variant p background color
+    backgroundColorh1: 'transparent',                  // for variant h1 background color
+    backgroundColorh2: 'transparent',                  // for variant h2 background color
+    backgroundColorh3: 'transparent',                  // for variant h3 background color
+    backgroundColorh4: 'transparent',                  // for variant h4 background color
+    backgroundColorh5: 'transparent',                  // for variant h5 background color
+    backgroundColorh6: 'transparent',                  // for variant h6 background color
+    backgroundColorspan: 'transparent',                // for variant span background color
 
     textDecorationp: 'none',                           // for variant p text decoration
     textDecorationh1: 'none',                          // for variant h1 text decoration
@@ -315,3 +332,51 @@ import StackAlt from './assets/stackalt.svg';
     fontFamilyspan: 'Arial, sans-serif',               // for variant span font family
 }
 ```
+
+### Select
+
+```
+{
+    labelWeight: '500',                                // for label font weight
+    labelColor: '#3C393E',                             // for label color
+    labelDisplay: 'block',                             // for label display
+    labelFontSize: '16px',                             // for label font size
+    labelLineHeight: '22px',                           // for label line height
+    labelMarginBottom: '6px',                          // for label margin bottom
+    labelTextTransform: 'none',                        // for label text transform
+
+    errorSize: '14px',                                 // for error font size
+    errorColor: 'rgb(238, 0, 0)',                      // for error color
+
+    cursor: 'pointer',                                 // for selected cursor
+    selectedRadius: '6px',                             // for selected border radius
+    selectedHeight: '46px',                            // for selected height
+    selectedColor: '#3C393E',                          // for selected color
+    selectedFontSize: '16px',                          // for selected font size
+    selectedFontWeight: '500',                         // for selected font weight
+    selectedLineHeight: '22px',                        // for selected line height
+    selectedPadding: '0px 15px',                       // for selected padding
+    selectedBorder: '2px solid',                       // for selected border
+    selectedHoverColor: '#373538',                     // for selected color ( when hover )
+    selectedBorderColor: '#D1D1D1',                    // for selected border color
+    selectedBoxSizing: 'border-box',                   // for selected box sizing
+    selectedTransition: 'border-color 240ms',          // for selected transition
+
+    optionsBorderRadius: '6px',                        // for options block border radius
+    optionsBackgroundColor: '#FBFBFB',                 // for options block background color
+    optionsBoxShadow: '0 0 10px rgba(60, 57, 62, 0.08)',  // for options block box shadow
+
+    optionItemColor: '#3C393E',                        // for option color
+    optionItemFontSize: '16px',                        // for option font size
+    optionItemCursor: 'pointer',                       // for option cursor
+    optionItemMinHeight: '46px',                       // for option min height
+    optionItemFontWeight: '500',                       // for option font weight
+    optionItemLineHeight: '22px',                      // for option line height
+    optionItemPadding: '0px 15px',                     // for option padding
+    optionItemMarginBottom: '2px',                     // for option margin bottom
+    optionItemColorHover: '#00236A',                   // for option color ( when hover )
+    optionItemBoxSizing: 'border-box',                 // for option box sizing
+    optionItemBackgroudColor: '#ffffff',               // for option background color
+    optionItemBackgroudColorHover: 'unset',            // for option background color ( when hover )
+}
+```

package/src/stories/usage.stories.mdx

@@ -0,0 +1,132 @@
+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';
+
+import buttonImage from './static/button-usage.png';
+import inputTooltipImage from './static/input-tooltip-usage.png';
+
+<Meta title="Intro/Usage" />
+
+<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;
+    }
+
+    .sbdocs-content {
+      max-width: 80% !important;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      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 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .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>
+
+# Usage
+
+### Button
+
+<img src={buttonImage} alt="button image" />
+
+### Input / Tooltip
+
+<img src={inputTooltipImage} alt="button image" />

package/src/utils/index.js

@@ -4,11 +4,7 @@ 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');
-    }
+    packageConfig = require(process.env.STORYBOOK_PATH);
 
     try {
         projectConfig = require('../../../../tui.config.js');