oa-componentbook 0.0.0-sit1.1

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyleContainer = 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) } })); }
+var _default = exports.default = {};
+const StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.flexProp{display:flex; flex-direction: row; align-items: center; justify-content: space-between; width:100%;}\n.flexSec{display:flex; flex-direction: row; justify-content: flex-start;}\n.flexSec svg{cursor:pointer;}\n.mobView{display:none;}\n.deskView{display:flex;}\n.headerSearch {display: flex; width:100%; flex-direction: row; justify-content: flex-start; align-items: center;  background-color: var(--color-primary-background); position: absolute; padding: 6px 0; left: 0; right: 0;}\n.customHeader{min-height: 60px; position: relative; display: flex; align-items: center;   justify-content: space-between;}\n\n@media only screen and (max-width: 600px) {\n.mobView{display:flex;}\n.deskView{display:none;}\n.headerSearch {align-items: flex-start; flex-direction: column; justify-content: flex-start; padding: 18px 0; }\n.headerSearch input{margin:18px 0 0 0;} \n\n}\n\n\n"])));

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

@@ -0,0 +1,92 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeleteIcon = DeleteIcon;
+exports.WarningIcon = WarningIcon;
+exports.default = CustomIcon;
+require("core-js/modules/es.object.assign.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _icons = _interopRequireDefault(require("@ant-design/icons"));
+var _delete = _interopRequireDefault(require("../../images/delete.svg"));
+var _caution = _interopRequireDefault(require("../../images/caution.svg"));
+var _SizedSvg = _interopRequireDefault(require("./SizedSvg"));
+const _excluded = ["alt", "color", "hoverColor", "size", "src", "style"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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; }
+/**
+ * A simple wrapper around the Ant Design Icon component,
+ * which uses SizedSvg underneath. See the documentation for
+ * SizedSvg for more information.
+ *
+ * The only prop that is not passed to SizedSvg is `style`, which
+ * is merged with the style object that is passed to Icon.
+ *
+ * @param {Object} props - all the props to pass to SizedSvg
+ * @returns {React.ReactElement} - the rendered component
+ */
+function CustomIcon(_ref) {
+  let {
+      alt,
+      color,
+      hoverColor,
+      size,
+      src,
+      style
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_icons.default, _extends({
+    style: _objectSpread({
+      width: "".concat(size, "px")
+    }, style),
+    component:
+    // We need to give an uninstantiated component
+    () => (0, _SizedSvg.default)({
+      alt,
+      color,
+      hoverColor,
+      size,
+      src
+    })
+  }, props));
+}
+CustomIcon.propTypes = {
+  alt: _propTypes.default.string,
+  color: _propTypes.default.string,
+  hoverColor: _propTypes.default.string,
+  size: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  src: _propTypes.default.string.isRequired,
+  style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]))
+};
+CustomIcon.defaultProps = {
+  alt: '',
+  color: null,
+  hoverColor: null,
+  size: '40',
+  style: {}
+};
+function DeleteIcon(_ref2) {
+  let props = Object.assign({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  return /*#__PURE__*/_react.default.createElement(CustomIcon, _extends({
+    alt: "Delete icon.",
+    src: _delete.default
+  }, props));
+}
+function WarningIcon(_ref3) {
+  let props = Object.assign({}, (_objectDestructuringEmpty(_ref3), _ref3));
+  return /*#__PURE__*/_react.default.createElement(CustomIcon, _extends({
+    alt: "Warning icon.",
+    src: _caution.default
+  }, props));
+}

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

@@ -0,0 +1,70 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MaterialIcon;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _colorOptions = require("../../global-css/color-options");
+var _utils = require("../../utils");
+const _excluded = ["color", "data-test", "icon", "onClick", "rotate", "size", "style"];
+var _templateObject;
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const UnstyledButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n  height: ", "px;\n"])), props => props.size);
+function MaterialIcon(_ref) {
+  let {
+      color,
+      // By default, material icons inherit font color
+      'data-test': dataTest,
+      icon: Icon,
+      onClick,
+      rotate,
+      size,
+      style
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const renderedIcon = /*#__PURE__*/_react.default.createElement(Icon, _extends({
+    style: _objectSpread({
+      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)")
+    }, style)
+  }, props));
+  return (0, _utils.isFunction)(onClick) ? /*#__PURE__*/_react.default.createElement(UnstyledButton, _extends({
+    onClick: onClick,
+    size: size,
+    "data-test": dataTest
+  }, props), renderedIcon) : renderedIcon;
+}
+MaterialIcon.propTypes = {
+  color: _propTypes.default.oneOf(_colorOptions.colorOptions),
+  'data-test': _propTypes.default.string,
+  icon: _propTypes.default.element.isRequired,
+  onClick: _propTypes.default.func,
+  rotate: _propTypes.default.number,
+  size: _propTypes.default.number,
+  style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
+};
+MaterialIcon.defaultProps = {
+  color: null,
+  'data-test': null,
+  onClick: null,
+  rotate: 0,
+  size: null,
+  style: {}
+};

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

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SizedSvg;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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) } })); }
+function SizedSvg(_ref) {
+  var _ref2;
+  let {
+    alt,
+    color,
+    hoverColor,
+    size,
+    src
+  } = _ref;
+  const Img = _styledComponents.default.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    /* color: ", ";\n    fill: currentColor;\n\n    &:hover {\n      color: ", ";\n      fill: currentColor;\n    } */\n  "])), color !== null && color !== void 0 ? color : 'inherit', (_ref2 = hoverColor !== null && hoverColor !== void 0 ? hoverColor : color) !== null && _ref2 !== void 0 ? _ref2 : 'inherit');
+  return /*#__PURE__*/_react.default.createElement(Img, {
+    alt: alt,
+    src: src,
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
+  });
+}
+SizedSvg.propTypes = {
+  alt: _propTypes.default.string,
+  color: _propTypes.default.string,
+  hoverColor: _propTypes.default.string,
+  size: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  src: _propTypes.default.string.isRequired
+};
+SizedSvg.defaultProps = {
+  alt: 'random icon',
+  color: null,
+  hoverColor: null,
+  size: '20'
+};

