@xaypay/tui 0.0.105 → 0.0.107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.105",
+  "version": "0.0.107",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -9,7 +9,8 @@
     "storybook": "STORYBOOK_PATH=../../tui.config.js start-storybook -p 6006",
     "build-storybook": "STORYBOOK_PATH=../../tui.config.js build-storybook",
     "build-lib": "STORYBOOK_PATH=../tui.config.js STORYBOOK_CONFIG_PATH=../../../../tui.config.js rollup --config rollup.config.js",
-    "svgr": "svgr --icon --title-prop -d src/components/icon -- src/assets/icons"
+    "svgr": "svgr --icon --title-prop -d src/components/icon -- src/assets/icons",
+    "prepare": "husky install"
   },
   "author": "",
   "license": "MIT",
@@ -46,7 +47,12 @@
     "sass": "^1.54.9",
     "sass-loader": "^13.0.2",
     "style-loader": "^3.3.1",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.5",
+    "husky": "^8.0.0",
+    "lint-staged": "^13.1.0",
+    "eslint": "^8.32.0",
+    "eslint-plugin-react": "^7.32.1",
+    "prettier": "^2.8.3"
   },
   "peerDependencies": {
     "classnames": "^2.3.1",
@@ -62,5 +68,11 @@
     "react-icons": "^4.7.1",
     "uuid": "^9.0.0"
   },
-  "bin": "./cli-command.js"
+  "bin": "./cli-command.js",
+  "lint-staged": {
+    "src/**/*.{js, jsx}": [
+      "prettier --write",
+      "eslint --max-warnings=0"
+    ]
+  }
 }

package/rollup.config.js

@@ -1,9 +1,9 @@
 // import {babel} from '@rollup/plugin-babel';
-import svg from 'rollup-plugin-svg';
-import babel from 'rollup-plugin-babel';
-import resolve from '@rollup/plugin-node-resolve';
-import external from 'rollup-plugin-peer-deps-external';
-import postcss from 'rollup-plugin-postcss';
+import svg from 'rollup-plugin-svg'
+import babel from 'rollup-plugin-babel'
+import resolve from '@rollup/plugin-node-resolve'
+import external from 'rollup-plugin-peer-deps-external'
+import postcss from 'rollup-plugin-postcss'
 
 export default [
     {
@@ -17,9 +17,9 @@ export default [
                 file: 'dist/index.es.js',
                 format: 'es',
                 exports: 'named',
-            }
+            },
         ],
-        external: ['prop-types','classnames'],
+        external: ['prop-types', 'classnames'],
         plugins: [
             postcss({
                 plugins: [],
@@ -31,7 +31,7 @@ export default [
             }),
             svg(),
             external(),
-            resolve()
-        ]
-    }
-]
+            resolve(),
+        ],
+    },
+]

package/src/assets_old/icons/demo-files/demo.js

@@ -1,30 +1,28 @@
 if (!('boxShadow' in document.body.style)) {
-    document.body.setAttribute('class', 'noBoxShadow');
+    document.body.setAttribute('class', 'noBoxShadow')
 }
 
-document.body.addEventListener("click", function(e) {
-    var target = e.target;
-    if (target.tagName === "INPUT" &&
-        target.getAttribute('class').indexOf('liga') === -1) {
-        target.select();
+document.body.addEventListener('click', function (e) {
+    var target = e.target
+    if (target.tagName === 'INPUT' && target.getAttribute('class').indexOf('liga') === -1) {
+        target.select()
     }
-});
-
-(function() {
+})
+;(function () {
     var fontSize = document.getElementById('fontSize'),
         testDrive = document.getElementById('testDrive'),
-        testText = document.getElementById('testText');
+        testText = document.getElementById('testText')
     function updateTest() {
-        testDrive.innerHTML = testText.value || String.fromCharCode(160);
+        testDrive.innerHTML = testText.value || String.fromCharCode(160)
         if (window.icomoonLiga) {
-            window.icomoonLiga(testDrive);
+            window.icomoonLiga(testDrive)
         }
     }
     function updateSize() {
-        testDrive.style.fontSize = fontSize.value + 'px';
+        testDrive.style.fontSize = fontSize.value + 'px'
     }
-    fontSize.addEventListener('change', updateSize, false);
-    testText.addEventListener('input', updateTest, false);
-    testText.addEventListener('change', updateTest, false);
-    updateSize();
-}());
+    fontSize.addEventListener('change', updateSize, false)
+    testText.addEventListener('input', updateTest, false)
+    testText.addEventListener('change', updateTest, false)
+    updateSize()
+})()

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

@@ -1,33 +1,35 @@
-import React from "react";
-import { Autocomplate } from "./index";
+import React from 'react'
+import { Autocomplate } from './index'
 
 export default {
-  component: Autocomplate,
-  title: "Components/Autocomplate",
-};
+    component: Autocomplate,
+    title: 'Components/Autocomplate',
+}
 
