oa-componentbook 1.0.1-stage.36 → 1.0.1-stage.360

package/build/components/oa-component-checkbox/CustomCheckBox.js

@@ -12,7 +12,8 @@ var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorV
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
 var _styles = require("./styles");
 var _utils = require("../../utils");
-const _excluded = ["data-test", "label", "onChange", "size"];
+const _excluded = ["data-test", "label", "onChange", "size", "className"];
+/* eslint-disable */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -32,14 +33,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  */
 const getCheckboxTheme = () => ({
   token: {
-    colorTextDisabled: _ColorVariablesMap.default['--color-disabled-button'],
-    colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
-    colorPrimary: _ColorVariablesMap.default['--color-primary'],
-    colorBgContainerDisabled: _ColorVariablesMap.default['--color-secondary-background'],
-    colorBorder: _ColorVariablesMap.default['--color-secondary-content'],
-    colorText: _ColorVariablesMap.default['--color-primary-content'],
-    borderRadiusSM: '2px',
-    paddingXS: '12px'
+    colorTextDisabled: _ColorVariablesMap.default["--color-disabled-button"],
+    colorPrimaryHover: _ColorVariablesMap.default["--color-primary"],
+    colorPrimary: _ColorVariablesMap.default["--color-primary"],
+    colorBgContainerDisabled: _ColorVariablesMap.default["--color-secondary-background"],
+    colorBorder: _ColorVariablesMap.default["--color-secondary-content"],
+    colorText: _ColorVariablesMap.default["--color-primary-content"],
+    borderRadiusSM: "2px",
+    paddingXS: "12px"
   }
 });
 
@@ -64,10 +65,11 @@ const getCheckboxTheme = () => ({
 exports.getCheckboxTheme = getCheckboxTheme;
 function CustomCheckBox(_ref) {
   let {
-      'data-test': dataTest,
+      "data-test": dataTest,
       label,
       onChange,
-      size
+      size,
+      className
       /*
       Instead of keeping a `checked` prop explicitly,
       we keep it optional by directly passing extra props to the antd component.
@@ -82,12 +84,13 @@ function CustomCheckBox(_ref) {
   return /*#__PURE__*/_react.default.createElement(_styles.StyleContainer, null, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: getCheckboxTheme()
   }, /*#__PURE__*/_react.default.createElement(_antd.Checkbox, _extends({
+    className: className !== null && className !== void 0 ? className : "",
     "data-test": dataTest,
     onChange: handleChange
   }, antDesignProps),
   // The label is a string or a number
   ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    typography: size === 'large' ? 'type-b1-400' : 'type-b2-400'
+    typography: size === "large" ? "type-b1-400" : "type-b2-400"
   }, label) ||
   // The label is a node
   /*#__PURE__*/_react.default.isValidElement(label) && label || undefined)));
@@ -96,17 +99,17 @@ function CustomCheckBox(_ref) {
 // This allows us referencing the Group container in our Checkbox component
 CustomCheckBox.Group = _antd.Checkbox.Group;
 CustomCheckBox.propTypes = {
-  'data-test': _propTypes.default.string,
+  "data-test": _propTypes.default.string,
   label: _propTypes.default.node,
   onChange: _propTypes.default.func,
-  size: _propTypes.default.oneOf(['large', 'small']),
+  size: _propTypes.default.oneOf(["large", "small"]),
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool])
 };
 CustomCheckBox.defaultProps = {
-  'data-test': null,
+  "data-test": null,
   label: null,
   onChange: value => {},
-  size: 'small',
-  value: ''
+  size: "small",
+  value: ""
 };
 var _default = exports.default = CustomCheckBox;

package/build/components/oa-component-checkbox/styles.js

@@ -9,4 +9,4 @@ var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = exports.default = {};
-const StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-checkbox-wrapper .ant-checkbox {\n    align-self: start;\n    margin: 2px 0 0 0;\n}\n"])));
+const StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-checkbox-wrapper .ant-checkbox {\n    align-self: start;\n    margin: 2px 0 0 0; \n}\n"])));

package/build/components/oa-component-datepicker/CustomDatePicker.js

@@ -14,8 +14,9 @@ var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorV
 var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
 require("antd/dist/reset.css");
 var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
