@xaypay/tui 0.0.52 → 0.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -46,12 +46,16 @@
     "styled-components": "^5.3.5"
   },
   "peerDependencies": {
+    "classnames": "^2.3.1",
     "react": "17 - 18",
     "react-dom": "17 - 18",
-    "styled-components": "^5.3.5",
-    "classnames": "^2.3.1"
+    "styled-components": "^5.3.5"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "react-icons": "^4.7.1"
   }
 }

package/src/components/button/button.stories.js

@@ -1,32 +1,11 @@
 import React from 'react';
-import {Button, ButtonSize, ButtonTheme} from './index';
+import {Button} from './index';
 
 export default {
     component: Button,
     title: 'Components/Button',
 };
 
-const Template = (args) => <Button label='Button'  {...args} > Default</Button>;
+const Template = (args) => <Button label='Button' {...args}/>;
 
-export const Default = Template.bind({});
-Default.args = {
-    theme: ButtonTheme.DEFAULT,
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-    theme: ButtonTheme.PRIMARY,
-};
-
-export const Large = Template.bind({});
-Large.args = {
-    size: ButtonSize.LARGE,
-    theme: ButtonTheme.DEFAULT,
-};
-
-export const Small = Template.bind({});
-Small.args = {
-    size: ButtonSize.SMALL,
-    backgroundColor: '#ff0000',
-    theme: ButtonTheme.DEFAULT,
-};
+export const Default = Template.bind({});

package/src/components/button/index.js

@@ -1,51 +1,85 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import styles from './button.module.css';
+import { compereConfigs } from './../../utils';
 
-/**
- * Primary UI component for user interaction
- */
+export const Button = ({
+  type,
+  color,
+  label,
+  width,
+  height,
+  cursor,
+  border,
+  outline,
+  padding,
+  onClick,
+  fontSize,
+  disabled,
+  className,
+  boxSizing,
+  transition,
+  contentWidth,
+  borderRadius,
+  backgroundColor,
+  disabledThemeColor,
+  disabledThemeBgColor,
+  disabledThemeLineColor,
+  ...props
+}) => {
 
-export const ButtonType = {
-  BUTTON: 'button',
-  RESET: 'reset',
-  SUBMIT: 'submit',
-};
-
-export const ButtonTheme = {
-  DEFAULT: 'content-size',
-  PRIMARY: 'full-size',
-  SUCCESS: 'btn-success',
-  INFO: 'btn-info',
-  WARNING: 'btn-warning',
-  DANGER: 'btn-danger',
-  LINK: 'btn-link',
-};
-
-export const ButtonSize = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large',
-};
+  const [isHover, setIsHover] = useState(false);
 
