oa-componentbook 0.18.2 → 0.18.3

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

@@ -1,51 +1,87 @@
 "use strict";
 
 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 = BarChart;
+require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/es.array.reduce.js");
 var _react = _interopRequireWildcard(require("react"));
-var ReactDOMServer = _interopRequireWildcard(require("react-dom/server"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var d3 = _interopRequireWildcard(require("d3"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _ExpandLess = _interopRequireDefault(require("@material-ui/icons/ExpandLess"));
+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 _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
 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 iconHtml = ReactDOMServer.renderToString( /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-  icon: _ExpandLess.default,
-  size: 20
-}));
-const FullSizeContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  .black {\n    color: var(--color-primary-content);\n  }\n"])));
+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 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,
     showPercentage,
-    yStart,
-    yEnd,
     yLabel,
     xLabel
   } = _ref;
-  const height = 420;
+  const height = 450;
   const width = 600;
+  const aspectRatio = width / height;
   const barSpacing = 32;
   const marginBottom = 32;
   const marginTop = 32;
-  const marginLeft = 44;
-  const marginRight = 44;
+  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 / totalForPercentages), 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;
@@ -65,7 +101,7 @@ function BarChart(_ref) {
    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([yStart, yEnd]).range([availableHeight, 0]);
+  const yScale = d3.scaleLinear().domain([yMin, yMax]).range([availableHeight, 0]).nice();
 
   /*
   Scale for the bars on the X axis.
@@ -73,29 +109,48 @@ function BarChart(_ref) {
   */
   const xScale = d3.scaleBand().domain(barsConfig.map(barConfig => barConfig.label)).range([0, availableWidth]).padding(barSpacingInPercentage); // Inner and outer paddings are equal for symmmetry
 
-  (0, _react.useEffect)(() => {
+  const updateChartDimensions = barChartSvg => {
     // Adding the svg element on first render.
-    const barChartSvg = d3.select(barChartRef.current).append('svg') // If we chain methods after this one, we will be executing commands on the 'svg' element.
-    .attr('width', width) // Make these dimensions responsive
-    .attr('height', height);
-
-    // Adding the X axis.
-    const xAxis = barChartSvg.append('g').attr('id', 'x-axis').attr('transform', "translate(".concat(marginLeft, ", ").concat(height - marginBottom, ")"));
-    const yAxis = barChartSvg.append('g').attr('id', 'y-axis').attr('transform', "translate(".concat(marginLeft, ", ").concat(marginTop, ")"));
-    const yAxisLabel = barChartSvg.append('text').classed('type-b2-400', true).style('fill', _ColorVariablesMap.default['--color-primary-content']).attr('transform', "translate(".concat(marginLeft, ", ").concat(marginTop - _TypographiesMap.default['type-b2-400']['line-height'], ")")).text(yLabel);
-    // Removing the svg element, as a cleanup operation, before dismount.
-    return () => {
-      barChartSvg.remove();
-    };
-  });
+    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 => {
-    barChartSvg.selectAll('rect').data(barsConfig) // Performing a data join for an array of objects.
-    .join('rect').attr('x', (d, i) => marginRight + xScale(d.label)).attr('y', (d, i) => marginBottom + yScale(d.value)).attr('height', d => availableHeight - yScale(d.value)).attr('width', widthOfEachBar).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')];
-    });
+    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 updateAxes = () => {
+  const updateAxesConfiguration = () => {
     const xAxisRef = d3.select('#x-axis');
     const yAxisRef = d3.select('#y-axis');
 
@@ -105,28 +160,110 @@ function BarChart(_ref) {
     tickSize sets both at once
     */
 
-    const yAxisConfiguration = d3.axisLeft(yScale).tickSize(0).tickPadding(16).tickFormat(_utils.rupeeShorthandFormatter);
-    const yAxis = yAxisRef.call(yAxisConfiguration);
-    const yAxisSymbol = yAxisRef.append('g').html(iconHtml);
-    // .attr("y", 0 – margin.left)
-    // .attr("x",0 - (height / 2))
-    // .attr("dy", "1em")
-    // .style("text-anchor", "middle")
-    // .text("Value");
+    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);
-    const xAxis = xAxisRef.call(xAxisConfiguration);
+
+    // 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)(() => {
-    // D3 code to create the graph
-    const barChartSvg = d3.select(barChartRef.current).select('svg');
-    updateBars(barChartSvg);
-    updateAxes();
-  }, [barsConfig]); // Empty dependency array so that this code is called on every re-render
-
+    // 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({
@@ -134,16 +271,12 @@ BarChart.propTypes = {
     color: _propTypes.default.oneOf(_colorOptions.colorOptions)
   })),
   showPercentage: _propTypes.default.bool,
