feat(Money): add roundingMode prop (#215)

New feature:
- Added support for the roundingMode string parameter ("ROUND_DOWN", "ROUND_UP", etc.)
- Implemented the internal ROUNDING_MAP mapping, which maps string values ​​to the BigNumber rounding enum.
- Set the default value to ROUND_DOWN.
- The Money and Number components no longer require the use of bignumber.js on the consumer side.

Author: elenik72

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cadolabs/sphere-ui",
-  "version": "6.8.1",
+  "version": "6.9.0",
   "main": "dist/index.js",
   "exports": {
     ".": "./dist/index.js",

src/components/Number/index.js

@@ -1,20 +1,37 @@
 import BigNumber from "bignumber.js"
 
+import { ROUNDING_MAP } from "./rounding"
+
 const DEFAULT_PRECISION = 2
 const DEFAULT_DELIMITER = ","
 const DEFAULT_SEPARATOR = "\xA0"
+const DEFAULT_ROUNDING = "ROUND_DOWN"
+
+export const Number = ({
+  value,
+  enforcePrecision = true,
+  precision = DEFAULT_PRECISION,
+  roundingMode = DEFAULT_ROUNDING,
+  delimiter = DEFAULT_DELIMITER,
+  separator = DEFAULT_SEPARATOR,
+}) => {
+  const bnRounding =
+    ROUNDING_MAP[roundingMode] ?? ROUNDING_MAP[DEFAULT_ROUNDING]
 
-export const Number = ({ value, enforcePrecision = true, ...options }) => {
-  const instance = new BigNumber(value)
-  const format = { groupSize: 3 }
+  const instance = new BigNumber(value).decimalPlaces(
+    precision,
+    bnRounding,
+  )
 
-  const precision = options.precision == null ? DEFAULT_PRECISION : options.precision
-  format.decimalSeparator = options.delimiter == null ? DEFAULT_DELIMITER : options.delimiter
-  format.groupSeparator = options.separator == null ? DEFAULT_SEPARATOR : options.separator
+  const format = {
+    groupSize: 3,
+    decimalSeparator: delimiter,
+    groupSeparator: separator,
+  }
 
   const string = instance.toFormat(precision, undefined, format)
 
   return enforcePrecision
     ? string
-    : string.replace(new RegExp(`(\\${DEFAULT_DELIMITER}\\d+)0+`), "$1")
+    : string.replace(new RegExp(`(\\${delimiter}\\d+)0+`), "$1")
 }

src/components/Number/rounding.js

@@ -0,0 +1,13 @@
+import BigNumber from "bignumber.js"
+
+export const ROUNDING_MAP = {
+  ROUND_UP: BigNumber.ROUND_UP,
+  ROUND_DOWN: BigNumber.ROUND_DOWN,
+  ROUND_CEIL: BigNumber.ROUND_CEIL,
+  ROUND_FLOOR: BigNumber.ROUND_FLOOR,
+  ROUND_HALF_UP: BigNumber.ROUND_HALF_UP,
+  ROUND_HALF_DOWN: BigNumber.ROUND_HALF_DOWN,
+  ROUND_HALF_EVEN: BigNumber.ROUND_HALF_EVEN,
+  ROUND_HALF_CEIL: BigNumber.ROUND_HALF_CEIL,
+  ROUND_HALF_FLOOR: BigNumber.ROUND_HALF_FLOOR,
+}

storybook/i18n/locales/stories/money/en.yml

@@ -6,3 +6,4 @@ props:
   delimiter: Delimiter for fractional portion.
   separator: Separator for thousands.
   currencySeparator: Separator between amount and currency.
+  roundingMode: "Rounding mode for decimal values. Accepts one of: ROUND_UP, ROUND_DOWN, ROUND_CEIL, ROUND_FLOOR, ROUND_HALF_UP, ROUND_HALF_DOWN, ROUND_HALF_EVEN, ROUND_HALF_CEIL, ROUND_HALF_FLOOR"

storybook/stories/display/Money/money.js

@@ -11,11 +11,12 @@ function MoneyExample () {
     <div className="p-card s-container">
       <h3>Money component</h3>
       <Money
-        money={[1000.1000, "USD"]}
+        money={[102.25599999, "USD"]}
         precision={2}
         enforcePrecision
         delimiter={"."}
         separator={" "}
+        roundingMode="ROUND_UP"
       />
 
       <h3>with currencySeparator</h3>
@@ -46,5 +47,6 @@ export const money = {
     { name: "delimiter", type: "string", default: ",", description: `${I18N_PREFIX}.props.delimiter` },
     { name: "separator", type: "string", default: "'\xA0'", description: `${I18N_PREFIX}.props.separator` },
     { name: "currencySeparator", type: "string", default: "' '", description: `${I18N_PREFIX}.props.currencySeparator` },
+    { name: "roundingMode", type: "string", default: "ROUND_DOWN", description: `${I18N_PREFIX}.props.roundingMode` },
   ],
 }