diginet-core-ui 1.3.98 → 1.3.99-beta.1

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

@@ -478,15 +478,18 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const checkExistingFile = newFile => {
-    const files = allNewAttached.getAll('files');
-    if (files && files.length) {
-      const length = files.length;
-      for (let i = 0; i < length; i++) {
-        if (parseStringify(newFile) === parseStringify(files[i])) return true;
-      }
-    }
-    return false;
+    const files = [...dataState, ...newDataState];
+    return files.some(file => ((file === null || file === void 0 ? void 0 : file.FileName) || (file === null || file === void 0 ? void 0 : file.name)) === ((newFile === null || newFile === void 0 ? void 0 : newFile.FileName) || (newFile === null || newFile === void 0 ? void 0 : newFile.name)) && ((file === null || file === void 0 ? void 0 : file.FileSize) || (file === null || file === void 0 ? void 0 : file.size)) === ((newFile === null || newFile === void 0 ? void 0 : newFile.FileSize) || (newFile === null || newFile === void 0 ? void 0 : newFile.size)));
+    // const files = allNewAttached.getAll('files');
+    // if (files && files.length) {
+    //     const length = files.length;
+    //     for (let i = 0; i < length; i++) {
+    //         if (parseStringify(newFile) === parseStringify(files[i])) return true;
+    //     }
+    // }
+    // return false;
   };
+
   const checkAcceptFileType = newFile => {
     if (!accept || !accept.length) return true;
     const type = typeof accept === 'string' ? accept : accept.join('-');
@@ -682,14 +685,17 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     document.removeEventListener('keydown', onKeyDown);
     document.removeEventListener('click', clickOutOfItem);
   };
