fix: localized math input

components/calculators/lib/index.ts

@@ -1,4 +1,5 @@
 import { fallbackLng } from "@/lib/i18n/settings";
+import { NumberFormat } from "@react-input/number-format";
 import isNil from "lodash/isNil";
 import {
   type Calculator,
@@ -10,13 +11,14 @@ import LaTeXComposer from "./latex";
 import Config from "./config";
 
 const storedToNumericValues = (
-  values: StoredCalculatorValues
+  values: StoredCalculatorValues,
+  locale: string
 ): NumericCalculatorValues => {
+  const numberFormat = new NumberFormat({ locales: locale });
   const numericValues: NumericCalculatorValues = {};
 
   Object.keys(values).forEach((key) => {
     const value = values[key];
-    numericValues[key] = isNil(value) ? undefined : parseFloat(value);
 
     if (isNil(value)) {
       numericValues[key] = undefined;
@@ -28,14 +30,14 @@ const storedToNumericValues = (
       return;
     }
 
-    numericValues[key] = parseFloat(value);
+    numericValues[key] = parseFloat(numberFormat.unformat(value));
   });
 
   return numericValues;
 };
 
 const Calculator: Calculator = (equation, value, locale = fallbackLng) => {
-  const variables = storedToNumericValues(value);
+  const variables = storedToNumericValues(value, locale);
   const config = Config[equation];
 
   if (typeof config === "undefined") {

components/form/Input/patterns/MathInput/index.tsx

@@ -1,16 +1,35 @@
 import { FunctionComponent, HTMLProps } from "react";
+import { useTranslation } from "react-i18next";
+import { useNumberFormat } from "@react-input/number-format";
 import * as Styled from "./styles";
 
 interface MathInputProps extends HTMLProps<HTMLInputElement> {
   condensed?: boolean;
 }
 
+const stepToFractionDigits = (step: string | number) => {
+  const parsed = typeof step === "string" ? parseFloat(step) : step;
+  return (1 / parsed).toString().length - 1;
+};
+
 const MathInput: FunctionComponent<MathInputProps> = ({
   value,
   placeholder,
   condensed = false,
+  step,
   ...props
 }) => {
+  const {
+    i18n: { language },
+  } = useTranslation();
+
+  const options = {
+    locales: language,
+    maximumFractionDigits: step ? stepToFractionDigits(step) : undefined,
+  };
+
+  const inputRef = useNumberFormat(options);
+
   const staticWidth = 6;
   const valueWidth = String(value).length;
   const placeholderWidth = placeholder?.length || 0;
@@ -19,7 +38,7 @@ const MathInput: FunctionComponent<MathInputProps> = ({
   return (
     <Styled.MathInput
       {...props}
-      type="number"
+      ref={inputRef}
       placeholder={placeholder}
       value={value?.toString() ?? ""}
       style={{

package.json

@@ -63,6 +63,7 @@
     "@castiron/style-mixins": "^1.0.6",
     "@cortex-js/compute-engine": "^0.24.1",
     "@greatsumini/react-facebook-login": "^3.3.3",
+    "@react-input/number-format": "^2.0.3",
     "@react-oauth/google": "^0.11.0",
     "@rubin-epo/epo-react-lib": "^2.0.32",
     "@rubin-epo/epo-widget-lib": "^1.0.9",

yarn.lock

@@ -3160,6 +3160,18 @@
     "@swc/helpers" "^0.5.0"
     clsx "^2.0.0"
 
+"@react-input/core@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@react-input/core/-/core-2.0.2.tgz#c7094c5ab955e740d4c34777688aff54785024a1"
+  integrity sha512-xLLBueYFbant9308uv3cIJQz5NYSixeGspjP3Nt6jogRHTcHYMRmlVFUuSzQiP8Z8/5BdnPkudRSsN0/AJ1fbw==
+
+"@react-input/number-format@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@react-input/number-format/-/number-format-2.0.3.tgz#7b7f1fef6a884b1c3f508e9fd437a5c192095de1"
+  integrity sha512-rgvp32USB+g+ZuQv+TJJHmM+2Te+hn88uMBKvLbY965gUMfYS6hONTcw0UzwUnm5IRWyEkiTyZQmd/1648fw8w==
+  dependencies:
+    "@react-input/core" "^2.0.2"
+
 "@react-oauth/google@^0.11.0":
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/@react-oauth/google/-/google-0.11.1.tgz#f937c8d02bd37e3a6be7713b8212e9b9b9b3f914"