@xaypay/tui 0.0.105 → 0.0.107

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

@@ -1,87 +1,88 @@
-import React, { useState } from "react";
-import { Modal } from "./index";
+import React, { useState } from 'react'
+import { Modal } from './index'
 
 export default {
-  component: Modal,
-  title: "Components/Modal",
-};
+    component: Modal,
+    title: 'Components/Modal',
+}
 
-const Template = ({ headerText, className }) => {
-  const [show, setShow] = useState(false);
-  const [type, setType] = useState('content');
-  const data = [
-    {
-      url: 'https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg&fm=jpg',
-      id: 1
-    },
-    {
-      url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS8LHEGxt49kfpf7asGDZd5rnTjQMD0HF2WtJ3wKEDww&s',
-      id: 2
-    },
-    {
-      url: 'https://s.alamy.com/kdawwlsweh27/2LtummpjO849eQ83yGGiUN/316e62a71020a924f9f663b6ca6b7eda/Fresh_Stock_Content.jpg?fm=jpg&q=100',
-      id: 3
-    },
-    {
-      url:  'https://media.istockphoto.com/id/533899788/photo/mount-ararat-from-armenia.jpg?s=612x612&w=0&k=20&c=dB48gVwJq4UGCzdLpOsxDv9DniGQIOBdmli28zUXu0A=',
-      id: 4
-    },
-    {
-      url:  'https://media.istockphoto.com/id/500221043/photo/cascade-yerevan.jpg?s=612x612&w=0&k=20&c=vaULCkIZaIbetZlkFnP20ELnD8cyhlc9cRsvt-X5YAk=',
-      id: 5
-    },
-    {
-      url:  'https://images.unsplash.com/photo-1512850183-6d7990f42385?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8dmVydGljYWx8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
-      id: 6
-    },
-    {
-      url:  './../../assets/figma-image.png',
-      id: 7
-    }
-  ];
+const Template = ({ className }) => {
+    const [show, setShow] = useState(false)
+    const [type, setType] = useState('content')
+    const data = [
+        {
+            url: 'https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg&fm=jpg',
+            id: 1,
+        },
+        {
+            url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS8LHEGxt49kfpf7asGDZd5rnTjQMD0HF2WtJ3wKEDww&s',
+            id: 2,
+        },
+        {
+            url: 'https://s.alamy.com/kdawwlsweh27/2LtummpjO849eQ83yGGiUN/316e62a71020a924f9f663b6ca6b7eda/Fresh_Stock_Content.jpg?fm=jpg&q=100',
+            id: 3,
+        },
+        {
+            url: 'https://media.istockphoto.com/id/533899788/photo/mount-ararat-from-armenia.jpg?s=612x612&w=0&k=20&c=dB48gVwJq4UGCzdLpOsxDv9DniGQIOBdmli28zUXu0A=',
+            id: 4,
+        },
+        {
+            url: 'https://media.istockphoto.com/id/500221043/photo/cascade-yerevan.jpg?s=612x612&w=0&k=20&c=vaULCkIZaIbetZlkFnP20ELnD8cyhlc9cRsvt-X5YAk=',
+            id: 5,
+        },
+        {
+            url: 'https://images.unsplash.com/photo-1512850183-6d7990f42385?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8dmVydGljYWx8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
+            id: 6,
+        },
+        {
+            url: './../../assets/figma-image.png',
+            id: 7,
+        },
+    ]
 
-  const handleClick = () => {
-    setShow(true);
-  };
+    const handleClick = () => {
+        setShow(true)
+    }
 
-  const handleChangeType = () => {
-    if (type === 'content') {
-      setType('images');
-    } else {
-      setType('content');
+    const handleChangeType = () => {
+        if (type === 'content') {
+            setType('images')
+        } else {
+            setType('content')
+        }
     }
-  };
-  
-  return (
-    <>
-      <button
-        onClick={handleClick}
-        style={{ cursor: 'pointer', padding: '8px', fontSize: '16px', marginRight: '10px' }}
-      >Click</button>
-      <button
-        onClick={handleChangeType}
-        style={{ cursor: 'pointer', padding: '8px', fontSize: '16px' }}
-      >Change type to {type === 'content' ? 'images' : 'content'}</button>
-      {show && (
-        <Modal type={type} selected={0} data={data} setShow={setShow} className={className}>
-          <div
-            style={{
-              width: '400px',
-              height: '500px',
-              backgroundColor: 'red'
-            }}
-          >
-            just test
-          </div>
-        </Modal>
-      )}
-    </>
-  );
-};
 
-export const Default = Template.bind({});
+    return (
+        <>
+            <button
+                onClick={handleClick}
+                style={{ cursor: 'pointer', padding: '8px', fontSize: '16px', marginRight: '10px' }}
+            >
+                Click
+            </button>
+            <button onClick={handleChangeType} style={{ cursor: 'pointer', padding: '8px', fontSize: '16px' }}>
+                Change type to {type === 'content' ? 'images' : 'content'}
+            </button>
+            {show && (
+                <Modal type={type} selected={0} data={data} setShow={setShow} className={className}>
+                    <div
+                        style={{
+                            width: '400px',
+                            height: '500px',
+                            backgroundColor: 'red',
+                        }}
+                    >
+                        just test
+                    </div>
+                </Modal>
+            )}
+        </>
+    )
+}
+
+export const Default = Template.bind({})
 
 Default.args = {
-  headerText: "Modal header text",
-  className: "Modal",
-};
+    headerText: 'Modal header text',
+    className: 'Modal',
+}