-  const parseStringify = fileInfo => JSON.stringify({
-    lastModified: fileInfo.lastModified,
-    lastModifiedDate: fileInfo.lastModifiedDate,
-    name: fileInfo.name,
-    size: fileInfo.size,
-    type: fileInfo.type,
-    webkitRelativePath: fileInfo.webkitRelativePath
-  });
+
+  // const parseStringify = fileInfo =>
+  //     JSON.stringify({
+  //         lastModified: fileInfo.lastModified,
+  //         lastModifiedDate: fileInfo.lastModifiedDate,
+  //         name: fileInfo.name,
+  //         size: fileInfo.size,
+  //         type: fileInfo.type,
+  //         webkitRelativePath: fileInfo.webkitRelativePath,
+  //     });
+
   const mountDomain = item => {
     if (!item) return item;
     const cloneItem = JSON.parse(JSON.stringify(item));
@@ -777,6 +783,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [data]);
+  useEffect(() => {
+    setNewDataState([]);
+  }, [dataState]);
   useEffect(() => {
     if (inputProps && Object.keys(inputProps).length) {
       Object.keys(inputProps).forEach(name => {
@@ -1299,6 +1308,7 @@ Attachment.defaultProps = {
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
   },
+  viewType: 'detail',
   ...getGlobal(['components', 'attachment', 'defaultProps'])
 };
 Attachment.propTypes = {

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

@@ -33,6 +33,16 @@ const convertData = (dt, valueExpr) => {
   valueTemp = valueTemp.map(i => i[valueExpr] || i);
   return valueTemp;
 };
+const convertSearchDelayTime = searchDelayTime => {
+  var _searchDelayTime$matc, _searchDelayTime$matc2;
+  if (searchDelayTime === true) return getGlobal('delayOnInput');
+  const units = {
+    m: 60000,
+    s: 1000,
+    ms: 1
+  };
+  return typeof searchDelayTime === 'number' ? searchDelayTime : (((_searchDelayTime$matc = searchDelayTime.match(/[^a-z]+/i)) === null || _searchDelayTime$matc === void 0 ? void 0 : _searchDelayTime$matc[0]) || 1) * units[((_searchDelayTime$matc2 = searchDelayTime.match(/ms|s|m/i)) === null || _searchDelayTime$matc2 === void 0 ? void 0 : _searchDelayTime$matc2[0]) || 's'];
+};
 const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   allowSearch,
@@ -86,6 +96,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!reference) reference = useRef(null);
   if (multiple && selectBox === undefined) selectBox = true;
   if (typeof searchExpr === 'string') searchExpr = [searchExpr];
+  searchDelayTime = convertSearchDelayTime(searchDelayTime);
   const ref = useRef(null);
   const dropdownRef = useRef(null);
   const timer = useRef(null);
@@ -96,7 +107,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const dropdownListRef = useRef(null);
   const searchRef = useRef(null);
   // const lastSearchRef = useRef(null);
-  const timeout = useRef(null);
+  // const timeout = useRef(null);
   const loadMoreTimer = useRef(null);
   const dataChosen = useRef([]);
   const [unique] = useState(randomString(6, {
@@ -382,12 +393,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       //     if (handleRenderBySearch(data, pattern)) continue;
       // } else if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
 
-      if (renderItem && typeof renderItem === 'function') {
-        displayText = renderItem({
-          data,
-          index
-        });
-      } else if (subText) {
+      if (subText) {
         displayText = jsx(Fragment, null, jsx(Typography, {
           className: 'DGN-UI-Dropdown-PrimaryText',
           type: 'p1'
@@ -403,7 +409,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const value = typeof data === 'object' ? data[valueExpr] : data;
       let itemDisabled = typeof data === 'object' ? data['disabled'] : false;
       const icon = getIconFromData(data);
-      const text = jsx(Typography, {
+      const text = renderItem && typeof renderItem === 'function' ? renderItem({
+        data,
+        index
+      }) : jsx(Typography, {
         type: 'p1'
       }, displayText);
       if (multiple && selectBox) {
@@ -961,11 +970,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, content);
     if (typeof renderSelectedItem === 'function') {
       inputRef.current.innerHTML = '';
-      const item = renderContent(renderSelectedItem({
+      const item = renderSelectedItem({
         data
-      }));
+      });
       const el = document.createElement('div');
       el.style.display = 'flex';
+      el.style.width = '100%';
       el.style.minHeight = '24px';
       if (!multilineSelectedItem) el.style.maxHeight = '24px';
       ReactDOM.render(item, inputRef.current.appendChild(el));
@@ -1044,21 +1054,26 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       closeDropdown();
     };
   }, []);
-  useEffect(() => {
-    if (searchDelayTime) {
-      var _searchDelayTime$matc, _searchDelayTime$matc2;
-      if (searchDelayTime === true) searchDelayTime = getGlobal('delayOnInput');
-      const units = {
-        m: 60000,
-        s: 1000,
-        ms: 1
-      };
-      timeout.current = typeof searchDelayTime === 'number' ? searchDelayTime : (((_searchDelayTime$matc = searchDelayTime.match(/[^a-z]+/i)) === null || _searchDelayTime$matc === void 0 ? void 0 : _searchDelayTime$matc[0]) || 1) * units[((_searchDelayTime$matc2 = searchDelayTime.match(/ms|s|m/i)) === null || _searchDelayTime$matc2 === void 0 ? void 0 : _searchDelayTime$matc2[0]) || 's'];
-      return () => {
-        timeout.current = null;
-      };
-    }
-  }, [searchDelayTime]);
+
+  // useEffect(() => {
+  //     if (searchDelayTime) {
+  //         if (searchDelayTime === true) searchDelayTime = getGlobal('delayOnInput');
+  //         const units = {
+  //             m: 60000,
+  //             s: 1000,
+  //             ms: 1,
+  //         };
+  //         timeout.current =
+  //             typeof searchDelayTime === 'number'
+  //                 ? searchDelayTime
+  //                 : (searchDelayTime.match(/[^a-z]+/i)?.[0] || 1) *
+  //                   units[searchDelayTime.match(/ms|s|m/i)?.[0] || 's'];
+  //         return () => {
+  //             timeout.current = null;
+  //         };
+  //     }
+  // }, [searchDelayTime]);
+
   useEffect(() => {
     if (allValue[unique][allValue[unique].length - 1] !== valueProp) {
       allValue[unique].push(valueProp);

package/components/tab/tab-container.js

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { displayFlex, flexCol, flexRow, parseWidth, positionRelative, typographyTypes } from "../../styles/general";
-import { classNames, randomString } from "../../utils";
+import { classNames } from "../../utils";
 import TabContext from "./context";
 const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
@@ -23,10 +23,6 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     value
   } = props;
   const [tabIndexState, setTabIndexState] = useState(tabIndex || value);
-  const [id] = useState(randomString(6, {
-    allowNumber: false,
-    allowSymbol: false
-  }));
   if (level === 'level1') level = 'h3';
   if (level === 'level2') level = 'p1';
   const _TabContainerCSS = TabContainerCSS(direction, width);
@@ -47,7 +43,6 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return jsx("div", {
       css: _TabContainerCSS,
       ref: ref,
-      id: `DGN-${id}-tab-button-container`,
       className: classNames('DGN-UI-Tab-Container', className),
       style: style,
       ...props
@@ -93,9 +88,5 @@ TabContainer.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Any props else. */
   props: PropTypes.any
-  /**
-   * Ref methods.
-   */
 };
-
 export default TabContainer;

package/components/tab/tab-header.js

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/core';
 import { ButtonIcon } from "./..";
 import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { boxBorder, displayFlex, displayNone, flexCol, flexRow, justifyCenter, mg, overflowHidden, parseMaxWidth, parseWidth, parseWidthHeight, pd, positionRelative, selfCenter, whiteSpaceNoWrap } from "../../styles/general";
+import { boxBorder, displayFlex, displayNone, flexCol, flexRow, justifyCenter, mg, overflowHidden, parseWidth, parseWidthHeight, pd, positionRelative, selfCenter, whiteSpaceNoWrap } from "../../styles/general";
 import { classNames } from "../../utils";
 import TabContext from "./context";
 const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -50,11 +50,10 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return useMemo(() => {
     return jsx("div", {
       css: _ContainerCSS,
-      id: `DGN-control`,
       className: classNames('DGN-UI-Tab-Header-Container', className),
       style: style,
       ...props
-    }, scrollButtons && !isVertical && jsx(ButtonIcon, {
+    }, scrollButtons && !isVertical ? jsx(ButtonIcon, {
       css: ScrollLeftButtonCSS,
       name: isVertical ? 'ArrowUp' : 'ArrowLeft',
       viewType: 'text',
@@ -62,7 +61,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       viewBox: true,
       disabled: !showScrollLeftButton,
       onClick: () => _onClickScrollButton(true)
-    }), jsx("div", {
+    }) : null, jsx("div", {
       css: [_TabHeaderCSS, !isVertical && TabHeaderHorizontalCSS],
       className: 'DGN-UI-Tab-Header',
       ref: ref,
@@ -72,7 +71,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }, React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
       level
-    }))), scrollButtons && !isVertical && jsx(ButtonIcon, {
+    }))), scrollButtons && !isVertical ? jsx(ButtonIcon, {
       css: ScrollRightButtonCSS,
       name: isVertical ? 'ArrowDown' : 'ArrowRight',
       viewType: 'text',
@@ -80,7 +79,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       viewBox: true,
       disabled: !showScrollRightButton,
       onClick: () => _onClickScrollButton(false)
-    }));
+    }) : null);
   }, [centered, children, className, level, props, scrollButtons, style, width, direction, isVertical, scrollLeft]);
 }));
 const ContainerCSS = (centered, isVertical, width) => css`
@@ -91,7 +90,6 @@ const ContainerCSS = (centered, isVertical, width) => css`
     ${parseWidthHeight(width, 'auto')};
     ${centered && justifyCenter};
     ${isVertical ? flexCol : flexRow};
-    ${parseMaxWidth(isVertical ? 'max-content' : '100%')};
     ${pd(0)};
 `;
 const TabHeaderCSS = width => css`
@@ -100,6 +98,7 @@ const TabHeaderCSS = width => css`
     ${parseWidth(width)};
 `;
 const TabHeaderHorizontalCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${positionRelative};
     ${whiteSpaceNoWrap};
@@ -142,9 +141,5 @@ TabHeader.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Any props else. */
   props: PropTypes.any
-  /**
-   * Ref methods.
-   */
 };
-
 export default TabHeader;

package/components/tab/tab-panel.js

@@ -23,8 +23,8 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [isRendered, setIsRendered] = useState(false);
   const ref = useRef(null);
   const isVertical = direction === 'vertical';
-  const isActive = index === tabIndexState;
-  const _TabPanelCSS = TabPanelCSS(isVertical, isActive);
+  const isSelected = index === tabIndexState;
+  const _TabPanelCSS = TabPanelCSS(isVertical, isSelected);
   useEffect(() => {
     if (isRendered) return;else if (index === tabIndexState) setIsRendered(true);
   }, [tabIndexState]);
@@ -42,23 +42,20 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return jsx("div", {
       css: _TabPanelCSS,
       ref: ref,
-      role: 'tab-panel',
-      "aria-labelledby": `tab-${index}`,
-      id: `tab-panel-${index}`,
       className: classNames('DGN-UI-Tab-Panel', className),
       style: style,
       ...props
-    }, isActive || !lazyLoading || isRendered ? children : null);
-  }, [children, className, index, lazyLoading, props, style, isActive, isRendered, tabIndexState]);
+    }, isSelected || !lazyLoading || isRendered ? children : null);
+  }, [children, className, index, lazyLoading, props, style, isSelected, isRendered, tabIndexState]);
 }));
