diginet-core-ui 1.3.69 → 1.3.70

package/components/form-control/checkbox/index.js

@@ -3,7 +3,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle } from 'react';
+import React, { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle } from 'react';
 import { Typography } from '../..';
 import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop, parseWidthHeight } from '../../../styles/general';
 import { randomString } from '../../../utils';
@@ -20,7 +20,10 @@ const {
       pressed: clFillPressed
     },
     disabled: clDisabled,
-    formal2: clFormal2
+    formal2: clFormal2,
+    semantic: {
+      danger: clDanger
+    }
   },
   spacing
 } = theme;
@@ -45,6 +48,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   labelProps,
   stopPropagation,
+  required,
   ...props
 }, reference) => {
   if (!inputRef) {
@@ -150,7 +154,11 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     },
     color: disabled ? clDisabled : '',
     ...labelProps
-  }, children || label))));
+  }, jsx(React.Fragment, null, children || label, required && jsx("span", {
+    style: {
+      color: disabled ? clDisabled : clDanger
+    }
+  }, "*"))))));
 }));
 
 const CheckBoxSquareCSS = (width, clMain) => css`
@@ -330,6 +338,9 @@ Checkbox.propTypes = {
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
   /** The value of input */
-  value: PropTypes.any
+  value: PropTypes.any,
+
+  /** If `true`, the label will indicate that the checkbox is required. */
+  required: PropTypes.bool
 };
 export default Checkbox;

package/components/form-control/money-input/index.js

@@ -124,6 +124,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   prefix,
   suffix,
   labelProps,
+  helperTextProps,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -445,9 +446,9 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onKeyDown: onKeyDownHandler,
     onKeyUp: onKeyUp,
     onPaste: onPasteHandler
-  }), isError && jsx(HelperText, {
+  }), isError && jsx(HelperText, { ...helperTextProps,
     disabled: disabled
-  }, error), !isError && validateResult && jsx(HelperText, {
+  }, error), !isError && validateResult && jsx(HelperText, { ...helperTextProps,
     disabled: disabled
   }, validateResult));
 }));
@@ -585,6 +586,9 @@ MoneyInput.propTypes = {
   inputRef: PropTypes.any,
 
   /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
-  labelProps: PropTypes.object
+  labelProps: PropTypes.object,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
+  helperTextProps: PropTypes.object
 };
 export default MoneyInput;

package/components/form-control/number-input/index2.js

@@ -53,7 +53,8 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   className,
   maxDigit,
   autoWidth,
-  labelProps
+  labelProps,
+  helperTextProps
 }, reference) => {
   inputRef = inputRef || useRef(null);
   const pos = useRef(null);
@@ -79,13 +80,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
 
   if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
-  /**
-   * Convert number to format money
-   * @param vl {number} - value
-   * @type {function(*): number}
-   * @return {string}
-   * @example 1200300.123 => 1,200,300.123
-   * @example 1200300,123 => 1.200.300,123
+  /**
+   * Convert number to format money
+   * @param vl {number} - value
+   * @type {function(*): number}
+   * @return {string}
+   * @example 1200300.123 => 1,200,300.123
+   * @example 1200300,123 => 1.200.300,123
    */
 
   const parseNumberToMoney = useCallback((vl, isNumber) => {
@@ -119,13 +120,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
 
     return number;
   }, [decimalSymbol, max, value]);
-  /**
-   * Convert money to format number
-   * @param vl {string} - value
-   * @type {function(*): number}
-   * @return {number}
-   * @example 1,200,300.123 => 1200300.123
-   * @example 1.200.300,123 => 1200300.123
+  /**
+   * Convert money to format number
+   * @param vl {string} - value
+   * @type {function(*): number}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
    */
 
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
@@ -305,9 +306,9 @@ const NumberInput = /*#__PURE__*/forwardRef(({
       });
     },
     onBlur: e => _onBlur(e)
-  }), !!error && jsx(HelperText, {
+  }), !!error && jsx(HelperText, { ...helperTextProps,
     disabled: disabled
-  }, error), !error && validateResult && jsx(HelperText, {
+  }, error), !error && validateResult && jsx(HelperText, { ...helperTextProps,
     disabled: disabled
   }, validateResult));
 });
@@ -397,10 +398,10 @@ NumberInput.propTypes = {
   /** style inline of input in NumberInput component */
   inputStyle: PropTypes.object,
 
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 
@@ -444,6 +445,9 @@ NumberInput.propTypes = {
   autoWidth: PropTypes.bool,
 
   /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
-  labelProps: PropTypes.object
+  labelProps: PropTypes.object,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
+  helperTextProps: PropTypes.object
 };
 export default NumberInput;

package/components/form-control/phone-input/index.js

@@ -43,6 +43,7 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onKeyDown,
   onKeyUp,
   labelProps,
+  helperTextProps,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -324,7 +325,7 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     startIconProps: {
       className: 'non-effect'
     }
-  }), !!error && jsx(HelperText, {
+  }), !!error && jsx(HelperText, { ...helperTextProps,
     disabled: disabled
   }, error));
 }));
@@ -397,13 +398,13 @@ PhoneInput.propTypes = {
   /** on input function */
   onInput: PropTypes.func,
 
-  /**
-   * on change function. Return a object, example:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
-   * }
+  /**
+   * on change function. Return a object, example:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
+   * }
    */
   onChange: PropTypes.func,
 
@@ -417,6 +418,9 @@ PhoneInput.propTypes = {
   inputRef: PropTypes.any,
 
   /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
-  labelProps: PropTypes.object
+  labelProps: PropTypes.object,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
+  helperTextProps: PropTypes.object
 };
 export default PhoneInput;

package/components/form-control/radio/index.js

@@ -3,7 +3,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useState, useRef, useEffect, useMemo } from 'react';
+import React, { forwardRef, memo, useState, useRef, useEffect, useMemo } from 'react';
 import theme from '../../../theme/settings';
 import { randomString } from '../../../utils';
 import Typography from './../../typography';
@@ -18,7 +18,10 @@ const {
       active: clSystemActive,
       rest: clSystemRest
     },
-    disabled: clDisabled
+    disabled: clDisabled,
+    semantic: {
+      danger: clDanger
+    }
   }
 } = theme;
 const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -36,6 +39,7 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   inputRef,
   inputProps,
   labelProps,
+  required,
   ...props
 }, ref) => {
   if (!inputRef) {
@@ -94,7 +98,11 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       color: disabled ? clDisabled : '',
       type: 'p1',
       ...labelProps
-    }, label !== null && label !== void 0 ? label : value)));
+    }, jsx(React.Fragment, null, label !== null && label !== void 0 ? label : value, required && jsx("span", {
+      style: {
+        color: disabled ? clDisabled : clDanger
+      }
+    }, "*")))));
   }, [disabled, onChange, readOnly, checkedState]);
 }));
 const formCheckCSS = css`
