@xaypay/tui 0.0.76 → 0.0.78

package/src/components/table/index.js

@@ -1,125 +1,184 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import classnames from "classnames";
-import styles from "./table.module.css";
-import { Checkbox } from "../checkbox";
+import React from 'react';
+import PropTypes from 'prop-types';
 
-export const Table = ({
-    className,
-    onChange,
-    config,
-    jsonData,
-    hearderData,
-    keyNames,
-    actions,
-    ...props
-}) => {
-    const classProps = classnames(className);
-    let tbodyData = jsonData.length ? JSON.parse(jsonData) : [];
+import { compereConfigs } from './../../utils';
+
+const Table = ({
+  tableHeadItems,
+  tableBodyItems,
 
-    useEffect(()=>{
-        tbodyData = jsonData.length ? JSON.parse(jsonData) : [];
-    },[jsonData])
+  tHeadColor,
+  tHeadFamily,
+  tHeadPadding,
+  tHeadFontWeight,
+  tHeadBorderRadius,
+  tHeadBackgroundColor,
 
-    const [checked,setChecked] = useState(config.isCheckbox && config.isCheckbox.checked ? config.isCheckbox.checked : []);
+  tBodyColor,
+  tBodyPadding,
+  tBodyFontSize,
+  tBodyTextAlign,
+  tBodyFontWeight,
+  tBodyFontFamily,
+
+  tBodyRowBorder,
+  tBodyMarginTop,
+}) => {
+  
+  const configStyles = compereConfigs();
 
+  return (
+    <>
+      <table
+        style={{
+          width: '1475px',
+          borderCollapse: 'collapse'
+        }}
+      >
 
-    config.isCheckbox && config.isCheckbox.showCheckbox == undefined
-        ? (config.isCheckbox.showCheckbox = () => {
-              return true;
-          })
-        : "";
+        {
+          tableHeadItems && tableHeadItems.length > 0 && <thead>
+            <tr
+              style={{
+                color: tHeadColor ? tHeadColor : configStyles.TABLE.tHeadColor,
+                backgroundColor: tHeadBackgroundColor ? tHeadBackgroundColor : configStyles.TABLE.tHeadBackgroundColor
+              }}
+            >
+              {
+                tableHeadItems.map((item, index) => {
+                  return (
+                    <th
+                      key={`${item}_${index}`}
+                      style={{
+                        cursor: 'pointer',
+                        padding: tHeadPadding ? tHeadPadding : configStyles.TABLE.tHeadPadding,
+                        fontFamily: tHeadFamily ? tHeadFamily : configStyles.TABLE.tHeadFamily,
+                        fontWeight: tHeadFontWeight ? tHeadFontWeight : configStyles.TABLE.tHeadFontWeight,
+                        borderTopLeftRadius: index === 0 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px',
+                        borderTopRightRadius: index === tableHeadItems.length - 1 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px'
+                      }}
+                    >
+                      {item.type === 'show' ? item.content : ''}
+                    </th>
+                  )
+                })
+              }
+            </tr>
+          </thead>
+        }
 
-    return (
-        <div className={`${styles["table-wrap"]} table-wrap-rem`}>
-            {config.isHeader &&
-                hearderData.map((header, key) => {
-                    return (
-                        <div className={`${styles["table-top"]} table-top-rem`} key={key}>
-                            <div className={`${styles["table-items"]} table-items-rem`}>
-                                {header}
-                            </div>
-                        </div>
-                    );
-                })}
-            <div className={`${styles["table-bottom"]} table-bottom-rem`}>
-                {tbodyData.map((item, key) => {
-                    return (
-                        <div className={`${styles["table-bottom-inner"]} table-bottom-inner-rem`} key={key}>
-                            {keyNames.map((keyName, keyNameKey) => {
-                                return (
-                                    <div
-                                        className={`${styles["table-items"]} table-items-rem`}
-                                        key={keyNameKey}
-                                    >
-                                        {config.isCheckbox &&
-                                            config.isCheckbox.showCheckbox &&
-                                            config.isCheckbox.showCheckbox(
-                                                item
-                                            ) &&
-                                            keyNameKey == 0 && (
-                                                <Checkbox
-                                                    onClick={(e) => {
-                                                        const id = e.target.id;
-                                                        const checkedValue = e.target.checked;
-                                                        let ch = [...checked]
-                                                        checkedValue ? ch.push(Number(id)) : ch.splice(ch.indexOf(id), 1);
-                                                        setChecked(ch);
-                                                        config.isCheckbox.onChange(ch);
-                                                    }}
-                                                    jsonData={`[{"value":"", "name":"", "label":"", "id":${item.id}, "checked":${checked.indexOf(item.id) > -1 ? true : false }}]`}
-                                                />
-                                            )}
-                                        {typeof keyName === "string" ? (
-                                            item[keyName]
-                                        ) : (
-                                            <>
-                                                <i className={keyName.icon} />
-                                                {item[keyName.name]}
-                                            </>
-                                        )}
-                                    </div>
-                                );
-                            })}
+        {
+          tableBodyItems && tableBodyItems.length > 0 && <tbody
+            style={{
+              overflow: 'auto',
+              boxShadow: '0px 10px 30px rgba(0, 35, 106, 0.06)'
+            }}
+          >
 
-                            {actions && (
-                                <div className={`${styles["table-items"]} table-items-rem`}>
-                                    {actions.filter(a => a.show && a.show(item) || a.show === undefined).map((action, key) => {
-                                            return (<div key={key}>
-                                                <i className={action.icon} onClick={action.click? action.click : ()=>{}}>
-                                                    {action.icon}
-                                                </i>
-                                            </div>)
-                                    })}
-                                </div>
-                            )}
-                        </div>
-                    );
-                })}
-            </div>
-        </div>
-    );
+            {
+              
+              tableBodyItems.map((item, index) => {
+                const monst = Object.entries(item);
+                return (
+                  <>
+                    {/* {
+                      tBodyMarginTop ? tBodyMarginTop : configStyles.TABLE.tBodyMarginTop && index === 0 && <tr>
+                        <td
+                          style={{
+                            height: tBodyMarginTop ? tBodyMarginTop : configStyles.TABLE.tBodyMarginTop
+                          }}
+                        >
+                        </td>
+                      </tr>
+                    } */}
+                    
+                    <tr
+                      key={`${item.id}_${index}`}
+                      style={{
+                        borderBottom: index === tableBodyItems.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : configStyles.TABLE.tBodyRowBorder
+                      }}
+                    >
+                      { 
+                        Object.values(item).map((innerItem, innerIndex) => {
+                          if (monst[innerIndex][0] !== 'id') {
+                            return (
+                              <td
+                                key={`${innerItem}_${innerIndex}`}
+                                style={{
+                                  color: tBodyColor ? tBodyColor : configStyles.TABLE.tBodyColor,
+                                  padding: tBodyPadding ? tBodyPadding : configStyles.TABLE.tBodyPadding,
+                                  fontSize: tBodyFontSize ? tBodyFontSize : configStyles.TABLE.tBodyFontSize,
+                                  textAlign: tBodyTextAlign ? tBodyTextAlign : configStyles.TABLE.tBodyTextAlign,
+                                  fontFamily: tBodyFontFamily ? tBodyFontFamily : configStyles.TABLE.tBodyFontFamily,
+                                  fontWeight: tBodyFontWeight ? tBodyFontWeight : configStyles.TABLE.tBodyFontWeight,
+                                  borderRight: innerIndex === Object.values(item).length - 1 ? 'none' : configStyles.TABLE.tBodyRowBorder
+                                }}
+                              >
+                                {
+                                  Array.isArray(innerItem)
+                                    ? innerItem.length > 0
+                                      ? innerItem.map((newItem, newIndex) => {
+                                          if (newItem && !Array.isArray(newItem) && typeof newItem === 'object') {
+                                            return Object.values(newItem).map((actionItem, actionIndex) => {
+                                              return (
+                                                <span
+                                                  key={`${actionItem}_${actionIndex}`}
+                                                  style={{
+                                                    cursor: 'pointer'
+                                                  }}
+                                                >
+                                                  { actionItem }
+                                                </span>
+                                              )
+                                            })
+                                          } else {
+                                            return <span
+                                              key={`${newItem}_${newIndex}`}
+                                            >
+                                              {newItem}
+                                            </span>
+                                          }
+                                        })
+                                      : ''
+                                    : innerItem
+                                }
+                              </td>
+                            )
+                          }
+                        })
+                      }
+                    </tr>
+                  </>
+                )
+              })
+            }
+          </tbody>
+        }
+      </table>
+    </>
+  );
 };
 
 Table.propTypes = {
-    className: PropTypes.string,
-    onChange: PropTypes.func,
-    config: PropTypes.object,
-    actions: PropTypes.arrayOf(PropTypes.object),
-    jsonData: PropTypes.string,
-    keyNames: PropTypes.arrayOf(
-        PropTypes.oneOf([PropTypes.string, PropTypes.object])
-    ),
-    hearderData: PropTypes.array,
-};
+  tableHeadItems: PropTypes.array,
+  tableBodyItems: PropTypes.array,
+
+  tHeadColor: PropTypes.string,
+  tHeadFamily: PropTypes.string,
+  tHeadPadding: PropTypes.string,
+  tHeadFontWeight: PropTypes.number,
+  tHeadBorderRadius: PropTypes.string,
+  tHeadBackgroundColor: PropTypes.string,
 
-Table.defaultProps = {
-    className: "",
-    onChange: undefined,
-    errorMessage: "",
-    config: { isHeader: true, isCheckbox: {checked:[]} },
-    actions: [],
-    jsonData: "",
-    keyNames: [],
-    hearderData: [],
+  tBodyColor: PropTypes.string,
+  tBodyPadding: PropTypes.string,
+  tBodyFontSize: PropTypes.string,
+  tBodyTextAlign: PropTypes.string,
+  tBodyFontWeight: PropTypes.string,
+  tBodyFontFamily: PropTypes.string,
+
+  tBodyRowBorder: PropTypes.string,
+  tBodyMarginTop: PropTypes.string
 };
+
+export default Table;

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

@@ -1,36 +1,205 @@
-import React from "react";
-import { Table } from "./index";
+import React from 'react';
+import Table from './index';
+
+import { ReactComponent as ReactSVG }  from './../../assets/table-settings-icon.svg';
 
 export default {
-  component: Table,
-  title: "Components/Table",
+    component: Table,
+    title: 'Components/Table'
 };
 
-const Template = (args) => <Table {...args} />;
+const Template = (args) => {
+    const tableDataInfo = {
+        header: [
+            {
+                type: 'show',
+                content: 'Հ/Հ'
+            },
+            {
+                type: 'show',
+                content: 'ՀՎՀՀ'
+            },
+            {
+                type: 'show',
+                content: 'Վարչ․շրջան'
+            },
+            {
+                type: 'show',
+                content: 'Վճար'
+            },
+            {
+                type: 'show',
+                content: 'Ամսաթիվ'
+            },
+            {
+                type: 'show',
+                content: 'Մուտքի ամս․'
+            },
+            {
+                type: 'show',
+                content: 'Հավելյալ ինֆորմացիա'
+            },
+            {
+                type: 'show',
+                content: 'Ստեղծված'
+            },
+            {
+                type: 'show',
+                content: 'Գործողություն'
+            },
+            {
+                type: 'show',
+                content: <ReactSVG />
+            }
+        ],
+        body: [
+    
+        ]
+    };
+
+    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={tableDataInfo.header} tableBodyItems={tableBodyItems} {...args} />;
+};
 
 export const Default = Template.bind({});
+Default.args = {};
+
+
+
+
+
+
+
+
+
+
+// {
+//     header: [
+//         "Hello" | <component></component>,
+//         "Title 2",
+//         {
+//             type: 'hide',
+//             icon: svg
+//         }
+//     ]
+
+//     body: [
+//         {
+//             color: 'red',
+//             colorStatus: 'left' | "row" | "right",
+//             data: [
+//                 "jkashdkjha",
+//                 "jkashdkjha 1",
+//                 "jkashdkjha 2",
+//                 {
+//                     type: "image",
+//                     svg: <SVG></SVG>,
+//                     click: onclick()
+//                 },
+//                 {
+//                     type: "action",
+//                     data: [
+//                         {
+//                             icon: svg,
+//                             title?: 'sadas',
+//                             click: onclick()
+//                         },
+//                         {
+//                             icon: svg,
+//                             group: [
+//                                 {
+//                                     icon: svg,
+//                                     title?: 'sadas',
+//                                     click: onclick()
+//                                 },
+//                                 {
+//                                     icon: svg,
+//                                     title?: 'sadas',
+//                                     click: onclick()
+//                                 }
+//                             ]
+//                         }
+//                     ]
+//                 },
+//                 {
+//                     type: "action",
+//                     data: [
+//                         [
+//                             {
+//                                 icon: svg,
+//                                 title?: 'sadas',
+//                                 click: onclick()
+//                             },
+//                             {
+//                                 icon: svg,
+//                                 group: [
+//                                     {
+//                                         icon: svg,
+//                                         title?: 'sadas',
+//                                         click: onclick()
+//                                     },
+//                                     {
+//                                         icon: svg,
+//                                         title?: 'sadas',
+//                                         click: onclick()
+//                                     }
+//                                 ]
+//                             }
+//                         ],
+//                         [
+//                             {
+//                                 icon: svg,
+//                                 title?: 'sadas',
+//                                 click: onclick()
+//                             },
+//                             {
+//                                 icon: svg,
+//                                 group: [
+//                                     {
+//                                         icon: svg,
+//                                         title?: 'sadas',
+//                                         click: onclick()
+//                                     },
+//                                     {
+//                                         icon: svg,
+//                                         title?: 'sadas',
+//                                         click: onclick()
+//                                     }
+//                                 ]
+//                             }
+//                         ]
+//                     ]
+//                 },
+//                 {
+//                     type: "accordion",
+//                     title: 'asdasdsa',
+//                     openKeys: [
+//                         't1',
+//                         't2',
+//                         't3'
+//                     ]
+//                 },
+//                 {
+//                     type: "text",
+//                     accourdionData: [
+//                         'asdasd',
+//                         <Component></Component>,
+//                         'asdasd',
+//                         'asdasd'
+//                     ]
+//                 }
+//             ]
+//         }
+//     ]
+// }
 
-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

@@ -40,6 +40,7 @@ module.exports = {
         errorColor: '#e00',                                // for error message color
         labelWeight: '500',                                // for label font weight
         errorClassName: '',                                // for error message classname (you can set custom class for your custom css)
+        telErrorMessage: '',                               // for error message when type is tel
         phoneDisplay: 'flex',                              // for phone extention display, work when input type is tel
         autoComplete: 'off',                               // for autocomplete fill mode (browser specific, may not work)
         errorBottom: '-20px',                              // for error message position from bottom (work when errorPosition prop is 'absolute')
@@ -50,12 +51,15 @@ module.exports = {
         labelLineHeight: '22px',                           // for label line height
         errorLineHeight: '19px',                           // for error message line height
         boxSizing: 'border-box',                           // for box sizing
+        borderRight: '1px 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 +198,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 +218,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: {
@@ -276,11 +281,10 @@ module.exports = {
         contentTopMaxWidth: '400px',                          // for autocomplate top block max width
         contentTopLineHeight: '22px',                         // for autocomplate top block line height
         contentTopPadding: '0px 15px',                        // for autocomplate top block padding
-        contentTopBorder: '2px solid',                        // for autocomplate top block border
-        contentTopBorderColor: '#D1D1D1',                     // for autocomplate top block border color
         contentTopBoxSizing: 'border-box',                    // for autocomplate top block box sizing
-        contentTopBorderHoverColor: '#3C393E',                // for autocomplate top block border hover color
-        contentTopBorderActiveColor: '#00236A',               // for autocomplate top block border active color
+        contentTopBorder: '0 0 0 2px #D1D1D1',                // for autocomplate top block border color
+        contentTopBorderHover: '0 0 0 2px #3C393E',           // for autocomplate top block border hover color
+        contentTopBorderActive: '0 0 0 2px #00236A',          // for autocomplate top block border active color
 
         contentBottomZindex: 1,                               // for autocomplete bottom block z-index
         contentBottomLeft: '0px',                             // for autocomplete bottom block left
@@ -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',
     }
 };