oa-componentbook 0.0.0-sit1.1

package/build/components/oa-component-bar-chart/BarChart.js

@@ -0,0 +1,295 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BarChart;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.array.reduce.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var d3 = _interopRequireWildcard(require("d3"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("antd");
+var _colorOptions = require("../../global-css/color-options");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
+var _utils = require("../../utils");
+var _templateObject;
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const FullSizeContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  \n  display: inline-block;\n  position: relative;\n  width: 100%;\n  padding-bottom: ", "%;\n  vertical-align: top;\n  overflow: hidden;\n\n  .bar-chart-svg {\n    display: inline-block;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  .empty-component-container {\n    display: ", ";\n    position: absolute;\n    top: ", ";\n    left: ", ";\n    transform: translate(-50%, -50%) scale(1.2);\n  }\n"])), props => 100 / props.$aspectRatio, props => props !== null && props !== void 0 && props.$showNoData ? 'block' : 'none', props => "calc(50% + (".concat(props.$marginTop, "px - ").concat(props.$marginBottom, "px) / 2)"), props => "calc(50% + (".concat(props.$marginLeft, "px - ").concat(props.$marginRight, "px) / 2)"));
+
+/**
+ * Function to create a curved bar path based on the provided parameters.
+ * @param {number} x - The x-coordinate of the top-left corner of the bar.
+ * @param {number} y - The y-coordinate of the top-left corner of the bar.
+ * @param {number} width - The width of the bar.
+ * @param {number} height - The height of the bar.
+ * @param {number} r - The radius of the curved corners.
+ * @returns {string} The SVG path string for the curved bar.
+ */
+function curvedBar(x, y, width, height, r) {
+  // x coordinates of top of arcs
+  const x0 = x + r;
+  const x1 = x + width - r;
+  // y coordinates of bottom of arcs
+  const y0 = y - height + r;
+
+  // assemble path:
+  const parts = ['M', x, y,
+  // step 1
+  'L', x, y0,
+  // step 2
+  'A', r, r, 0, 0, 1, x0, y - height,
+  // step 3
+  'L', x1, y - height,
+  // step 4
+  'A', r, r, 0, 0, 1, x + width, y0,
+  // step 5
+  'L', x + width, y,
+  // step 6
+  'Z' // step 7
+  ];
+  return parts.join(' ');
+}
+function BarChart(_ref) {
+  var _barsConfig$length, _barsConfig$length2;
+  let {
+    barsConfig,
+    totalValue,
+    showPercentage,
+    yLabel,
+    xLabel
+  } = _ref;
+  const height = 450;
+  const width = 600;
+  const aspectRatio = width / height;
+  const barSpacing = 32;
+  const marginBottom = 32;
+  const marginTop = 32;
+  const marginLeft = 48;
+  const marginRight = 48;
+  const yMin = 0;
+  const yMax = showPercentage ? 100 : Math.max(...barsConfig.map(barConfig => barConfig.value));
+  const xLabelPlural = "".concat(xLabel, "s");
+  const yLabelPlural = "".concat(yLabel, "s");
+  const totalForPercentages = barsConfig === null || barsConfig === void 0 ? void 0 : barsConfig.reduce((accumulator, currentValue) => currentValue.value + accumulator, 0);
+  const showNoData = (() => {
+    if (totalForPercentages <= 0) {
+      return true;
+    }
+    return false;
+  })();
+
+  // This function gets the value for y-axis, based on whether `showPercentage` is true or not.
+  const getValueY = value => showPercentage ? (0, _utils.fixMaxDecimalPlaces)(100 * (value / totalValue), 2) : value;
+
+  /*
+  This function gets the labels placed above the bars,
+  based on whether `showPercentage` is true or not.
+  */
+  const getBarLabel = value => "".concat(getValueY(value)).concat(showPercentage ? '%' : " ".concat(value === 1 ? yLabel : yLabelPlural));
+
+  // n + 1 bar spacing for n bars.
+  const numberOfSpacesPresentInGraph = ((_barsConfig$length = barsConfig === null || barsConfig === void 0 ? void 0 : barsConfig.length) !== null && _barsConfig$length !== void 0 ? _barsConfig$length : 0) + 1;
+  const widthOfEachBar = (width - marginLeft - marginRight // Removed left and right margin.
+  - barSpacing * numberOfSpacesPresentInGraph) / ((_barsConfig$length2 = barsConfig === null || barsConfig === void 0 ? void 0 : barsConfig.length) !== null && _barsConfig$length2 !== void 0 ? _barsConfig$length2 : 1); // Divided by the number of bars.
+
+  // Got the spacing in percentage of the width of the bar.
+  const barSpacingInPercentage = barSpacing / (widthOfEachBar + barSpacing);
+
+  // We will be referring the graph container using a react ref.
+  const barChartRef = (0, _react.useRef)(null);
+  const availableHeight = height - marginTop - marginBottom;
+  const availableWidth = width - marginRight - marginLeft;
+
+  /*
+  Scale for the values on the Y-axis
+   Minimum value of scale is at bottom.
+  The scale goes from 0 to reduced value of height (remove upper and lower margin from height)
+  */
+  const yScale = d3.scaleLinear().domain([yMin, yMax]).range([availableHeight, 0]).nice();
+
+  /*
+  Scale for the bars on the X axis.
+   The scale goes from 0 to reduced value of width (remove left and right margin from height)
+  */
+  const xScale = d3.scaleBand().domain(barsConfig.map(barConfig => barConfig.label)).range([0, availableWidth]).padding(barSpacingInPercentage); // Inner and outer paddings are equal for symmmetry
+
+  const updateChartDimensions = barChartSvg => {
+    // Adding the svg element on first render.
+    barChartSvg.attr('viewBox', "0 0 ".concat(width, " ").concat(height)).attr('preserveAspectRatio', 'xMidYMid meet');
+  };
+  const updateAxesPosition = barChartSvg => {
+    const xAxisRef = barChartSvg.select('#x-axis');
+    const yAxisRef = barChartSvg.select('#y-axis');
+
+    // Setting the position of X-axis
+    const xAxis = xAxisRef.attr('transform', "translate(".concat(marginLeft, ", ").concat(height - marginBottom, ")"));
+    const xAxisLabel = barChartSvg.selectAll('#x-axis-label').data([xLabelPlural]) // Singular data join
+    .join('text').attr('id', 'x-axis-label').classed('type-b3-400', true).style('fill', _ColorVariablesMap.default['--color-primary-content']).style('dominant-baseline', 'middle') // This CSS property aligns the <text> element, with the X-axis.
+    .attr('transform', "translate(".concat(width - marginRight + 12, ", ").concat(height - marginBottom, ")")).text(d => d);
+
+    // Setting the position of Y-axis
+    const yAxis = yAxisRef.attr('transform', "translate(".concat(marginLeft, ", ").concat(marginTop, ")"));
+    const yAxisLabel = barChartSvg.selectAll('#y-axis-label').data([yLabelPlural]) // Singular data join
+    .join('text').attr('id', 'y-axis-label').classed('type-b3-400', true).style('fill', _ColorVariablesMap.default['--color-primary-content']).attr('transform', "translate(".concat(marginLeft, ", ").concat(marginTop - _TypographiesMap.default['type-b2-400']['line-height'], ")")).attr('text-anchor', 'middle').text(d => d);
+  };
+  const updateBars = barChartSvg => {
+    if (showNoData) {
+      barChartSvg.selectAll('#bar').remove();
+
+      // barChartSvg
+      //   .select('.bar-chart-svg')
+      //   .select('#no-data-image')
+      //   .join([true])
+      //   .
+    } else {
+      barChartSvg.selectAll('#bar') // We select the id which we add just below, so that the existing bars are updated.
+      .data(barsConfig) // Performing a data join for an array of objects.
+      .join('path').filter(d => d.value !== 0).attr('d', (d, i) => curvedBar(marginRight + xScale(d.label), height - marginBottom, widthOfEachBar, availableHeight - yScale(getValueY(d.value)), 4)).attr('id', 'bar').style('fill', d => {
+        var _d$color;
+        return _ColorVariablesMap.default["--color-".concat((_d$color = d === null || d === void 0 ? void 0 : d.color) !== null && _d$color !== void 0 ? _d$color : 'warning')];
+      });
+      barChartSvg.selectAll('#bar-label') // We select the id which we add just below, so that the existing bars are updated.
+      .data(barsConfig).join('text').text('') // Resetting the text before filtering
+      .filter(d => d.value !== 0).attr('id', 'bar-label').style('width', widthOfEachBar).attr('text-anchor', 'middle').text((d, i) => getBarLabel(d.value)).attr('x', (d, i) => marginRight + widthOfEachBar / 2 + xScale(d.label)) // Center position
+      .attr('y', (d, i) => marginTop + yScale(getValueY(d.value)) - 12).classed('type-b3-400', true);
+    }
+  };
+  const updateAxesConfiguration = () => {
+    const xAxisRef = d3.select('#x-axis');
+    const yAxisRef = d3.select('#y-axis');
+
+    /*
+    tickSizeOuter is used to control the sizes of the ticks on the outer ends of the axes.
+    tickSizeInnr is for controlling the size of the remaining ticks.
+    tickSize sets both at once
+    */
+
+    const yAxisConfiguration = d3.axisLeft(yScale).ticks(5) // Controls the approximate number of ticks to be shown on Y-axis.
+    .tickSizeInner(-availableWidth) // This draws the grid lines out of the Y-axis.
+    .tickSizeOuter(0).tickPadding(16).tickFormat(showPercentage ? d => "".concat(d, "%") : _utils.rupeeShorthandFormatter);
+
+    // TODO: Add smooth transition
+    const yAxis = yAxisRef.transition().call(yAxisConfiguration);
+
+    // After calling the function for the drawing the Y-axis, we remove the tick with value 0.
+    yAxisRef.selectAll('.tick').filter(d => d === 0).remove();
+    const xAxisConfiguration = d3.axisBottom(xScale).tickSize(0).tickPadding(12);
+
+    // TODO: Add smooth transition
+    const xAxis = xAxisRef.transition().call(xAxisConfiguration);
+
+    // Adding typography class to text of all ticks
+    d3.selectAll('.tick text').classed('type-b2-400', true);
+
+    // Setting the color of Y-axis
+    yAxisRef.select('path').attr('stroke', _ColorVariablesMap.default['--color-placeholder-text']).attr('marker-end', 'url(#arrowhead-up)');
+
+    // Setting the color of the ticks (dashed grid of Y-axis)
+    yAxisRef.selectAll('.tick line').attr('stroke', _ColorVariablesMap.default['--color-placeholder-text']).style('stroke-dasharray', '3,6');
+
+    // Setting the color of X-axis
+
+    xAxisRef.select('path').attr('stroke', _ColorVariablesMap.default['--color-placeholder-text']).attr('marker-end', 'url(#arrowhead-right)');
+  };
+  (0, _react.useEffect)(() => {
+    // Selecting this bar chart svg, only after mount, so that it is present in the DOM.
+    const barChartSvgReference = d3.select(barChartRef.current).select('svg.bar-chart-svg');
+    updateChartDimensions(barChartSvgReference);
+    updateAxesPosition(barChartSvgReference);
+    updateAxesConfiguration();
+    updateBars(barChartSvgReference);
+  });
+  return /*#__PURE__*/_react.default.createElement(FullSizeContainer, {
+    $aspectRatio: aspectRatio,
+    $marginTop: marginTop,
+    $marginRight: marginRight,
+    $marginBottom: marginBottom,
+    $marginLeft: marginLeft,
+    $showNoData: showNoData,
+    ref: barChartRef
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    className: "bar-chart-svg"
+  }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("svg", {
+    id: "no-data-svg-ref",
+    width: "64",
+    height: "41",
+    viewBox: "0 0 64 41",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    transform: "translate(0 1)",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("ellipse", {
+    fill: "#f5f5f5",
+    cx: "32",
+    cy: "33",
+    rx: "32",
+    ry: "7"
+  }), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "nonzero",
+    stroke: "#d9d9d9"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z",
+    fill: "#fafafa"
+  })))), /*#__PURE__*/_react.default.createElement("marker", {
+    id: "arrowhead-right",
+    refX: "1" // X-coordinate of the marker svg which has to matched with end of X-axis
+    ,
+    refY: "5" // Y-coordinate of the marker svg which has to matched with end of X-axis
+    ,
+    markerWidth: "16",
+    markerHeight: "13"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M 1 0 L 6 5 L 1 10",
+    stroke: _ColorVariablesMap.default['--color-placeholder-text'],
+    strokeWidth: "1",
+    fill: "none"
+  })), /*#__PURE__*/_react.default.createElement("marker", {
+    id: "arrowhead-up",
+    refX: "5" // X-coordinate of the marker svg which has to matched with end of X-axis
+    ,
+    refY: "14" // Y-coordinate of the marker svg which has to matched with end of X-axis
+    ,
+    markerWidth: "11",
+    markerHeight: "14"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M 0 5 L 5 0 L 10 5 M 5 6 L 5 14",
+    stroke: _ColorVariablesMap.default['--color-placeholder-text'],
+    strokeWidth: "1",
+    fill: "none"
+  }))), /*#__PURE__*/_react.default.createElement("g", {
+    id: "x-axis"
+  }), /*#__PURE__*/_react.default.createElement("g", {
+    id: "y-axis"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "empty-component-container"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Empty, {
+    image: _antd.Empty.PRESENTED_IMAGE_SIMPLE
+  })));
+}
+BarChart.propTypes = {
+  barsConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
+    value: _propTypes.default.number,
+    color: _propTypes.default.oneOf(_colorOptions.colorOptions)
+  })),
+  showPercentage: _propTypes.default.bool,
+  yLabel: _propTypes.default.string,
+  xLabel: _propTypes.default.string,
+  totalValue: _propTypes.default.number
+};
+BarChart.defaultProps = {
+  totalValue: 1,
+  barsConfig: [],
+  showPercentage: false,
+  yLabel: 'Y',
+  xLabel: 'X'
+};

