[C] refactor calculators

app/api/xlsx/formatter/calculator/index.ts

@@ -1,5 +1,5 @@
 import { serverTranslation } from "@/lib/i18n";
-import CalculatorFunctions from "@/components/calculators/math";
+import Calculator from "@/components/calculators/lib";
 import { CalculatorFormatter } from "..";
 
 const CalculatorFormatter: CalculatorFormatter = async ({
@@ -10,11 +10,8 @@ const CalculatorFormatter: CalculatorFormatter = async ({
 }) => {
   const { t } = await serverTranslation(locale, "translation");
 
-  const calculator = CalculatorFunctions[equation];
-
-  if (!calculator) cell.value = t("review.no_answer");
-
-  cell.value = calculator(value) || t("review.no_answer");
+  cell.value =
+    Calculator(equation, value, locale).result || t("review.no_answer");
 };
 
 export default CalculatorFormatter;

components/atomic/Equation/index.tsx

@@ -6,6 +6,7 @@ const Equation: FunctionComponent<{ latex: string }> = ({ latex }) => {
   const mathMl = temml.renderToString(latex, {
     displayMode: true,
     throwOnError: true,
+    trust: (context) => context.command === "\\class",
   });
 
   return (

components/calculators/interactive/index.tsx

@@ -1,14 +1,61 @@
-import { ComponentType } from "react";
-import { Equation, InteractiveCalculatorProps } from "@/types/calculators";
-import PeakAbsoluteMagnitude from "./peakAbsoluteMagnitude";
-import SupernovaDistance from "./supernovaDistance";
-
-const InteractiveCalculators: Record<
-  Equation,
-  ComponentType<InteractiveCalculatorProps>
-> = {
-  peakAbsoluteMagnitude: PeakAbsoluteMagnitude,
-  supernovaDistance: SupernovaDistance,
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import { FormEvent, FunctionComponent } from "react";
+import { useTranslation } from "react-i18next";
+import { InteractiveCalculatorProps } from "@/types/calculators";
+import MathInput from "@/components/form/Input/patterns/MathInput";
+import Equation from "@/components/atomic/Equation";
+import Calculator from "@/components/calculators/lib";
+import * as Styled from "./styles";
+
+const InteractiveCalculator: FunctionComponent<InteractiveCalculatorProps> = ({
+  equation,
+  id,
+  value = {},
+  onChangeCallback,
+}) => {
+  const {
+    t,
+    i18n: { language },
+  } = useTranslation();
+
+  const { fields = {}, result, latex } = Calculator(equation, value, language);
+
+  const handleChange = (event: FormEvent<HTMLInputElement>, key: string) => {
+    onChangeCallback &&
+      onChangeCallback({
+        ...value,
+        [key]: parseFloat((event.target as HTMLInputElement).value),
+      });
+  };
+
+  return (
+    <Styled.MathContainer>
+      <Styled.Inputs id={id}>
+        {Object.keys(fields).map((key: string) => {
+          const { label, precision } = fields[key];
+          return (
+            <Styled.InputRow key={key}>
+              <label htmlFor={key}>
+                <Equation latex={label} />
+              </label>
+              <MathInput
+                value={value[key] ?? ""}
+                onChange={(e) => handleChange(e, key)}
+                id={key}
+                step={10 ** -precision}
+              />
+            </Styled.InputRow>
+          );
+        })}
+      </Styled.Inputs>
+      <Equation latex={latex} />
+      <Styled.LiveRegion htmlFor={id}>
+        {t(`calculators.output.${equation}`, { result })}
+      </Styled.LiveRegion>
+    </Styled.MathContainer>
+  );
 };
 
-export default InteractiveCalculators;
+InteractiveCalculator.displayName = "Calculator.Interactive";
+
+export default InteractiveCalculator;

components/calculators/interactive/styles.ts

@@ -1,21 +1,15 @@
 "use client";
-import { token } from "@rubin-epo/epo-react-lib/styles";
 import styled from "styled-components";
 
 export const MathContainer = styled.div`
   --math-gap: 0.5em;
 
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: 1fr 1fr;
+  grid-auto-rows: 1fr 1fr;
   gap: var(--math-gap);
   justify-items: left;
-
-  @container (min-width: ${token("BREAK_TABLET_MIN")}) {
-    grid-template-columns: auto 1fr;
-    grid-template-rows: 1fr;
-    align-items: center;
-  }
+  min-width: 50%;
 `;
 
 export const Inputs = styled.form`
@@ -28,3 +22,12 @@ export const InputRow = styled.div`
   display: flex;
   align-items: center;
 `;
+
+export const LiveRegion = styled.output`
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+`;