From 8b6d8ff3eb3cb64f292160af78ead79fc9f8e32f Mon Sep 17 00:00:00 2001
From: Federico Ercoles <federico.ercoles@buildo.io>
Date: Mon, 27 Nov 2023 18:49:16 +0100
Subject: [PATCH] Refactor NumberInput

---
 .../InternalNumberInput.tsx}                  | 11 ++---
 .../src/NumberField/NumberField.tsx           | 17 ++++----
 .../src/NumberField/NumberInput.tsx           | 40 +++++++++++++++++++
 .../formatOptions.ts                          |  2 +-
 .../src/NumberField/types.ts                  | 20 ++++++++++
 .../src/NumberInput/FormatProps.ts            | 11 -----
 .../src/SliderField/SliderField.tsx           |  4 +-
 7 files changed, 73 insertions(+), 32 deletions(-)
 rename packages/bento-design-system/src/{NumberInput/NumberInput.tsx => NumberField/InternalNumberInput.tsx} (94%)
 create mode 100644 packages/bento-design-system/src/NumberField/NumberInput.tsx
 rename packages/bento-design-system/src/{NumberInput => NumberField}/formatOptions.ts (92%)
 create mode 100644 packages/bento-design-system/src/NumberField/types.ts
 delete mode 100644 packages/bento-design-system/src/NumberInput/FormatProps.ts

diff --git a/packages/bento-design-system/src/NumberInput/NumberInput.tsx b/packages/bento-design-system/src/NumberField/InternalNumberInput.tsx
similarity index 94%
rename from packages/bento-design-system/src/NumberInput/NumberInput.tsx
rename to packages/bento-design-system/src/NumberField/InternalNumberInput.tsx
index 87ab3d2dc..a8fc29bc7 100644
--- a/packages/bento-design-system/src/NumberInput/NumberInput.tsx
+++ b/packages/bento-design-system/src/NumberField/InternalNumberInput.tsx
@@ -4,23 +4,20 @@ import useDimensions from "react-cool-dimensions";
 import { Label, LocalizedString, Box, Children, Columns } from "..";
 import { inputRecipe } from "../Field/Field.css";
 import { bodyRecipe } from "../Typography/Body/Body.css";
-import { FormatProps } from "./FormatProps";
+import { BaseNumberProps, FormatProps } from "./types";
 import { useBentoConfig } from "../BentoConfigContext";
 import { match, not, __ } from "ts-pattern";
 import { getReadOnlyBackgroundStyle } from "../Field/utils";
 import { getRadiusPropsFromConfig } from "../util/BorderRadiusConfig";
 
