@xaypay/tui 0.0.3 → 0.0.4

package/src/components/autocomplate/autocomplate.module.css

@@ -0,0 +1,74 @@
+.autocomplate-content {
+    display: flex;
+    flex-direction: column;
+}
+.autocomplate-content-top {
+    display: flex;
+    flex-direction: row;
+    max-width: 400px;
+    height: 46px;
+    padding: 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;
+}
+.autocomplate-content-top.active {
+    border-color: #00236A;
+}
+.autocomplate-content-top:hover {
+    border-color: #3C393E;
+}
+.autocomplate-content-bottom {
+    position: relative;
+    top: 6px;
+    overflow: hidden;
+    max-width: 400px;
+    background: #FBFBFB;
+    box-shadow: 0 0 10px rgba(60, 57, 62, 0.08);
+    border-radius: 6px;
+    animation: select-show 640ms linear forwards;
+    max-height: 0;
+}
+.autocomplate-content-bottom-inner {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 234px;
+}
+@keyframes select-show {
+    100% {
+        max-height: 400px;
+    }
+}
+.autocomplate-content-bottom-row {
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    padding: 0 15px;
+    height: 46px;
+    font-size: 16px;
+    color: #3C393E;
+    line-height: 22px;
+    font-weight: 500;
+    margin-bottom: 2px;
+    box-sizing: border-box;
+    transition: background 240ms, color 240ms;
+    cursor: pointer;
+}
+.autocomplate-content-bottom-row .no-option {
+    color: #ff0000;
+}
+.autocomplate-content-bottom-row:hover {
+    background: unset;
+    color: #00236A;
+}
+.option-active .autocomplate-content-bottom-row {
+    color: #00236A;
+}

package/src/components/autocomplate/autocomplate.stories.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Autocomplate } from "./index";
+
+export default {
+  component: Autocomplate,
+  title: "Components/Autocomplate",
+};
+
+const Template = (args) => <Autocomplate {...args} />;
+
+export const Default = Template.bind({});

package/src/components/autocomplate/index.js

@@ -0,0 +1,117 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import classnames from "classnames";
+import styles from "./autocomplate.module.css";
+
+export const Autocomplate = ({
+  className,
+  label,
+  required,
+  disabled,
+  jsonOptionsData,
+  onChange,
+  value,
+  searchCount,
+  ...props
+}) => {
+  const classProps = classnames(styles.searchBox, className);
+  const [inputValue, setInputValue] = useState("");
+  const [activeOption, setActiveOption] = useState(0);
+  const [filteredOptions, setFilteredOptions] = useState([]);
+  const [showOptions, setShowOptions] = useState(false);
+
+  const parseOptionsData =
+    jsonOptionsData.length !== 0 ? JSON.parse(jsonOptionsData).sort() : [];
+  const handleChange = (e) => {
+    const currentInputValue = e.currentTarget.value;
+
+    const filteredOptions = parseOptionsData.filter(
+      (optionName) =>
+        optionName.toLowerCase().indexOf(currentInputValue.toLowerCase()) > -1
+    );
+
+    setInputValue(currentInputValue);
+    setActiveOption(0);
+    setFilteredOptions(filteredOptions);
+    setShowOptions(true);
+  };
+  const handleClick = (e) => {
+    setInputValue(e.currentTarget.innerText);
+    setActiveOption(0);
+    setFilteredOptions([]);
+    setShowOptions(false);
+  };
+  let optionList;
+    if (showOptions && inputValue) {
+        if (filteredOptions.length && inputValue.length >= searchCount) {
+            optionList = (
+                <div className={styles['autocomplate-content-bottom']}>
+                  <div className={styles['autocomplate-content-bottom-inner']}>
+                      {filteredOptions.map((optionName, index) => {
+                          let className;
+                          if (index === activeOption) {
+                              className = "option-active";
+                          }
+                          return (
+                              <div
+                                  className={styles[className]}
+                                  key={optionName}
+                                  onClick={handleClick}
+                              >
+                                <div className={styles['autocomplate-content-bottom-row']}>{optionName}</div>
+                              </div>
+                          );
+                      })}
+                  </div>
+                </div>
+
+
+            );
+        } else {
+            optionList = (
+                <div className={styles['autocomplate-content-bottom']}>
+                  <div className={styles['autocomplate-content-bottom-inner']}>
+                    <div className={styles['autocomplate-content-bottom-row']}>
+                      <div className={styles['no-option']}>No Option!</div>
+                    </div>
+                  </div>
+                </div>
+            );
+        }
+    }
+
+  return (
+    <>
+      {label ? <label className={styles.labelInput}>{label}</label> : ""}
+      <div className={styles['autocomplate-content']}>
+        <input
+          type="text"
+          className={styles['autocomplate-content-top']}
+          required={required}
+          disabled={disabled}
+          onChange={handleChange}
+          value={inputValue}
+          placeholder="Write..."
+          {...props}
+        />
+        {optionList}
+      </div>
+    </>
+  );
+};
+
+Autocomplate.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  jsonOptionsData: PropTypes.string,
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  searchCount: PropTypes.number,
+};
+
+Autocomplate.defaultProps = {
+  jsonOptionsData: '["Tigran", "Tigran Aleksanyan", "Tigarn Aleksanyan Yerevan"]',
+  searchCount: 2,
+};

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