-const TabPanelCSS = (isVertical, isActive) => css`
+const TabPanelCSS = (isVertical, isSelected) => css`
     ${displayFlex};
     ${flexCol};
     ${boxBorder};
     ${positionRelative};
-    ${isActive ? flexCol : displayNone};
+    ${isSelected ? flexCol : displayNone};
     ${parseWidthHeight('100%', isVertical ? 300 : '100%')};
-    ${textColor('text.main')};
+    ${textColor('text/main')};
     ${pd([0, isVertical ? 3 : 2.5])};
 `;
 TabPanel.defaultProps = {
@@ -79,9 +76,5 @@ TabPanel.propTypes = {
   style: PropTypes.object,
   /** Any props else. */
   props: PropTypes.any
-  /**
-   * Ref methods.
-   */
 };
-
 export default TabPanel;

package/components/tab/tab.js

@@ -5,7 +5,7 @@ import { Icon, Typography } from "./..";
 import Ripple from "../button/ripple-effect";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, bgTransparent, borderRadius, boxBorder, breakWord, cursorDefault, cursorPointer, displayFlex, flexRow, itemsCenter, justifyCenter, justifyStart, mgl, mgr, outlineNone, overflowHidden, parseHeight, parseMaxWidth, parseMaxWidthHeight, parseMinWidth, parseWidth, pd, pointerEventsAuto, pointerEventsNone, positionAbsolute, positionRelative, shadowNone, textCenter, textColor, userSelectNone, whiteSpaceNoWrap } from "../../styles/general";
+import { bgColor, borderRadius, bottom, boxBorder, breakWord, cursorDefault, cursorPointer, displayFlex, flexRow, itemsCenter, justifyCenter, justifyStart, left, mgl, mgr, outlineNone, overflowHidden, parseHeight, parseMaxWidth, parseMaxWidthHeight, parseMinWidth, parseWidth, pd, pointerEventsAuto, pointerEventsNone, positionAbsolute, positionRelative, shadowNone, textCenter, textColor, userSelectNone, whiteSpaceNoWrap } from "../../styles/general";
 import { classNames } from "../../utils";
 import TabContext from "./context";
 const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -59,8 +59,7 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }
     return jsx("span", {
-      css: IconCSS,
-      className: isEndIcon ? 'end-icon' : ''
+      css: [IconCSS, isEndIcon && EndIconCSS]
     }, node);
   };
   return useMemo(() => {
@@ -100,7 +99,6 @@ const TabItemCSS = (color, isVertical) => css`
     ${whiteSpaceNoWrap};
     ${shadowNone};
     ${!isVertical && textCenter};