-const Template = (args) => <Autocomplate {...args} />;
+const Template = (args) => <Autocomplate {...args} />
 
-export const Default = Template.bind({});
+export const Default = Template.bind({})
 Default.args = {
-  jsonOptionsData: '[{"bbb":"0", "value":"asd"}, {"bbb":"2", "value":"bas"}]',
-  jsonSelectedOptionsData: '{"bbb":"0", "value":"gasdfgdsfgdsg"}',
-  label: 'label',
-  keyNames: { name: 'value', id: 'bbb' },
-  searchCount: 2,
-  onChange: (aa)=> {
-    console.log(aa);
-    fetch(`http://dev2.govazd-api.yerevan.am/api/v1/companies/autocomplete?slug=${aa.name? aa.name : 'a'}`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6IjYyYTU0MzhmYjY3ODZmYzgzY2NkZmVkMGNlYzExZDZjY2IxNmRhNWJhYTVlOTMwMWVjNDU2MWRmYzIyMDcyYTc0ZjEyY2IxZGEzOTJlMjE5IiwiaWF0IjoxNjg2MDM0NTA0LjU5OTMzOSwibmJmIjoxNjg2MDM0NTA0LjU5OTM2NywiZXhwIjoxNjg2MDU5NzA0LjU4NDkxMiwic3ViIjoibWluYXM4OUBtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.DzzdZFLHiFTyUIlKIK25IMSxnjI0cQ5EaUT3vdMoZT3XjclPA1uohP4hiRr30Duy6psyOcPuQuZ2t8KuGUy5n500Di-Wbw0tZDVW-ctyOQNQRPjcTL41lN7xrTaRzxrkSa3KHlZT0_w4KjHTp32wo6XHWjLwrbZIFlBBbJv-bMBqj0KIcsLWHBMfHb2lU8UK6_xMgSbsV_E3FzrhbgmBeFifBTn9BVkduz450jWKmib5zKFRv4lqpFrMJo7gOQRj0-uQliCCdtnvOBW3QqBeT0Zl-RFH-Vc22GAxSYWF7PZ1M-tOZ2PlR7pyfJabp6nEtsRii5PhoejUBAynYmZBKxY-TvKGjfpOXcULm2w0zIqrV2KRf4acj189Kok_nE5rpReqc0xk6hxDdhyBPdBDtgm58c25G_fkkSpMJvDyZg0fqpCB7wkYfGpqeYH-eW4KYuZeReU1OyIKCTxBJhDfcFqZRb4x7TUIxNoFXknLhhU4mB7t75ZZxpUwtJRXqF_Ps8eiBWcfmt5uZfVQqzFXcBlx6lmDwBn7RIF0jy5oKvs6ss5mBjv0SdKSJrpRMa9GIVT9lUJDqKA15JZIGXdugjBXwlrzFfekePXA_7AAFrxgS0Dn7EZJCh7EmBdGG3slPLRtnkcVru2AOLHZ-aRPtVluzxgip9RU23VMVXvoX-I',
-      },
-    }).then((res)=> {
-      return res.json()
-    }).then((data)=> {
-      console.log(data)
-    })
-  }
-
-};
+    jsonOptionsData: '[{"bbb":"0", "value":"asd"}, {"bbb":"2", "value":"bas"}]',
+    jsonSelectedOptionsData: '{"bbb":"0", "value":"gasdfgdsfgdsg"}',
+    label: 'label',
+    keyNames: { name: 'value', id: 'bbb' },
+    searchCount: 2,
+    onChange: (aa) => {
+        console.log(aa)
+        fetch(`http://dev2.govazd-api.yerevan.am/api/v1/companies/autocomplete?slug=${aa.name ? aa.name : 'a'}`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization:
+                    'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6IjYyYTU0MzhmYjY3ODZmYzgzY2NkZmVkMGNlYzExZDZjY2IxNmRhNWJhYTVlOTMwMWVjNDU2MWRmYzIyMDcyYTc0ZjEyY2IxZGEzOTJlMjE5IiwiaWF0IjoxNjg2MDM0NTA0LjU5OTMzOSwibmJmIjoxNjg2MDM0NTA0LjU5OTM2NywiZXhwIjoxNjg2MDU5NzA0LjU4NDkxMiwic3ViIjoibWluYXM4OUBtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.DzzdZFLHiFTyUIlKIK25IMSxnjI0cQ5EaUT3vdMoZT3XjclPA1uohP4hiRr30Duy6psyOcPuQuZ2t8KuGUy5n500Di-Wbw0tZDVW-ctyOQNQRPjcTL41lN7xrTaRzxrkSa3KHlZT0_w4KjHTp32wo6XHWjLwrbZIFlBBbJv-bMBqj0KIcsLWHBMfHb2lU8UK6_xMgSbsV_E3FzrhbgmBeFifBTn9BVkduz450jWKmib5zKFRv4lqpFrMJo7gOQRj0-uQliCCdtnvOBW3QqBeT0Zl-RFH-Vc22GAxSYWF7PZ1M-tOZ2PlR7pyfJabp6nEtsRii5PhoejUBAynYmZBKxY-TvKGjfpOXcULm2w0zIqrV2KRf4acj189Kok_nE5rpReqc0xk6hxDdhyBPdBDtgm58c25G_fkkSpMJvDyZg0fqpCB7wkYfGpqeYH-eW4KYuZeReU1OyIKCTxBJhDfcFqZRb4x7TUIxNoFXknLhhU4mB7t75ZZxpUwtJRXqF_Ps8eiBWcfmt5uZfVQqzFXcBlx6lmDwBn7RIF0jy5oKvs6ss5mBjv0SdKSJrpRMa9GIVT9lUJDqKA15JZIGXdugjBXwlrzFfekePXA_7AAFrxgS0Dn7EZJCh7EmBdGG3slPLRtnkcVru2AOLHZ-aRPtVluzxgip9RU23VMVXvoX-I',
+            },
+        })
+            .then((res) => {
+                return res.json()
+            })
+            .then((data) => {
+                console.log(data)
+            })
+    },
+}