package/build/components/oa-component-bread-crumb/CustomBreadCrumb.js

@@ -0,0 +1,47 @@
+"use strict";
+
+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"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * A custom implementation of antd's Breadcrumb component.
+ * This component provides a styled breadcrumb in accordance with the OneAssist design language.
+ * The colors used are as follows:
+ * - The color of other items in breadcrumb: --color-secondary-content
+ * - The color of last item in breadcrumb: --color-primary
+ * - The color of items that are links: --color-secondary-content
+ * - The color of items that are links, during hover: --color-primary-hover
+ * - The color of separator: --color-secondary-content
+ * - The margin of separator: 4px
+ * The background color of text on hover is set to --color-primary-background.
+ */
+function CustomBreadCrumb(props) {
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Breadcrumb: {
+          itemColor: _ColorVariablesMap.default['--color-secondary-content'],
+          // Color of other items in breadcrumb
+          lastItemColor: _ColorVariablesMap.default['--color-primary'],
+          // Color of last item in breadcrumb.
+          linkColor: _ColorVariablesMap.default['--color-secondary-content'],
+          // Color of items that are links.
+          linkHoverColor: _ColorVariablesMap.default['--color-primary-hover'],
+          // Color of items that are links, during hover.
+          separatorColor: _ColorVariablesMap.default['--color-secondary-content'],
+          separatorMargin: 4 // Separator margin
+        }
+      },
+      theme: {
+        colorBgTextHover: _ColorVariablesMap.default['--color-primary-background']
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Breadcrumb, props));
+}
+var _default = exports.default = CustomBreadCrumb;