@@ -1,3 +1,65 @@
 .btn {
-    color: green;
+    text-transform: capitalize;
+    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;
+}
+
+.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 {
+
 }

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

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

package/src/components/button/index.js

@@ -14,39 +14,40 @@ export const ButtonType = {
 };
 
 export const ButtonTheme = {
-  DEFAULT: 'btn-default',
-  PRIMARY: 'btn-primary',
+  DEFAULT: 'content-size',
+  PRIMARY: 'full-size',
   SUCCESS: 'btn-success',
   INFO: 'btn-info',
   WARNING: 'btn-warning',
   DANGER: 'btn-danger',
-  LINK: 'btn-link'
+  LINK: 'btn-link',
 };
 
 export const ButtonSize = {
   SMALL: 'small',
   MEDIUM: 'medium',
-  LARGE: 'large'
+  LARGE: 'large',
 };
 
-export const Button = ({ primary, backgroundColor, theme, size, className, disabled, label, ...props }) => {
+export const Button = ({ primary, backgroundColor, theme, size, className, disabled, label, outline, ...props }) => {
 
   console.log(styles);
+  console.log(backgroundColor);
   const classProps = classnames(
     styles.btn,
     styles[theme],
     styles[size],
-    'test',
-    {
-      [styles.disabled]: disabled,
-    },
+    outline ? styles['type-outline'] : styles['type-filled'],
     className
   );
+  // className='btn type-outline size-default' 
+  console.log(classProps);
   return (
     <button
       type="button"
       className={classProps}
       style={backgroundColor && { backgroundColor }}
+      disabled={disabled ? 'disabled': ''}
       {...props}
     >
       {label}
@@ -80,6 +81,7 @@ Button.propTypes = {
    */
   disabled: PropTypes.bool,
   className: PropTypes.string,
+  outline: PropTypes.bool,
 };
 
 Button.defaultProps = {
@@ -87,4 +89,5 @@ Button.defaultProps = {
   primary: false,
   size: 'medium',
   onClick: undefined,
+  outline: false,
 };

package/src/components/captcha/captcha.module.css

@@ -0,0 +1,66 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.main {
+  width: 40%;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.slider {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 7px;
+  outline: none;
+  border: 0.1px solid rgba(150, 149, 149, 0.432);
+  background-color: rgba(255, 255, 255, 0.575);
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 48px;
+  height: 48px;
+  z-index: 3;
+  position: relative;
+}
+
+.selector {
+  height: 48px;
+  width: 48px;
+  position: absolute;
+  bottom: -20px;
+  left: 50%;
+  z-index: 2;
+}
+
+.selectBtn {
+  height: 40px;
+  width: 40px;
+  background-image: url('https://i.ibb.co/rQZNNzN/blue.png');
+  background-size: cover;
+  background-position: center;
+  border-radius: 50%;
+  position: absolute;
+  bottom: 40px;
+  right: 30px;
+}
+
+.progressBar {
+  width: 50%;
+  height: 7px;
+  background: rgb(112, 112, 238);
+  position: absolute;
+  bottom: 38px;
+  left: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.range {
+  color: blue;
+  margin-bottom: 15px;
+  margin-top: 15px;
+}

package/src/components/captcha/captcha.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Captcha, ButtonTheme } from './index';
+
+export default {
+    component: Captcha,
+    title: 'Components/Captcha',
+};
+
+const Template = (args) => <Captcha className='captcha type-outline size-default' label='Captcha'  {...args} > Default</Captcha>;
+
+export const Default = Template.bind({});
+Default.args = {
+    rangeCount: 20,
+    onclick: (e) => {
+        console.log(e.target.value);
+    }
+};

package/src/components/captcha/index.js

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import styles from './captcha.module.css';
+
+
+export const Captcha = ({ onclick, rangeCount }) => {
+  const [data, setData] = useState("");
+  const [right, setRight] = useState(false);
+  let range = rangeCount <= 100 ? rangeCount : 0;
+  let rangeElement = document.getElementsByClassName(styles.range);
+  useEffect(() => {
+    for (let element of rangeElement) {
+      element.style.marginLeft = `${range - 3}%`;
+      element.style.color = data;
+    }
+  }, [range, data])
+
+  function sliderInput(event) {
+    setData(rangeCount == event.target.value ? 'green' : 'indianred');
+    let selector = document.getElementsByClassName(styles.selector);
+    let selectBtn = document.getElementsByClassName(styles.selectBtn);
+    let progressBar = document.getElementsByClassName(styles.progressBar);
+
+    selector[0].style.left = event.target.value + '%';
+    progressBar[0].style.width = event.target.value + '%';
+
+    if (rangeCount == event.target.value) {
+      selectBtn[0].style.backgroundImage = "url('https://i.ibb.co/b1HDRtd/green.png')";
+    }
+    else {
+      selectBtn[0].style.backgroundImage = "url('https://i.ibb.co/QvXjjLM/red.png')";
+    }
+  }
+
+  function sliderChange(e) {
+    setRight(rangeCount == e.target.value ? true : false);
+  }
+
+  return (
+    <>
+      <div className={styles.main}>
+        <div className={styles.range}>▼</div>
+        <input type='range' className={styles.slider} onClick={right ? onclick : null} onInput={sliderInput} onMouseUp={sliderChange} />
+        <div className={styles.selector} >
+          <div className={styles.selectBtn}></div>
+        </div>
+        <div className={styles.progressBar}></div>
+        <div className={styles.range} >▲</div>
+      </div>
+
+    </>
+  );
+};
+
+Captcha.propTypes = {
+  onclick: PropTypes.func,
+  className: PropTypes.string,
+  rangeCount: PropTypes.number
+};
+
+Captcha.defaultProps = {
+  onclick: undefined
+};

package/src/components/checkbox/checkbox.module.css

@@ -0,0 +1,57 @@
+.checkbox-wrap {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    margin: 0 6px;
+    padding-left: 24px;
+    cursor: pointer;
+}
+.checkbox-wrap > input {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+}
+
+.checkbox-wrap .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    vertical-align: top;
+    width: 14px;
+    height: 14px;
+    border: 1px solid #d9d9d9;
+    border-radius: 3px;
+    margin-right: 4px;
+    transition: border-color 240ms;
+}
+
+.checkbox-wrap > .checkmark:after {
+    position: absolute;
+    content: '';
+    display: block;
+    left: 4px;
+    top: 1px;
+    width: 4px;
+    height: 8px;
+    border: solid #1890ff;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+    opacity: 0;
+    transition: opacity 240ms;
+}
+
+.checkbox-wrap input:checked ~ .checkmark:after {
+    opacity: 1;
+}
+
+.checkbox-wrap input:checked ~ .checkmark {
+    border-color: #1890ff;
+}
+
+.checkbox-wrap:hover input ~ .checkmark {
+    border-color: #1890ff;
+}

package/src/components/checkbox/checkbox.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { Checkbox } from ".";
+export default {
+  component: Checkbox,
+  title: "Components/Checkbox",
+};
+
+const Template = (args) => <Checkbox {...args} />;
+
+export const CheckboxButton = Template.bind({});

package/src/components/checkbox/index.js

@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import styles from "./checkbox.module.css";
+
+export const Checkbox = ({
+  disabled,
+  required,
+  className,
+  name,
+  value,
+  jsonData,
+  onChange,
+  label,
+  keyNames,
+  ...props
+}) => {
+  const classProps = classNames(styles.checkbox, className);
+  const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
+  const [data, setData] = useState(parseData);
+
+  const handleChange = (e) => {
+    if (e.target.checked) {
+      data.forEach((item) => {
+        if (item.value === e.target.value) {
+          item.checked = true;
+          setData([...data]);
+        }
+      });
+    } else if (e.target.checked === false) {
+      data.forEach((item) => {
+        if (item.checked && item.value === e.target.value) {
+          delete item.checked;
+          setData([...data]);
+        }
+      });
+    }
+  };
+
+  return (
+    <>
+      {data.map((element) => {
+        return (
+          <label className={styles["checkbox-wrap"]} key={element.value}>
+            <input
+              type="checkbox"
+              className={classProps}
+              disabled={disabled}
+              required={required}
+              value={value ? value : element.value}
+              name={name ? name : element.name}
+              onChange={handleChange}
+              {...props}
+            />
+            <span className={styles["checkmark"]}/>
+            {element.label ? (
+              <span className={styles.labelRadio}>
+                {label ? label : element.label}
+              </span>
+            ) : (
+              ""
+            )}
+          </label>
+        );
+      })}
+    </>
+  );
+};
+
+Checkbox.propTypes = {
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  jsonData: PropTypes.string,
+  label: PropTypes.string,
+  onChange: PropTypes.func,
+  keyNames: PropTypes.object,
+};
+
+Checkbox.defaultProps = {
+  onChange: undefined,
+  jsonData:
+    '[{"value":"email", "name":"contact1", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact2", "label":"Phone", "id":"contactChoice2"}]',
+};