package/build/components/oa-component-info/CustomInfo.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomInfo;
+require("core-js/modules/es.symbol.description.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _styles = require("./styles");
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _colorOptions = require("../../global-css/color-options");
+require("antd/dist/reset.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * A component for displaying a single piece of information with an optional icon
+ * and/or button. The icon can be placed on either the left or right of the text.
+ * If the icon is a valid React element, its size is adjusted based on the presence
+ * of a title. If a title is not provided, the icon size is 20. If a title is
+ * provided, the icon size is 24.
+ *
+ * @param {object} buttonConfig - Configuration for the button.
+ * @param {string} color - The background color of the component.
+ * @param {string} description - The text to be displayed.
+ * @param {string} fontColor - The color of the text.
+ * @param {object} iconConfig - Configuration for the icon.
+ * @param {string} title - The title to be displayed.
+ * @param {string} borderColor - The border color of the component.
+ *
+ * @returns {ReactElement} A styled component with the specified properties.
+ */
+function CustomInfo(_ref) {
+  let {
+    buttonConfig,
+    color,
+    description,
+    fontColor,
+    iconConfig,
+    title,
+    borderColor
+  } = _ref;
+  /**
+   * Renders the icon based on the presence of a title.
+   * If a title is not provided and the icon is a valid React element,
+   * it returns a cloned version of the icon with a size of 20.
+   * If a title is provided and the icon is a valid React element,
+   * it returns a cloned version of the icon with a size of 24.
+   */
+  const renderIcon = () => !title ? /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
+    size: 20
+  }) : /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
+    size: 24
+  });
+
+  /**
+   * Adds a tooltip to the icon if the iconConfig has a tooltipText property.
+   * Otherwise, just renders the icon.
+   *
+   * @returns {React.ReactNode} The rendered icon with or without a tooltip.
+   */
+  const conditionallyAddTooltipToIcon = () => {
+    var _iconConfig$tooltipTe;
+    return (iconConfig === null || iconConfig === void 0 || (_iconConfig$tooltipTe = iconConfig.tooltipText) === null || _iconConfig$tooltipTe === void 0 ? void 0 : _iconConfig$tooltipTe.length) > 0 ? /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.tooltipText
+    }, renderIcon()) : renderIcon();
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.InfoContainer, {
+    $color: color,
+    $borderColor: borderColor
+  }, /*#__PURE__*/_react.default.createElement(_styles.RowFlex, null, iconConfig.position === 'left' && conditionallyAddTooltipToIcon(), /*#__PURE__*/_react.default.createElement(_styles.ColFlex, null, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: fontColor,
+    typography: "type-t2-700"
+  }, title), description && /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-b2-400",
+    style: {
+      color: "var(--color-".concat(fontColor, ")")
+    }
+  }, description)), iconConfig.position === 'right' && conditionallyAddTooltipToIcon()), (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.label) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, buttonConfig));
+}
+CustomInfo.propTypes = {
+  buttonConfig: _propTypes.default.shape({
+    size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+    iconConfig: _propTypes.default.shape({
+      icon: _propTypes.default.node,
+      position: _propTypes.default.oneOf(['left', 'right']),
+      style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
+    }),
+    label: _propTypes.default.node,
+    onClick: _propTypes.default.func,
+    type: _propTypes.default.oneOf(['primary', 'secondary', 'text-only', 'danger-primary', 'danger-secondary', 'danger-text-only'])
+  }),
+  color: _propTypes.default.oneOf(_colorOptions.colorOptions),
+  description: _propTypes.default.string,
+  fontColor: _propTypes.default.oneOf(_colorOptions.colorOptions),
+  iconConfig: _propTypes.default.shape({
+    icon: _propTypes.default.node,
+    position: _propTypes.default.oneOf(['left', 'right']),
+    tooltipText: _propTypes.default.string
+  }),
+  title: _propTypes.default.string,
+  borderColor: _propTypes.default.string
+};
+CustomInfo.defaultProps = {
+  buttonConfig: {
+    label: null,
+    size: 'medium',
+    type: 'text-only'
+  },
+  color: 'background-warning',
+  iconConfig: {
+    position: 'left'
+  },
+  fontColor: 'primary-content',
+  title: '',
+  description: '',
+  borderColor: ''
+};

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RowFlex = exports.InfoContainer = exports.ColFlex = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+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 RowFlex = exports.RowFlex = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+const ColFlex = exports.ColFlex = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
+const InfoContainer = exports.InfoContainer = (0, _styledComponents.default)(RowFlex).attrs({
+  as: 'section'
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 12px;\n  align-items: center;\n  border-radius: 8px;\n  background-color: var(--color-", ");\n  border: 1px solid var(--color-", ");\n\n  button {\n    margin-left: 8px;\n  }\n"])), props => props.$color, props => props.$borderColor);

package/build/components/oa-component-input/CustomInput.js

@@ -0,0 +1,131 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomInput;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _utils = require("../../utils");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
+const _excluded = ["data-test", "autoFocus"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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; }
+/**
+ * CustomInput is a component that renders an input field with customizable styling.
+ * It automatically focuses on the input field when mounted if autoFocus is set to true.
+ * The component allows customization of padding, border colors, box shadows, placeholder text color, and more.
+ */
+function CustomInput(_ref) {
+  let {
+      'data-test': dataTest,
+      autoFocus
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const inputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (autoFocus && inputRef.current && autoFocus === true) {
+      inputRef.current.focus(); // Automatically focus the input field when the component mounts
+    }
+  }, [autoFocus]);
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Input: {
+          /*
+          For small size:
+          20 (line height)
+          + 2 * 5 (padding)
+          + 2 * 1 (border)
+          */
+          paddingBlockSM: 5,
+          /*
+          For default size:
+          20 (line height)
+          + 2 * 13 (padding)
+          + 2 * 1 (border)
+          */
+          paddingBlock: 13,
+          /*
+          For small size: 13px inline padding
+          12 (padding) 1 extra so that it shows 12px and 16px in browser console.
+          + 1 (border)
+          */
+          paddingInlineSM: 12,
+          /*
+          For default size: 17px inline padding
+          16 (padding) 1 extra so that it shows 12px and 16px in browser console.
+          + 1 (border)
+          */
+          paddingInline: 16,
+          activeBorderColor: _ColorVariablesMap.default['--color-primary'],
+          // border color of active and hover should be same
+          hoverBorderColor: _ColorVariablesMap.default['--color-primary']
+
+          // Converting the hex code to rgb values.
+
+          // Box shadow for active input box.
+          // activeShadow: `0px 0px 4px 0px rgba(${
+          //   hexToRgb(ColorVariablesMap['--color-primary']).join(', ')
+          // }, 0.9)`,
+
+          // Box shadow for error active input box.
+          // errorActiveShadow: `0px 0px 4px 0px rgba(${
+          //   hexToRgb(ColorVariablesMap['--color-negative']).join(', ')
+          // }, 0.9)`,
+        }
+      },
+      token: {
+        colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
+        // Color of placeholder text
+        lineHeight: "".concat(_TypographiesMap.default['type-b2-400']['line-height'], "px"),
+        colorPrimary: _ColorVariablesMap.default['--color-primary'],
+        // for active color of input
+        colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
+        // for hover color of input
+        colorBgContainerDisabled: _ColorVariablesMap.default['--color-divider'],
+        borderRadius: '4px',
+        // For border radius of input text field.
+        controlHeight: 48,
+        controlHeightSM: 32,
+        // Size of "small" size input
+        colorBorder: _ColorVariablesMap.default['--color-placeholder-text'],
+        // border color of input text field
+        colorText: _ColorVariablesMap.default['--color-primary-content'],
+        // Text color
+        colorTextDisabled: _ColorVariablesMap.default['--color-secondary-content'],
+        // Text color when disabled
+        colorError: _ColorVariablesMap.default['--color-negative'],
+        // Error color
+        colorErrorBorderHover: _ColorVariablesMap.default['--color-negative'] // Hover error color should be same as error color
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, _extends({
+    "data-test": dataTest,
+    ref: inputRef,
+    classNames: {
+      input: 'type-b2-400',
+      prefix: 'type-b2-400',
+      suffix: 'type-b2-400'
+    }
+  }, props)));
+}
+CustomInput.propTypes = {
+  'data-test': _propTypes.default.string,
+  size: _propTypes.default.oneOf(['small', 'default']),
+  autoFocus: _propTypes.default.bool // Add autoFocus prop to control automatic focusing
+};
+CustomInput.defaultProps = {
+  'data-test': null,
+  size: 'default',
+  autoFocus: false // Default to not auto-focusing
+};

