@xaypay/tui 0.0.75 → 0.0.77

package/src/components/table/index.js

@@ -1,125 +1,191 @@
-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";
-
-export const Table = ({
-    className,
-    onChange,
-    config,
-    jsonData,
-    hearderData,
-    keyNames,
-    actions,
-    ...props
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { compereConfigs } from './../../utils';
+
+const Table = ({
+  tableHeadItems,
+  tableBodyItems,
+
+  tHeadColor,
+  tHeadFamily,
+  tHeadPadding,
+  tHeadFontWeight,
+  tHeadBorderRadius,
+  tHeadBackgroundColor,
+
+  tBodyColor,
+  tBodyPadding,
+  tBodyFontSize,
+  tBodyTextAlign,
+  tBodyFontWeight,
+  tBodyFontFamily,
+
+  tBodyRowBorder,
+  tBodyMarginTop,
 }) => {
-    const classProps = classnames(className);
-    let tbodyData = jsonData.length ? JSON.parse(jsonData) : [];
-
-    useEffect(()=>{
-        tbodyData = jsonData.length ? JSON.parse(jsonData) : [];
-    },[jsonData])
-
-    const [checked,setChecked] = useState(config.isCheckbox && config.isCheckbox.checked ? config.isCheckbox.checked : []);
-
-
-    config.isCheckbox && config.isCheckbox.showCheckbox == undefined
-        ? (config.isCheckbox.showCheckbox = () => {
-              return true;
-          })
-        : "";
-
-    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>
-                                );
-                            })}
-
-                            {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>
-    );
+  
+  const configStyles = compereConfigs();
+
+  return (
+    <>
+      <table
+        style={{
+          borderCollapse: 'collapse'
+        }}
+      >
+
+        {
+          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={{
+                        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}
+                    </th>
+                  )
+                })
+              }
+            </tr>
+          </thead>
+        }
+
+        {
+          tableBodyItems && tableBodyItems.length > 0 && <tbody
+            style={{
+              boxShadow: '0px 10px 30px rgba(0, 35, 106, 0.06)'
+            }}
+          >
+
+            {
+              
+              tableBodyItems.map((item, index) => {
+                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 (innerIndex > 0) { // TODO: 
+                            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>
+        }
+        
+
+        
+
+        <tfoot
+          style={{
+
+          }}
+        >
+          
+        </tfoot>
+      </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,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
-}