diginet-core-ui 1.4.35 → 1.4.36-beta.2

package/components/form-control/date-picker/index.js

@@ -114,7 +114,9 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     !controls ? onChangeValue(e) : focusedValue.current = e === null || e === void 0 ? void 0 : e.value;
   };
   const openPicker = () => {
-    setOpenPickerState(true);
+    if (!readOnly) {
+      setOpenPickerState(true);
+    }
   };
   const closePicker = () => {
     var _pickerRef$current;

package/components/form-control/date-range-picker/index.js

@@ -783,7 +783,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         ipRef.current.removeEventListener('focus', onInputFocus);
       }
     };
-  }, [onChange]);
+  }, [readOnly, onChange]);
   useEffect(() => {
     if (min) {
       let arr = [];

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

@@ -1,13 +1,15 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, InputBase, Label, Popover, PopoverBody } from "../..";
+import { ButtonIcon, InputBase, Label, Popover, PopoverBody, HelperText } from "../..";
 import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useMemo } from 'react';
 import { animation, borderColor, displayBlock, overflowHidden, parseHeight, parseMinWidth, positionRelative, scaleX } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
+const regexBetween = /[^{}]+(?=})/g;
+const regexInclude = /{|}/g;
 const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
@@ -22,10 +24,14 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
   });
   const {
     action = {},
+    allowInput,
     bgColor: bgColorProp,
     children,
     className,
     delayOnInput,
+    disabled,
+    displayExpr: displayExprProp,
+    error,
     endIcon,
     inputProps,
     inputRef,
@@ -39,10 +45,19 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     placeholder,
     startIcon,
     style,
-    value,
-    viewType
+    value: valueProps,
+    valueExpr,
+    viewType,
+    helperTextProps
   } = props;
+  let displayExpr = displayExprProp;
   const bgColor = typeof bgColorProp === 'string' ? getProp(colors, bgColorProp, bgColorProp) : bgColorProp;
+  const ErrorView = useMemo(() => {
+    return error ? jsx(HelperText, {
+      ...helperTextProps,
+      disabled: disabled
+    }, error) : null;
+  }, [disabled, error, helperTextProps]);
   const ref = useRef(null);
   const dropdownBoxRef = useRef(null);
   const timer = useRef(null);
@@ -85,6 +100,28 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClosed === null || onClosed === void 0 ? void 0 : onClosed();
     }
   };