package/build/components/oa-component-input-number/CustomInputNumber.js

@@ -0,0 +1,140 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomInputNumber;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _utils = require("../../utils");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
+const _excluded = ["data-test", "autoFocus"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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; }
+/**
+ * CustomInputNumber is a component that renders a number input field with customizable styling.
+ * It automatically focuses on the input field when mounted if autoFocus is set to true.
+ * The component allows customization of padding, border colors, box shadows, placeholder text color, and more.
+ *
+ * @param {Object} props - The props for the component
+ * @prop {string} ['data-test'] - The data-test value for the component
+ * @prop {boolean} [autoFocus=false] - Whether to autofocus on the input field
+ *
+ * @return {ReactElement} The rendered component
+ */
+function CustomInputNumber(_ref) {
+  let {
+      'data-test': dataTest,
+      autoFocus
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const inputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (autoFocus && inputRef.current && autoFocus === true) {
+      inputRef.current.focus(); // Automatically focus the input field when the component mounts
+    }
+  }, [autoFocus]);
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        InputNumber: {
+          controlWidth: '100%',
+          /*
+          For small size:
+          20 (line height)
+          + 2 * 5 (padding)
+          + 2 * 1 (border)
+          */
+          paddingBlockSM: 5,
+          /*
+          For middle size:
+          20 (line height)
+          + 2 * 13 (padding)
+          + 2 * 1 (border)
+          */
+          paddingBlock: 13,
+          /*
+          For small size: 13px inline padding
+          12 (padding) 1 extra so that it shows 12px and 16px in browser console.
+          + 1 (border)
+          */
+          paddingInlineSM: 12,
+          /*
+          For default size: 17px inline padding
+          16 (padding) 1 extra so that it shows 12px and 16px in browser console.
+          + 1 (border)
+          */
+          paddingInline: 16,
+          activeBorderColor: _ColorVariablesMap.default['--color-primary'],
+          // border color of active and hover should be same
+          hoverBorderColor: _ColorVariablesMap.default['--color-primary']
+          // // Converting the hex code to rgb values.
+
+          // // Box shadow for active input box.
+          // activeShadow: `0px 0px 4px 0px rgba(${
+          //   hexToRgb(ColorVariablesMap['--color-primary']).join(', ')
+          // }, 0.9)`,
+          // // Box shadow for error active input box.
+          // errorActiveShadow: `0px 0px 4px 0px rgba(${
+          //   hexToRgb(ColorVariablesMap['--color-negative']).join(', ')
+          // }, 0.9)`,
+        }
+      },
+      token: {
+        colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
+        // Color of placeholder text
+
+        lineHeight: "".concat(_TypographiesMap.default['type-b2-400']['line-height'], "px"),
+        fontSize: _TypographiesMap.default['type-b2-400']['font-size'],
+        colorBgContainerDisabled: _ColorVariablesMap.default['--color-divider'],
+        borderRadius: '4px',
+        // For border radius of input text field.
+
+        controlHeight: 48,
+        // Size of default sized input
+        controlHeightSM: 32,
+        // Size of "small" size input
+
+        colorBorder: _ColorVariablesMap.default['--color-placeholder-text'],
+        // border color of input text field
+
+        colorText: _ColorVariablesMap.default['--color-primary-content'],
+        // Text color
+        colorTextDisabled: _ColorVariablesMap.default['--color-secondary-content'],
+        // Text color when disabled
+
+        colorError: _ColorVariablesMap.default['--color-negative'],
+        // Error color
+        colorErrorBorderHover: _ColorVariablesMap.default['--color-negative'] // Hover error color should be same as error color
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.InputNumber, _extends({
+    ref: inputRef,
+    "data-test": dataTest,
+    controls: false
+    // classNames={{
+    // input: 'type-b2-400',
+    // prefix: 'type-b2-400',
+    // suffix: 'type-b2-400',
+    // }}
+  }, props)));
+}
+CustomInputNumber.propTypes = {
+  'data-test': _propTypes.default.string,
+  size: _propTypes.default.oneOf(['small', 'middle']),
+  autoFocus: _propTypes.default.bool // Add autoFocus prop to control automatic focusing
+};
+CustomInputNumber.defaultProps = {
+  'data-test': null,
+  size: 'middle',
+  autoFocus: false // Default to not auto-focusing
+};