@xaypay/tui 0.0.76 → 0.0.77

package/src/components/table/table.stories.js

@@ -1,36 +1,39 @@
-import React from "react";
-import { Table } from "./index";
+import React from 'react';
+import Table from './index';
 
 export default {
-  component: Table,
-  title: "Components/Table",
+    component: Table,
+    title: 'Components/Table'
 };
 
-const Template = (args) => <Table {...args} />;
+const Template = (args) => {
+    const tableHeadItems = [
+        'Հ/Հ',
+        'ՀՎՀՀ',
+        'Վարչ․ շրջան',
+        'Վճար',
+        'Ամսաթիվ',
+        'Մուտքի ամիս',
+        'Հավելյալ ինֆորմացիա',
+        'Ստեղծված',
+        'Գործողություն',
+    ];
+
+    const tableBodyItems = [
+        { id: 1, hh: 19854, hvhh: 10195524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: ['item', 'just'] },
+        { id: 3, hh: 22641, hvhh: 12095524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: 'text' },
+        { id: 4, hh: 25005, hvhh: 15495524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
+        { id: 7, hh: 31576, hvhh: 16895524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
+        { id: 45, hh: 32586, hvhh: 17495524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
+        { id: 78, hh: 32754, hvhh: 20095524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
+        { id: 99, hh: 41411, hvhh: 20595524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
+        { id: 541, hh: 44547, hvhh: 26595524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
+    ];
+
+    return <Table tableHeadItems={tableHeadItems} tableBodyItems={tableBodyItems} {...args} />;
+};
 
 export const Default = Template.bind({});
-
-const showCheckbox = (item) => {
-  return true;
-  // return item.id === 2;
-}
-
-const onChange = (checked) => {
-  console.log("project",checked);
-}
-
-const show = () => {
-  return true
-}
-
-const action = (id) => {
-  console.log('action from project',id);
-}
-
 Default.args = {
-  config: {isHeader: true, isCheckbox: {showCheckbox: showCheckbox, checked: [], onChange: onChange }},
-  jsonData: JSON.stringify([{id:1,name:'Item 1',name2:'Item 1'},{id:2, name:'Item 2',name2:'Item 2'}]),
-  actions: [{icon: 'icon-1',show: show, click: action},{icon: 'icon-2'},{icon: 'icon-3'},{icon: 'icon-4'}],
-  keyNames: ['name',{name: 'name2', icon: 'icon-temp'}],
-  hearderData: ['first Name', 'Last Name','asdas',]
-};
+
+};

package/src/stories/usage.stories.mdx

@@ -17,6 +17,7 @@ import selectImage from './static/select-usage.png';
 import toastImage from './static/toaster-usage.png';
 import tooltipImage from './static/tooltip-usage.png';
 import textareaImage from './static/textarea-usage.png';
+import buttonImageIcon from './static/button-usage-icon.png';
 import fileSingleImage from './static/file-single-usage.png';
 import toasterImage from './static/toaster-container-usage.png';
 import autocompleteImage from './static/autocomplete-usage.png';
@@ -136,6 +137,9 @@ import autocompleteImage from './static/autocomplete-usage.png';
 ### Button
 <img src={buttonImage} alt="button image" />
 
+#### Button with icon prop
+<img src={buttonImageIcon} alt="button image" />
+
 ### Input
 <img src={inputImage} alt="input image" />
 

package/src/utils/index.js

@@ -2,24 +2,11 @@ const _ = require('lodash');
 
 export const compereConfigs = () => {
     let projectConfig = {};
-    let packageConfig = {};
+    let packageConfig = require(process.env.STORYBOOK_PATH);
 
     try {
-        packageConfig = require('../tui.config.js');
-    } catch (e){
-        try {
-            packageConfig = require('../../tui.config.js');
-        } catch (err) {
-            packageConfig = {};            
-        }
-    }
-
-    try {
-        projectConfig = require('../../../../tui.config.js');
-    } catch (error) {
-        projectConfig = {};
-        // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
-    }
+        projectConfig = require(`${process.env.STORYBOOK_CONFIG_PATH}`);
+    } catch(e) {}
 
     return _.merge(packageConfig, projectConfig);
 };

package/tui.config.js

@@ -50,12 +50,15 @@ module.exports = {
         labelLineHeight: '22px',                           // for label line height
         errorLineHeight: '19px',                           // for error message line height
         boxSizing: 'border-box',                           // for box sizing
+        borderRight: '2px solid',                          // for type tel right border
         backgroundColor: 'white',                          // for input and also (if there exist left or right icons) icons block background color 
         color: 'rgb(60, 57, 62)',                          // for input color
         labelMarginBottom: '6px',                          // for label margin bottom
         phoneAlignItems: 'center',                         // for phone extention inside item, work when input type is tel
         errorPosition: 'absolute',                         // for error message position (maybe you want to show error message in custom place)
         transform: 'scale3d(0,0,0)',                       // for transform (when have error message and errorAnimation prop is true)
+        borderRightColor: '#d1d1d1',                       // for type tel right border
+        borderRightColorHover: '#3c393e',                  // for type tel right border color when hover is active
         phoneJustifyContent: 'center',                     // for phone extention inside item, work when input type is tel
         boxShadow: '0 0 0 2px #d1d1d1',                    // for border size and color
         errorAnimationDuration: '240ms',                   // for animation duration (when have error message and errorAnimation prop is true)
@@ -194,9 +197,7 @@ module.exports = {
         selectedFontWeight: '500',                         // for selected font weight
         selectedLineHeight: '22px',                        // for selected line height
         selectedPadding: '0px 15px',                       // for selected padding
-        selectedBorder: '2px solid',                       // for selected border
         selectedHoverColor: '#373538',                     // for selected color ( when hover )
-        selectedBorderColor: '#D1D1D1',                    // for selected border color
         selectedBoxSizing: 'border-box',                   // for selected box sizing
         selectedTransition: 'border-color 240ms',          // for selected transition
 
@@ -216,6 +217,9 @@ module.exports = {
         optionItemBoxSizing: 'border-box',                 // for option box sizing
         optionItemBackgroudColor: '#ffffff',               // for option background color
         optionItemBackgroudColorHover: 'unset',            // for option background color ( when hover )
+
+        boxShadow: '0 0 0 2px #d1d1d1',
+        boxShadowHover: '0 0 0 2px #3c393e'
     },
     // default properties for <Textarea /> component
     TEXTAREA: {
@@ -374,5 +378,24 @@ module.exports = {
         backgroundColor: 'white',                             // for modal background color
         padding: '10px 20px 20px',                            // for modal padding
         layerBackgroundColor: 'rgba(0,0,0,0.4)',              // for modal parent layer background color
+    },
+    // default properties for <Table /> component
+    TABLE: {
+        tHeadFontWeight: 600,
+        tHeadColor: '#FBFBFB',
+        tHeadPadding: '11px 20px',
+        tHeadBorderRadius: '14px',
+        tHeadBackgroundColor: '#00236A',
+        tHeadFamily: 'Noto Sans Armenia',
+
+        tBodyColor: '#3C393E',
+        tBodyFontSize: '16px',
+        tBodyFontWeight: 500,
+        tBodyTextAlign: 'center',
+        tBodyPadding: '11px 20px',
+        tBodyFontFamily: 'Noto Sans Armenia',
+
+        tBodyRowBorder: '1px solid #eeeeee',
+        tBodyMarginTop: '20px',
     }
 };

package/src/components/table/table.module.css

@@ -1,80 +0,0 @@
-.table-wrap {
-    width: 100%;
-    background: #fff;
-    box-shadow: 0 10px 30px rgba(0,35,106,.06);
-    border-radius: 14px 14px 0 0;
-    overflow: hidden
-}
-
-.table-wrap:not(:first-child) {
-    margin-top: 30px
-}
-
-.table-bottom-inner .table-items:first-child,.table-top .table-items:first-child {
-    flex: 0 0 auto;
-    width: 60px
-}
-
-.table-bottom-inner .table-items:nth-child(2),.table-top .table-items:nth-child(2) {
-    flex: 0 0 auto;
-    width: 120px
-}
-
-.table-bottom-inner .table-items:nth-child(3),.table-top .table-items:nth-child(3) {
-    flex: 0 0 auto;
-    width: 170px
-}
-
-.table-bottom-inner .table-items:nth-child(4),.table-top .table-items:nth-child(4) {
-    flex: 0 0 auto;
-    width: 126px
-}
-
-.table-bottom-inner .table-items:nth-child(5),.table-bottom-inner .table-items:nth-child(6),.table-bottom-inner .table-items:nth-child(8),.table-top .table-items:nth-child(5),.table-top .table-items:nth-child(6),.table-top .table-items:nth-child(8) {
-    flex: 0 0 auto;
-    width: 100px
-}
-
-.table-bottom-inner .table-items:last-child,.table-top .table-items:last-child {
-    flex: 0 0 auto;
-    width: 104px
-}
-
-.table-top {
-    width: 100%;
-    height: 44px;
-    background: #00236a
-}
-
-.table-top .table-items {
-    flex: 1 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    color: #fff;
-    font-size: 15px;
-    line-height: 17px
-}
-
-.table-bottom-inner {
-    width: 100%;
-    min-height: 40px;
-    background: #fff
-}
-
-.table-bottom-inner .table-items {
-    flex: 1 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    font-size: 14px;
-    line-height: 16px;
-    border-bottom: 1px solid #eee;
-    padding: 4px
-}
-
-.table-bottom-inner .table-items:not(:last-child) {
-    border-right: 1px solid #eee
-}