-type Props = {
+type Props = BaseNumberProps & {
   inputProps: React.InputHTMLAttributes<HTMLInputElement>;
   inputRef: React.Ref<HTMLInputElement>;
-  placeholder?: LocalizedString;
   validationState: "valid" | "invalid";
   disabled?: boolean;
-  isReadOnly?: boolean;
-  rightAccessory?: Children;
 } & FormatProps;
 
-export function NumberInput(props: Props) {
+export function InternalNumberInput(props: Props) {
   const config = useBentoConfig().input;
   const { locale } = useLocale();
 
@@ -132,5 +129,3 @@ export function NumberInput(props: Props) {
     </Box>
   );
 }
-
-export type { Props as NumberInputProps };
diff --git a/packages/bento-design-system/src/NumberField/NumberField.tsx b/packages/bento-design-system/src/NumberField/NumberField.tsx
index 7269c3ddf..2a538359f 100644
--- a/packages/bento-design-system/src/NumberField/NumberField.tsx
+++ b/packages/bento-design-system/src/NumberField/NumberField.tsx
@@ -2,18 +2,15 @@ import { useLocale } from "@react-aria/i18n";
 import { useNumberField } from "@react-aria/numberfield";
 import { NumberFieldStateOptions, useNumberFieldState } from "@react-stately/numberfield";
 import { useRef } from "react";
-import { Children, LocalizedString } from "..";
 import { FieldProps } from "../Field/FieldProps";
-import { FormatProps } from "../NumberInput/FormatProps";
-import { useFormatOptions } from "../NumberInput/formatOptions";
+import { BaseNumberProps, FormatProps } from "./types";
+import { useFormatOptions } from "./formatOptions";
 import { Field } from "../Field/Field";
-import { NumberInput } from "../NumberInput/NumberInput";
+import { InternalNumberInput } from "./InternalNumberInput";
 
-type Props = FieldProps<number | undefined, number> & {
-  placeholder?: LocalizedString;
-  isReadOnly?: boolean;
-  rightAccessory?: Children;
-} & FormatProps &
+type Props = FieldProps<number | undefined, number> &
+  BaseNumberProps &
+  FormatProps &
   Pick<NumberFieldStateOptions, "minValue" | "maxValue" | "step">;
 
 export function NumberField(props: Props) {
@@ -45,7 +42,7 @@ export function NumberField(props: Props) {
       assistiveTextProps={descriptionProps}
       errorMessageProps={errorMessageProps}
     >
-      <NumberInput
+      <InternalNumberInput
         inputProps={inputProps}
         inputRef={inputRef}
         validationState={validationState}
diff --git a/packages/bento-design-system/src/NumberField/NumberInput.tsx b/packages/bento-design-system/src/NumberField/NumberInput.tsx
new file mode 100644
index 000000000..fdb242d93
--- /dev/null
+++ b/packages/bento-design-system/src/NumberField/NumberInput.tsx
@@ -0,0 +1,40 @@
+import { NumberFieldStateOptions, useNumberFieldState } from "@react-stately/numberfield";
+import { FieldProps } from "../Field/FieldProps";
+import { BaseNumberProps, FormatProps } from "./types";
+import { useLocale } from "@react-aria/i18n";
+import { useFormatOptions } from "./formatOptions";
+import { HTMLAttributes, useRef } from "react";
+import { useNumberField } from "@react-aria/numberfield";
+import { InternalNumberInput } from "./InternalNumberInput";
+import { AtLeast } from "../util/AtLeast";
+
+type Props = AtLeast<Pick<HTMLAttributes<HTMLInputElement>, "aria-label" | "aria-labelledby">> &
+  Pick<
+    FieldProps<number | undefined, number>,
+    "autoFocus" | "disabled" | "name" | "onBlur" | "onChange" | "value"
+  > &
+  BaseNumberProps & {
+    validationState: "valid" | "invalid";
+  } & FormatProps &
+  Pick<NumberFieldStateOptions, "minValue" | "maxValue" | "step">;
+
+export function NumberInput(props: Props) {
+  const { locale } = useLocale();
+  const formatOptions = useFormatOptions(props);
+  const state = useNumberFieldState({ ...props, locale, formatOptions });
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { inputProps } = useNumberField(
+    {
+      ...props,
+      isDisabled: props.disabled,
+      formatOptions,
+    },
+    state,
+    inputRef
+  );
+
+  return <InternalNumberInput inputProps={inputProps} inputRef={inputRef} {...props} />;
+}
+
+export type { Props as NumberInputProps };
diff --git a/packages/bento-design-system/src/NumberInput/formatOptions.ts b/packages/bento-design-system/src/NumberField/formatOptions.ts
similarity index 92%
rename from packages/bento-design-system/src/NumberInput/formatOptions.ts
rename to packages/bento-design-system/src/NumberField/formatOptions.ts
index 5914012da..39b38789b 100644
--- a/packages/bento-design-system/src/NumberInput/formatOptions.ts
+++ b/packages/bento-design-system/src/NumberField/formatOptions.ts
@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { FormatProps } from "./FormatProps";
+import { FormatProps } from "./types";
 
 export function useFormatOptions({ kind }: FormatProps) {
   // This function must be memoized, see this relevant issue:
diff --git a/packages/bento-design-system/src/NumberField/types.ts b/packages/bento-design-system/src/NumberField/types.ts
new file mode 100644
index 000000000..a36e0b980
--- /dev/null
+++ b/packages/bento-design-system/src/NumberField/types.ts
@@ -0,0 +1,20 @@
+import { Children } from "../util/Children";
+import { LocalizedString } from "../util/LocalizedString";
+
+export type BaseNumberProps = {
+  placeholder?: LocalizedString;
+  isReadOnly?: boolean;
+  rightAccessory?: Children;
+};
+
+export type FormatProps =
+  | {
+      kind: "currency";
+      currency: string;
+    }
+  | {
+      kind: "percentage";
+    }
+  | {
+      kind?: "decimal";
+    };
diff --git a/packages/bento-design-system/src/NumberInput/FormatProps.ts b/packages/bento-design-system/src/NumberInput/FormatProps.ts
deleted file mode 100644
index ccba243b4..000000000
--- a/packages/bento-design-system/src/NumberInput/FormatProps.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export type FormatProps =
-  | {
-      kind: "currency";
-      currency: string;
-    }
-  | {
-      kind: "percentage";
-    }
-  | {
-      kind?: "decimal";
-    };
diff --git a/packages/bento-design-system/src/SliderField/SliderField.tsx b/packages/bento-design-system/src/SliderField/SliderField.tsx
index f835aecfa..2f3248823 100644
--- a/packages/bento-design-system/src/SliderField/SliderField.tsx
+++ b/packages/bento-design-system/src/SliderField/SliderField.tsx
@@ -6,8 +6,8 @@ import { ValueBase } from "@react-types/shared";
 import { useRef } from "react";
 import { Field, Slider } from "..";
 import { FieldProps } from "../Field/FieldProps";
-import { useFormatOptions } from "../NumberInput/formatOptions";
-import { FormatProps } from "../NumberInput/FormatProps";
+import { useFormatOptions } from "../NumberField/formatOptions";
+import { FormatProps } from "../NumberField/types";
 
 type Props = (
   | ({