feat: Number Formatting and UI Consistency Enhancement (Codehagen#201)

* feat(www): add consistent "Name" input field across all form interfaces * feat(www): add space as thousand separator in numeric inputs
digitalapplied · Mar 5, 2024 · ebcd159 · ebcd159
1 parent 7909fd8
commit ebcd159
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 16 deletions.
diff --git a/apps/www/components/forms/account-form/car-fields.tsx b/apps/www/components/forms/account-form/car-fields.tsx
@@ -1,11 +1,16 @@
 import { useFormContext } from "react-hook-form";
 
+
+
 import { CommonAccountFields } from "./common-account-fields";
+import { NameField } from "./name-field";
 
 export const CarFormFields = () => {
   const { control } = useFormContext();
   return (
     <>
+      {/* Name Field  */}
+      <NameField />
       <CommonAccountFields />
     </>
   );

diff --git a/apps/www/components/forms/account-form/common-account-fields.tsx b/apps/www/components/forms/account-form/common-account-fields.tsx
@@ -2,7 +2,9 @@ import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { useFormContext } from "react-hook-form";
 
-import { cn } from "@/lib/utils";
+
+
+import { cn, formatNumberWithSpaces } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import {
@@ -19,7 +21,13 @@ import {
 } from "@/components/ui/popover";
 
 export const CommonAccountFields = () => {
-  const { control } = useFormContext();
+  const { control, setValue } = useFormContext();
+
+  const handleNumberChange = (name: string, value: string) => {
+    const unformattedValue = value.replace(/\s/g, "");
+    setValue(name, unformattedValue);
+  };
+
   return (
     <>
       {/* Purchase Date Field  */}
@@ -75,7 +83,14 @@ export const CommonAccountFields = () => {
           <FormItem className="flex flex-col">
             <FormLabel>Purchase Value</FormLabel>
             <FormControl>
-              <Input {...field} placeholder="Purchase Value..." />
+              <Input
+                {...field}
+                value={formatNumberWithSpaces(field.value)}
+                onChange={(e) =>
+                  handleNumberChange("purchaseValue", e.target.value)
+                }
+                placeholder="Purchase Value..."
+              />
             </FormControl>
           </FormItem>
         )}
@@ -88,7 +103,14 @@ export const CommonAccountFields = () => {
           <FormItem className="flex flex-col">
             <FormLabel>Current Value</FormLabel>
             <FormControl>
-              <Input {...field} placeholder="Current Value..." />
+              <Input
+                {...field}
+                value={formatNumberWithSpaces(field.value)}
+                onChange={(e) =>
+                  handleNumberChange("currentValue", e.target.value)
+                }
+                placeholder="Current Value..."
+              />
             </FormControl>
           </FormItem>
         )}

diff --git a/apps/www/components/forms/account-form/crypto-fields.tsx b/apps/www/components/forms/account-form/crypto-fields.tsx
@@ -1,19 +1,21 @@
 import { useFormContext } from "react-hook-form";
 
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-} from "@/components/ui/form";
+
+
+import { FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 
+
+
 import { CommonAccountFields } from "./common-account-fields";
+import { NameField } from "./name-field";
 
 export const CryptoFormFields = () => {
   const { control } = useFormContext();
   return (
     <>
+      {/* Name Field  */}
+      <NameField />
       {/* Currency Name Field */}
       <div className="grid gap-2">
         <FormField

diff --git a/apps/www/components/forms/account-form/input-fields.tsx b/apps/www/components/forms/account-form/input-fields.tsx
@@ -1,11 +1,16 @@
 import { useFormContext } from "react-hook-form";
 
+
+
 import { CommonAccountFields } from "./common-account-fields";
+import { NameField } from "./name-field";
 
 export const InputFormFields = () => {
   const { control } = useFormContext();
   return (
     <>
+      {/* Name Field  */}
+      <NameField />
       <CommonAccountFields />
     </>
   );

diff --git a/apps/www/components/forms/account-form/investment-fields.tsx b/apps/www/components/forms/account-form/investment-fields.tsx
@@ -1,11 +1,16 @@
 import { useFormContext } from "react-hook-form";
 
+
+
 import { CommonAccountFields } from "./common-account-fields";
+import { NameField } from "./name-field";
 
 export const InvestmentFormFields = () => {
   const { control } = useFormContext();
   return (
     <>
+      {/* Name Field  */}
+      <NameField />
       <CommonAccountFields />
     </>
   );

diff --git a/apps/www/components/forms/account-form/misc-fields.tsx b/apps/www/components/forms/account-form/misc-fields.tsx
@@ -1,11 +1,16 @@
 import { useFormContext } from "react-hook-form";
 
+
+
 import { CommonAccountFields } from "./common-account-fields";
+import { NameField } from "./name-field";
 
 export const MiscFormFields = () => {
   const { control } = useFormContext();
   return (
     <>
+      {/* Name Field  */}
+      <NameField />
       <CommonAccountFields />
     </>
   );

diff --git a/apps/www/components/forms/account-form/name-field.tsx b/apps/www/components/forms/account-form/name-field.tsx
@@ -0,0 +1,30 @@
+import { useFormContext } from "react-hook-form";
+
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+
+export const NameField = () => {
+  const { control } = useFormContext();
+
+  return (
+    <div className="grid gap-2">
+      <FormField
+        control={control}
+        name="name"
+        render={({ field }) => (
+          <FormItem className="flex flex-col">
+            <FormLabel>Name</FormLabel>
+            <FormControl>
+              <Input {...field} placeholder="Name..." />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+};
diff --git a/apps/www/components/forms/account-form/real-estate-fields.tsx b/apps/www/components/forms/account-form/real-estate-fields.tsx
@@ -1,19 +1,21 @@
 import { useFormContext } from "react-hook-form";
 
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-} from "@/components/ui/form";
+
+
+import { FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 
+
+
 import { CommonAccountFields } from "./common-account-fields";
+import { NameField } from "./name-field";
 
 export const RealEstateFormFields = () => {
   const { control } = useFormContext();
   return (
     <>
+      {/* Name Field  */}
+      <NameField />
       {/* Address Field  */}
       <div className="grid gap-2">
         <FormField

diff --git a/apps/www/components/modals/add-asset-flow/index.tsx b/apps/www/components/modals/add-asset-flow/index.tsx
@@ -1,6 +1,8 @@
 import { useCallback, useMemo } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 
+
+
 import { FlowStep, useFlowControl } from "@/hooks/use-flow-control";
 import { useFlowModalState } from "@/hooks/use-flow-modal-state";
 import { Button } from "@/components/ui/button";
@@ -38,6 +40,9 @@ export const AddAssetFlow = () => {
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   const handleSelectAccountType = useCallback(
     (selectedAccountType: AccountTypeInfo) => {
+      if (form.formState.dirtyFields.name) {
+        form.resetField("name");
+      }
       setAccountTypeInfo(selectedAccountType);
       goToNextStep();
     },

diff --git a/apps/www/hooks/use-flow-modal-state.ts b/apps/www/hooks/use-flow-modal-state.ts
@@ -7,6 +7,7 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 const baseSchema = z.object({
+  name: z.string(),
   purchaseDate: z.date(),
   purchaseValue: z.string(),
   currentValue: z.string(),
@@ -40,6 +41,7 @@ export function useFlowModalState() {
   const form = useForm<z.infer<typeof currentFormSchema>>({
     resolver: zodResolver(currentFormSchema),
     defaultValues: {
+      name: "",
       purchaseDate: new Date(),
       purchaseValue: "",
       currentValue: "",

diff --git a/apps/www/lib/utils.ts b/apps/www/lib/utils.ts
@@ -142,3 +142,9 @@ export async function fetchGithubData() {
     throw error;
   }
 }
+
+export const formatNumberWithSpaces = (value: number) => {
+  if (!value) return value;
+  const numberAsString = value.toString();
+  return numberAsString.replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+}