diginet-core-ui 1.3.93-beta.4 → 1.3.94

package/components/button/icon.js

@@ -301,14 +301,14 @@ ButtonIcon.propTypes = {
   onClick: PropTypes.func,
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
-  /**
-   * 	The size of the component.
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+  /**
+   * 	The size of the component.
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'extraGiant']),
   /** Style inline of component. */
@@ -319,19 +319,19 @@ ButtonIcon.propTypes = {
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: ref
 };

package/components/button/index.js

@@ -405,19 +405,19 @@ Button.propTypes = {
   urlParams: PropTypes.object,
   /** The variant to use. */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link']),
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   ref: ref
 };

package/components/button/more.js

@@ -3,7 +3,7 @@
 import { css, jsx } from '@emotion/core';
 import { ButtonIcon, Icon, Popover, Typography } from "./..";
 import PropTypes from 'prop-types';
-import React, { forwardRef, isValidElement, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { forwardRef, isValidElement, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { bgColor, borderNone, cursorPointer, displayFlex, flexCol, flexRow, gap, itemsCenter, outlineNone, parseHeight, pd, pdl } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, refType as ref } from "../../utils";
@@ -88,7 +88,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const renderAnchor = () => {
     var _anchor, _anchor2, _anchor2$props;
     if (!((_anchor = anchor) !== null && _anchor !== void 0 && _anchor.type)) return null;
-    const AnchorTag = /*#__PURE__*/React.cloneElement(anchor, {
+    const AnchorTag = React.cloneElement(anchor, {
       ref: ref => {
         anchor = ref;
       },
@@ -187,19 +187,19 @@ ButtonMore.propTypes = {
   popoverProp: PropTypes.object,
   /** Style inline of component. */
   style: PropTypes.object,
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: ref
 };

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

@@ -1292,8 +1292,7 @@ Attachment.defaultProps = {
     maxSize: getGlobal(['errorDefault', 'maxSize']),
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
-  },
-  viewType: 'detail'
+  }
 };
 Attachment.propTypes = {
   /** File types that can be accepted. */

package/components/popover/body.js

@@ -4,8 +4,18 @@ import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, border, borderRadius, displayFlex, flexCol, order, overflowAuto, parseWidth, pd, positionRelative } from "../../styles/general";
+import { flexCol, overflowAuto, positionRelative } from "../../styles/general";
+import { useTheme } from "../../theme";
 import { classNames } from "../../utils";
+const {
+  colors: {
+    fill: {
+      'scrollbar-rest': fillScrollbarRest,
+      'scrollbar-active': fillScrollbarActive
+    }
+  },
+  spacing
+} = useTheme();
 const PopoverBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -13,7 +23,6 @@ const PopoverBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   style
 }, reference) => {
-  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -34,23 +43,22 @@ const PopoverBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, children), [children, className, id, style]);
 }));
 const PopoverBodyCSS = css`
-    ${displayFlex};
     ${flexCol};
     ${positionRelative};
     ${overflowAuto};
-    ${pd([4])};
-    ${order(2)};
+    padding: ${spacing([4])};
+    order: 2;
     &::-webkit-scrollbar {
-        ${parseWidth(24)};
+        width: 24px;
     }
     &::-webkit-scrollbar-thumb {
-        ${borderRadius(10)};
+        border-radius: 10px;
         mix-blend-mode: normal;
-        ${bgColor('fill/scrollbar_rest')};
+        background-color: ${fillScrollbarRest};
         background-clip: content-box;
-        ${border(8, 'transparent')};
+        border: 8px solid transparent;
         :hover {
-            ${bgColor('fill/scrollbar_hover')};
+            background-color: ${fillScrollbarActive};
         }
     }
 `;

package/components/popover/footer.js

@@ -4,8 +4,17 @@ import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, boxBorder, displayFlex, flexRow, itemsCenter, justifyEnd, order, parseMinHeight, parseWidth, pd, positionRelative } from "../../styles/general";
+import { itemsCenter, boxBorder, flexRow, justifyEnd, parseWidth, positionRelative } from "../../styles/general";
+import { useTheme } from "../../theme";
 import { classNames } from "../../utils";
+const {
+  colors: {
+    system: {
+      white: systemWhite
+    }
+  },
+  spacing
+} = useTheme();
 const PopoverFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   boxShadow,
@@ -14,7 +23,6 @@ const PopoverFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   style
 }, reference) => {
-  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const _PopoverFooterCSS = PopoverFooterCSS(boxShadow);
   useImperativeHandle(reference, () => {
@@ -36,19 +44,18 @@ const PopoverFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, children), [boxShadow, children, className, id, style]);
 }));
 const PopoverFooterCSS = boxShadow => css`
-    ${displayFlex};
     ${flexRow};
     ${positionRelative};
     ${itemsCenter};
     ${justifyEnd};
     ${boxBorder};
     ${parseWidth('100%')};
-    ${parseMinHeight(56)};
-    ${pd([4])};
-    ${bgColor('system/white')};
+    min-height: 56px;
+    padding: ${spacing([4])};
+    background: ${systemWhite};
     border-radius: 0px 0px 4px 4px;
     box-shadow: ${boxShadow ? '0px -2px 2px rgba(0, 0, 0, 0.1)' : 'none'};
-    ${order(3)};
+    order: 3;
 `;
 PopoverFooter.defaultProps = {
   className: '',

package/components/popover/header.js

@@ -5,8 +5,18 @@ import { Typography } from "./..";
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, boxBorder, displayFlex, flexRow, itemsCenter, order, parseWidthHeight, pd, positionRelative, z } from "../../styles/general";
+import { itemsCenter, boxBorder, flexRow, parseWidthHeight, positionRelative } from "../../styles/general";
+import { useTheme } from "../../theme";
 import { classNames } from "../../utils";