package/src/components/autocomplate/index.js

@@ -1,140 +1,158 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import classnames from "classnames";
-import { compereConfigs } from "./../../utils";
-import styles from "./autocomplate.module.css";
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { compereConfigs } from './../../utils'
+import styles from './autocomplate.module.css'
 
 export const Autocomplate = ({
-  label,
-  value,
-  required,
-  disabled,
-  keyNames,
-  onChange,
-  className,
-  searchCount,
-  placeHolder,
-  errorMessage,
-  autoComplete,
-  jsonOptionsData,
-  jsonSelectedOptionsData,
-  ...props
+    label,
+    required,
+    disabled,
+    keyNames,
+    onChange,
+    searchCount,
+    placeHolder,
+    errorMessage,
+    autoComplete,
+    jsonOptionsData,
+    jsonSelectedOptionsData,
+    ...props
 }) => {
-  const configStyles = compereConfigs();
-  const classProps = classnames(styles.searchBox, className);
-  const parseSelectedOptionsData =
-    jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : { name: '', id: '' };
-  const [inputValue, setInputValue] = useState(parseSelectedOptionsData[keyNames.name]);
-  const [inputId, setInputId] = useState(parseSelectedOptionsData[keyNames.id]);
-  const [activeOption, setActiveOption] = useState(0);
-  const [showOptions, setShowOptions] = useState(false);
-  const parseOptionsData =
-    jsonOptionsData ? JSON.parse(jsonOptionsData) : [];
+    const configStyles = compereConfigs()
+    const parseSelectedOptionsData = jsonSelectedOptionsData
+        ? JSON.parse(jsonSelectedOptionsData)
+        : { name: '', id: '' }
+    const [inputValue, setInputValue] = useState(parseSelectedOptionsData[keyNames.name])
+    const [inputId, setInputId] = useState(parseSelectedOptionsData[keyNames.id])
+    const [activeOption, setActiveOption] = useState(0)
+    const [showOptions, setShowOptions] = useState(false)
+    const parseOptionsData = jsonOptionsData ? JSON.parse(jsonOptionsData) : []
 
-  const handleChange = (e) => {
-    const currentInputValue = e.currentTarget.value;
-    setInputId(null)
-    setInputValue(currentInputValue);
-    setInputId('')
-    setActiveOption(0);
-    setShowOptions(true);
-    onChange({ name: currentInputValue, id: e.target.id });
-  };
-  const handleClick = (e) => {
-    setActiveOption(0);
-    setShowOptions(false);
-    setInputValue(e.target.innerText);
-    setInputId(e.target.id)
-
-    onChange({ name: e.target.innerText, id: e.target.id });
+    const handleChange = (e) => {
+        const currentInputValue = e.currentTarget.value
+        setInputId(null)
+        setInputValue(currentInputValue)
+        setInputId('')
+        setActiveOption(0)
+        setShowOptions(true)
+        onChange({ name: currentInputValue, id: e.target.id })
+    }
+    const handleClick = (e) => {
+        setActiveOption(0)
+        setShowOptions(false)
+        setInputValue(e.target.innerText)
+        setInputId(e.target.id)
 
-  };
-  let optionList;
-  if (showOptions && inputValue) {
-    if (parseOptionsData.length && inputValue.length >= searchCount) {
-      optionList = (
-        <div className={`${styles['autocomplate-content-bottom']} autocomplate-content-bottom-rem`}>
-          <div className={`${styles['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`}>
-            {parseOptionsData.map((optionName, index) => {
-              let className;
-              if (index === activeOption) {
-                className = "option-active";
-              }
-              return (
-                <div
-                  className={`${styles[className]} autocomplate-content-click-rem`}
-                  key={optionName[keyNames.id]}
-                  onClick={handleClick}
-                >
-                  <div id={optionName[keyNames.id]} className={`${styles['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`}>{optionName[keyNames.name]}</div>
+        onChange({ name: e.target.innerText, id: e.target.id })
+    }
+    let optionList
+    if (showOptions && inputValue) {
+        if (parseOptionsData.length && inputValue.length >= searchCount) {
+            optionList = (
+                <div className={`${styles['autocomplate-content-bottom']} autocomplate-content-bottom-rem`}>
+                    <div
+                        className={`${styles['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`}
+                    >
+                        {parseOptionsData.map((optionName, index) => {
+                            let className
+                            if (index === activeOption) {
+                                className = 'option-active'
+                            }
+                            return (
+                                <div
+                                    className={`${styles[className]} autocomplate-content-click-rem`}
+                                    key={optionName[keyNames.id]}
+                                    onClick={handleClick}
+                                >
+                                    <div
+                                        id={optionName[keyNames.id]}
+                                        className={`${styles['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`}
+                                    >
+                                        {optionName[keyNames.name]}
+                                    </div>
+                                </div>
+                            )
+                        })}
+                    </div>
                 </div>
-              );
-            })}
-          </div>
-        </div>
-
-
-      );
-    } else {
-      optionList = (
-        <div className={`${styles['autocomplate-content-bottom']} autocomplate-content-bottom-rem`}>
-          <div className={`${styles['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`}>
-            <div className={`${styles['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`}>
-              <div className={`${styles['no-option']} autocomplate-no-option`}>{inputValue.length < searchCount ? `Լրացնել առնվազն ${searchCount} նիշ` : 'Նման տվյալ առկա չէ'}</div>
-            </div>
-          </div>
-        </div>
-      );
+            )
+        } else {
+            optionList = (
+                <div className={`${styles['autocomplate-content-bottom']} autocomplate-content-bottom-rem`}>
+                    <div
+                        className={`${styles['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`}
+                    >
+                        <div
+                            className={`${styles['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`}
+                        >
+                            <div className={`${styles['no-option']} autocomplate-no-option`}>
+                                {inputValue.length < searchCount
+                                    ? `Լրացնել առնվազն ${searchCount} նիշ`
+                                    : 'Նման տվյալ առկա չէ'}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )
+        }
     }
-  }
 
-  useEffect(() => {
-    setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name])
-    setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id])
-  }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]])
+    useEffect(() => {
+        setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name])
+        setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id])
+    }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]])
 