+
+  /**
+   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
+   * @param data {object} rowData of dataSource
+   * @return {string}
+   */
+  const displayValue = data => {
+    let text = '';
+    if (data || data === 0) {
+      displayExpr = displayExpr || valueExpr;
+      let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
+      // convert {id} - {name} to {<data[id]>} - {<data[name]>}
+      if (!mask && regexBetween.test(displayExpr)) {
+        var _displayExpr;
+        mask = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.replace(regexBetween, _ => (data === null || data === void 0 ? void 0 : data[_]) || '');
+      } else if (!mask) {
+        mask = typeof data !== 'object' ? data : '';
+      }
+      text = mask.toString().replace(regexInclude, '');
+    }
+    return text;
+  };
   useLayoutEffect(() => {
     if (ref.current) {
       const {
@@ -130,15 +167,17 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null
     }) : null;
   };
+  const value = displayValue(valueProps);
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: _DropdownBoxRootCSS,
-    className: classNames('DGN-UI-Dropdown-Box', className),
+    className: classNames('DGN-UI-Dropdown-Box', className, error && 'error'),
     style: style
   }, label ? jsx(Label, {
     ...labelProps
   }, label) : null, jsx(InputBase, {
     ...inputProps,
+    readOnly: !allowInput,
     style: inputStyle,
     viewType: viewType,
     inputRef: inputRef,
@@ -157,7 +196,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     anchor: ref.current,
     width: popoverWidth,
     onClose: closeDropdownBox
-  }, jsx(PopoverBody, null, children)));
+  }, jsx(PopoverBody, null, children)), ErrorView);
 }));
 const DropdownBoxRootCSS = (bgColorProp, {
   colors
@@ -166,6 +205,17 @@ const DropdownBoxRootCSS = (bgColorProp, {
     ${positionRelative};
     ${parseMinWidth(150)};
     ${parseHeight('max-content')};
+    &.error {
+        .DGN-UI-InputBase {
+            ${borderColor(getProp(colors, 'semantic/danger'))};
+            &::before {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+            &::after {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+        }
+    }
     .DGN-UI-InputBase {
         background: ${bgColorProp ? bgColorProp === true ? getProp(colors, 'fill/disabled') : bgColorProp : 'inherit'} !important;
         ${openState && css`
@@ -183,20 +233,6 @@ const DropdownBoxCSS = ({
     margin-top: ${spacing([1])};
     ${overflowHidden};
 `;
-
-// DropdownBox.defaultProps = {
-//     className: '',
-//     label: '',
-//     placeholder: '',
-//     startIcon: 'Search',
-//     endIcon: 'ArrowDown',
-//     openOnClickAt: 'icon',
-//     viewType: 'underlined',
-//     inputProps: {},
-//     delayOnInput: 700,
-//     zIndex: zIndexCORE(1),
-// };
-
 DropdownBox.propTypes = {
   /** class for dropdown */
   className: PropTypes.string,
@@ -233,6 +269,12 @@ DropdownBox.propTypes = {
   /** the function will run after open */
   onOpened: PropTypes.func,
   /** the function will run after close */
-  onClosed: PropTypes.func
+  onClosed: PropTypes.func,
+  /** Error message displayed below the input. */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+  /** If `true`, the input is enable. */
+  allowInput: PropTypes.bool
 };
 export default DropdownBox;

package/components/form-control/time-picker/v2/index.js

@@ -404,8 +404,8 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
         text: displayTimeValue.slice(0, 2).includes(':') ? displayTimeValue.slice(9, 11) : displayTimeValue.slice(10, 12)
       });
     } else {
-      displayTimeValue = `${date(currentTime).format(displayFormat)} ${mode12h ? timeValue === null || timeValue === void 0 ? void 0 : timeValue.text : ''}`;
-      returnTimeValue = `${date(currentTime).format(returnFormat)} ${mode12h ? timeValue === null || timeValue === void 0 ? void 0 : timeValue.text : ''}`;
+      displayTimeValue = `${date(currentTime).format(displayFormat)}${mode12h ? ` ${timeValue === null || timeValue === void 0 ? void 0 : timeValue.text}` : ''}`;
+      returnTimeValue = `${date(currentTime).format(returnFormat)}${mode12h ? ` ${timeValue === null || timeValue === void 0 ? void 0 : timeValue.text}` : ''}`;
     }
     if (!now) {
       setDisplayTime(displayTimeValue);
@@ -420,12 +420,22 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   // useEffect for prop value
   useEffect(() => {
     if (!value) {
-      setTimeValue({
-        hour: min ? min.slice(0, 2) : mode12h ? 1 : 0,
-        minute: min ? min.slice(3, 5) : 0,
-        second: min ? min.slice(6, 8) : 0,
-        text: min ? min.slice(10, 12) || 'AM' : 'AM'
-      });
+      if (!mode12h) {
+        const timeValue = {
+          hour: min ? min.slice(0, 2) : mode12h ? 1 : 0,
+          minute: min ? min.slice(3, 5) : 0,
+          second: min ? min.slice(6, 8) : 0
+        };
+        setTimeValue(timeValue);
+      } else {
+        const timeValue = {
+          hour: min ? min.slice(0, 2) : mode12h ? 1 : 0,
+          minute: min ? min.slice(3, 5) : 0,
+          second: min ? min.slice(6, 8) : 0,
+          text: min ? (returnFormat === 'HH:mm:ss' ? min.slice(10, 12) : min.slice(6, 8)) || 'AM' : 'AM'
+        };
+        setTimeValue(timeValue);
+      }
       setDisplayTime(null);
     } else {
       let displayTimeValue = '00:00:00';
@@ -433,13 +443,22 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       const valueMinute = Number(value.slice(3, 5)) || '00';
       const valueSecond = Number(value.slice(6, 8)) || '00';
       const valueTime = new Date(new Date().getFullYear(), 0, 1, valueHour, valueMinute, valueSecond);
-      displayTimeValue = formatTime(valueTime, displayFormat);
-      setTimeValue({
-        hour: value.slice(0, 2),
-        minute: value.slice(3, 5),
-        second: value.slice(6, 8),
-        text: value.slice(10, 12)
-      });
+      displayTimeValue = mode12h ? formatTime(valueTime, displayFormat).slice(0, -3).concat(returnFormat === 'HH:mm:ss' ? ` ${value.slice(10, 12)}` : ` ${value.slice(6, 8)}`) : formatTime(valueTime, displayFormat).concat(returnFormat === 'HH:mm:ss' ? ` ${value.slice(10, 12)}` : ` ${value.slice(6, 8)}`);
+      if (!mode12h) {
+        setTimeValue({
+          hour: value.slice(0, 2),
+          minute: value.slice(3, 5),
+          second: value.slice(6, 8)
+        });
+      } else {
+        const timeValue = {
+          hour: value.slice(0, 2),
+          minute: value.slice(3, 5),
+          second: returnFormat === 'HH:mm:ss' ? value.slice(6, 8) : '00',
+          text: returnFormat === 'HH:mm:ss' ? value.slice(10, 12) : value.slice(6, 8)
+        };
+        setTimeValue(timeValue);
+      }
       setDisplayTime(displayTimeValue);
     }
   }, [value, displayFormat, returnFormat, mode12h, min, max]);
@@ -477,7 +496,23 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     disabled: disabled,
     required: required,
     ...labelProps
-  }, label), jsx(Popover, {
+  }, label), readOnly ? jsx(InputBase, {
+    inputProps: {
+      placeholder: !readOnly && !disabled ? placeholder : '',
+      ...inputProps
+    },
+    disabled: disabled,
+    viewType: viewType,
+    inputStyle: {
+      ...inputStyle
+    },
+    value: displayTime,
+    endIcon: endIcon,
+    startIcon: startIcon,
+    onKeyDown: e => e.preventDefault(),
+    status: error ? 'danger' : 'default',
+    readOnly: true
+  }) : jsx(Popover, {
     css: _TimePickerCSS,
     anchor: jsx(InputBase, {
       inputProps: {
@@ -725,24 +760,6 @@ const TimePickerAMPMCSS = (currentText, {
         ${parseWidth(32)};
     }
 `;
-
-// TimePicker.defaultProps = {
-//     actionIconAt: 'end',
-//     className: '',
-//     disabled: false,
-//     displayFormat: 'HH:mm:ss',
-//     mode12h: false,
-//     readOnly: false,
-//     required: false,
-//     returnFormat: 'HH:mm:ss',
-//     error: '',
-//     minuteStep: 1,
-//     min: '',
-//     max: '',
-//     label: '',
-//     value: '',
-// };
-
 TimePicker.propTypes = {
   /** CSS class for the component. ({container: '', header: '', body: '', footer: ''}) */
   className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),

package/icons/basic.js

@@ -4016,6 +4016,64 @@ export const MoneyHistory = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const MoneyList = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = 'system/rest',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14 7H21V9H14V7Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14 11H21V13H14V11Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14 15H21V17H14V15Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.90099 10.8966C5.94059 10.3448 5.58416 9.88506 5.58416 9.24138C5.58416 8.41379 6.38614 7.86207 7.63366 7.86207C8.88119 7.86207 9.50495 8.41379 9.50495 9.42529V9.6092H11.8218V9.33333C11.7327 7.67816 10.7525 6.29885 9.14851 5.83908V4H6.11881V5.93103C4.24752 6.3908 3.17822 7.67816 3.17822 9.24138C3.17822 11.7241 5.49505 12.6437 7.27723 13.0115C9.32673 13.5632 9.59406 14.2069 9.59406 14.8506C9.59406 15.1264 9.41584 16.1379 7.54455 16.1379C6.11881 16.1379 5.31683 15.5862 5.22772 14.4828V14.2989H3V14.5747C3.08911 16.3218 4.24752 17.6092 6.11881 18.069V20H9.05941V18.069C10.9307 17.6092 12 16.4138 12 14.7586C12 12.3678 9.95049 11.4483 7.90099 10.8966Z",
+    fill: fillColor(color)
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 16,
+    viewBox: "0 0 18 16",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11 3H18V5H11V3Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11 7H18V9H11V7Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11 11H18V13H11V11Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.90099 6.89655C2.94059 6.34483 2.58416 5.88506 2.58416 5.24138C2.58416 4.41379 3.38614 3.86207 4.63366 3.86207C5.88119 3.86207 6.50495 4.41379 6.50495 5.42529V5.6092H8.82178V5.33333C8.73267 3.67816 7.75247 2.29885 6.14851 1.83908V0H3.11881V1.93103C1.24752 2.3908 0.178218 3.67816 0.178218 5.24138C0.178218 7.72414 2.49505 8.64368 4.27723 9.01149C6.32673 9.56322 6.59406 10.2069 6.59406 10.8506C6.59406 11.1264 6.41584 12.1379 4.54455 12.1379C3.11881 12.1379 2.31683 11.5862 2.22772 10.4828V10.2989H0V10.5747C0.0891089 12.3218 1.24752 13.6092 3.11881 14.069V16H6.05941V14.069C7.93069 13.6092 9 12.4138 9 10.7586C9 8.36782 6.95049 7.44828 4.90099 6.89655Z",
+    fill: fillColor(color)
+  }));
+});
 export const More = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

@@ -1,44 +1,78 @@
-{
-  "name": "diginet-core-ui",
-  "version": "1.4.35",
-  "description": "The DigiNet core ui",
-  "homepage": "https://diginet.com.vn",
-  "main": "index.js",
-  "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"
-  },
-  "dependencies": {
-    "@emotion/core": "^10.0.35",
-    "prop-types": "^15.7.2",
-    "@emotion/css": "^11.11.0",
-    "@emotion/react": "^11.10.6"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
-  },
-  "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"
-}
+{
+  "name": "diginet-core-ui",
+  "version": "1.4.36-beta.2",
+  "description": "",
+  "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",
+    "freshtall": "npm cache clean --force && rm -rf node_modules && rm -f package-lock.json && npm install",
+    "test-storybook": "test-storybook --url http://localhost:9050",
+    "preinstall": "echo {} > package-lock.json"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.35",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.10.6",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "date-fns": "^2.30.0",
+    "prop-types": "^15.7.2"
+  },
+  "lint-staged": {
+    "*/**/*.{js,jsx,json}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "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

@@ -42,6 +42,17 @@ npm test
 
 ## Changelog
 
+## 1.4.36
+
+- \[Fixed\]: TimePicker – Fix show popover when readOnly is true, fix return value contain space
+- \[Changed\]: index.stories.js – Add props to components in index.stories.js
+- \[Fixed\]: DatePicker – Fix still open popup when readOnly
+- \[Fixed\]: DateRangePicker – Fix still open popup when readOnly
+
+## 1.4.35
+
+* [Changed\]: DropdownBox - Added props allowInput, disabled, displayExpr, error, valueExpr, helperTextProps
+
 ## 1.4.34
 
 - \[Fixed]: DatePicker – Fix disabled navigator on first render
@@ -1367,3 +1378,5 @@ npm test
 - \[Added\]: Icon component for DHR/ERP
 - \[Changed\]: Progress/Linear component
 - \[Changed\]: Form/Dropdown component
+
+[Added]: Adde