feat: add new form components including CheckboxField, NumberInputField, SelectField, TextField, and SubmitButton with updated input sizes

web/app/components/base/form/components/field/checkbox.tsx

@@ -1,6 +1,6 @@
 import cn from '@/utils/classnames'
-import { useFieldContext } from '..'
-import Checkbox from '../../checkbox'
+import { useFieldContext } from '../..'
+import Checkbox from '../../../checkbox'
 
 type CheckboxFieldProps = {
   label: string;

web/app/components/base/form/components/field/number-input.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { useFieldContext } from '../..'
+import Label from '../label'
+import cn from '@/utils/classnames'
+import { InputNumber } from '../../../input-number'
+
+type TextFieldProps = {
+  label: string
+  className?: string
+  labelClassName?: string
+}
+
+const NumberInputField = ({
+  label,
+  className,
+  labelClassName,
+}: TextFieldProps) => {
+  const field = useFieldContext<number | undefined>()
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <Label
+        htmlFor={field.name}
+        label={label}
+        labelClassName={labelClassName}
+      />
+      <InputNumber
+        id={field.name}
+        value={field.state.value}
+        onChange={value => field.handleChange(value)}
+        onBlur={field.handleBlur}
+      />
+    </div>
+  )
+}
+
+export default NumberInputField

web/app/components/base/form/components/field/select.tsx

@@ -1,7 +1,7 @@
 import cn from '@/utils/classnames'
-import { useFieldContext } from '..'
-import PureSelect from '../../select/pure'
-import Label from './label'
+import { useFieldContext } from '../..'
+import PureSelect from '../../../select/pure'
+import Label from '../label'
 
 type SelectOption = {
   value: string

web/app/components/base/form/components/field/text.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { useFieldContext } from '..'
-import Input from '../../input'
-import Label from './label'
+import { useFieldContext } from '../..'
+import Input from '../../../input'
+import Label from '../label'
 import cn from '@/utils/classnames'
 
 type TextFieldProps = {

web/app/components/base/form/components/form/submit-button.tsx

@@ -1,6 +1,6 @@
 import { useStore } from '@tanstack/react-form'
-import { useFormContext } from '..'
-import Button, { type ButtonProps } from '../../button'
+import { useFormContext } from '../..'
+import Button, { type ButtonProps } from '../../../button'
 
 type SubmitButtonProps = Omit<ButtonProps, 'disabled' | 'loading' | 'onClick'>
 

web/app/components/base/form/index.tsx

@@ -1,8 +1,9 @@
 import { createFormHook, createFormHookContexts } from '@tanstack/react-form'
-import TextField from './components/text-field'
-import CheckboxField from './components/checkbox-field'
-import SelectField from './components/select-filed'
-import SubmitButton from './components/submit-button'
+import TextField from './components/field/text'
+import NumberInputField from './components/field/number-input'
+import CheckboxField from './components/field/checkbox'
+import SelectField from './components/field/select'
+import SubmitButton from './components/form/submit-button'
 
 export const { fieldContext, useFieldContext, formContext, useFormContext }
   = createFormHookContexts()
@@ -10,6 +11,7 @@ export const { fieldContext, useFieldContext, formContext, useFormContext }
 export const { useAppForm, withForm } = createFormHook({
   fieldComponents: {
     TextField,
+    NumberInputField,
     CheckboxField,
     SelectField,
   },