package/src/components/newAutocomplete/NewAutocomplete.stories.js

@@ -1,60 +1,102 @@
-import React, { useState } from 'react';
-import { NewAutocomplete } from './index';
+import React, { useState } from 'react'
+import { NewAutocomplete } from './index'
 
 export default {
-  component: NewAutocomplete,
-  title: 'Components/NewAutocomplete',
-  argTypes: {
-    options: {
-      control: 'array'
-    },
-    getItem: {
-      control: 'function'
+    component: NewAutocomplete,
+    title: 'Components/NewAutocomplete',
+    argTypes: {
+        options: {
+            control: 'array',
+        },
+        getItem: {
+            control: 'function',
+        },
+        change: {
+            control: 'function',
+        },
     },
-    change: {
-      control: 'function'
-    }
-  }
-};
+}
 
 const Template = (args) => {
-  const [newOptions, setNewOptions] = useState([]);
-  const [sel, setSel] = useState({ "bbb":"0", "name":"gasdfgdsfgdsg" });
-  const handleClick = (selected) => {
-    console.log(selected, 'selected');
-  };
+    const [newOptions, setNewOptions] = useState([])
+    const [sel, setSel] = useState({ bbb: '0', name: 'gasdfgdsfgdsg' })
+    const handleClick = (selected) => {
+        console.log(selected, 'selected')
+    }
 
-  const handleChange = (value) => {
-      fetch(`http://dev2.govazd-api.yerevan.am/api/v1/companies/autocomplete?slug=${value.name ? value.name : ''}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6ImE1Mjk4NTU5ZjRiYWMxMzQyOTM3OTIzMTM2ZWQwNTM2ZWI1NjNlMzdhZGJjYjlkOWE1OWE5YjBlODBlM2JkMTJjZDE4YTAxM2NjNWEwOTM2IiwiaWF0IjoxNjg2ODA2NzEyLjgyNjEyLCJuYmYiOjE2ODY4MDY3MTIuODI2MTI4LCJleHAiOjE2ODY4MzE5MTIuODA0MTYxLCJzdWIiOiJtaW5hczg5QG1haWwucnUiLCJzY29wZXMiOlsiZW1haWwiXX0.Laezbf2xobWHCeDsFD_9nrGsPznIqUAz56Y-KyfvGt6x6F7WpxAg5HovIeiaLdhi0wdHWZhYnOMVktlHz-Gw0wdC6i-0IMq27tc968o21sTwp3jkVTl543J334u2-ju-s0nx9Yfcd84ySd499sMlhZRbsxuUPKJTiPAXeG6_tqlnMGRcQPIN24SIY4FLzES2vIQ6SqeiSQm9UQFlf4rmHVE7bEhFUPHXymNLMk8gS7Jm_xdhWtuv2Ei0ipiTApmUwpE4GYnpiHnnrEoZVrJ-sFgFZJekV0theZp5qPvjyLOVaC1rPIwwt8pdQZcfwFGxWWC9J3cEHtPfw9UhIsLi_IjS0OsFWuast6z6qSGVBpymQPA3oA1QSO4iA2UPAC0Yj7cYpYHP1q76jxbnSfYM0ifWwPUanX2OUdMWRMGuwzct7gi2jC3WIwTICahxrKFr_YpbEupxweL2IbxUeGoKCY13bq97C4u7bGELPlhoNHxm2HTD1Gp_sdQcEepJj2OMOvxE3eRCaJwyCtjZgsFpZSZYxo_6cSuCDGb0oxXESMjLPvCrleIXVJykc9ZjiK0gCZzeX83N9QlndsJ4elOcM8dLy0OOvXoojF1o_TMqSw8sD8wjpEo9Bp0MyUs4hPjmiBSrPNSAo9jbpgLYWuTUvCpPXFqmRkZhr4T_hnnuHkk',
-        },
-      }).then((res)=> {
-        return res.json()
-      }).then((data)=> {
-        if (data.data.success === false) {
-          setNewOptions([]);
-        } else {
-          setNewOptions(data.data.companies);
-        }
-        console.log(data, 'data')
-      });
-  };
+    const handleChange = (value) => {
+        fetch(`http://dev2.govazd-api.yerevan.am/api/v1/companies/autocomplete?slug=${value.name ? value.name : ''}`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization:
+                    'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6ImE1Mjk4NTU5ZjRiYWMxMzQyOTM3OTIzMTM2ZWQwNTM2ZWI1NjNlMzdhZGJjYjlkOWE1OWE5YjBlODBlM2JkMTJjZDE4YTAxM2NjNWEwOTM2IiwiaWF0IjoxNjg2ODA2NzEyLjgyNjEyLCJuYmYiOjE2ODY4MDY3MTIuODI2MTI4LCJleHAiOjE2ODY4MzE5MTIuODA0MTYxLCJzdWIiOiJtaW5hczg5QG1haWwucnUiLCJzY29wZXMiOlsiZW1haWwiXX0.Laezbf2xobWHCeDsFD_9nrGsPznIqUAz56Y-KyfvGt6x6F7WpxAg5HovIeiaLdhi0wdHWZhYnOMVktlHz-Gw0wdC6i-0IMq27tc968o21sTwp3jkVTl543J334u2-ju-s0nx9Yfcd84ySd499sMlhZRbsxuUPKJTiPAXeG6_tqlnMGRcQPIN24SIY4FLzES2vIQ6SqeiSQm9UQFlf4rmHVE7bEhFUPHXymNLMk8gS7Jm_xdhWtuv2Ei0ipiTApmUwpE4GYnpiHnnrEoZVrJ-sFgFZJekV0theZp5qPvjyLOVaC1rPIwwt8pdQZcfwFGxWWC9J3cEHtPfw9UhIsLi_IjS0OsFWuast6z6qSGVBpymQPA3oA1QSO4iA2UPAC0Yj7cYpYHP1q76jxbnSfYM0ifWwPUanX2OUdMWRMGuwzct7gi2jC3WIwTICahxrKFr_YpbEupxweL2IbxUeGoKCY13bq97C4u7bGELPlhoNHxm2HTD1Gp_sdQcEepJj2OMOvxE3eRCaJwyCtjZgsFpZSZYxo_6cSuCDGb0oxXESMjLPvCrleIXVJykc9ZjiK0gCZzeX83N9QlndsJ4elOcM8dLy0OOvXoojF1o_TMqSw8sD8wjpEo9Bp0MyUs4hPjmiBSrPNSAo9jbpgLYWuTUvCpPXFqmRkZhr4T_hnnuHkk',
+            },
+        })
+            .then((res) => {
+                return res.json()
+            })
+            .then((data) => {
+                if (data.data.success === false) {
+                    setNewOptions([])
+                } else {
+                    setNewOptions(data.data.companies)
+                }
+                console.log(data, 'data')
+            })
+    }
 
