@xaypay/tui 0.0.56 → 0.0.57

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,6 +114,7 @@ Typography.propTypes = {
 	colorHover: PropTypes.string,
 	textTransform: PropTypes.string,
 	textDecoration: PropTypes.string,
+	backgroundColor: PropTypes.string,
 	variant: PropTypes.oneOf(Object.values(TypographyType)),
 };
 

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/configuration.stories.mdx

@@ -277,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
@@ -332,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

@@ -9,6 +9,7 @@ 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" />
 
@@ -126,3 +127,6 @@ import buttonImage from './static/button-usage.png';
 
 <img src={buttonImage} alt="button image" />
 
+### Input / Tooltip
+
+<img src={inputTooltipImage} alt="button image" />

package/src/utils/index.js

@@ -4,12 +4,7 @@ export const compereConfigs = () => {
     let projectConfig = {};
     let packageConfig = {};
 
-    try {
-        packageConfig = require('../tui.config.js');
-    } catch (error) {
-        packageConfig = require('../../tui.config.js');
-        // console.log(error, 'Package: tui.config.js file is not define');
-    }
+    packageConfig = require(process.env.STORYBOOK_PATH);
 
     try {
         projectConfig = require('../../../../tui.config.js');

package/tui.config.js

@@ -143,14 +143,14 @@ module.exports = {
         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
@@ -196,5 +196,49 @@ module.exports = {
         fontFamilyh5: 'Arial, sans-serif',                 // for variant h5 font family
         fontFamilyh6: 'Arial, sans-serif',                 // for variant h6 font family
         fontFamilyspan: 'Arial, sans-serif',               // for variant span font family
+    },
+    // default properties for <Select /> component
+    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/components/multiselect/index.js

@@ -1,96 +0,0 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import styles from "./multiselect.module.css";
-import Icon from '../icon/Icon'
-
-export const Multiselect = ({
-  className,
-  label,
-  jsonOptionsData,
-  jsonSelectedOptionsData,
-  onchange,
-  keyNames,
-  value
-}) => {
-  const [searchedOptions, setSearchedOptions] = useState(jsonOptionsData.length ? JSON.parse(jsonOptionsData) : []);
-  const [options, setOptions] = useState(jsonSelectedOptionsData?.length ? JSON.parse(jsonSelectedOptionsData) : []);
-  const [values, setValues] = useState(jsonOptionsData.length ? JSON.parse(jsonOptionsData) : []);
-  const [opened, setOpened] = useState(false);
-  return (
-    <div className={`${styles.main} multi-select`}>
-      {label ? <label className={`${styles['multi-select-title']} multi-select-title-rem`}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</label> : ""}
-      <div className={`${styles['multi-select-content-top']} multi-select-content-top-rem`} onClick={() => { setOpened(!opened) }}>
-        {
-          options.map((option, i) => {
-            return (<div className={`${styles['multi-select-content-bottom-row']} multi-select-content-bottom-row-rem`} key={option[keyNames.id]}>
-              <div id={option[keyNames.id]}>{option[keyNames.name]}</div>
-              <div
-                onClick={() => {
-                  options.splice(i, 1);
-                  setOptions(options);
-                  setValues([...values, option]);
-                  setSearchedOptions([...values, option]);
-                  setOpened(true);
-                }}
-              >
-                {/*<Icon className='icon-close' />*/}
-                <i className='icon-close'></i>
-              </div>
-
-            </div>)
-          })
-        }
-
-        <input onChange={(e) => {
-          setValues(e.target.value ? searchedOptions.filter((option) => {
-            return option[keyNames.name].toLowerCase().includes(e.target.value.toLowerCase())
-          }) : searchedOptions)
-
-
-        }} className={styles.input} type='text' />
-        <div className={`${styles['select-content-top-icon']} select-content-top-icon-rem`}>
-          <Icon className={opened ? 'icon-arrow-up' : 'icon-arrow-down'} />
-        </div>
-      </div>
-      {
-
-        opened ? <div className={`${styles['multi-select-content-bottom']} multi-select-content-bottom-rem`} onClick={onchange}>
-          <div className={`${styles['multi-select-content-bottom-inner']} multi-select-content-bottom-inner-rem`}>
-            {
-              values.length ?
-                values.map((value, i) => {
-                  return (<div
-                    className={`${styles['multi-select-content-bottom-row']} multi-select-content-bottom-row-rem`}
-                    key={value[keyNames.id]}
-                    id={value.id}
-                    onClick={(e) => {
-                      setOptions([...options, { [keyNames.name]: value[keyNames.name], [keyNames.id]: value[keyNames.id] }])
-                      values.splice(i, 1);
-                      setValues(values);
-                      setSearchedOptions(values);
-                    }}>
-                    {value[keyNames.name]}
-                  </div>)
-                }) :
-                <div className={`${styles['no-elements']} no-elements-rem`}>No Elements!</div>
-            }
-          </div>
-        </div> : null
-      }
-
-    </div>
-  );
-};
-
-Multiselect.propTypes = {
-  className: PropTypes.string,
-  label: PropTypes.string,
-  jsonOptionsData: PropTypes.string,
-  jsonSelectedOptionsData: PropTypes.string,
-  onchange: PropTypes.func,
-  keyNames: PropTypes.object,
-};
-
-Multiselect.defaultProps = {
-  required: false,
-};

package/src/components/multiselect/multiselect.module.css

@@ -1,137 +0,0 @@
-.fff {
-    background: red;
-}
-.multi-select-title {
-    display: block;
-    text-transform: none;
-    font-size: 16px;
-    color: #3C393E;
-    line-height: 22px;
-    font-weight: 500;
-    margin-bottom: 6px;
-}
-.multi-select-title span {
-    font-size: 16px;
-    line-height: 20px;
-    color: #ff0000;
-}
-.multi-select-content {
-    display: flex;
-    flex-direction: column;
-}
-.multi-select-content-top {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    max-width: 840px;
-    height: 46px;
-    gap: 10px;
-    padding: 0 40px 0 15px;
-    font-size: 16px;
-    color: #3C393E;
-    line-height: 22px;
-    font-weight: 500;
-    border: 2px solid #D1D1D1;
-    border-radius: 6px;
-    transition: border-color 240ms;
-    box-sizing: border-box;
-    cursor: pointer;
-}
-.select-content-top-icon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 100%;
-}
-.select-content-top-icon i {
-    font-size: 10px;
-}
-.multi-select-content-top.active {
-    border-color: #00236A;
-}
-.multi-select-content-top:hover {
-    border-color: #3C393E;
-}
-.multi-select-content-bottom {
-    position: relative;
-    top: 6px;
-    overflow: hidden;
-    max-width: 840px;
-    background: #ffffff;
-    box-shadow: 0 0 10px rgba(60, 57, 62, 0.08);
-    border-radius: 6px;
-    animation: multi-select-show 640ms linear forwards;
-    max-height: 0;
-}
-.multi-select-content-bottom-inner {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    overflow-y: auto;
-    overflow-x: hidden;
-    max-height: 234px;
-    padding: 10px;
-    gap: 8px;
-}
-@keyframes multi-select-show {
-    100% {
-        max-height: 400px;
-    }
-}
-.multi-select-content-top-text {
-    flex: 1;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-}
-.multi-select-content-top-icon {
-    padding: 0 5px 0 20px;
-    box-sizing: border-box;
-}
-.multi-select-content-top-icon {
-    display: flex;
-    align-items: center;
-    flex: 0 0 auto;
-}
-.multi-select-content-top-icon > i{
-    font-size: 8px;
-    color: #3C393E;
-}
-.multi-select-content-bottom-row {
-    display: flex;
-    align-items: center;
-    background: #ffffff;
-    padding: 0 10px;
-    height: 30px;
-    font-size: 16px;
-    color: #3C393E;
-    border: 1px solid #D1D1D1;
-    line-height: 20px;
-    font-weight: 500;
-    border-radius: 4px;
-    box-sizing: border-box;
-    transition: border-color 240ms, color 240ms;
-    cursor: pointer;
-}
-.multi-select-content-bottom-row:hover {
-    color: #00236A;
-    border-color: #00236A;
-}
-.multi-select-content-top .multi-select-content-bottom-row i {
-    padding: 0 8px;
-    font-size: 10px;
-}
-.multi-select-content-top .multi-select-content-bottom-row {
-    border: 0;
-    padding: 0;
-}
-.no-elements {
-    color: #ff0000;
-}

package/src/components/multiselect/multiselect.stories.js

@@ -1,20 +0,0 @@
-import React from "react";
-import { Multiselect } from "./index";
-
-export default {
-    component: Multiselect,
-    title: "Components/Multiselect",
-};
-
-const Template = (args) => <Multiselect {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-    jsonOptionsData: '[{"bbb":"1", "value":"Կենտրոն"}]',
-    jsonSelectedOptionsData: '[{"bbb":"0", "value":"Արաբկիր"}, {"bbb":"2", "value":"Մալաթիա"}]',
-    label: 'label',
-    onchange: (newValue) => {
-        console.log(newValue);
-    },
-    keyNames: { name: 'value', id: 'bbb' }
-};