-const _excluded = ["data-test"];
+const _excluded = ["data-test", "disabledDateFunction"];
 var _templateObject;
+/* eslint-disable */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -37,7 +38,8 @@ const FullWidthDatePicker = (0, _styledComponents.default)(_antd.DatePicker)(_te
  */
 function CustomDatePicker(_ref) {
   let {
-      'data-test': dataTest
+      "data-test": dataTest,
+      disabledDateFunction
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
@@ -65,7 +67,7 @@ function CustomDatePicker(_ref) {
         }
       },
       token: {
-        lineHeight: _TypographiesMap.default['type-b2-400']['line-height'] / _TypographiesMap.default['type-b2-400']['font-size'],
+        lineHeight: _TypographiesMap.default["type-b2-400"]["line-height"] / _TypographiesMap.default["type-b2-400"]["font-size"],
         paddingBlockLG: 50,
         paddingXS: 16,
         // Used to control margin of calendar icon
@@ -77,31 +79,31 @@ function CustomDatePicker(_ref) {
         // height of small text field
         // controlHeightLG: 64,
         borderRadius: 4,
-        colorPrimary: _ColorVariablesMap.default['--color-primary'],
+        colorPrimary: _ColorVariablesMap.default["--color-primary"],
         // for active color of input
-        colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
+        colorPrimaryHover: _ColorVariablesMap.default["--color-primary"],
         // for hover color of input
-        colorBgContainerDisabled: _ColorVariablesMap.default['--color-divider'],
-        colorBorder: _ColorVariablesMap.default['--color-placeholder-text'],
+        colorBgContainerDisabled: _ColorVariablesMap.default["--color-divider"],
+        colorBorder: _ColorVariablesMap.default["--color-placeholder-text"],
         // border color of input text field
-        colorTextDisabled: _ColorVariablesMap.default['--color-placeholder-text'],
+        colorTextDisabled: _ColorVariablesMap.default["--color-placeholder-text"],
         // Color of disabled text.
-        colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
+        colorTextPlaceholder: _ColorVariablesMap.default["--color-placeholder-text"],
         // Color of placeholder text
-        colorTextQuaternary: _ColorVariablesMap.default['--color-placeholder-text'],
+        colorTextQuaternary: _ColorVariablesMap.default["--color-placeholder-text"],
         // color of disabled calendar icon
-        colorText: _ColorVariablesMap.default['--color-primary-content'],
+        colorText: _ColorVariablesMap.default["--color-primary-content"],
         // Text color
-        colorIcon: _ColorVariablesMap.default['--color-primary'],
+        colorIcon: _ColorVariablesMap.default["--color-primary"],
         // Color of arrows icons beside month and year in datepicker
-        colorIconHover: _ColorVariablesMap.default['--color-primary-hover'],
+        colorIconHover: _ColorVariablesMap.default["--color-primary-hover"],
         // Hover color of arrows icons beside month and year in datepicker
 
-        colorLink: _ColorVariablesMap.default['--color-primary'],
-        colorLinkHover: _ColorVariablesMap.default['--color-primary-hover'],
-        colorError: _ColorVariablesMap.default['--color-negative'],
+        colorLink: _ColorVariablesMap.default["--color-primary"],
+        colorLinkHover: _ColorVariablesMap.default["--color-primary-hover"],
+        colorError: _ColorVariablesMap.default["--color-negative"],
         // Error color
-        colorErrorBorderHover: _ColorVariablesMap.default['--color-negative'] // Hover error color should be same as error color
+        colorErrorBorderHover: _ColorVariablesMap.default["--color-negative"] // Hover error color should be same as error color
       }
     }
   }, /*#__PURE__*/_react.default.createElement(FullWidthDatePicker, _extends({
@@ -110,14 +112,15 @@ function CustomDatePicker(_ref) {
     suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
       icon: _CalendarTodayRounded.default,
       size: 20
-    })
+    }),
+    disabledDate: disabledDateFunction
   }, props)));
 }
 CustomDatePicker.propTypes = {
-  'data-test': _propTypes.default.string,
-  size: _propTypes.default.oneOf(['small', 'middle'])
+  "data-test": _propTypes.default.string,
+  size: _propTypes.default.oneOf(["small", "middle"])
 };
 CustomDatePicker.defaultProps = {
-  'data-test': null,
-  size: 'middle'
+  "data-test": null,
+  size: "middle"
 };