@@ -167,8 +175,6 @@ Radio.defaultProps = {
   disabled: false,
   readOnly: false,
   defaultChecked: false,
-  label: '',
-  value: '',
   className: '',
   width: 20,
   labelProps: {}
@@ -213,6 +219,9 @@ Radio.propTypes = {
   readOnly: PropTypes.bool,
 
   /** Props for Typography of label. */
-  labelProps: PropTypes.object
+  labelProps: PropTypes.object,
+
+  /** If `true`, the label will indicate that the Radio is required. */
+  required: PropTypes.bool
 };
 export default Radio;

package/components/form-control/text-input/index.js

@@ -67,6 +67,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onPaste,
   validates,
   autoWidth,
+  helperTextProps,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -367,10 +368,10 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onKeyUp: onKeyUp,
     onPaste: onPaste,
     value: valueProp
-  }), isError && jsx(HelperText, {
+  }), isError && jsx(HelperText, { ...helperTextProps,
     disabled: disabled,
     status: status
-  }, error), !isError && validateResult && jsx(HelperText, {
+  }, error), !isError && validateResult && jsx(HelperText, { ...helperTextProps,
     disabled: disabled
   }, validateResult));
 }));
@@ -510,6 +511,9 @@ TextInput.propTypes = {
   autoWidth: PropTypes.bool,
 
   /** If `true`, a textarea element is rendered. */
-  multiline: PropTypes.bool
+  multiline: PropTypes.bool,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
+  helperTextProps: PropTypes.object
 };
 export default TextInput;