-    ${bgColor('system.white')};
     ${textColor(color)};
     ${parseMinWidth(80)};
     ${parseMaxWidth(isVertical ? '100%' : 287)};
@@ -108,29 +106,26 @@ const TabItemCSS = (color, isVertical) => css`
     ${pointerEventsAuto};
     ${userSelectNone};
     flex: 0 0 auto;
-    border: 0;
     transition: all 0.2s ease-in-out, background-color 0.2s ease-in-out;
     :hover:not(.selected):not(.disabled),
     :focus {
-        ${bgColor('system.white')};
-        ${textColor('system.rest')};
+        ${textColor('system/rest')};
         .Indicator {
-            ${bgColor('system.rest')};
+            ${bgColor('system/rest')};
             transform: scale(1);
         }
     }
 `;
 const TabItemDisabledCSS = css`
     ${pointerEventsNone};
-    ${bgTransparent};
     ${cursorDefault};
-    ${textColor('system.disabled')};
+    ${bgColor('transparent')};
+    ${textColor('system/disabled')};
 `;
 const TabItemSelectedCSS = css`
-    ${bgColor('system.white')};
-    ${textColor('system.active')};
+    ${textColor('system/active')};
     .Indicator {
-        ${bgColor('system.active')};
+        ${bgColor('system/active')};
         transform: scale(1);
     }
 `;
