@xaypay/tui 0.0.3 → 0.0.5

package/src/components/icon/HeartFilled.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+
+const SvgHeartFilled = ({ title, titleId, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 511.626 511.627"
+    style={{
+      enableBackground: "new 0 0 511.626 511.627",
+    }}
+    xmlSpace="preserve"
+    role="img"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M475.366 71.951c-24.175-23.606-57.575-35.404-100.215-35.404-11.8 0-23.843 2.046-36.117 6.136-12.279 4.093-23.702 9.615-34.256 16.562-10.568 6.945-19.65 13.467-27.269 19.556a263.828 263.828 0 0 0-21.696 19.414 264.184 264.184 0 0 0-21.698-19.414c-7.616-6.089-16.702-12.607-27.268-19.556-10.564-6.95-21.985-12.468-34.261-16.562-12.275-4.089-24.316-6.136-36.116-6.136-42.637 0-76.039 11.801-100.211 35.404C12.087 95.552 0 128.288 0 170.162c0 12.753 2.24 25.889 6.711 39.398 4.471 13.514 9.566 25.031 15.275 34.546 5.708 9.514 12.181 18.796 19.414 27.837 7.233 9.042 12.519 15.27 15.846 18.699 3.33 3.422 5.948 5.899 7.851 7.419L243.25 469.937c3.427 3.429 7.614 5.144 12.562 5.144s9.138-1.715 12.563-5.137l177.87-171.307c43.588-43.583 65.38-86.41 65.38-128.475.001-41.874-12.088-74.61-36.259-98.211z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgHeartFilled;

package/src/components/icon/HeartOutline.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+const SvgHeartOutline = ({ title, titleId, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 471.701 471.701"
+    style={{
+      enableBackground: "new 0 0 471.701 471.701",
+    }}
+    xmlSpace="preserve"
+    width="1em"
+    height="1em"
+    role="img"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M433.601 67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7 13.6-92.4 38.3l-12.9 12.9-13.1-13.1c-24.7-24.7-57.6-38.4-92.5-38.4-34.8 0-67.6 13.6-92.2 38.2-24.7 24.7-38.3 57.5-38.2 92.4 0 34.9 13.7 67.6 38.4 92.3l187.8 187.8c2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-3.9l188.2-187.5c24.7-24.7 38.3-57.5 38.3-92.4.1-34.9-13.4-67.7-38.1-92.4zm-19.2 165.7-178.7 178-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3s10.7-53.7 30.3-73.2c19.5-19.5 45.5-30.3 73.1-30.3 27.7 0 53.8 10.8 73.4 30.4l22.6 22.6c5.3 5.3 13.8 5.3 19.1 0l22.4-22.4c19.6-19.6 45.7-30.4 73.3-30.4 27.6 0 53.6 10.8 73.2 30.3 19.6 19.6 30.3 45.6 30.3 73.3.1 27.7-10.7 53.7-30.3 73.3z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgHeartOutline;

package/src/components/icon/Icon.js

@@ -0,0 +1,6 @@
+/**
+ * Created by aleksanyan.tigran on 10/7/2022.
+ */
+import style from '../../assets_old/icons/style.css'
+const Icon = ( props) => <i className={style[props.className]} />
+export  default  Icon;

package/src/components/icon/LikeFilled.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+const SvgLikeFilled = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 23 20"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <g fill="none" fillRule="evenodd">
+      <path opacity={0.87} d="M-1-1h24v24H-1z" />
+      <path
+        d="M12.12 1.06 6.58 6.6c-.37.37-.58.88-.58 1.41V18c0 1.1.9 2 2 2h9c.8 0 1.52-.48 1.84-1.21l3.26-7.61C22.94 9.2 21.49 7 19.34 7h-5.65l.95-4.58c.1-.5-.05-1.01-.41-1.37-.59-.58-1.53-.58-2.11.01ZM2 20c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2s-2 .9-2 2v8c0 1.1.9 2 2 2Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+);
+
+export default SvgLikeFilled;

package/src/components/icon/LikeOutline.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+const SvgLikeOutline = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 22 20"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <g fill="none" fillRule="evenodd">
+      <path opacity={0.87} d="M-1-1h24v24H-1z" />
+      <path
+        d="M20 7h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13.17 0 6.59 6.59C6.22 6.95 6 7.45 6 8v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73V9c0-1.1-.9-2-2-2Zm0 4-3 7H8V8l4.34-4.34L11.23 9H20v2ZM0 8h4v12H0V8Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+);
+
+export default SvgLikeOutline;

package/src/components/icon/StarFilled.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+const SvgStarFilled = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 18 17"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <g fill="none" fillRule="evenodd">
+      <path d="M-3-3h24v24H-3z" />
+      <path
+        d="m9 14.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L6.19 5.63l-4.83.41C.48 6.11.12 7.21.79 7.79l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08L9 14.27Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+);
+
+export default SvgStarFilled;

package/src/components/icon/StarOutline.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+const SvgStarOutline = ({ title, titleId, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="star-outline_svg__feather star-outline_svg__feather-star"
+    width="1em"
+    height="1em"
+    role="img"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+  </svg>
+);
+
+export default SvgStarOutline;

package/src/components/icon/index.js

@@ -0,0 +1,6 @@
+export { default as HeartFilled } from "./HeartFilled";
+export { default as HeartOutline } from "./HeartOutline";
+export { default as LikeFilled } from "./LikeFilled";
+export { default as LikeOutline } from "./LikeOutline";
+export { default as StarFilled } from "./StarFilled";
+export { default as StarOutline } from "./StarOutline";

package/src/components/input/index.js

@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import classnames from "classnames";
+import styles from "./input.module.css";
+
+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,
+  color,
+  className,
+  label,
+  regexp,
+  regexpError,
+  errorMesage,
+  required,
+  disabled,
+  type,
+  ...props
+}) => {
+  const [inputValue, setInputValue] = useState("");
+  const handleChange = (event) => {
+    setInputValue(event.target.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);
+  return (
+    <div className={styles['input-wrap']}>
+      {label ? <label className={styles.labelInput}>{label}</label> : ""}
+      <input
+        {...props}
+        type={type}
+        className={classProps}
+        style={color && { color }}
+        disabled={disabled ? disabled : ""}
+        onChange={handleChange}
+        value={inputValue}
+      />
+      {eMessage ? (
+        <span className={styles.inputErrorMessages}>{eMessage}</span>
+      ) : (
+        ""
+      )}
+    </div>
+  );
+};
+
+Input.propTypes = {
+  type: PropTypes.oneOf(Object.values(InputTypes)),
+  size: PropTypes.oneOf(Object.values(InputSizes)),
+  color: PropTypes.string,
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  required: PropTypes.bool,
+  errorMesage: PropTypes.string,
+  regexp: PropTypes.string,
+  regexpError: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+};
+
+Input.defaultProps = {
+  label: "",
+  color: null,
+  size: InputSizes.MEDIUM,
+  onChange: undefined,
+  required: true,
+  errorMesage: "",
+  type: "text",
+};

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

@@ -0,0 +1,89 @@
+/*.inputs{*/
+    /*display: flex;*/
+    /*flex-direction: column;*/
+/*}*/
+/*.inp {*/
+    /*border-radius: 4px;*/
+    /*box-sizing: border-box;*/
+/*}*/
+
+/*.inputErrorMessages {*/
+    /*color: red;*/
+    /*font-size: 10px;*/
+/*}*/
+
+.input-wrap {
+    position: relative;
+}
+.input {
+    text-transform: capitalize;
+    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: pointer;
+}
+
+.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:active {
+    box-shadow: 0 0 0 2px rgba(0, 35, 106, 1) inset;
+}
+
+.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 {
+    
+} */
+@keyframes error-message-show {
+    100% {
+        bottom: -20px;
+        transform: scale3d(1,1,1);
+    }
+}

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { Input, InputTypes, InputSizes } from "./index";
+
+export default {
+  component: Input,
+  title: "Components/Input",
+};
+
+const Template = (args) => <Input {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  size: InputSizes.MEDIUM,
+  type: InputTypes.TEXT,
+};
+
+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,
+};

package/src/components/modal/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classnames from "classnames";
+import styles from "./modal.module.css";
+
+export const Modal = ({ setShow, headerText, className }) => {
+  const classProps = classnames(styles.modal, className);
+  return (
+    <div className={classProps}>
+      <div className={styles["modal_header"]}>
+        <h5 className={styles.heading}>{headerText}</h5>
+      </div>
+      <button className={styles["close_btn"]} onClick={() => setShow(false)}>
+        X
+      </button>
+    </div>
+  );
+};
+
+Modal.propTypes = {
+  setShow: PropTypes.func,
+  headerText: PropTypes.string,
+  className: PropTypes.string,
+};

package/src/components/modal/modal.module.css

@@ -0,0 +1,35 @@
+.modal {
+    width: 250px;
+    height: 170px;
+    background: white;
+    color: white;
+    z-index: 10;
+    border-radius: 16px;
+    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
+    position: relative
+  }
+  
+.modal_header {
+    height: 50px;
+    background: white;
+}
+
+.heading {
+    color: #2c3e50;
+    font-weight: 500;
+    font-size: 18px;
+    text-align: center;
+}
+
+.close_btn {
+    cursor: pointer;
+    font-weight: 500;
+    padding: 4px 8px;
+    border: none;
+    font-size: 18px;
+    color: #2c3e50;
+    background: white;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }

package/src/components/modal/modal.stories.js

@@ -0,0 +1,29 @@
+import React, {useState} from "react";
+import { Modal } from "./index";
+
+export default {
+  component: Modal,
+  title: "Components/Modal",
+};
+
+const Template = ({ headerText, className }) => {
+  const [show, setShow] = useState(false);
+  const handleClick = () => {
+    setShow(true);
+  };
+  return (
+    <>
+      <button onClick={handleClick}>Click</button>
+      {show && (
+        <Modal setShow={setShow} headerText={headerText} className={className} />
+      )}
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  headerText: "Hi...",
+  className: "Modal"
+};

package/src/components/multiselect/index.js

@@ -0,0 +1,76 @@
+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,
+  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}>
+      {label ? <label className={styles['multi-select-title']}>վարչական շրջան <span>*</span></label> : ""}
+      <div className={styles['multi-select-content-top']} onClick={()=>{setOpened(!opened)}}>
+        {
+          options.map((option, i) => {
+            return (<div className={styles['multi-select-content-bottom-row']} >
+              <div id={option.id}>{option.name}</div>
+              <Icon className='icon-close' onClick={() => {
+                options.splice(i, 1);
+                setOptions(options);
+                setValues([...values, option]);
+                setSearchedOptions([...values, option]);
+                setOpened(true);
+              }}/>
+            </div>)
+          })
+        }
+        {/*<div onChange={(e) => {*/}
+          {/*setValues(e.target.value ? searchedOptions.filter((option) => {*/}
+            {/*return option.name.toLowerCase().includes(e.target.value.toLowerCase())*/}
+          {/*}) : searchedOptions)*/}
+
+        {/*}}  className={styles.input} type='text' />*/}
+        <div className={styles['select-content-top-icon']}>
+          <Icon className={opened ? 'icon-arrow-up' : 'icon-arrow-down'}/>
+        </div>
+      </div>
+      {
+        opened ? <div className={styles['multi-select-content-bottom']} onClick={onchange}>
+          <div className={styles['multi-select-content-bottom-inner']}>
+              {
+                  values.length ?
+                      values.map((value, i) => {
+                          return (<div className={styles['multi-select-content-bottom-row']} id={value.id} onClick={(e) => {
+                              setOptions([...options, { 'name': value.name, 'id': value.id }])
+                              values.splice(i, 1);
+                              setValues(values);
+                              setSearchedOptions(values);
+                          }}>{value.name}</div>)
+                      }) :
+                      <div className={styles['no-elements']}>No Elements!</div>
+              }
+          </div>
+        </div> : null
+      }
+
+    </div>
+  );
+};
+
+Multiselect.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.string,
+  jsonOptionsData: PropTypes.string,
+  jsonSelectedOptionsData: PropTypes.string,
+  onchange: PropTypes.func,
+};
+

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

@@ -0,0 +1,137 @@
+.fff {
+    background: red;
+}
+.multi-select-title {
+    display: block;
+    text-transform: capitalize;
+    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;
+}