+const {
+  colors: {
+    fill: {
+      headerbar: fillHeaderbar
+    }
+  },
+  spacing,
+  zIndex: zIndexCORE
+} = useTheme();
 const PopoverHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -15,7 +25,6 @@ const PopoverHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style,
   title
 }, reference) => {
-  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -44,18 +53,17 @@ const PopoverHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, children ? children : title)), [children, className, id, style, title]);
 }));
 const PopoverHeaderCSS = css`
-    ${displayFlex};
     ${flexRow};
     ${itemsCenter};
     ${positionRelative};
     ${boxBorder};
     ${parseWidthHeight('100%', 56)};
-    ${bgColor('fill/headerbar')};
-    ${pd([4])};
+    background-color: ${fillHeaderbar};
+    padding: ${spacing([4])};
     border-radius: 4px 4px 0px 0px;
     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
-    ${order(1)};
-    ${z(1)};
+    order: 1;
+    z-index: ${zIndexCORE(1)};
 `;
 PopoverHeader.defaultProps = {
   title: '',

package/components/popover/index.js

@@ -126,7 +126,6 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   height,
   marginThreshold,
   onClose,
-  onOpen,
   open,
   pressESCToClose,
   style,
@@ -154,7 +153,6 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
   const onOpenPopover = () => {
     if (!openState) setOpenState(true);
-    onOpen && onOpen();
   };
   const onClosePopover = () => {
     if (openState) {
@@ -537,7 +535,7 @@ Popover.defaultProps = {
     horizontal: 'center'
   },
   arrow: false,
-  bgColor: 'system/white',
+  bgColor: 'system.white',
   className: '',
   clickOutsideToClose: true,
   fullScreen: true,
@@ -590,8 +588,6 @@ Popover.propTypes = {
   marginThreshold: PropTypes.number,
   /** Callback fired when the component requests to be closed. */
   onClose: PropTypes.func,
-  /** Callback fired when the component requests to be opened. */
-  onOpen: PropTypes.func,
   /** If `true`, the component is shown. */
   open: PropTypes.bool,
   /** If `true`, hitting escape will close component. */
@@ -620,7 +616,7 @@ Popover.propTypes = {
    * * setPosition(element): Set position of popover
    *  * @param {element} - element
    */
-  ref: ref
+  reference: ref
 };
 export { Popover };
 export default OptionWrapper(Popover);

package/components/typography/index.js

@@ -143,16 +143,16 @@ Typography.defaultProps = {
   type: 'p1'
 };
 
-/** type of text<br/>
- * h1: Title <br/>
- * h2: Header Popup <br/>
- * h3: Header popup <br/>
- * h4: Button, Tab, Title group <br/>
- * h5: Label column, Title group <br/>
- * h6: Label form <br/>
- * p1: Body text <br/>
- * p2: Body text <br/>
- * p3: Notice, Tooltip <br/>
+/** type of text<br/>
+ * h1: Title <br/>
+ * h2: Header Popup <br/>
+ * h3: Header popup <br/>
+ * h4: Button, Tab, Title group <br/>
+ * h5: Label column, Title group <br/>
+ * h6: Label form <br/>
+ * p1: Body text <br/>
+ * p2: Body text <br/>
+ * p3: Notice, Tooltip <br/>
  */
 export const arrTypeTypography = ['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'];
 Typography.propTypes = {

package/package.json

@@ -1,73 +1,42 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.93-beta.4",
-  "description": "",
+  "version": "1.3.94",
+  "description": "The DigiNet core ui",
+  "homepage": "https://diginet.com.vn",
   "main": "index.js",
-  "license": "UNLICENSED",
   "scripts": {
-    "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"
+    "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"
   },
   "dependencies": {
     "@emotion/core": "^10.0.35",
-    "babel-plugin-module-resolver": "^4.1.0",
     "prop-types": "^15.7.2"
   },
-  "lint-staged": {
-    "*/**/*.{js,jsx,json}": [
-      "prettier --write",
-      "git add"
-    ]
+  "repository": {
+    "type": "git",
+    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
   },
-  "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.37.0"
-  }
+  "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"
 }

package/readme.md

@@ -38,6 +38,14 @@ npm test
 ```
 
 ## Changelog
+## 1.3.94
+- \[Changed\]: Breadcrumb – Update design
+- \[Changed\]: Button – Add text sentence for Button
+- \[Changed\]: Accordion – Add prop fullHeight
+- \[Changed\]: Divider – Optimize code
+- \[Changed\]: Icon – Add color default
+- \[Fixed\]: Accordion – Fix UI background color
+
 ## 1.3.93
 - \[Changed\]: Dropdown – Apply multilineSelectedItem to renderSelectedItem
 - \[Fixed\]: Checkbox – Fix bug still uncheck when not set state