-export const Button = ({ primary, backgroundColor, theme, size, className, disabled, label, outline, ...props }) => {
+  useEffect(() => {
+    if (!label) {
+      alert('Button component: label prop is required, please add it!!!');
+    }
+  }, []);
 
+  const configStyles = compereConfigs();
   const classProps = classnames(
-    styles.btn,
-    styles[theme],
-    styles[size],
-    outline ? styles['type-outline'] : styles['type-filled'],
     className,
-    'button-rem'
   );
-  // className='btn type-outline size-default' 
+
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+  
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
+
   return (
     <button
-      type="button"
+      style={{
+        height: height ? height : configStyles.BUTTON.height,
+        padding: padding ? padding : configStyles.BUTTON.padding,
+        fontSize: fontSize ? fontSize : configStyles.BUTTON.fontSize,
+        boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
+        transition: transition ? transition : configStyles.BUTTON.transition,
+        border: outline ? 'none' : border ? border : configStyles.BUTTON.border,
+        width: contentWidth ? 'auto' : width ? width : configStyles.BUTTON.width,
+        borderRadius: borderRadius ? borderRadius : configStyles.BUTTON.borderRadius,
+        cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
+        backgroundColor:
+          (outline || !outline) && disabled ? disabledThemeBgColor ? disabledThemeBgColor : configStyles.BUTTON.disabledThemeBgColor :
+          outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor,
+        boxShadow:
+          outline ?
+            disabled ?
+            `inset 0 0 0 2px ${disabledThemeLineColor ? disabledThemeLineColor : configStyles.BUTTON.disabledThemeLineColor}` :
+            `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor}` :
+          'none',
+        color:          
+          (outline || !outline) && disabled ? disabledThemeColor ? disabledThemeColor : configStyles.BUTTON.disabledThemeColor :
+          outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor : color ? color : configStyles.BUTTON.color
+      }}
+      type={type ? type : configStyles.BUTTON.type}
+      disabled={disabled ? disabled : configStyles.BUTTON.disabled}
+      onClick={disabled ? _ => _ : type !== 'submit' ? onClick ? onClick : _ => alert('Add click event handler on Button component') : _ => _}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
       className={classProps}
-      style={backgroundColor && { backgroundColor }}
-      disabled={disabled ? 'disabled': ''}
       {...props}
     >
       {label}
@@ -54,38 +88,25 @@ export const Button = ({ primary, backgroundColor, theme, size, className, disab
 };
 
 Button.propTypes = {
-  
-  type: PropTypes.oneOf(Object.values(ButtonType)),
-  theme: PropTypes.oneOf(Object.values(ButtonTheme)),
-  size: PropTypes.oneOf(Object.values(ButtonSize)),
-  /**
-   * What background color to use
-   */
-  backgroundColor: PropTypes.string,
-  /**
-   * How large should the button be?
-   */
-  // size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Button contents
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Optional click handler
-   */
+  type: PropTypes.string,
+  color: PropTypes.string,
+  width: PropTypes.string,
+  outline: PropTypes.bool,
   onClick: PropTypes.func,
-  /**
-   * disabled
-   */
+  height: PropTypes.string,
+  cursor: PropTypes.string,
+  border: PropTypes.string,
   disabled: PropTypes.bool,
+  padding: PropTypes.string,
+  fontSize: PropTypes.string,
+  boxSizing: PropTypes.string,
   className: PropTypes.string,
-  outline: PropTypes.bool,
+  transition: PropTypes.string,
+  contentWidth: PropTypes.bool,
+  borderRadius: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  disabledThemeColor: PropTypes.string,
+  disabledThemeBgColor: PropTypes.string,
+  disabledThemeLineColor: PropTypes.string,
 };
-
-Button.defaultProps = {
-  backgroundColor: null,
-  primary: false,
-  size: 'medium',
-  onClick: undefined,
-  outline: false,
-};

package/src/components/input/index.js

@@ -1,135 +1,189 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
+import { Typography } from "../typography";
+import { compereConfigs } from "./../../utils";
+
 import styles from "./input.module.css";
-import {Typography} from "../typography"
 
 export const InputTypes = {
     TEXT: "text",
     PASSWORD: "password",
-    EMAIL: "email",
-    NUMBER: "number",
-    TEL: "tel",
-};
-
-export const InputSizes = {
-    SMALL: "size-small",
-    MEDIUM: "size-medium",
-    LARGE: "size-large",
 };
 
 export const Input = ({
-    size,
+    type,
+    name,
     color,
-    className,
     label,
-    regexp,
-    regexpError,
-    errorMesage,
+    value,
+    width,
+    height,
+    radius,
+    border,
+    padding,
+    tooltip,
+    bgColor,
+    leftIcon,
+    fontSize,
     required,
-    showEye,
     disabled,
-    type,
-    tooltip,
     onChange,
-    value,
+    iconWidth,
+    rightIcon,
+    className,
+    boxSizing,
+    boxShadow,
+    errorMesage,
+    borderColor,
+    placeholder,
+    autoComplete,
+    boxShadowHover,
     ...props
 }) => {
-    const [inputValue, setInputValue] = useState(value);
-    const [eyeStatus, setEyeStatus] = useState("");
+    const [show, setShow] = useState(false);
+    const [isHover, setIsHover] = useState(false);
     const [tooltipStatus, setTooltipStatus] = useState(false);
+    
+    const random = Math.floor((Math.random() * 1000) + 1);
+    const configStyles = compereConfigs();
+    const classProps = classnames(
+        className
+    );
+
     const handleChange = (event) => {
-        setInputValue(event.target.value);
-        onChange ? onChange(event.target.value) : "";
+        onChange ? onChange(event.target.value) : _ => _;
     };
-    document.onmouseup = () => {
-        setEyeStatus("");
-    };
-    useEffect(() => {
-        setInputValue(value);
-    }, [value]);
-
-    let eMessage = "";
-    if (errorMesage) {
-        eMessage = errorMesage;
-    } else if (regexp) {
-        const regex = new RegExp(regexp);
-        eMessage = regex.test(inputValue) ? "" : regexpError;
-    }
 
-    const classProps = classnames(
-        styles.input,
-        styles[size],
-        eMessage != "" ? styles["error-message"] : "",
-        className,
-        "input-inner-rem"
-    );
+    const handleMouseEnter = () => {
+        setIsHover(true);
+    };
+      
+    const handleMouseLeave = () => {
+        setIsHover(false);
+    };
+    
     return (
-        <div className={`${styles["input-wrap"]} input-wrap-rem`}>
-            {label ? (
-                <label className={`${styles["input-title"]} input-title-rem`}>
+        <div className={`${styles["input-wrap"]}`}>
+            {
+                label ? <label className={`${styles["input-title"]}`}>
                     {label} {required && <sup style={{ color: "#ee0000" }}>*</sup>}
                 </label>
-            ) : (
-                ""
-            )}
-            
-            <input
-                {...props}
-                type={eyeStatus || type}
-                className={classProps}
-                style={color && { color }}
-                disabled={disabled ? disabled : ""}
-                onChange={handleChange}
-                value={inputValue}
-            />
-            {type === "password" && showEye ? (
-                <p
-                    onMouseDown={() => {
-                        setEyeStatus("text");
+                : ''
+            }
+            <div
+                className={`${styles["input-content"]}`}
+                style={{
+                    borderRadius: radius ? radius : configStyles.INPUT.radius,
+                    boxShadow: isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
+                }}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            >
+                {
+                    leftIcon && leftIcon.length > 0 ?
+                    <div
+                        onMouseUp={type === 'password' ? _ => setShow(false) : _ => _}
+                        onMouseDown={type === 'password' ? _ => setShow(true) : _ => _}
+                        onMouseOut={type === 'password' ? _ => setShow(false) : _ => _}
+                        style={{
+                            cursor: type === 'password' ? 'pointer' : 'default',
+                            height: height ? height : configStyles.INPUT.height,
+                            padding: padding ? padding : configStyles.INPUT.padding,
+                            width: iconWidth ? iconWidth : configStyles.INPUT.iconWidth,
+                            boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
+                            borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
+                            borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
+                            backgroundColor: disabled ? '#FBFBFB' : bgColor ? bgColor : configStyles.INPUT.bgColor,
+                        }}
+                    >
+                        {type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]}
+                    </div> : ''
+                }
+                <input
+                    {...props}
+                    value={value}
+                    className={classProps}
+                    onChange={handleChange}
+                    type={show ? 'text' : type}
+                    disabled={disabled ? disabled : ""}
+                    name={name ? name : `tui_${random}_tui`}
+                    placeholder={placeholder ? placeholder : ''}
+                    autoComplete={autoComplete ? autoComplete : configStyles.INPUT.autoComplete}
+                    style={{
+                        border: 'none',
+                        outline: 'none',
+                        pointerEvents: disabled ? 'none' : 'auto',
+                        width: width ? width : configStyles.INPUT.width,
+                        height: height ? height : configStyles.INPUT.height,
+                        padding: padding ? padding : configStyles.INPUT.padding,
+                        borderRadius: radius ? radius : configStyles.INPUT.radius,
+                        fontSize: fontSize ? fontSize : configStyles.INPUT.fontSize,
+                        boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
+                        color: errorMesage ? 'rgba(238, 0, 0, 1)' : color ? color : configStyles.INPUT.color,
+                        backgroundColor: disabled ? '#FBFBFB' : bgColor ? bgColor : configStyles.INPUT.bgColor,                       
                     }}
-                    onMouseUp={() => {
-                        setEyeStatus("");
-                    }}
-                >
-                    👁
-                </p>
-            ) : null}
-            {tooltip ? <Typography variant="p"
-              onClick={()=> {
-                setTooltipStatus(!tooltipStatus)
-              }}
-            >ⓘ</Typography>: null}
+                />
+                {
+                    rightIcon && rightIcon.length > 0 ?
+                    <div
+                        onMouseUp={type === 'password' ? _ => setShow(false) : _ => _}
+                        onMouseDown={type === 'password' ? _ => setShow(true) : _ => _}
+                        onMouseOut={type === 'password' ? _ => setShow(false) : _ => _}
+                        style={{
+                            cursor: type === 'password' ? 'pointer' : 'default',
+                            border: border ? border : configStyles.INPUT.border,
+                            height: height ? height : configStyles.INPUT.height,
+                            padding: padding ? padding : configStyles.INPUT.padding,
+                            width: iconWidth ? iconWidth : configStyles.INPUT.iconWidth,
+                            boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
+                            borderTopRightRadius: radius ? radius : configStyles.INPUT.radius,
+                            borderBottomRightRadius: radius ? radius : configStyles.INPUT.radius,
+                            backgroundColor: disabled ? '#FBFBFB' : bgColor ? bgColor : configStyles.INPUT.bgColor,
+                        }}
+                    >
+                        {type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]}
+                    </div> : ''
+                }
+            </div>
+            {
+                tooltip ? <Typography variant="p" onClick={()=> setTooltipStatus(!tooltipStatus)}>
+                    ⓘ
+                </Typography> : null
+            }
             {tooltipStatus ? <p>{tooltip}</p> : null}
-            {eMessage ? <span className={styles.inputErrorMessages}>{eMessage}</span> : ""}
+            {errorMesage ? <span className={styles.inputErrorMessages}>{errorMesage}</span> : ""}
         </div>
     );
 };
 
 Input.propTypes = {
-    type: PropTypes.oneOf(Object.values(InputTypes)),
-    size: PropTypes.oneOf(Object.values(InputSizes)),
+    name: PropTypes.string,
     color: PropTypes.string,
-    className: PropTypes.string,
+    value: PropTypes.string,
+    width: PropTypes.string,
+    label: PropTypes.string,
     onChange: PropTypes.func,
     required: PropTypes.bool,
-    errorMesage: PropTypes.string,
-    regexp: PropTypes.string,
-    regexpError: PropTypes.string,
-    label: PropTypes.string.isRequired,
     disabled: PropTypes.bool,
-    value: PropTypes.string,
-    showEye: PropTypes.bool,
-    tooltip: PropTypes.string,
+    height: PropTypes.string,
+    radius: PropTypes.string,
+    bgColor: PropTypes.string,
+    fontSize: PropTypes.string,
+    tooltip: PropTypes.element,
+    className: PropTypes.string,
+    iconWidth: PropTypes.string,
+    boxSizing: PropTypes.string,
+    boxShadow: PropTypes.string,
+    placeholder: PropTypes.string,
+    errorMesage: PropTypes.string,
+    autoComplete: PropTypes.string,
+    boxShadowHover: PropTypes.string,
+    leftIcon: PropTypes.arrayOf(PropTypes.element),
+    rightIcon: PropTypes.arrayOf(PropTypes.element),
+    type: PropTypes.oneOf(Object.values(InputTypes)),
 };
 
 Input.defaultProps = {
-    label: "",
-    color: null,
-    size: InputSizes.MEDIUM,
-    onChange: undefined,
-    required: false,
-    errorMesage: "",
     type: "text",
-    value: ""
 };

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

@@ -1,98 +1,30 @@
-/*.inputs{*/
-    /*display: flex;*/
-    /*flex-direction: column;*/
-/*}*/
-/*.inp {*/
-    /*border-radius: 4px;*/
-    /*box-sizing: border-box;*/
-/*}*/
-
-/*.inputErrorMessages {*/
-    /*color: red;*/
-    /*font-size: 10px;*/
-/*}*/
-
 .input-wrap {
-    position: relative;
-    max-width: 400px;
-}
-.input {
-    font-size: 16px;
-    line-height: 20px;
-    border-radius: 6px;
-    color: rgba(60, 57, 62, 1);
-    box-shadow: 0 0 0 2px rgba(209, 209, 209, 1) inset;
-    border: none;
-    outline: none;
-    box-sizing: border-box;
-    transition: background-color 240ms, color 240ms;
-    overflow: hidden;
-    cursor: text;
-}
-
-.input.full-size {
     width: 100%;
 }
 
-.input.content-size {
-    width: auto;
-}
-
-.input.size-medium {
-    min-height: 46px;
-    padding: 12px 15px;
-}
-
-.input.with-icon {
-
-}
-
-.input:hover {
-    box-shadow: 0 0 0 2px rgba(60, 57, 62, 1) inset;
+.input-content {
+    display: flex;
+    width: 100%;
 }
 
-.input:active {
-    box-shadow: 0 0 0 2px rgba(0, 35, 106, 1) inset;
+.input-title {
+    display: block;
+    font-size: 16px;
+    color: #3c393e;
+    font-weight: 500;
+    line-height: 22px;
+    margin-bottom: 6px;
 }
 
 .inputErrorMessages {
-    position: absolute;
     font-size: 14px;
     line-height: 19px;
-    bottom: 0;
-    left: 0;
-    transform: scale3d(0,0,0);
     color: rgba(238, 0, 0, 1);
-    animation: error-message-show 240ms forwards;
-    z-index: 1;
-}
-.labelInput{
-    color: black;
-}
-.input.state-disabled {
-    background-color: #FBFBFB;
-    pointer-events: none;
-}
-
-.input.error-message {
-    box-shadow: 0 0 0 2px rgba(238, 0, 0, 1) inset;
 }
 
-/* .input-error-message-text {
-    
-} */
-.input-title {
-    color: #3c393e;
-    display: block;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 22px;
-    margin-bottom: 6px;
-    text-transform: none;
+input:-webkit-autofill,
+input:-webkit-autofill:hover, 
+input:-webkit-autofill:focus, 
+input:-webkit-autofill:active  {
+    background-color: inherit !important;
 }
-@keyframes error-message-show {
-    100% {
-        bottom: -20px;
-        transform: scale3d(1,1,1);
-    }
-}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Input, InputTypes, InputSizes } from "./index";
+import { Input, InputTypes } from "./index";
 
 export default {
   component: Input,
@@ -10,7 +10,6 @@ const Template = (args) => <Input {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  size: InputSizes.MEDIUM,
   type: InputTypes.TEXT,
   onChange: (val) => {}
 };
@@ -18,22 +17,4 @@ Default.args = {
 export const PASSWORD = Template.bind({});
 PASSWORD.args = {
   type: InputTypes.PASSWORD,
-  regexp: "('A'-'Z')",
-  regexpError: "Գաղտնաբառը պետք է պարունակի մեկ մեծատառ",
-};
-
-export const EMAIL = Template.bind({});
-EMAIL.args = {
-  type: InputTypes.EMAIL,
-  errorMesage: "Գոյություն չունեցող էլ. հասցե",
-};
-
-export const TEL = Template.bind({});
-TEL.args = {
-  type: InputTypes.TEL,
-};
-
-export const NUMBER = Template.bind({});
-NUMBER.args = {
-  type: InputTypes.NUMBER,
 };