-  yStart: _propTypes.default.number,
-  yEnd: _propTypes.default.number,
   yLabel: _propTypes.default.string,
   xLabel: _propTypes.default.string
 };
 BarChart.defaultProps = {
   barsConfig: [],
   showPercentage: false,
-  yStart: 0,
-  yEnd: 100,
   yLabel: 'Y',
   xLabel: 'X'
 };

package/build/components/oa-component-form-item/CustomFormItem.js

@@ -1,5 +1,6 @@
 "use strict";
 
+require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -7,27 +8,54 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = CustomFormItem;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _antd = require("antd");
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
-const _excluded = ["label"];
+const _excluded = ["label", "labelPosition", "name", "children"];
+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 StyledFormItem = (0, _styledComponents.default)(_antd.Form.Item)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n   label{\n      height: auto !important;\n      color: var(--color-primary-content) !important;\n      margin: 0 0 4px !important;\n    }\n    .ant-col-24.ant-form-item-label{\n      padding: 0;\n    }\n"])));
 function CustomFormItem(_ref) {
   let {
-      label
+      label,
+      labelPosition = 'left',
+      name,
+      children
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, _extends({
+  const labelCol = labelPosition === 'top' ? _objectSpread({
+    span: 24
+  }, props.labelCol) : props.labelCol;
+  return /*#__PURE__*/_react.default.createElement(StyledFormItem, _extends({
+    name: name,
     label: label ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
       typography: "type-b2-400"
-    }, label) : undefined
-  }, props));
+    }, label) : undefined,
+    labelCol: _objectSpread({}, labelCol)
+  }, props), children);
 }
 CustomFormItem.propTypes = {
-  label: _propTypes.default.string
+  label: _propTypes.default.string,
+  name: _propTypes.default.string,
+  children: _propTypes.default.element,
+  labelPosition: _propTypes.default.oneOf(['left', 'top']),
+  initialValue: _propTypes.default.any,
+  labelCol: _propTypes.default.object
 };
 CustomFormItem.defaultProps = {
-  label: null
+  label: null,
+  name: '',
+  children: /*#__PURE__*/_react.default.createElement("input", null),
+  labelPosition: 'left',
+  initialValue: null,
+  labelCol: null
 };

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