package/build/components/oa-component-button/CustomButton.js

@@ -0,0 +1,108 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _styles = require("./styles");
+const _excluded = ["className", "disabled", "onClick", "htmlType", "iconConfig", "label", "showEllipsis", "size", "type", "data-test"];
+/* 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; }
+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; }
+/**
+ * CustomButton component renders a styled button with various configurations.
+ *
+ * @param {string} className - Additional class names for the button.
+ * @param {boolean} disabled - Disables the button if set to true.
+ * @param {function} onClick - Callback function to handle button click events.
+ * @param {string} htmlType - Specifies the HTML type of the button (e.g., 'button', 'submit').
+ * @param {object} iconConfig - Configuration for the button's icon, containing:
+ *   - `icon`: React node for the icon.
+ *   - `position`: Position of the icon, either 'left' or 'right'.
+ * @param {ReactNode} label - The text or content displayed on the button.
+ * @param {boolean} showEllipsis - Shows ellipsis if the label is too long.
+ * @param {string} size - Size of the button, can be 'small', 'medium', or 'large'.
+ * @param {string} type - Type of button, defining its style (e.g., 'primary', 'danger-primary').
+ * @param {string} dataTest - Data attribute for testing purposes.
+ * @param {object} domProps - Additional props to be spread onto the button element.
+ *
+ * @returns {ReactElement} A styled button component.
+ */
+function CustomButton(_ref) {
+  let {
+      className,
+      disabled,
+      onClick,
+      htmlType,
+      iconConfig,
+      label,
+      showEllipsis,
+      size,
+      type,
+      "data-test": dataTest
+    } = _ref,
+    domProps = _objectWithoutProperties(_ref, _excluded);
+  const buttonTypography = (0, _styles.getButtonTypography)(size);
+  const iconSize = (0, _styles.getIconSize)(size);
+  return /*#__PURE__*/_react.default.createElement(_styles.ColoredStyledButton, _extends({
+    className: "".concat(disabled ? "".concat(type.replace("danger-", ""), "-disabled") : type, " ").concat(type.replace("danger-", "") === "text-only" ? "".concat(size, "-text-only") : size, " ").concat(className),
+    disabled: disabled,
+    onClick: disabled ? null : onClick,
+    type: htmlType,
+    size: size,
+    "data-test": dataTest
+  }, domProps), /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-container"
+  }, iconConfig.position === "left" && /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
+    size: (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.size) || iconSize,
+    color: (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.color) || undefined
+  }), label && (showEllipsis ? /*#__PURE__*/_react.default.createElement(_styles.EllipsisTypography, {
+    title: label,
+    typography: buttonTypography
+  }, label) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: buttonTypography
+  }, label)), iconConfig.position === "right" && /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
+    size: (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.size) || iconSize,
+    color: (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.color) || undefined
+  })));
+}
+CustomButton.propTypes = {
+  className: _propTypes.default.string,
+  "data-test": _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  onClick: _propTypes.default.func.isRequired,
+  htmlType: _propTypes.default.oneOf(["button", "submit", "reset"]),
+  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])),
+    size: _propTypes.default.number
+  }),
+  label: _propTypes.default.node,
+  showEllipsis: _propTypes.default.bool,
+  size: _propTypes.default.oneOf(["small", "medium", "large"]),
+  type: _propTypes.default.oneOf(["primary", "secondary", "text-only", "danger-primary", "danger-secondary", "danger-text-only"])
+};
+CustomButton.defaultProps = {
+  className: "",
+  "data-test": null,
+  disabled: false,
+  htmlType: "button",
+  iconConfig: {
+    position: "left",
+    size: 20
+  },
+  label: "",
+  showEllipsis: false,
+  size: "medium",
+  type: "primary"
+};
+var _default = exports.default = CustomButton;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EllipsisTypography = exports.ColoredStyledButton = void 0;
+exports.getButtonTypography = getButtonTypography;
+exports.getIconSize = getIconSize;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+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) } })); }
+var _default = exports.default = {};
+const StyledButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  .text-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px; \n    text-align: left;\n  }\n"])));
+const EllipsisTypography = exports.EllipsisTypography = (0, _styledComponents.default)(_Typography.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;  \n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 84px;\n"])));
+const ColoredStyledButton = exports.ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 2.25rem;\n  min-width: 100px;\n  padding: 0.625rem 1rem;\n\n  &.small {\n    height: 30px;\n    min-width: 80px;\n    padding: 10px 16px;\n  }\n\n  &.medium {\n    height: 36px;\n    min-width: 100px;\n    padding: 10px 16px;\n  }\n\n  &.large {\n    height: 48px;\n    min-width: 136px;\n    padding: 10px 24px;\n  }\n\n  &.medium-text-only,\n  &.small-text-only {\n    min-width: auto;\n    height: auto;\n    padding: 4px 0;\n  }\n\n  &.large-text-only {\n    min-width: auto;\n    height: auto;\n    padding: 8px 0;\n  }\n\n  &.primary {\n    background: var(--color-primary);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary-background);\n  }\n  &.primary:hover {\n    background: var(--color-primary-hover);\n    border: 1px solid var(--color-primary-hover);\n  }\n\n  &.primary-disabled {\n    background: var(--color-disabled-button);\n    cursor: not-allowed;\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-disabled-button);\n  }\n\n  &.secondary {\n    background: transparent;\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n  }\n  &.secondary:hover {\n    background: transparent;\n    border: 1px solid var(--color-primary-hover);\n    color: var(--color-primary-hover);\n  }\n\n  &.secondary-disabled {\n    background: transparent;\n    border: 1px solid var(--color-disabled-button);\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.text-only {\n    border: none;\n    background: transparent;\n    color: var(--color-primary);\n  }\n  &.text-only:hover {\n    color: var(--color-primary-hover);\n  }\n\n  &.text-only-disabled {\n    border: none;\n    background: transparent;\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.danger-primary {\n    background: var(--color-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-negative);\n  }\n  &.danger-primary:hover {\n    background: var(--color-hover-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-hover-negative);\n  }\n\n  &.danger-secondary {\n    background: transparent;\n    border: 1px solid var(--color-negative);\n    color: var(--color-negative);\n  }\n  &.danger-secondary:hover {\n    background: transparent;\n    border: 1px solid var(--color-hover-negative);\n    color: var(--color-hover-negative);\n  }\n\n  &.danger-text-only {\n    border: none;\n    color: var(--color-negative);\n    background: transparent;\n  }\n  &.danger-text-only:hover {\n    border: none;\n    color: var(--color-hover-negative);\n    background: transparent;\n  }\n  @media only screen and (max-width: 600px) {\n    &.text-only:hover {\n      color: var(--color-primary);\n    }\n  }\n"])));
+function getButtonTypography(size) {
+  switch (size) {
+    case 'large':
+      return 'type-t2-700';
+    case 'small':
+      return 'type-b3-400';
+    case 'medium':
+      return 'type-button-500';
+    default:
+      return 'type-button-500';
+  }
+}
+function getIconSize(size) {
+  switch (size) {
+    case 'large':
+      return 24;
+    case 'small':
+      return 16;
+    case 'medium':
+      return 20;
+    default:
+      return 20;
+  }
+}

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

@@ -0,0 +1,115 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCheckboxTheme = 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 _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _styles = require("./styles");
+var _utils = require("../../utils");
+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; }
+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; }
+/**
+ * Returns the theme configuration for a custom checkbox component.
+ *
+ * The theme includes the following properties:
+ * - colorTextDisabled: The color of the text when the checkbox is disabled.
+ * - colorPrimaryHover: The color of the checkbox when hovered.
+ * - colorPrimary: The primary color of the checkbox.
+ * - colorBgContainerDisabled: The background color of the checkbox when disabled.
+ * - colorBorder: The color of the checkbox border.
+ * - colorText: The color of the text associated with the checkbox.
+ * - borderRadiusSM: The small border radius applied to the checkbox.
+ * - paddingXS: The extra small padding applied to the checkbox.
+ */
+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"
+  }
+});
+
+/**
+ * A custom checkbox component with an accompanying label.
+ *
+ * This component wraps around the `antd` `Checkbox` component.
+ * It provides the following features:
+ * - A themed checkbox.
+ * - A label that can be a string, number, or a node.
+ * - A `data-test` attribute to aid with testing.
+ * - A `size` prop to control the size of the label accompanying the checkbox.
+ * - All props of the `antd` `Checkbox` component are applicable here as well.
+ *
+ * @param {Object} props Component props.
+ * @param {string} [props.data-test] A unique identifier for the component for testing purposes.
+ * @param {string|number|node} [props.label] The label to be displayed next to the checkbox.
+ * @param {function} [props.onChange] The callback function to be called when the checkbox state changes.
+ * @param {string} [props.size] The size of the label accompanying the checkbox. It can be either 'large' or 'small'.
+ * @param {Object} [props.antDesignProps] The extra props to be passed to the `antd` `Checkbox` component.
+ */
+exports.getCheckboxTheme = getCheckboxTheme;
+function CustomCheckBox(_ref) {
+  let {
+      "data-test": dataTest,
+      label,
+      onChange,
+      size,
+      className
+      /*
+      Instead of keeping a `checked` prop explicitly,
+      we keep it optional by directly passing extra props to the antd component.
+       So, if required, the `checked` prop can be supplied to the component.
+      */
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  const handleChange = event => {
+    // Call to `onChange` callback received from props.
+    onChange(event);
+  };
+  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"
+  }, label) ||
+  // The label is a node
+  /*#__PURE__*/_react.default.isValidElement(label) && label || undefined)));
+}
+
+// This allows us referencing the Group container in our Checkbox component
+CustomCheckBox.Group = _antd.Checkbox.Group;
+CustomCheckBox.propTypes = {
+  "data-test": _propTypes.default.string,
+  label: _propTypes.default.node,
+  onChange: _propTypes.default.func,
+  size: _propTypes.default.oneOf(["large", "small"]),
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool])
+};
+CustomCheckBox.defaultProps = {
+  "data-test": null,
+  label: null,
+  onChange: value => {},
+  size: "small",
+  value: ""
+};
+var _default = exports.default = CustomCheckBox;

package/build/components/oa-component-checkbox/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.ant-checkbox-wrapper .ant-checkbox {\n    align-self: start;\n    margin: 2px 0 0 0; \n}\n"])));