-  return (
-    <>
-      {label ? <label className={`${styles['autocomplate-title']} autocomplate-title-rem`}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</label> : ""}
-      <div className={`${styles['autocomplate-content']} autocomplate-content-rem`}>
-        <input
-          id={inputId}
-          type="text"
-          autoComplete={autoComplete ? autoComplete : configStyles.INPUT.autoComplete}
-          className={`${styles['autocomplate-content-top']} autocomplate-content-top-rem ${errorMessage ? styles.errorBorder : ''}`}
-          disabled={disabled}
-          onChange={handleChange}
-          onClick={() => { setShowOptions(!showOptions) }}
-          value={inputValue}
-          placeholder={placeHolder}
-          style={{
-            cursor: disabled ? 'not-allowed' : 'auto'
-          }}
-          {...props}
-          />
-          {errorMessage ? <span className={styles.errorMessage}>{errorMessage}</span> : null}
-        {optionList}
-      </div>
-    </>
-  );
-};
+    return (
+        <>
+            {label ? (
+                <label className={`${styles['autocomplate-title']} autocomplate-title-rem`}>
+                    {label} {required && <sup style={{ color: '#ee0000' }}>*</sup>}
+                </label>
+            ) : (
+                ''
+            )}
+            <div className={`${styles['autocomplate-content']} autocomplate-content-rem`}>
+                <input
+                    id={inputId}
+                    type="text"
+                    autoComplete={autoComplete ? autoComplete : configStyles.INPUT.autoComplete}
+                    className={`${styles['autocomplate-content-top']} autocomplate-content-top-rem ${
+                        errorMessage ? styles.errorBorder : ''
+                    }`}
+                    disabled={disabled}
+                    onChange={handleChange}
+                    onClick={() => {
+                        setShowOptions(!showOptions)
+                    }}
+                    value={inputValue}
+                    placeholder={placeHolder}
+                    style={{
+                        cursor: disabled ? 'not-allowed' : 'auto',
+                    }}
+                    {...props}
+                />
+                {errorMessage ? <span className={styles.errorMessage}>{errorMessage}</span> : null}
+                {optionList}
+            </div>
+        </>
+    )
+}
 
 Autocomplate.propTypes = {
-  label: PropTypes.string,
-  disabled: PropTypes.bool,
-  required: PropTypes.bool,
-  onChange: PropTypes.func,
-  value: PropTypes.string,
-  keyNames: PropTypes.object,
-  className: PropTypes.string,
-  searchCount: PropTypes.number,
-  errorMessage: PropTypes.string,
-  placeHolder: PropTypes.string,
-  autoComplete: PropTypes.string,
-  jsonOptionsData: PropTypes.string,
-  jsonSelectedOptionsData: PropTypes.string,
-};
+    label: PropTypes.string,
+    disabled: PropTypes.bool,
+    required: PropTypes.bool,
+    onChange: PropTypes.func,
+    value: PropTypes.string,
+    keyNames: PropTypes.object,
+    className: PropTypes.string,
+    searchCount: PropTypes.number,
+    errorMessage: PropTypes.string,
+    placeHolder: PropTypes.string,
+    autoComplete: PropTypes.string,
+    jsonOptionsData: PropTypes.string,
+    jsonSelectedOptionsData: PropTypes.string,
+}
 
 Autocomplate.defaultProps = {
-  required: false,
-};
+    required: false,
+}

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

@@ -1,13 +1,13 @@
-import React from 'react';
-import { Button } from './index';
+import React from 'react'
+import { Button } from './index'
 
-import { ReactComponent as ReactSVG } from './../../assets/range-arrow-default.svg';
+import { ReactComponent as ReactSVG } from './../../assets/range-arrow-default.svg'
 
 export default {
     component: Button,
     title: 'Components/Button',
-};
+}
 
-const Template = (args) => <Button label='Button' icon={<ReactSVG />} {...args}/>;
+const Template = (args) => <Button label="Button" icon={<ReactSVG />} {...args} />
 
-export const Default = Template.bind({});
+export const Default = Template.bind({})