-  return (
-    <>
-      <NewAutocomplete {...args} getItem={handleClick} selected={sel} options={newOptions} change={handleChange} />
-      <button style={{ padding: '15px', cursor: 'pointer', margin: '10px 15px 0px 0px', borderRadius: '10px', fontSize: '22px' }} onClick={_ => setSel({ "bbb":"0", "name":"gasdfgdsfgdsg" })}>reset selected</button>
-      <button style={{ padding: '15px', cursor: 'pointer', margin: '10px 15px 0px 0px', borderRadius: '10px', fontSize: '22px' }} onClick={_ => setSel({ "dd": "1", "name": "just ok" })}>change selected</button>
-      <button style={{ padding: '15px', cursor: 'pointer', margin: '10px 15px 0px 0px', borderRadius: '10px', fontSize: '22px' }} onClick={_ => setSel({ "dd": "", "name": "" })}>empty selected</button>
-    </>
-  );
-};
-export const Default = Template.bind({});
+    return (
+        <>
+            <NewAutocomplete
+                {...args}
+                getItem={handleClick}
+                selected={sel}
+                options={newOptions}
+                change={handleChange}
+            />
+            <button
+                style={{
+                    padding: '15px',
+                    cursor: 'pointer',
+                    margin: '10px 15px 0px 0px',
+                    borderRadius: '10px',
+                    fontSize: '22px',
+                }}
+                onClick={() => setSel({ bbb: '0', name: 'gasdfgdsfgdsg' })}
+            >
+                reset selected
+            </button>
+            <button
+                style={{
+                    padding: '15px',
+                    cursor: 'pointer',
+                    margin: '10px 15px 0px 0px',
+                    borderRadius: '10px',
+                    fontSize: '22px',
+                }}
+                onClick={() => setSel({ dd: '1', name: 'just ok' })}
+            >
+                change selected
+            </button>
+            <button
+                style={{
+                    padding: '15px',
+                    cursor: 'pointer',
+                    margin: '10px 15px 0px 0px',
+                    borderRadius: '10px',
+                    fontSize: '22px',
+                }}
+                onClick={() => setSel({ dd: '', name: '' })}
+            >
+                empty selected
+            </button>
+        </>
+    )
+}
+export const Default = Template.bind({})
 Default.args = {
-  searchCount: 3,
-  keyNames: { name: 'name', id: 'bbb' },
-  selected: { "bbb":"0", "name":"gasdfgdsfgdsg" }
+    searchCount: 3,
+    keyNames: { name: 'name', id: 'bbb' },
+    selected: { bbb: '0', name: 'gasdfgdsfgdsg' },
 }