@@ -139,12 +134,13 @@ const IndicatorCSS = isVertical => css`
     ${parseHeight(isVertical ? '100%' : 4)};
     ${parseWidth(isVertical ? 4 : '100%')}
     ${borderRadius(1)};
-    bottom: 0;
-    left: 0;
+    ${bottom(0)};
+    ${left(0)};
     transform: ${isVertical ? 'scaleY(0)' : 'scaleX(0)'};
     transition: transform 0.2s ease-in-out;
 `;
 const IconCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${itemsCenter};
     ${justifyCenter};
@@ -152,14 +148,14 @@ const IconCSS = css`
     ${boxBorder};
     ${parseMaxWidthHeight(24)};
     ${mgr([1])};
-    &.end-icon {
-        ${mgr('unset')};
-        ${mgl([1])};
-    }
+`;
+const EndIconCSS = css`
+    ${mgr('unset')};
+    ${mgl([1])};
 `;
 TabItem.defaultProps = {
   className: '',
-  color: 'system.rest',
+  color: 'system/rest',
   disabled: false,
   label: '',
   style: {}
@@ -189,9 +185,5 @@ TabItem.propTypes = {
   style: PropTypes.object,
   /** Any props else. */
   props: PropTypes.any
-  /**
-   * Ref methods.
-   */
 };
-
 export default TabItem;

package/package.json

@@ -1,42 +1,73 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.98",
-  "description": "The DigiNet core ui",
-  "homepage": "https://diginet.com.vn",
+  "version": "1.3.99-beta.1",
+  "description": "",
   "main": "index.js",
+  "license": "UNLICENSED",
   "scripts": {
-    "start-js": "react-scripts start --max_old_space_size=4096",
-    "start": "npx npm-run-all -p start-js",
-    "build": "GENERATE_SOURCEMAP=false && react-scripts build --env=production --max_old_space_size=8192",
-    "eject": "react-scripts eject",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "npm-run-all --parallel start-sb eslint-test",
+    "start-sb": "start-storybook -p 9050",
+    "build-storybook": "build-storybook -c .storybook -s src",
+    "build": "run-script-os",
+    "build:windows": "rimraf dist && mkdirp dist/components && npm run compile && sass --style=compressed src/scss:dist/css && xcopy src\\\\assets dist\\\\assets\\ /e /y",
+    "build:darwin:linux:default": "rm -rf dist && npm run compile && sass --style=compressed src/scss:dist/css && cp -rf src/assets dist/assets",
+    "compile": "babel src --out-dir dist --ignore **/*.stories.js",
+    "pack": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm pack",
+    "production-keep-version": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish",
+    "beta": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish --tag beta",
+    "production": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm publish",
+    "version:add": "run-script-os",
+    "version:add:windows": "cat package.json.tmp | sed \"s/0.0.0/%npm_package_version%/g\" > dist/package.json",
+    "version:add:darwin:linux:default": "VERSION=$(npm run version:extract --silent) && cat package.json.tmp | sed \"s/0.0.0/${VERSION}/g\" > dist/package.json",
+    "version:bump": "npm version patch --no-git-tag-version --silent",
+    "version:extract": "cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]'",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint --fix --config .eslintrc.js \"**/*.js\"",
+    "eslint-test": "onchange \"src/**/*.{js,jsx,json}\" -- eslint . --fix",
+    "test-storybook": "test-storybook --url http://localhost:9050"
   },
   "dependencies": {
     "@emotion/core": "^10.0.35",
+    "babel-plugin-module-resolver": "^4.1.0",
     "prop-types": "^15.7.2"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
+  "lint-staged": {
+    "*/**/*.{js,jsx,json}": [
+      "prettier --write",
+      "git add"
+    ]
   },
-  "keywords": [
-    "core ui",
-    "diginet"
-  ],
-  "author": "rocachien",
-  "contributors": [
-    {
-      "name": "Chien Do",
-      "email": "rocachien@gmail.com"
-    },
-    {
-      "name": "Nhat Tran",
-      "email": "tranminhnhat1005@gmail.com"
-    },
-    {
-      "name": "Thuan Nguyen",
-      "email": "nt.thuan.hutech@gmail.com"
-    }
-  ],
-  "license": "MIT"
+  "devDependencies": {
+    "@babel/cli": "^7.14.3",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+    "@babel/preset-react": "^7.13.13",
+    "@storybook/addon-actions": "6.2.9",
+    "@storybook/addon-essentials": "6.2.9",
+    "@storybook/addon-links": "6.2.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/react": "6.2.9",
+    "@storybook/test-runner": "^0.7.1",
+    "autoprefixer": "^10.3.1",
+    "babel-loader": "^8.2.2",
+    "eslint": "^8.4.1",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-regex": "^1.10.0",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.1.2",
+    "mkdirp": "^1.0.4",
+    "npm-run-all": "^4.1.5",
+    "onchange": "^7.1.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rimraf": "^3.0.2",
+    "run-script-os": "^1.1.6",
+    "sass": "1.58.3"
+  }
 }

package/readme.md

@@ -38,6 +38,12 @@ npm test
 ```
 
 ## Changelog
+## 1.3.99
+- \[Changed\]: Typography – Add new text style
+- \[Fixed\]: Tab – Fix background UI not match design
+- \[Fixed\]: Dropdown – Fix case renderItem, renderSelectedItem inside Typography
+- \[Fixed\]: Attachment – Fix bug not reset new upload data
+
 ## 1.3.98
 - \[Changed\]: Image – Change default image
 - \[Changed\]: Icon – Update Image, Another, Compressed, Presentation, Sheet, Word, PDF

package/styles/general.js

@@ -10,10 +10,10 @@ export const alphaPseudo = {
 };
 export const typographyTypes = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];
 
-/**
- * get value spacing with rootZIndex
- * @param number
- * @return {number}
+/**
+ * get value spacing with rootZIndex
+ * @param number
+ * @return {number}
  */
 export const zIndex = number => {
   number = Number(number || 0);
@@ -21,10 +21,10 @@ export const zIndex = number => {
   return rootZIndex + number;
 };
 
-/**
- * get value spacing with rootSpacing
- * @param {(number|number[])} vl - default 1
- * @returns {(number|string)}
+/**
+ * get value spacing with rootSpacing
+ * @param {(number|number[])} vl - default 1
+ * @returns {(number|string)}
  */
 
 export const getSpacing = (vl = 1) => {
@@ -34,9 +34,9 @@ export const getSpacing = (vl = 1) => {
   } else return vl;
 };
 
-/**
- * replace rootZIndex
- * @param number
+/**
+ * replace rootZIndex
+ * @param number
  */
 export const setZIndex = number => {
   number = Number(number || 0);
@@ -51,6 +51,9 @@ const animation = ({
 }) => css`
     animation: ${keyframes} ${duration} ${timingFunction};
 `;
+const aspectSquare = css`
+    aspect-ratio: 1 / 1;
+`;
 const bgColor = cl => css`
     background-color: ${getColor(cl)};
 `;
@@ -90,6 +93,9 @@ const borderRadius4px = css`
 const borderRadius50 = css`
     border-radius: 50%;
 `;
+const borderRight = (withVl, colorVl) => css`
+    border-right: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system/dark')};
+`;
 const borderTop = (withVl, colorVl) => css`
     border-top: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system/dark')};
 `;
@@ -481,4 +487,4 @@ const whiteSpacePreWrap = css`
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-export { animation, bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderDashed, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, borderTop, borderTopColor, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, listNone, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, overflowXHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+export { animation, aspectSquare, bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderDashed, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, borderRight, borderTop, borderTopColor, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, listNone, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, overflowXHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };

package/styles/typography.js

@@ -13,9 +13,12 @@ const fontNormal = css`
 const fontWeightBold = css`
     font-weight: 700;
 `;
-const fontWeightRegular = css`
+const fontWeightMedium = css`
     font-weight: 500;
 `;
+const fontWeightRegular = css`
+    font-weight: 400;
+`;
 const fontWeightNormal = css`
     font-weight: normal;
 `;
@@ -28,7 +31,7 @@ const getFontSize = size => css`
 const title1 = css`
     ${fontNormal};
     ${fontWeightBold};
-    ${getFontSize(parseInt(fontSize) + 16)}; //32
+    ${getFontSize(parseInt(fontSize) + 12)}; //28
 `;
 const title2 = css`
     ${fontNormal};
@@ -72,22 +75,52 @@ const heading5 = css`
 `;
 const heading6 = css`
     ${fontNormal};
-    ${fontWeightRegular}
+    ${fontWeightMedium};
     ${getFontSize(parseInt(fontSize) - 4)}; //12
 `;
+const body1 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 12)}; //28
+`;
+const body2 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 10)}; //26
+`;
+const body3 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 8)}; //24
+`;
+const body4 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 6)}; //22
+`;
+const body5 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 4)}; //20
+`;
+const body6 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 2)}; //18
+`;
 const paragraph1 = css`
     ${fontNormal};