package/build/components/oa-component-drawer/CustomDrawer.js

@@ -114,11 +114,13 @@ function CustomDrawer(_ref) {
     title: isBaseDrawer ? /*#__PURE__*/_react.default.createElement(_styles.BaseDrawerTitle, null, DrawerTitle(title), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
       color: "primary-content",
       icon: _CloseRounded.default,
+      className: "drawerCloseRoundedIcon",
       onClick: handleClose,
       size: 20,
       "data-test": dataTest ? "".concat(dataTest, "--close-drawer-button") : undefined
     })) : /*#__PURE__*/_react.default.createElement(_styles.LayeredDrawerTitle, null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
       color: "primary-content",
+      className: "drawerCloseRoundedIcon",
       icon: _ArrowBackIosRounded.default,
       onClick: handleClose,
       size: 20,

package/build/components/oa-component-dropdown/CustomDropdown.js

@@ -36,7 +36,8 @@ function CustomDropdown(_ref) {
     firstLetterIcon,
     trigger,
     placement,
-    type
+    type,
+    onMenuItemClick
     // dropDownHeading,
   } = _ref;
   const firstLetter = (displayText === null || displayText === void 0 || (_displayText$split = displayText.split(' ')) === null || _displayText$split === void 0 || (_displayText$split = _displayText$split[1]) === null || _displayText$split === void 0 ? void 0 : _displayText$split.charAt(0).toUpperCase()) || 'H'; // Extract the first letter after Hi.
@@ -52,7 +53,16 @@ function CustomDropdown(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement(_styles.default, null, firstLetterIcon && firstLetter && /*#__PURE__*/_react.default.createElement("small", null, firstLetter), /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
     menu: {
-      items
+      items,
+      onClick: _ref2 => {
+        let {
+          key
+        } = _ref2;
+        const clickedItem = items.find(item => item.key === key);
+        if (clickedItem) {
+          onMenuItemClick(clickedItem);
+        }
+      }
     },
     trigger: trigger,
     placement: placement,
@@ -69,7 +79,8 @@ CustomDropdown.propTypes = {
   firstLetterIcon: _propTypes.default.bool,
   trigger: _propTypes.default.string,
   placement: _propTypes.default.string,
-  type: _propTypes.default.string
+  type: _propTypes.default.string,
+  onMenuItemClick: _propTypes.default.func
   // dropDownHeading: PropTypes.string,
 };
 CustomDropdown.defaultProps = {
@@ -85,6 +96,7 @@ CustomDropdown.defaultProps = {
   firstLetterIcon: false,
   trigger: ['click'],
   placement: 'bottomRight',
-  type: 'default'
+  type: 'default',
+  onMenuItemClick: () => {}
   // dropDownHeading: '',
 };

package/build/components/oa-component-icons/MaterialIcon.js

@@ -39,7 +39,7 @@ function MaterialIcon(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   const renderedIcon = /*#__PURE__*/_react.default.createElement(Icon, _extends({
     style: _objectSpread({
-      color: color ? _ColorVariablesMap.default["--color-".concat(color)] : undefined,
+      color: color && _ColorVariablesMap.default["--color-".concat(color)] ? _ColorVariablesMap.default["--color-".concat(color)] : color || undefined,
       fontSize: size ? "".concat(size, "px") : 'inherit',
       transition: 'transform .3s ease',
       transform: "rotate(".concat(rotate, "deg)")

package/build/components/oa-component-modal/styles.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.TitleContainer = exports.DescriptionContainer = exports.ButtonContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
+/* eslint-disable */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: flex-end;\n  margin: 24px 0 0;\n  @media (max-width: 768px) {\n    justify-content: space-between;\n    button{\n      width: 100%;\n    }\n  }\n"])));
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: flex-end;\n  margin: 36px 0 0;\n  @media (max-width: 768px) {\n    justify-content: space-between;\n    button{\n      width: 100%;\n    }\n  }\n"])));
 const DescriptionContainer = exports.DescriptionContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 12px 0 0;\n"])));
-const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  flex-direction: column;\n  margin: 0 0 16px;\n\n  img {\n    height: 36px;\n    width: 36px;\n  }\n"])));
+const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 32px 0 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  img {\n    height: 36px;\n    width: 36px;\n  }\n"])));

package/build/components/oa-component-pagination/CustomPagination.js

@@ -0,0 +1,111 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
+var _styles = require("./styles");
+const _excluded = ["current", "total", "pageSize", "onChange", "onShowSizeChange", "pageSizeOptions", "showSizeChanger", "showQuickJumper", "showTotal", "size", "style"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * @description A custom wrapper for Ant Design Pagination component with consistent theming.
+ * @param {number} current - The current page number (1-based).
+ * @param {number} total - The total number of items.
+ * @param {number} pageSize - The number of items per page.
+ * @param {function} onChange - Callback function when page changes.
+ * @param {function} onShowSizeChange - Callback function when page size changes.
+ * @param {array} pageSizeOptions - Array of page size options.
+ * @param {boolean} showSizeChanger - Whether to show the page size selector.
+ * @param {boolean} showQuickJumper - Whether to show the quick jumper input.
+ * @param {boolean} showTotal - Whether to show the total items count.
+ * @param {string} size - The size of the pagination component.
+ * @param {object} style - Custom styles for the component.
+ * @param {object} antDesignProps - Additional props to pass to Ant Design Pagination.
+ * @returns {JSX.Element} The rendered pagination component.
+ */
+function CustomPagination(_ref) {
+  let {
+      current = 1,
+      total = 0,
+      pageSize = 10,
+      onChange,
+      onShowSizeChange,
+      pageSizeOptions = [10, 20, 50, 100],
+      showSizeChanger = true,
+      showQuickJumper = false,
+      showTotal = true,
+      size = 'default',
+      style
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  const renderTotal = (totalItems, range) => {
+    if (!showTotal) return null;
+    return "Showing ".concat(range[0], "-").concat(range[1], " of ").concat(totalItems, " items");
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.MainContainer, {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Pagination: {}
+      },
+      token: {
+        colorPrimary: '#014FC5',
+        colorPrimaryBorder: '#014FC5',
+        colorPrimaryHover: '#82A9E2',
+        colorText: '#212121',
+        colorTextDisabled: '#BFBFBF',
+        colorTextPlaceholder: '#959595',
+        borderRadius: 2,
+        colorBorder: '#E0E0E0'
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Pagination, _extends({
+    current: current,
+    total: total,
+    pageSize: pageSize,
+    onChange: onChange,
+    onShowSizeChange: onShowSizeChange,
+    showSizeChanger: showSizeChanger,
+    showQuickJumper: showQuickJumper,
+    showTotal: renderTotal,
+    pageSizeOptions: pageSizeOptions,
+    size: size
+  }, antDesignProps))));
+}
+CustomPagination.propTypes = {
+  current: _propTypes.default.number,
+  total: _propTypes.default.number,
+  pageSize: _propTypes.default.number,
+  onChange: _propTypes.default.func,
+  onShowSizeChange: _propTypes.default.func,
+  pageSizeOptions: _propTypes.default.arrayOf(_propTypes.default.number),
+  showSizeChanger: _propTypes.default.bool,
+  showQuickJumper: _propTypes.default.bool,
+  showTotal: _propTypes.default.bool,
+  size: _propTypes.default.oneOf(['default', 'small']),
+  style: _propTypes.default.object
+};
+CustomPagination.defaultProps = {
+  current: 1,
+  total: 0,
+  pageSize: 10,
+  onChange: undefined,
+  onShowSizeChange: undefined,
+  pageSizeOptions: [10, 20, 50, 100],
+  showSizeChanger: true,
+  showQuickJumper: false,
+  showTotal: true,
+  size: 'default',
+  style: undefined
+};
+var _default = exports.default = CustomPagination;

package/build/components/oa-component-pagination/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MainContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-pagination-item {\n    border: 1px solid #E0E0E0;\n  }\n  .ant-pagination-item-active {\n    border: 1px solid #014FC5;\n  }\n    .mobile-pagination{margin: 0;padding:0;}\n    .ant-pagination-total-text,.ant-pagination-options{display: none;}\n"])));
+var _default = exports.default = {};