package/components/form-control/toggle/index.js

@@ -3,7 +3,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
 import theme from '../../../theme/settings';
 import generateRandom from '../../../utils/randomString';
 import Typography from '../../typography';
@@ -23,7 +23,10 @@ const {
     primary: clPrimary,
     hover: clHover,
     disabled: clDisabled,
-    white: clWhite
+    white: clWhite,
+    semantic: {
+      danger: clDanger
+    }
   },
   spacing
 } = theme;
@@ -42,6 +45,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   inputProps,
   lineClamp,
   hoverTooltip,
+  required,
   ...props
 }, ref) => {
   if (!inputRef) {
@@ -180,7 +184,11 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     hoverTooltip: hoverTooltip,
     lineClamp: lineClamp || null,
     mapping: 'label'
-  }, label))), [disabled, onChange, checkedState, readOnly]);
+  }, jsx(React.Fragment, null, label, required && jsx("span", {
+    style: {
+      color: disabled ? clDisabled : clDanger
+    }
+  }, "*"))))), [disabled, onChange, checkedState, readOnly]);
 }));
 Toggle.defaultProps = {
   disabled: false,
@@ -191,7 +199,8 @@ Toggle.defaultProps = {
   id: '',
   width: 40,
   height: 20,
-  lineClamp: null
+  lineClamp: null,
+  required: false
 };
 Toggle.propTypes = {
   /** * If `true`, the component is disabled. */
@@ -235,6 +244,9 @@ Toggle.propTypes = {
    * @param {object} event The event source of the callback.
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+
+  /** If `true`, the label will indicate that the checkbox is required. */
+  required: PropTypes.bool
 };
 export default Toggle;

package/components/paging/page-info.js

@@ -589,23 +589,23 @@ PagingInfo.propTypes = {
   /** Callback fired when quantity on per page changed. */
   onChangePerPage: PropTypes.func,
 
-  /**
-   * Callback fired when page number is changing.
-   *
-   * * prevPage: Page before changed
-   * * newPage: Page after changed
-   * * cancel(value): Function cancel change page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when page number is changing.
+   *
+   * * prevPage: Page before changed
+   * * newPage: Page after changed
+   * * cancel(value): Function cancel change page
+   *  * @param {value} - bool
    */
   onChangingPage: PropTypes.func,
 
-  /**
-   * Callback fired when quantity on item per page is changing.
-   *
-   * * prevPerPage: Items per page before changed
-   * * newPerPage: Items per page after changed
-   * * cancel(value): Function cancel change items per page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when quantity on item per page is changing.
+   *
+   * * prevPerPage: Items per page before changed
+   * * newPerPage: Items per page after changed
+   * * cancel(value): Function cancel change items per page
+   *  * @param {value} - bool
    */
   onChangingPerPage: PropTypes.func,
 
@@ -618,15 +618,15 @@ PagingInfo.propTypes = {
   /** Compact type for mobile. */
   typeShort: PropTypes.bool,
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * onChangePage(page): Change page number
-   *  * @param {page} - number
-   * * onChangePerPage(per): Change quantity on per page
-   *  * @param {per} - number
-   * * setTotalItems(items): Set total items
-   *  * @param {items} - number
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * onChangePage(page): Change page number
+   *  * @param {page} - number
+   * * onChangePerPage(per): Change quantity on per page
+   *  * @param {per} - number
+   * * setTotalItems(items): Set total items
+   *  * @param {items} - number
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/paging/page-selector2.js

@@ -368,23 +368,23 @@ PagingSelector.propTypes = {
   /** Callback fired when quantity on per page changed. */
   onChangePerPage: PropTypes.func,
 
-  /**
-   * Callback fired when page number is changing.
-   *
-   * * prevPage: Page before changed
-   * * newPage: Page after changed
-   * * cancel(value): Function cancel change page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when page number is changing.
+   *
+   * * prevPage: Page before changed
+   * * newPage: Page after changed
+   * * cancel(value): Function cancel change page
+   *  * @param {value} - bool
    */
   onChangingPage: PropTypes.func,
 
-  /**
-   * Callback fired when quantity on item per page is changing.
-   *
-   * * prevPerPage: Items per page before changed
-   * * newPerPage: Items per page after changed
-   * * cancel(value): Function cancel change items per page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when quantity on item per page is changing.
+   *
+   * * prevPerPage: Items per page before changed
+   * * newPerPage: Items per page after changed
+   * * cancel(value): Function cancel change items per page
+   *  * @param {value} - bool
    */
   onChangingPerPage: PropTypes.func,
 
@@ -394,15 +394,15 @@ PagingSelector.propTypes = {
   /** Total items. */
   totalItems: PropTypes.number,
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * onChangePage(page): Change page number
-   *  * @param {page} - number
-   * * onChangePerPage(per): Change quantity on per page
-   *  * @param {per} - number
-   * * setTotalItems(items): Set total items
-   *  * @param {items} - number
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * onChangePage(page): Change page number
+   *  * @param {page} - number
+   * * onChangePerPage(per): Change quantity on per page
+   *  * @param {per} - number
+   * * setTotalItems(items): Set total items
+   *  * @param {items} - number
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tooltip/index.js

@@ -6,26 +6,24 @@ import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
 import { randomString } from '../../utils';
 import { jsx, css } from '@emotion/core';
-import { typography } from '../../styles/typography';
-import { color as colors } from '../../styles/colors';
-import { borderBox, borderRadius4px, displayInlineBlock, positionAbsolute, userSelectNone } from '../../styles/general';
+import { borderBox, borderRadius4px, displayInlineBlock, flexRow, parseHeight, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
+import theme from '../../theme/settings';
 const {
-  paragraph2,
-  paragraph3
-} = typography;
-const {
-  system: {
-    white
+  colors: {
+    system: {
+      white
+    },
+    fill: {
+      tooltip: fillTooltip
+    }
   },
-  fill: {
-    tooltip: fillTooltip
-  }
-} = colors;
-import { useTheme } from '../../theme';
+  typography: {
+    paragraph2,
+    paragraph3
+  },
+  zIndex: zIndexCORE
+} = theme;
 const defaultViewPadding = 4;
-const {
-  zIndex
-} = useTheme();
 
 const getScrollTop = () => {
   var _ref, _ref2, _window$pageYOffset;
@@ -85,7 +83,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const [open, setOpen] = useState(false);
   const arrowRef = useRef(null);
-  const containerRef = useRef(null);
+  const ref = useRef(null);
   const tooltipRef = useRef(null);
   const hiddenPositions = {
     tooltip: {
@@ -452,33 +450,28 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   useEffect(() => {
     if (open) {
-      onShowTooltip(arrow, containerRef.current);
+      onShowTooltip(arrow, ref.current);
     } else {
       onHideTooltip();
     }
   }, [open]);
-  useImperativeHandle(reference, () => {
-    const currentRef = containerRef.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   const renderTooltip = useMemo(() => {
     if (open && title) {
       const node = jsx("div", {
         className: 'DGN-UI-Portal DGN-Tooltip'
       }, jsx("span", {
         className: IDs.arrow,
-        css: arrowCSS,
+        css: ArrowCSS,
         ref: arrowRef,
         style: { ...hiddenPositions.arrow
         }
       }), jsx("span", {
         className: [IDs.main, className].join(' ').trim().replace(/\s+/g, ' '),
-        css: mainCSS(backgroundColor, color, size, padding, textAlign),
+        css: MainCSS(backgroundColor, color, size, padding, textAlign),
         ref: tooltipRef,
         style: { ...hiddenPositions.tooltip
         }
@@ -489,15 +482,10 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return null;
   }, [open, title, backgroundColor, color, size, padding, textAlign]);
   return jsx(TagCreatedName, {
-    ref: containerRef,
+    ref: ref,
+    css: ContainerCSS,
     className: IDs.container,
-    style: {
-      boxSizing: 'border-box',
-      height: 'max-content',
-      width: 'max-content',
-      position: 'relative',
-      ...style
-    },
+    style: style,
     onMouseEnter: setOpenTrue,
     onMouseLeave: setOpenFalse,
     onFocus: setOpenTrue,
@@ -505,22 +493,29 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...props
   }, children, renderTooltip);
 }));
-const arrowCSS = css`
-    ${positionAbsolute}
-    ${userSelectNone}
+const ContainerCSS = css`
+    ${flexRow};
+    ${positionRelative};
+    ${borderBox};
+    ${parseHeight('max-content')};
+    width: auto;
+`;
+const ArrowCSS = css`
+    ${positionAbsolute};
+    ${userSelectNone};
     height: 0;
     opacity: 0;
     transition: opacity 0.1s ease-in-out;
     width: 0;
-    z-index: ${zIndex(5)};
+    z-index: ${zIndexCORE(5)};
 `;
 
-const mainCSS = (backgroundColor, color, size, padding, textAlign) => css`
-    ${displayInlineBlock}
-    ${borderBox}
-    ${positionAbsolute}
-    ${userSelectNone}
-    ${borderRadius4px}
+const MainCSS = (backgroundColor, color, size, padding, textAlign) => css`
+    ${displayInlineBlock};
+    ${borderBox};
+    ${positionAbsolute};
+    ${userSelectNone};
+    ${borderRadius4px};
     ${size === 'small' ? paragraph3 : paragraph2};
     background-color: ${backgroundColor};
     color: ${color};
@@ -529,7 +524,7 @@ const mainCSS = (backgroundColor, color, size, padding, textAlign) => css`
     opacity: 0;
     transition: opacity 0.1s ease-in-out;
     word-wrap: break-word;
-    z-index: ${zIndex(4)};
+    z-index: ${zIndexCORE(4)};
 `;
 
 Tooltip.defaultProps = {
@@ -547,67 +542,68 @@ Tooltip.defaultProps = {
   textAlign: 'center',
   viewportPadding: defaultViewPadding,
   className: '',
-  disabled: false
+  disabled: false,
+  style: {}
 };
 Tooltip.propTypes = {
   /** alignMode use to set align-items of the tooltip*/
   alignMode: PropTypes.oneOf(['flex-end', 'flex-start', 'middle']),
 
-  /** arrow use to turn on or off the arrow */
+  /** If true, adds an arrow to the tooltip. */
   arrow: PropTypes.bool,
 
-  /** arrowSize use to set size for the arrow*/
+  /** Size of the arrow. */
   arrowSize: PropTypes.number,
 
-  /** backgroundColor is a string, it's background color of the tooltip */
+  /** Background color of the tooltip. */
   backgroundColor: PropTypes.string,
 
-  /** children is a node, you want to contain */
+  /** Tooltip reference element. */
   children: PropTypes.node.isRequired,
 
-  /** color is a string, it's color of the title */
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** Color of the title.                                                                                                                                                                                                                                        */
   color: PropTypes.string,
 
-  /** initialize direction of the tooltip */
+  /** Direction of the tooltip. */
   direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
 
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
 
-  /** distance between the tooltip and the children */
+  /** Distance between the tooltip and the children. */
   distance: PropTypes.number,
 
-  /** size of the title */
-  size: PropTypes.oneOf(['small', 'medium']),
-
-  /** forceDirection use to set the static direction of the tooltip */
+  /**  If `true`, set the static direction of the tooltip. */
   forceDirection: PropTypes.bool,
 
-  /** hoverDelay (ms) use to set the delay of the tooltip is should be more than 50ms, because the tooltip need a small time to calculate the position */
+  /** The number of milliseconds to wait before showing the tooltip.  */
   hoverDelay: PropTypes.number,
 
-  /** padding is string like CSS, use to set the padding of the title */
+  /** Padding of the title. */
   padding: PropTypes.string,
 
-  /** style is a object like style-inline, use to set the style for the element will be created to contain the children */
-  style: PropTypes.object,
+  /** The size of the title. */
+  size: PropTypes.oneOf(['small', 'medium']),
 
-  /** class of Tooltip-main */
-  className: PropTypes.string,
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** tagName of the element will be created to contain the children */
+  /** Tag name of the element will be created to contain the children. */
   tagCreatedName: PropTypes.oneOf(['div', 'span']),
 
-  /** textAlign use to set text-align of the title*/
+  /** Text align of the title. */
   textAlign: PropTypes.oneOf(['center', 'justify', 'left', 'right']),
 
-  /** The title to show in tooltip when hover */
+  /** The title to show in tooltip when hover. */
   title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).isRequired,
 
-  /** tooltipMaxWidth is a number to set the max-width of the tooltip */
+  /** Max width of the tooltip */
   tooltipMaxWidth: PropTypes.number,
 
-  /** viewportPadding is a number to set the padding of the viewport with the tooltip */
+  /** Padding of the viewport with the tooltip */
   viewportPadding: PropTypes.number
 };
 export default Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.69",
+  "version": "1.3.70",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,15 @@ npm test
 ```
 
 ## Changelog
+## 1.3.70
+- \[Changed\]: Checkbox – Add prop required
+- \[Changed\]: Radio – Add prop required
+- \[Changed\]: Toggle – Add prop required
+- \[Changed\]: Storybook – Add template storybook
+- \[Changed\]: MoneyInput, NumberInput, PhoneInput, TextInput – Add helperTextProps
+- \[Fixed\]: Tooltip – Add display flex
+- \[Fixed\]: Checkbox – Fix bug not show value when label is empty string
+
 ## 1.3.69
 - \[Fixed\]: DatePicker – Fix not show placeholder
 - \[Fixed\]: DatePicker – Fix set value when select date

package/utils/sb-teamplate.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { css, js } from '@emotion/core';
+import { Col, Row, Tooltip, Typography } from '../components/index';
+import { useTheme } from '../theme';
+import { flexWrap, flexRow, alignCenter } from '../styles/general';
+import { ImportComp } from '../components/others/import/index.stories';
+import PropTypes from 'prop-types';
+const {
+  spacing
+} = useTheme();
+export const Template = ({
+  title,
+  args,
+  propsCustom,
+  disabledTooltip,
+  component: Component,
+  horizontal
+} = props) => {
+  return /*#__PURE__*/React.createElement(Row, {
+    style: {
+      padding: spacing(2)
+    }
+  }, /*#__PURE__*/React.createElement(Col, {
+    xs: 12
+  }, /*#__PURE__*/React.createElement(Row, null, title && /*#__PURE__*/React.createElement(Col, {
+    xs: 12
+  }, /*#__PURE__*/React.createElement(Typography, {
+    type: 'title1',
+    color: 'primary'
+  }, title)), /*#__PURE__*/React.createElement(Col, {
+    xs: 12,
+    style: {
+      gap: spacing(2)
+    },
+    css: css`
+                            ${horizontal ? flexRow : ''};
+                            ${flexWrap};
+                            ${alignCenter}
+                        `
+  }, [{}, ...propsCustom].map((itemProps, indexProps) => {
+    const argsTemp = { ...args,
+      ...itemProps
+    };
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      tooltipMaxWidth: 200,
+      disabled: disabledTooltip,
+      key: indexProps,
+      title: JSON.stringify(argsTemp)
+    }, /*#__PURE__*/React.createElement(Component, { ...argsTemp
+    }));
+  })))));
+};
+
+const StoryBookTemplate = ({
+  args,
+  component,
+  propsCustom,
+  listItem,
+  componentName
+} = props) => {
+  return /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    xs: 12
+  }, /*#__PURE__*/React.createElement(ImportComp, {
+    components: componentName
+  })), /*#__PURE__*/React.createElement(Col, {
+    xs: 12
+  }, listItem.map((propsItem, idx) => {
+    const {
+      horizontal,
+      title,
+      argsExtra,
+      propsCustom: itemPropsCustom
+    } = propsItem;
+    return /*#__PURE__*/React.createElement(Template, {
+      key: idx,
+      horizontal: horizontal,
+      title: title,
+      args: { ...args,
+        ...argsExtra
+      },
+      component: component,
+      propsCustom: [...(propsCustom || []), ...(itemPropsCustom || [])]
+    });
+  })));
+};
+
+Template.defaultProps = {
+  propsCustom: [],
+  disabledTooltip: false
+};
+Template.propTypes = {
+  title: PropTypes.string.isRequired,
+  args: PropTypes.object,
+  propsCustom: PropTypes.array,
+  disabledTooltip: PropTypes.bool,
+  horizontal: PropTypes.bool
+};
+StoryBookTemplate.propTypes = {
+  componentName: PropTypes.string.isRequired,
+  args: PropTypes.object,
+  propsCustom: PropTypes.array,
+  listItem: PropTypes.array
+};
+export default StoryBookTemplate;