@xaypay/tui 0.0.81 → 0.0.82

package/src/components/table/td.js

@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
 
+import { SingleCheckbox } from './../singleCheckbox';
+
 import styles from './table.module.css';
 
 const TD = ({
+    id,
     item,
     tBodyColor,
     borderRight,
@@ -10,7 +13,9 @@ const TD = ({
     tBodyFontSize,
     tBodyTextAlign,
     tBodyFontFamily,
-    tBodyFontWeight
+    tBodyFontWeight,
+    handleCheckedBody,
+    handleBodyActionClick
 }) => {
     const [opend, setOpend] = useState(false);
 
@@ -45,9 +50,9 @@ const TD = ({
                                     }}
                                     id={newItem.id}
                                     type={newItem.type}
-                                    onClick={newItem.onClick}
                                     className={styles['td-span']}
                                     key={`${newItem}_${newIndex}`}
+                                    onClick={handleBodyActionClick}
                                 >
                                     { newItem.content }
                                 </span>
@@ -66,10 +71,10 @@ const TD = ({
                         style={{
                             display: 'flex',
                             alignItems: 'flex-start',
-                            justifyContent: 'space-between'
+                            justifyContent: item.contentList || item.checkBox ? 'space-between' : 'center'
                         }}
                       >
-                        <div
+                        {item.contentList && <div
                             id={item.id}
                             style={{
                                 width: '21px',
@@ -80,13 +85,26 @@ const TD = ({
                         >
                             { opend === false ? item.closeArrow : item.openArrow }
                         </div>
+                        }
+
+                        {
+                            item.checkBox && <SingleCheckbox
+                                id={item.id}
+                                content={item.content}
+                                onClick={handleCheckedBody}
+                                checked={item.checkBox.checked}
+                                checkedColor={item.checkBox.checkedColor}
+                                unCheckedColor={item.checkBox.unCheckedColor}
+                            />
+                        }
+
                         <div>
                             <p
                                 style={{
                                     margin: '0px'
                                 }}
-                            >{ item.contentTitle }</p>
-                            <div
+                            >{ item.content }</p>
+                            {item.contentList && <div
                                 style={{
                                     overflow: 'hidden',
                                     marginTop: '10px',
@@ -103,10 +121,10 @@ const TD = ({
                                         }}
                                     >{innerItem}</p>
                                 })}
-                            </div>
+                            </div>}
                         </div>
                       </div>
-                    : <span key={item}>{item}</span>
+                    : ''
             }
         </td>
     )

package/src/components/table/th.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { SingleCheckbox } from './../singleCheckbox';
+
 import styles from './table.module.css';
 
 const TH = ({
@@ -7,24 +9,45 @@ const TH = ({
     tHeadFamily,
     tHeadPadding,
     tHeadFontWeight,
+    handleCheckedHeader,
     borderTopLeftRadius,
-    borderTopRightRadius
+    borderTopRightRadius,
+    handleHeaderItemClick
 }) => {
     return (
         <th
             style={{
-                cursor: 'pointer',
                 position: 'relative',
                 padding: tHeadPadding,
                 fontFamily: tHeadFamily,
                 fontWeight: tHeadFontWeight,
                 borderTopLeftRadius: borderTopLeftRadius,
-                borderTopRightRadius: borderTopRightRadius
+                borderTopRightRadius: borderTopRightRadius,
+                cursor: handleHeaderItemClick ? 'pointer' : 'normal'
             }}
-            onClick={item.onClick ? item.onClick : _ => _}
+            onClick={handleHeaderItemClick ? handleHeaderItemClick : _ => _}
             className={`${item.sortingArrows && styles['sorting-arrows']}`}
         >
-            {item.type === 'show' ? item.content : ''}
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    justifyContent: item.hasOwnProperty('checkBox') ? 'space-between' : 'center'
+                }}
+            >
+                {item.hasOwnProperty('checkBox')
+                    ? <SingleCheckbox
+                        float='left'
+                        checked={item.checkBox.checked}
+                        content={item.content ? item.content : ''}
+                        onClick={handleCheckedHeader ? handleCheckedHeader : _ => _}
+                        checkedColor={item.checkBox.checkedColor ? item.checkBox.checkedColor : ''}
+                        unCheckedColor={item.checkBox.unCheckedColor ? item.checkBox.unCheckedColor : ''}
+                    />
+                    : ''
+                }
+                {item.type === 'show' ? item.content : ''}
+            </div>
         </th>
     )
 };

package/src/components/textarea/index.js

@@ -12,29 +12,30 @@ export const Textarea = ({
     value,
     height,
     resize,
-    border,
     radius,
     padding,
     required,
     onChange,
     minWidth,
     maxWidth,
+    boxShadow,
     minHeight,
     maxHeight,
     boxSizing,
     maxLength,
     labelSize,
     errorSize,
+    marginTop,
     labelColor,
     errorColor,
-    borderColor,
     labelWeight,
     placeholder,
     labelDisplay,
-    errorMesaage,
+    errorMessage,
     backgroundColor,
     borderFocusColor,
     borderHoverColor,
+    labelMarginBottom,
     showCharacterCount,
     labelRequiredColor
 }) => {
@@ -94,12 +95,12 @@ export const Textarea = ({
     }, [value, onChange]);
 
     useEffect(() => {
-        if (errorMesaage) {
-            setError(errorMesaage);
+        if (errorMessage) {
+            setError(errorMessage);
         } else {
             setError('');
         }
-    }, [errorMesaage]);
+    }, [errorMessage]);
 
     return (
         <div
@@ -111,7 +112,8 @@ export const Textarea = ({
                 style={{
                     display: 'flex',
                     alignItems: 'center',
-                    justifyContent: label ? 'space-between' : 'flex-end'
+                    justifyContent: label ? 'space-between' : 'flex-end',
+                    marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.TEXTAREA.labelMarginBottom
                 }}
             >
                 {
@@ -145,11 +147,11 @@ export const Textarea = ({
             <textarea
                 style={{
                     width: '100%',
+                    border: 'none',
                     outline: 'none',
                     overflow: 'auto',
                     fontSize: size ? size : configStyles.TEXTAREA.size,
                     height: height ? height : configStyles.TEXTAREA.height,
-                    border: border ? border : configStyles.TEXTAREA.border,
                     padding: padding ? padding : configStyles.TEXTAREA.padding,
                     borderRadius: radius ? radius : configStyles.TEXTAREA.radius,
                     minWidth: minWidth ? minWidth : configStyles.TEXTAREA.minWidth,
@@ -158,10 +160,10 @@ export const Textarea = ({
                     maxHeight: maxHeight ? maxHeight : configStyles.TEXTAREA.maxHeight,
                     boxSizing: boxSizing ? boxSizing : configStyles.TEXTAREA.boxSizing,
                     backgroundColor: backgroundColor ? backgroundColor : configStyles.TEXTAREA.backgroundColor,
-                    borderColor: error ? errorColor ? errorColor : configStyles.TEXTAREA.errorColor :
-                                 isFocus ? borderFocusColor ? borderFocusColor : configStyles.TEXTAREA.borderFocusColor :
-                                 isHover ? borderHoverColor ? borderHoverColor : configStyles.TEXTAREA.borderHoverColor :
-                                 borderColor ? borderColor : configStyles.TEXTAREA.borderColor,
+                    boxShadow: error ? errorColor ?  `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.TEXTAREA.errorColor}` :
+                               isFocus ? borderFocusColor ? `0 0 0 2px ${borderFocusColor}` : `0 0 0 2px ${configStyles.TEXTAREA.borderFocusColor}` :
+                               isHover ? borderHoverColor ? `0 0 0 2px ${borderHoverColor}` : `0 0 0 2px ${configStyles.TEXTAREA.borderHoverColor}` :
+                               boxShadow ? boxShadow : configStyles.INPUT.boxShadow,
                     resize: resize ? resize : configStyles.TEXTAREA.resize,
                 }}
                 value={innerValue}
@@ -175,10 +177,10 @@ export const Textarea = ({
             {
                 error ? <span
                     style={{
-                        marginTop: '6px',
                         display: 'inline-block',
                         fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
                         color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor,
+                        marginTop: marginTop ? marginTop : configStyles.TEXTAREA.marginTop
                     }}
                 >{ error }</span> : ''
             }
@@ -192,27 +194,31 @@ Textarea.propTypes = {
     width: PropTypes.string,
     height: PropTypes.string,
     resize: PropTypes.string,
-    border: PropTypes.string,
     radius: PropTypes.string,
     required: PropTypes.bool,
     padding: PropTypes.string,
     minWidth: PropTypes.string,
     maxWidth: PropTypes.string,
+    boxShadow: PropTypes.string,
+    marginTop: PropTypes.string,
     boxSizing: PropTypes.string,
     minHeight: PropTypes.string,
     maxHeight: PropTypes.string,
     maxLength: PropTypes.number,
     labelSize: PropTypes.string,
+    errorSize: PropTypes.string,
     labelColor: PropTypes.string,
+    errorColor: PropTypes.string,
     labelWeight: PropTypes.string,
-    borderColor: PropTypes.string,
     placeholder: PropTypes.string,
+    errorMessage: PropTypes.string,
     labelDisplay: PropTypes.string,
     backgroundColor: PropTypes.string,
     showCharacterCount: PropTypes.bool,
     value: PropTypes.string.isRequired,
     borderFocusColor: PropTypes.string,
     borderHoverColor: PropTypes.string,
+    labelMarginBottom: PropTypes.string,
     onChange: PropTypes.func.isRequired,
     labelRequiredColor: PropTypes.string
 }

package/src/components/textarea/textarea.stories.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Textarea } from '.';
+import { Input } from '../input';
 
 export default {
     Comment: Textarea,
@@ -24,9 +25,12 @@ Default.args = {
     required: true,
     size: '16px',
     radius: '6px',
+    errorSize: '',
     width: '400px',
+    errorColor: '',
     height: '134px',
     maxLength: 1500,
+    errorMessage: '',
     color: '#3C393E',
     minWidth: '200px',
     maxWidth: '500px',

package/src/stories/configuration.stories.mdx

@@ -159,8 +159,9 @@ import StackAlt from './assets/stackalt.svg';
     height: '46px',                                    // for height
     required: false,                                   // for showing required mark on label (it meens input is required)
     disabled: false,                                   // for disabled
-    errorLeft: '0px',                                  // for error message position from left (work when errorPosition prop is 'absolute')
-    errorZindex: '1',                                  // for error message z-index (work when errorPosition prop is 'absolute')
+    errorLeft: '0px',                                  // for error message position from left
+    errorZindex: '1',                                  // for error message z-index
+    marginTop: '10px',                                 // for error message position from top
     iconWidth: '64px',                                 // for left or right icon block width (you can add your custom icon and you can set icon block size)
     errorSize: '14px',                                 // for error font size
     labelSize: '16px',                                 // for label font size
@@ -169,7 +170,6 @@ import StackAlt from './assets/stackalt.svg';
     errorClassName: '',                                // for error message classname (you can set custom class for your custom css)
     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')
     padding: '12px 15px',                              // for padding
     labelColor: '#3c393e',                             // for label color
     errorAnimation: false,                             // for error showing animation
@@ -322,6 +322,7 @@ import StackAlt from './assets/stackalt.svg';
 
 ```
 {
+    marginTop: '10px',                                 // for error message postion from top
     labelWeight: '500',                                // for label font weight
     labelColor: '#3C393E',                             // for label color
     labelDisplay: 'block',                             // for label display
@@ -415,23 +416,24 @@ import StackAlt from './assets/stackalt.svg';
   height: '134px',                                      // for height
   maxLength: 1500,                                      // for characters maximum count
   color: '#3C393E',                                     // for color
+  marginTop: '10px',                                    // for error message position from top
   minWidth: '200px',                                    // for minimum width
   maxWidth: '500px',                                    // for maximum width
   labelSize: '16px',                                    // for label font size
   minHeight: '100px',                                   // for minimum height
   maxHeight: '300px',                                   // for maximum height
-  border: '2px solid',                                  // for border
   padding: '12px 15px',                                 // for padding
   labelColor: '#3C393E',                                // for label color
   labelWeight: 'normal',                                // for label font weight
   labelDisplay: 'block',                                // for label display
-  borderColor: '#D1D1D1',                               // for border color
   boxSizing: 'border-box',                              // for box sizing
   backgroundColor: 'white',                             // for background color
+  labelMarginBottom: '10px',                            // for label margin bottom
   borderHoverColor: '#3C393E',                          // for border color when hover action is happaning
   borderFocusColor: '#00236A',                          // for boredr color when focus action is happaning
   labelRequiredColor: '#ee0000',                        // for label required mark color
   showCharacterCount: true,                             // for showing textarea character count ( set itself without configuration file)
+  boxShadow: '0 0 0 2px #d1d1d1',                       // for border size and color
 }
 ```
 
@@ -440,6 +442,7 @@ import StackAlt from './assets/stackalt.svg';
 ```
 {
   labelWeight: 500,                                     // for label font weight
+  marginTop: '10px',                                    // for error message position from top
   labelSize: '16px',                                    // for label font size
   labelColor: '#3c393e',                                // for label color
   labelDisplay: 'block',                                // for label display
@@ -569,12 +572,21 @@ import StackAlt from './assets/stackalt.svg';
 ### Modal
 ```
 {
+  alignItems: 'center',                                 // for modal ( flex-start, center, flex-end ) --> align-items
+  justifyContent: 'center',                             // for modal ( flex-start, center, flex-end ) --> justify-content
+  mMaxWidth: '95%',                                     // for modal max width
+  mMaxHeight: '95vh',                                   // for modal max height
+  outsideClose: true,                                   // for modal close when happened outside click
   radius: '14px',                                       // for modal border radius
+  minWidth: '320px',                                    // for modal min width
   headerSize: '20px',                                   // for modal header font size
+  minHeight: '200px',                                   // for modal min height
   imageWidth: '600px',                                  // for modal image width on images mode
   headerWeight: '600',                                  // for modal header font weight
   imageHeight: '300px',                                 // for modal image height on images mode
   headerHeight: '27px',                                 // for modal header height
+  width: 'fit-content',                                 // for modal width
+  height: 'fit-content',                                // for modal width
   headerColor: '#00236a',                               // for modal header color
   backgroundColor: 'white',                             // for modal background color
   padding: '10px 20px 20px',                            // for modal padding

package/tui.config.js

@@ -32,8 +32,9 @@ module.exports = {
         height: '46px',                                    // for height
         required: false,                                   // for showing required mark on label (it meens input is required)
         disabled: false,                                   // for disabled
-        errorLeft: '0px',                                  // for error message position from left (work when errorPosition prop is 'absolute')
-        errorZindex: '1',                                  // for error message z-index (work when errorPosition prop is 'absolute')
+        errorLeft: '0px',                                  // for error message position from left
+        errorZindex: '1',                                  // for error message z-index
+        marginTop: '10px',                                 // for error message position from top
         iconWidth: '64px',                                 // for left or right icon block width (you can add your custom icon and you can set icon block size)
         errorSize: '14px',                                 // for error font size
         labelSize: '16px',                                 // for label font size
@@ -43,7 +44,6 @@ module.exports = {
         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')
         padding: '12px 15px',                              // for padding
         labelColor: '#3c393e',                             // for label color
         errorAnimation: false,                             // for error showing animation
@@ -56,7 +56,6 @@ module.exports = {
         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
@@ -179,6 +178,7 @@ module.exports = {
     },
     // default properties for <Select /> component
     SELECT: {
+        marginTop: '10px',                                 // for error message postion from top
         labelWeight: '500',                                // for label font weight
         labelColor: '#3C393E',                             // for label color
         labelDisplay: 'block',                             // for label display
@@ -231,28 +231,30 @@ module.exports = {
         height: '134px',                                      // for height
         maxLength: 1500,                                      // for characters maximum count
         color: '#3C393E',                                     // for color
+        marginTop: '10px',                                    // for error message position from top
         minWidth: '200px',                                    // for minimum width
         maxWidth: '500px',                                    // for maximum width
         labelSize: '16px',                                    // for label font size
         errorSize: '12px',                                    // for error font size
         minHeight: '100px',                                   // for minimum height
         maxHeight: '300px',                                   // for maximum height
-        border: '2px solid',                                  // for border
         padding: '12px 15px',                                 // for padding
         errorColor: '#E40E00',                                // for error color
         labelColor: '#3C393E',                                // for label color
         labelWeight: 'normal',                                // for label font weight
         labelDisplay: 'block',                                // for label display
-        borderColor: '#D1D1D1',                               // for border color
         boxSizing: 'border-box',                              // for box sizing
         backgroundColor: 'white',                             // for background color
+        labelMarginBottom: '10px',                            // for label margin bottom
         borderHoverColor: '#3C393E',                          // for border color when hover action is happaning
         borderFocusColor: '#00236A',                          // for boredr color when focus action is happaning
         labelRequiredColor: '#ee0000',                        // for label required mark color
+        boxShadow: '0 0 0 2px #d1d1d1',                       // for border size and color
     },
     // default properties for <NewAutocomplete /> component
     NEWAUTOCOMPLETE: {
         labelWeight: 500,                                     // for label font weight
+        marginTop: '10px',                                    // for error message position from top
         labelSize: '16px',                                    // for label font size
         labelColor: '#3c393e',                                // for label color
         labelDisplay: 'block',                                // for label display
@@ -368,12 +370,21 @@ module.exports = {
     },
     // default properties for <Modal /> component
     MODAL: {
+        alignItems: 'center',                                 // for modal ( flex-start, center, flex-end ) --> align-items
+        justifyContent: 'center',                             // for modal ( flex-start, center, flex-end ) --> justify-content
+        mMaxWidth: '95%',                                     // for modal max width
+        mMaxHeight: '95vh',                                   // for modal max height
+        outsideClose: true,                                   // for modal close when happened outside click
         radius: '14px',                                       // for modal border radius
+        minWidth: '320px',                                    // for modal min width
         headerSize: '20px',                                   // for modal header font size
+        minHeight: '200px',                                   // for modal min height
         imageWidth: '600px',                                  // for modal image width on images mode
         headerWeight: '600',                                  // for modal header font weight
         imageHeight: '300px',                                 // for modal image height on images mode
         headerHeight: '27px',                                 // for modal header height
+        width: 'fit-content',                                 // for modal width
+        height: 'fit-content',                                // for modal width
         headerColor: '#00236a',                               // for modal header color
         backgroundColor: 'white',                             // for modal background color
         padding: '10px 20px 20px',                            // for modal padding