@xaypay/tui 0.0.114 → 0.0.116

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

@@ -29,7 +29,7 @@ const headerData = [
             checkedColor: 'orange',
             unCheckedColor: 'orange',
         },
-        sortingArrows: true,
+        sortingArrows: false,
     },
     {
         type: 'show',
@@ -490,16 +490,7 @@ const Template = (args) => {
         console.log(tData, ' data from table click action, with getData props')
     }
 
-    return (
-        <Table
-            {...args}
-            arrowColumn={2}
-            arrowShow
-            dataBody={bodyData}
-            dataHeader={headerData}
-            getData={handleGetData}
-        />
-    )
+    return <Table {...args} dataBody={bodyData} dataHeader={headerData} getData={handleGetData} />
 }
 
 export const Default = Template.bind({})

package/src/components/table/td.js

@@ -7,8 +7,12 @@ import { hasOwnerProperty } from './../../utils'
 import styles from './table.module.css'
 
 const TD = ({
+    row,
     item,
     index,
+    rowItem,
+    rowRadius,
+    hideBorder,
     innerIndex,
     tBodyColor,
     borderRight,
@@ -81,7 +85,12 @@ const TD = ({
                 textAlign: tBodyTextAlign,
                 fontFamily: tBodyFontFamily,
                 fontWeight: tBodyFontWeight,
+                borderColor: hideBorder ? 'transparent' : '#eeeeee',
                 boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
+                borderTopLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
+                borderBottomLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
+                borderTopRightRadius: rowItem && innerIndex === row.length - 1 ? rowRadius : '0px',
+                borderBottomRightRadius: rowItem && innerIndex === row.length - 1 ? rowRadius : '0px',
             }}
         >
             {Array.isArray(item) ? (
@@ -102,7 +111,11 @@ const TD = ({
                                     key={`${newItem.id}_${newIndex}`}
                                     onClick={(e) => handleCheckActions(e, newItem, 'type', newIndex)}
                                 >
-                                    {newItem.content}
+                                    {newItem.content === 0
+                                        ? newItem.content.toString()
+                                        : newItem.content
+                                        ? newItem.content
+                                        : ''}
                                 </span>
                             )
                         } else if (newItem && Array.isArray(newItem)) {
@@ -131,7 +144,11 @@ const TD = ({
                                                 onClick={(e) => handleCheckActions(e, iT, 'type', iN)}
                                                 key={`${iT.id || iT.content}_${iN}`}
                                             >
-                                                {iT.content}
+                                                {iT.content === 0
+                                                    ? iT.content.toString()
+                                                    : iT.content
+                                                    ? iT.content
+                                                    : ''}
                                             </span>
                                         )
                                     })}
@@ -149,7 +166,15 @@ const TD = ({
                     style={{
                         display: 'flex',
                         alignItems: 'flex-start',
-                        justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : 'center',
+                        justifyContent: hasOwnerProperty(item, 'checkBox')
+                            ? 'space-between'
+                            : tBodyTextAlign
+                            ? tBodyTextAlign === 'left'
+                                ? 'flex-start'
+                                : tBodyTextAlign === 'right'
+                                ? 'flex-end'
+                                : 'center'
+                            : 'center',
                     }}
                 >
                     {!hasOwnerProperty(item, 'hideArrow') &&
@@ -300,7 +325,11 @@ const TD = ({
                                                             }}
                                                             title={optionItem.content}
                                                         >
-                                                            {optionItem.content}
+                                                            {optionItem.content === 0
+                                                                ? optionItem.content.toString()
+                                                                : optionItem.content
+                                                                ? optionItem.content
+                                                                : ''}
                                                         </span>
                                                     </span>
                                                 )
@@ -344,7 +373,11 @@ const TD = ({
                                                 )
                                             }
                                         >
-                                            {innerItem.content}
+                                            {innerItem.content === 0
+                                                ? innerItem.content.toString()
+                                                : innerItem.content
+                                                ? innerItem.content
+                                                : ''}
                                         </p>
                                     )
                                 })}

package/src/components/table/th.js

@@ -9,9 +9,11 @@ import styles from './table.module.css'
 
 const TH = ({
     item,
+    hideBorder,
     tHeadFamily,
     tHeadPadding,
     tHeadFontSize,
+    tHeadTextAlign,
     tHeadFontWeight,
     handleCheckedHeader,
     borderTopLeftRadius,
@@ -38,21 +40,35 @@ const TH = ({
                 fontWeight: tHeadFontWeight,
                 borderTopLeftRadius: borderTopLeftRadius,
                 borderTopRightRadius: borderTopRightRadius,
+                borderColor: hideBorder ? 'transparent' : '#eeeeee',
             }}
             onClick={handleHeaderItemClick}
-            className={`${item.sortingArrows && styles['sorting-arrows']}`}
+            className={`${
+                hasOwnerProperty(item, 'sortingArrows')
+                    ? item.sortingArrows === true
+                        ? styles['sorting-arrows']
+                        : ''
+                    : ''
+            }`}
         >
             <div
                 style={{
                     display: 'flex',
                     alignItems: 'flex-start',
-                    justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : 'center',
+                    justifyContent: hasOwnerProperty(item, 'checkBox')
+                        ? 'space-between'
+                        : tHeadTextAlign
+                        ? tHeadTextAlign === 'left'
+                            ? 'flex-start'
+                            : tHeadTextAlign === 'right'
+                            ? 'flex-end'
+                            : 'center'
+                        : 'center',
                 }}
             >
                 {hasOwnerProperty(item, 'checkBox') ? (
                     <SingleCheckbox
                         data={item}
-                        float="left"
                         checked={item.checkBox.checked}
                         disabled={item.checkBox.disabled}
                         handleChecked={!item.checkBox.disabled ? handleCheckedHeader : (_) => _}

package/src/components/textarea/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-
+import classnames from 'classnames'
 import { compereConfigs } from './../../utils'
 
 import SvgRequired from './../icon/Required'
@@ -29,6 +29,7 @@ export const Textarea = ({
     labelSize,
     errorSize,
     marginTop,
+    className,
     labelColor,
     errorColor,
     labelWeight,
@@ -46,6 +47,7 @@ export const Textarea = ({
     const [isFocus, setIsFocus] = useState(false)
     const [innerValue, setInnerValue] = useState('')
 
+    const classProps = classnames(className ? className : configStyles.TEXTAREA.className)
     const configStyles = compereConfigs()
 
     const handleMouseEnter = () => {
@@ -107,6 +109,7 @@ export const Textarea = ({
             style={{
                 width: width ? width : configStyles.TEXTAREA.width,
             }}
+            className={classProps}
         >
             <div
                 style={{
@@ -228,6 +231,7 @@ Textarea.propTypes = {
     maxLength: PropTypes.number,
     labelSize: PropTypes.string,
     errorSize: PropTypes.string,
+    className: PropTypes.string,
     labelColor: PropTypes.string,
     errorColor: PropTypes.string,
     labelWeight: PropTypes.string,

package/src/components/toaster/index.js

@@ -1,5 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import classnames from 'classnames'
+import { compereConfigs } from './../../utils'
 
 import { Toast } from './Toast'
 
@@ -104,7 +106,10 @@ export const toast = {
     },
 }
 
-export const Toaster = () => {
+export const Toaster = ({ className }) => {
+    const configStyles = compereConfigs()
+    const classProps = classnames(className ? className : configStyles.TOASTER.className)
+
     window.addEventListener('popstate', () => {
         if (path !== window.location.href) {
             if (!toastify) {
@@ -122,5 +127,5 @@ export const Toaster = () => {
         e.stopPropagation()
     }
 
-    return <div onClick={handleToasterClick} id="toastify"></div>
+    return <div onClick={handleToasterClick} className={classProps} id="toastify"></div>
 }

package/src/components/tooltip/index.js

@@ -29,7 +29,7 @@ export const Tooltip = ({
     const [showTooltip, setShowTooltip] = useState(false)
 
     const configStyles = compereConfigs()
-    const classProps = classnames(styles['tooltip'], className)
+    const classProps = classnames(styles['tooltip-block'], className ? className : configStyles.TOOLTIP.className)
 
     const handleShow = () => {
         setShowTooltip(!showTooltip)
@@ -51,7 +51,7 @@ export const Tooltip = ({
 
     return (
         <div
-            className={`${styles['tooltip-block']}`}
+            className={classProps}
             style={{
                 width: width ? width : configStyles.TOOLTIP.width,
                 height: height ? height : configStyles.TOOLTIP.height,
@@ -62,7 +62,7 @@ export const Tooltip = ({
             {showTooltip ? (
                 <div
                     ref={tooltipRef}
-                    className={classProps}
+                    className={`${styles['tooltip']}`}
                     style={{
                         width: tooltipWidth ? tooltipWidth : configStyles.TOOLTIP.tooltipWidth,
                         borderRadius: tooltipRadius ? tooltipRadius : configStyles.TOOLTIP.tooltipRadius,

package/src/components/typography/index.js

@@ -38,7 +38,7 @@ export const Typography = ({
     ...props
 }) => {
     const configStyles = compereConfigs()
-    const classProps = classnames(className)
+    const classProps = classnames(className ? className : configStyles.TYPOGRAPHY.className)
 
     const [isHover, setIsHover] = useState(false)
     const [validVariant, setValidVariant] = useState(false)

package/src/index.js

@@ -16,5 +16,4 @@ export * from './components/icon/Icon'
 export * from './components/typography'
 export * from './components/pagination'
 export * from './components/autocomplate'
-export * from './components/singleCheckbox'
 export * from './components/newAutocomplete'

package/src/stories/configuration.stories.mdx

@@ -129,6 +129,7 @@ import StackAlt from './assets/stackalt.svg';
     radius: '6px',                                     // for border radius
     width: '100%',                                     // for width
     weight: '400',                                     // for font weight
+    className: '',                                     // for button class
     type: 'button',                                    // for type
     height: '46px',                                    // for height
     color: 'white',                                    // for color 
@@ -220,6 +221,7 @@ import StackAlt from './assets/stackalt.svg';
     border: 'none',                                    // for border
     cursor: 'default',                                 // for cursor
     textShadow: 'none',                                // for text shadow
+    className: '',                                     // for typography class
 
     colorp: '#3C393E',                                 // for variant p color
     colorh1: '#3C393E',                                // for variant h1 color
@@ -328,6 +330,7 @@ import StackAlt from './assets/stackalt.svg';
 {
     dots: false,                                       // for options, cut text and add dots
     showCloseIcon: false,                              // for select reset icon, when prop exist or true is show, otherwise is hide
+    className: '',                                     // for select class
     marginTop: '10px',                                 // for error message postion from top
     labelWeight: '500',                                // for label font weight
     labelColor: '#3C393E',                             // for label color
@@ -419,6 +422,7 @@ import StackAlt from './assets/stackalt.svg';
 {
   size: '16px',                                         // for font size
   radius: '6px',                                        // for border radius
+  className: '',                                        // for Textarera class
   width: '400px',                                       // for width
   resize: 'none',                                       // for resize
   height: '134px',                                      // for height
@@ -529,24 +533,27 @@ import StackAlt from './assets/stackalt.svg';
 {
   size: '16px',                                         // for captcha label font size       (configurable from config.js)
   color: '#3C393E',                                     // for captcha label color           (configurable from config.js)
+  className: '',                                        // for captach class
   label: 'for example. Captcha',                        // for captcha label                 (add itself on each component)
   range: 'for example. 72',                             // for captcha range                 (add itself on each component)
   getRange: 'is must be function',                      // for captcha get current range     (add itself on each component)
 }
 ```
 
-### NewFile
+### File
 ``` 
 {
   or: 'կամ',                                            // for file place text
   weight: 400,                                          // for file place font weight
   size: '12px',                                         // for file font size
   radius: '6px',                                        // for file place border radius
+  className: '',                                        // for file class
   width: '440px',                                       // for file width
   height: '200px',                                      // for file choose place height
   color: '#3C393E',                                     // for file place color
   upload: 'Բեռնել',                                     // for file place text
   labelSize: '16px',                                    // for file font size
+  errorSize: '12px',                                    // for file error font size
   border: '2px dashed',                                 // for file choose place border
   errorColor: '#ee0000',                                // for file error message color
   labelColor: '#4A4A4D',                                // for file color
@@ -585,6 +592,7 @@ import StackAlt from './assets/stackalt.svg';
 {
   alignItems: 'center',                                 // for modal ( flex-start, center, flex-end ) --> align-items
   justifyContent: 'center',                             // for modal ( flex-start, center, flex-end ) --> justify-content
+  className: '',                                        // for modal class
   mMaxWidth: '95%',                                     // for modal max width
   mMaxHeight: '95vh',                                   // for modal max height
   outsideClose: true,                                   // for modal close when happened outside click
@@ -612,11 +620,14 @@ import StackAlt from './assets/stackalt.svg';
 }
 ```
 
-### SingleCheckbox
+### Checkbox
 ```
 {
   checkedColor: '#00236A',                              // for checkbox background ( fill ) color
   unCheckedColor: '#D1D1D1',                            // for checkbox border color
+  labelMarginLeft: '10px',                              // for checkbox label margin left
+  checkBoxMarginBottom: '10px'                          // for checkbox margin bottom
+  className: ''                                         // for checkbox class
 }
 ```
 
@@ -626,6 +637,7 @@ import StackAlt from './assets/stackalt.svg';
   tHeadFontSize: '16px',                                // for table header font size
   tHeadFontWeight: 600,                                 // for table header font weight
   tHeadColor: '#FBFBFB',                                // for table header color
+  tHeadTextAlign: 'center',                             // for table header text align
   tHeadPadding: '11px 20px',                            // for table header padding
   tHeadBorderRadius: '14px',                            // for table header border radius
   tHeadBackgroundColor: '#00236A',                      // for table header background color
@@ -637,9 +649,34 @@ import StackAlt from './assets/stackalt.svg';
   tBodyTextAlign: 'center',                             // for table body text align
   tBodyPadding: '11px 20px',                            // for table body padding
   tBodyFontFamily: 'Noto Sans Armenia',                 // for table body font family
+  tBodyRowMarginTop: '10px',                            // for table tr margin top
+  tBodyBoxShadow: '0px 10px 30px rgba(0, 35, 106, 0.06)', // for table body box shadow
 
   tBodyRowBorder: '1px solid #eeeeee',                  // for table body row border
+  openListColor: '#A3A5A9',                             // for table body opened list color
+  className: '',                                        // for table class
+  tableRowItem: false,                                  // for table tr show item ( boolean prop )
+  tableRowBGColor: 'transparent',                       // for table tr background color
+  tableRowRadius: '6px',                                // for table tr border radius
+  tableRowBoxShadow: '0px 10px 30px 0px #00236A0F'      // for table tr box shadow
+}
+```
 
-  openListColor: '#A3A5A9'                              // for table body opened list color
+### PAGINATION
+```
+{
+  className: '' // for pagination class
+}
+```
+### Toaster
+```
+{
+  className: '' // for pagination class
+}
+```
+### Stepper
+```
+{
+  className: '' // for pagination class
 }
 ```

package/src/stories/usage.stories.mdx

@@ -19,9 +19,12 @@ 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 checkboxGroup from './static/checkbox-group-usage.png';
+import singleCheckbox from './static/single-checkbox-usage.png';
 import tableComponent from './static/table-component-usage.png';
 import toasterImage from './static/toaster-container-usage.png';
 import autocompleteImage from './static/autocomplete-usage.png';
+import checkboxGroup2 from './static/checkbox-group-usage-2.png';
 import tableBodyStructureNew from './static/table-new-data-structure-usage.png';
 import tableHeaderStructure from './static/table-header-data-structure-usage.png';
 import tableBodyStructureFirst from './static/table-body-data-structure-first-part-usage.png';
@@ -187,4 +190,11 @@ import tableBodyStructureSecond from './static/table-body-data-structure-second-
 <img src={tableBodyStructureFirst} alt="file image" />
 <img src={tableBodyStructureSecond} alt="file image" />
 <img src={tableBodyStructureNew} alt="file image" />
-<img src={tableBodyStructureThird} alt="file image" />
+<img src={tableBodyStructureThird} alt="file image" />
+
+### Single checkbox
+<img src={singleCheckbox} alt="file image" />
+
+### Checkbox Group
+<img src={checkboxGroup} alt="file image" />
+<img src={checkboxGroup2} alt="file image" />

package/tui.config.js

@@ -12,6 +12,7 @@ module.exports = {
         border: 'none', // for border
         disabled: false, // for disabled
         cursor: 'pointer', // for cursor
+        className: '', // for button class
         contentWidth: false, // for auto width, if contentWidth prop is exsit, then button get size automatically from inner content
         padding: '12px 20px', // for padding
         textTransform: 'none', // for text transform
@@ -32,6 +33,7 @@ module.exports = {
         width: '100%', // for width
         radius: '0px', // for input and also (if there exist left or right icons) icons block border-radius
         className: '', // for input classname (you can set custom class for your custom css)
+        maxLength: 255, // for characters maximum count
         height: '46px', // for height
         required: false, // for showing required mark on label (it meens input is required)
         disabled: false, // for disabled
@@ -89,6 +91,7 @@ module.exports = {
         border: 'none', // for border
         cursor: 'default', // for cursor
         textShadow: 'none', // for text shadow
+        className: '', // for typography class
 
         colorp: '#3C393E', // for variant p color
         colorh1: '#3C393E', // for variant h1 color
@@ -184,6 +187,7 @@ module.exports = {
     SELECT: {
         dots: false, // for options, cut text and add dots
         showCloseIcon: true, // for select reset icon, when prop exist or true is show, otherwise is hide
+        className: '', // for select class
         marginTop: '10px', // for error message postion from top
         labelWeight: '500', // for label font weight
         labelColor: '#3C393E', // for label color
@@ -239,6 +243,7 @@ module.exports = {
         height: '134px', // for height
         maxLength: 1500, // for characters maximum count
         color: '#3C393E', // for color
+        className: '', // for Textarera class
         marginTop: '10px', // for error message position from top
         minWidth: '200px', // for minimum width
         maxWidth: '500px', // for maximum width
@@ -332,24 +337,27 @@ module.exports = {
         backgroundDisableColor: '#FBFBFB',                    // for autocomplete disable background color
     },
     // default properties for <Captcha /> component
-    Captcha: {
+    CAPTCHA: {
         size: '16px', // for captcha label font size
         color: '#3C393E', // for captcha label color
+        className: '', // for captach class
     },
     // default properties for <File /> component
-    File: {
+    FILE: {
         or: 'կամ', // for file place text
         weight: 400, // for file place font weight
         size: '12px', // for file font size
         radius: '6px', // for file place border radius
+        className: '', // for FILE class
         height: '200px', // for file choose place height
         color: '#3C393E', // for file place color
         upload: 'Բեռնել', // for file place text
         maxWidth: '440px', // for file width
         labelSize: '16px', // for file font size
+        errorSize: '12px', // for file error font size
         border: '2px dashed', // for file choose place border
-        labelColor: '#4A4A4D',                                // for file color
-        timeForRemoveError: 4000,                             // for file error hide time when format is wrong
+        labelColor: '#4A4A4D', // for file color
+        timeForRemoveError: 4000, // for file error hide time when format is wrong
         errorColor: '#ee0000', // for file place and error message error color
         borderColor: '#D1D1D1', // for file choose place border color
         listItemHeight: '70px', // for file list item height
@@ -381,6 +389,7 @@ module.exports = {
     MODAL: {
         alignItems: 'center', // for modal ( flex-start, center, flex-end ) --> align-items
         justifyContent: 'center', // for modal ( flex-start, center, flex-end ) --> justify-content
+        className: '', // for modal class
         mMaxWidth: '95%', // for modal max width
         mMaxHeight: '95vh', // for modal max height
         outsideClose: true, // for modal close when happened outside click
@@ -407,15 +416,20 @@ module.exports = {
         imageWrapHeight: '80vh', // for image wrap
         imageWrapWidth: '100%', // for image wrap
     },
-    SINGLECHECKBOX: {
+    // default properties for <Checkbox /> component
+    CHECKBOX: {
         checkedColor: '#00236A', // for checkbox background ( fill ) color
         unCheckedColor: '#D1D1D1', // for checkbox border color
+        labelMarginLeft: '10px', // for checkbox label margin left
+        checkBoxMarginBottom: '10px', // for checkbox margin bottom
+        className: '' // for checkbox class
     },
     // default properties for <Table /> component
     TABLE: {
         tHeadFontSize: '16px',                                // for table header font size
         tHeadFontWeight: 600,                                 // for table header font weight
         tHeadColor: '#FBFBFB',                                // for table header color
+        tHeadTextAlign: 'center',                             // for table header text align
         tHeadPadding: '11px 20px',                            // for table header padding
         tHeadBorderRadius: '14px',                            // for table header border radius
         tHeadBackgroundColor: '#00236A',                      // for table header background color
@@ -427,9 +441,27 @@ module.exports = {
         tBodyTextAlign: 'center',                             // for table body text align
         tBodyPadding: '11px 20px',                            // for table body padding
         tBodyFontFamily: 'Noto Sans Armenia',                 // for table body font family
+        tBodyRowMarginTop: '10px',                            // for table tr margin top
+        tBodyBoxShadow: '0px 10px 30px rgba(0, 35, 106, 0.06)', // for table body box shadow
 
         tBodyRowBorder: '1px solid #eeeeee',                  // for table body row border
-
-        openListColor: '#A3A5A9'                              // for table body opened list color
+        openListColor: '#A3A5A9',                             // for table body opened list color
+        className: '',                                        // for table class
+        tableRowItem: false,                                  // for table tr show item ( boolean prop )
+        tableRowBGColor: 'transparent',                       // for table tr background color
+        tableRowRadius: '6px',                                // for table tr border radius
+        tableRowBoxShadow: '0px 10px 30px 0px #00236A0F'      // for table tr box shadow
+    },
+    // default properties for <Pagination /> component
+    PAGINATION: {
+        className: '' // for pagination class
+    },
+    // default properties for <Toaster /> component
+    TOASTER: {
+        className: ''
     },
+    // default properties for <Stepper /> component
+    STEPPER: {
+        className: '' // for stepper class
+    }
 }