-    ${fontWeightNormal};
+    ${fontWeightRegular};
     ${getFontSize(parseInt(fontSize))}; //16
 `;
 const paragraph2 = css`
     ${fontNormal};
-    ${fontWeightNormal};
+    ${fontWeightRegular};
     ${getFontSize(parseInt(fontSize) - 2)}; //14
 `;
 const paragraph3 = css`
     ${fontNormal};
-    ${fontWeightNormal};
+    ${fontWeightRegular};
     ${getFontSize(parseInt(fontSize) - 4)}; //12
 `;
 const uppercase = css`
@@ -101,7 +134,7 @@ const helperText = css`
     font-size: ${parseInt(fontSize) - 4}px; //12
     ${fontWeightNormal}
 `;
-export const typography = [[title1, ['title1', 't1']], [title2, ['title2', 't2']], [title3, ['title3', 't3']], [title4, ['title4', 't4']], [heading1, ['heading1', 'h1']], [heading2, ['heading2', 'h2']], [heading3, ['heading3', 'h3']], [heading4, ['heading4', 'h4']], [heading5, ['heading5', 'h5']], [heading6, ['heading6', 'h6']], [paragraph1, ['paragraph1', 'p1']], [paragraph2, ['paragraph2', 'p2']], [paragraph3, ['paragraph3', 'p3']], [uppercase, ['uppercase']], [label, ['label']], [helperText, ['helperText']]].reduce((obj, [value, keys]) => {
+export const typography = [[title1, ['title1', 't1']], [title2, ['title2', 't2']], [title3, ['title3', 't3']], [title4, ['title4', 't4']], [heading1, ['heading1', 'h1']], [heading2, ['heading2', 'h2']], [heading3, ['heading3', 'h3']], [heading4, ['heading4', 'h4']], [heading5, ['heading5', 'h5']], [heading6, ['heading6', 'h6']], [body1, ['body1', 'b1']], [body2, ['body2', 'b2']], [body3, ['body3', 'b3']], [body4, ['body4', 'b4']], [body5, ['body5', 'b5']], [body6, ['body6', 'b6']], [paragraph1, ['paragraph1', 'p1']], [paragraph2, ['paragraph2', 'p2']], [paragraph3, ['paragraph3', 'p3']], [uppercase, ['uppercase']], [label, ['label']], [helperText, ['helperText']]].reduce((obj, [value, keys]) => {
   for (const key of keys) {
     obj = {
       ...obj,