feat: habit type

presentation/react/components/HabitCreateForm/HabitCreateForm.tsx

@@ -1,6 +1,12 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { Controller, useForm } from "react-hook-form"
-import { Appbar, Button, HelperText, TextInput } from "react-native-paper"
+import {
+  Appbar,
+  Button,
+  HelperText,
+  SegmentedButtons,
+  TextInput,
+} from "react-native-paper"
 import { SafeAreaView } from "react-native-safe-area-context"
 import ColorPicker, {
   HueSlider,
@@ -11,6 +17,9 @@ import ColorPicker, {
 import type { HabitCreateData } from "@/domain/entities/Habit"
 import { HabitCreateSchema } from "@/domain/entities/Habit"
 import type { User } from "@/domain/entities/User"
+import type { GoalFrequency, GoalType } from "@/domain/entities/Goal"
+import { GOAL_FREQUENCIES, GOAL_TYPES } from "@/domain/entities/Goal"
+import { capitalize } from "@/presentation/presenters/utils/strings"
 
 export interface HabitCreateFormProps {
   user: User
@@ -24,6 +33,27 @@ export const HabitCreateForm: React.FC<HabitCreateFormProps> = ({ user }) => {
     console.log(data)
   }
 
+  const frequenciesIcons: {
+    [key in GoalFrequency]: string
+  } = {
+    daily: "calendar",
+    weekly: "calendar-week",
+    monthly: "calendar-month",
+  }
+
+  const habitTypesTranslations: {
+    [key in GoalType]: { label: string; icon: string }
+  } = {
+    boolean: {
+      label: "Routine",
+      icon: "clock",
+    },
+    numeric: {
+      label: "Target",
+      icon: "target",
+    },
+  }
+
   const {
     control,
     handleSubmit,
@@ -122,15 +152,18 @@ export const HabitCreateForm: React.FC<HabitCreateFormProps> = ({ user }) => {
 
       <Controller
         control={control}
-        render={({ field: { onChange, onBlur, value } }) => {
+        render={({ field: { onChange, value } }) => {
           return (
-            <TextInput
+            <SegmentedButtons
-              placeholder="Goal Frequency"
+              onValueChange={onChange}
-              onBlur={onBlur}
-              onChangeText={onChange}
               value={value}
-              style={[styles.input]}
+              buttons={GOAL_FREQUENCIES.map((frequency) => {
-              mode="outlined"
+                return {
+                  label: capitalize(frequency),
+                  value: frequency,
+                  icon: frequenciesIcons[frequency],
+                }
+              })}
             />
           )
         }}
@@ -139,15 +172,18 @@ export const HabitCreateForm: React.FC<HabitCreateFormProps> = ({ user }) => {
 
       <Controller
         control={control}
-        render={({ field: { onChange, onBlur, value } }) => {
+        render={({ field: { onChange, value } }) => {
           return (
-            <TextInput
+            <SegmentedButtons
-              placeholder="Goal Target Type"
+              onValueChange={onChange}
-              onBlur={onBlur}
-              onChangeText={onChange}
               value={value}
-              style={[styles.input]}
+              buttons={GOAL_TYPES.map((type) => {
-              mode="outlined"
+                return {
+                  label: habitTypesTranslations[type].label,
+                  value: type,
+                  icon: habitTypesTranslations[type].icon,
+                }
+              })}
             />
           )
         }}