@@ -7,6 +7,7 @@ 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"));
@@ -18,24 +19,32 @@ function CustomInfo(_ref) {
     buttonConfig,
     color,
     description,
+    fontColor,
     iconConfig,
     title
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_styles.InfoContainer, {
-    $color: color
-  }, /*#__PURE__*/_react.default.createElement(_styles.RowFlex, null, iconConfig.position === 'left' && (!title ? /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
+  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
-  })), /*#__PURE__*/_react.default.createElement(_styles.ColFlex, null, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  });
+  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
+  }, /*#__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"
-  }, description)), iconConfig.position === 'right' && (!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
-  }))), (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.label) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, buttonConfig));
+    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({
@@ -51,9 +60,11 @@ CustomInfo.propTypes = {
   }),
   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'])
+    position: _propTypes.default.oneOf(['left', 'right']),
+    tooltipText: _propTypes.default.string
   }),
   title: _propTypes.default.string
 };
@@ -67,6 +78,7 @@ CustomInfo.defaultProps = {
   iconConfig: {
     position: 'left'
   },
+  fontColor: 'primary-content',
   title: null,
   description: null
 };

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

@@ -1,10 +1,10 @@
 "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.object.assign.js");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
@@ -13,21 +13,25 @@ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typ
 var _typographyOptions = require("../../global-css/typography-options");
 var _utils = require("../../utils");
 var _styles = require("./styles");
+const _excluded = ["buttonConfig", "children", "data-test", "imgSrc", "onCancel", "open", "title", "typographies", "width"];
 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; }
 function CustomModal(_ref) {
   let {
-    buttonConfig,
-    children,
-    'data-test': dataTest,
-    imgSrc,
-    // This callback function provided by parent is called upon clicking on the cancel button
-    onCancel,
-    open,
-    title,
-    typographies,
-    width
-  } = _ref;
+      buttonConfig,
+      children,
+      'data-test': dataTest,
+      imgSrc,
+      // This callback function provided by parent is called upon clicking on the cancel button
+      onCancel,
+      open,
+      title,
+      typographies,
+      width
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   /*
   We make our own callback function, which makes a call to the `onCancel`
   function given to use by the parent.
@@ -38,7 +42,7 @@ function CustomModal(_ref) {
     onCancel();
     // console.log('`handleCancel` callback of CustomModal component called.');
   };
-  return /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+  return /*#__PURE__*/_react.default.createElement(_antd.Modal, _extends({
     centered: true,
     "data-test": dataTest,
     footer: (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.ButtonContainer, null, buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({
@@ -60,7 +64,7 @@ function CustomModal(_ref) {
       typography: typographies.title
     }, title)),
     width: width
-  }, children && /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null,
+  }, props), children && /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null,
   // The label is a string or a number
   ((0, _utils.isString)(children) || (0, _utils.isNumber)(children)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "secondary-content",

package/build/components/oa-component-notification/CustomNotification.js

@@ -23,7 +23,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const notificationOptions = exports.notificationOptions = ['positive', 'negative'];
 const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
-    duration,
     storyConfig,
     // Useful only for the purpose of displaying in storybook
     onClick,
@@ -32,7 +31,6 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     typographies
   } = _ref;
   const [api, contextHolder] = _antd.notification.useNotification({
-    duration,
     placement
   });
   const handleClick = (0, _react.useCallback)(() => {
@@ -51,7 +49,8 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     let {
       description,
       title,
-      type
+      type,
+      duration
     } = _ref2;
     // type can be success or failure
     const titleColor = type === 'success' ? 'positive' : 'negative';
@@ -82,7 +81,8 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         size: 20
       }),
       onClick: handleClick,
-      onClose: handleClose
+      onClose: handleClose,
+      duration: duration !== null && duration !== void 0 ? duration : 4.5
     });
   }, [api, handleClick, handleClose, typographies]);
   (0, _react.useImperativeHandle)(ref, () => ({
@@ -98,7 +98,6 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   return contextHolder;
 });
 Notification.propTypes = {
-  duration: _propTypes.default.number,
   onClick: _propTypes.default.func,
   onClose: _propTypes.default.func,
   placement: _propTypes.default.oneOf(['topLeft', 'topRight', 'bottomLeft', 'bottomRight']),
@@ -114,7 +113,6 @@ Notification.propTypes = {
   })
 };
 Notification.defaultProps = {
-  duration: null,
   onClick: () => {},
   onClose: () => {},
   placement: 'topRight',

package/build/components/oa-component-table/CustomTable.js

@@ -88,8 +88,12 @@ function CustomTable(_ref) {
           cellFontSizeMD: "".concat(_TypographiesMap.default['type-b2-400']['font-size'], "px"),
           cellFontSizeSM: "".concat(_TypographiesMap.default['type-b2-400']['font-size'], "px"),
           selectionColumnWidth: '54px',
-          colorText: _ColorVariablesMap.default['--color-primary-content']
+          colorText: _ColorVariablesMap.default['--color-primary-content'],
+          rowSelectedHoverBg: _ColorVariablesMap.default['--color-secondary-background']
         }
+      },
+      token: {
+        controlItemBgActive: _ColorVariablesMap.default['--color-secondary-background']
       }
     }
   }, /*#__PURE__*/_react.default.createElement(StyledTable, _extends({

package/build/utils/fix-decimal-places.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = fixMaxDecimalPlaces;
+require("core-js/modules/es.parse-float.js");
+require("core-js/modules/es.number.to-fixed.js");
+function fixMaxDecimalPlaces(number, decimalPlaces) {
+  // Check if the input is a valid number
+  if (typeof number !== 'number' || Number.isNaN(number)) {
+    return number; // If not a number, return the same value
+  }
+
+  // Fix to two decimal places
+  return parseFloat(number.toFixed(decimalPlaces));
+}

package/build/utils/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "fixMaxDecimalPlaces", {
+  enumerable: true,
+  get: function get() {
+    return _fixDecimalPlaces.default;
+  }
+});
 Object.defineProperty(exports, "getUUID", {
   enumerable: true,
   get: function get() {
@@ -60,5 +66,6 @@ Object.defineProperty(exports, "rupeeShorthandFormatter", {
 var _getUuid = _interopRequireDefault(require("./get-uuid"));
 var _hexToRgb = _interopRequireDefault(require("./hex-to-rgb"));
 var _rupeeFormatters = require("./rupee-formatters");
+var _fixDecimalPlaces = _interopRequireDefault(require("./fix-decimal-places"));
 var _typeCheckers = require("./type-checkers");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/build/utils/rupee-formatters.js

@@ -4,18 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.rupeeShorthandFormatter = exports.rupeeCommaFormatter = void 0;
+var _fixDecimalPlaces = _interopRequireDefault(require("./fix-decimal-places"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const thousand = 1000;
 const lakh = 100 * thousand;
 const crore = 100 * lakh;
 const rupeeShorthandFormatter = value => {
+  /*
+  We multiply and divide by 10, so that decimal values are also visible.
+   1100 will be displayed as 1.1K
+  */
   if (value >= crore) {
-    return "".concat(Math.floor(value / crore), "C");
+    return "".concat((0, _fixDecimalPlaces.default)(value / crore, 1), "C");
   }
   if (value >= lakh) {
-    return "".concat(Math.floor(value / lakh), "L");
+    return "".concat((0, _fixDecimalPlaces.default)(value / lakh, 1), "L");
   }
   if (value >= thousand) {
-    return "".concat(Math.floor(value / thousand), "K");
+    return "".concat((0, _fixDecimalPlaces.default)(value / thousand, 1), "K");
   }
   return value;
 };

package/build/widgets/oa-widget-add-spare-part/AddSparePartWidget.js

@@ -129,7 +129,7 @@ function AddSparePartWidget(_ref) {
         rules: [{
           // This field is required only if the corresponding part is selected
           required: selectedParts.includes(spare.scopeId),
-          message: ''
+          message: 'Required field'
           // message: 'Enter the discount value.',
         }],
         initialValue: ""
@@ -145,7 +145,7 @@ function AddSparePartWidget(_ref) {
         rules: [{
           // This field is required only if the corresponding part is selected
           required: selectedParts.includes(spare.scopeId),
-          message: ''
+          message: 'Required field'
           // message: 'Enter the discount value.',
         }],
         initialValue: ""
@@ -161,7 +161,7 @@ function AddSparePartWidget(_ref) {
         rules: [{
           // This field is required only if the corresponding part is selected
           required: selectedParts.includes(spare.scopeId),
-          message: ''
+          message: 'Required field'
           // message: 'Enter the discount value.',
         }],
         initialValue: ""

package/build/widgets/oa-widget-spare-part/SparePartsWidget.js

@@ -76,16 +76,11 @@ function SparePartsWidget(_ref) {
     showCostBreakdown,
     coverageShow
   } = _ref;
-  const [sparePartList, setSparePartList] = (0, _react.useState)([]);
-  const [actionList, setActionList] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    const tempSparePartsList = [...scopeDetails.unCoveredScope, ...scopeDetails.coveredScope];
-    setActionList(tempSparePartsList.some(sparePart => {
-      var _sparePart$action;
-      return (sparePart === null || sparePart === void 0 || (_sparePart$action = sparePart.action) === null || _sparePart$action === void 0 ? void 0 : _sparePart$action.length) > 0;
-    }));
-    setSparePartList(tempSparePartsList);
-  }, [scopeDetails]);
+  const sparePartList = [...scopeDetails.unCoveredScope, ...scopeDetails.coveredScope];
+  const showActionList = sparePartList.some(sparePart => {
+    var _sparePart$action;
+    return (sparePart === null || sparePart === void 0 || (_sparePart$action = sparePart.action) === null || _sparePart$action === void 0 ? void 0 : _sparePart$action.length) > 0;
+  });
   const columns = [{
     title: 'Spare Part',
     dataIndex: 'scopeName',
@@ -113,7 +108,7 @@ function SparePartsWidget(_ref) {
     });
   }
   // check if there are any actions then create action column
-  if (actionList) {
+  if (showActionList) {
     columns.push({
       title: 'Action',
       width: '20%',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.18.2",
+  "version": "0.18.3",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",
@@ -56,15 +56,11 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "rm -rf build && NODE_ENV=production babel src/lib --out-dir build --copy-files",
-    "build-tracked": "git stash -u && npm run build && git stash pop",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "lint": "eslint src/** --ext .js,.jsx",
-    "lint-commit": "git add -u && git commit -m \"fix: Rectified auto-fixable lint errors for v$(npm show oa-componentbook version)\"",
     "lint-fix": "npm run lint -- --fix",
-    "lint-fix-quiet": "npm run lint-fix -- --quiet",
-    "lint-fix-tracked": "git stash -u && npm run lint-fix-quiet && git stash pop",
-    "lint-fix-commit": "npm run lint-fix-tracked && npm run lint-commit"
+    "lint-fix-quiet": "npm run lint-fix -- --quiet"
   },
   "eslintConfig": {
     "extends": [