Merge pull request #2 from taku10101/feature/form-component

Feature/form component

Author: taku10101

package.json

@@ -39,14 +39,18 @@
   },
   "dependencies": {
     "@axe-core/playwright": "^4.10.1",
+    "@hookform/resolvers": "^5.0.1",
     "axios": "^1.8.4",
     "lucide-react": "^0.292.0",
     "postcss": "^8.4.31",
     "react-aria": "^3.38.1",
     "react-aria-components": "latest",
+    "react-hook-form": "^7.55.0",
     "react-router-dom": "^7.5.0",
     "tailwind-merge": "^3.1.0",
-    "tailwind-variants": "^0.3.1"
+    "tailwind-variants": "^0.3.1",
+    "zod": "^3.24.2"
   },
+  "sideEffects": false,
   "packageManager": "[email protected]+sha512.cdf928fca20832cd59ec53826492b7dc25dc524d4370b6b4adbf65803d32efaa6c1c88147c0ae4e8d579a6c9eec715757b50d4fa35eea179d868eada4ed043af"
 }

pnpm-lock.yaml

@@ -0,0 +1,20 @@
+import { useFormContext } from "react-hook-form";
+import { Input } from "../ui/Field";
+
+type Props = {
+    name: string;
+};
+
+function InputField(props: Props) {
+    const methods = useFormContext();
+
+    return (
+        <>
+            <Input {...methods.register(props.name)} />
+            {methods.formState.errors[props.name] && (
+                <p>{methods.formState.errors[props.name]?.message as string}</p>
+            )}
+        </>
+    );
+}
+export default InputField;

src/components/form/InputField.tsx

@@ -0,0 +1,28 @@
+import { useForm, FormProvider } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import InputField from "./InputField";
+import SelectField from "./SelectField";
+import { Button } from "../ui/Button/";
+import { z } from "zod";
+import { Form } from "../ui/Form";
+const sampleFormSchema = z.object({
+    input: z.string().min(1),
+    select: z.string().min(1),
+});
+
+const SampleForm = () => {
+    const methods = useForm({
+        resolver: zodResolver(sampleFormSchema),
+    });
+    const { handleSubmit } = methods;
+    return (
+        <FormProvider {...methods}>
+            <Form onSubmit={handleSubmit((data) => console.log(data))}>
+                <InputField name='input' />
+                <SelectField name='select' />
+                <Button type='submit'>Submit</Button>
+            </Form>
+        </FormProvider>
+    );
+}
+export default SampleForm;

src/components/form/SampleForm.tsx

@@ -0,0 +1,25 @@
+import { useFormContext } from "react-hook-form";
+import { Select } from "../ui/Select";
+const options = ["", "one", "two", "three"];
+type Props = {
+    name: string;
+};
+function SelectField(props: Props) {
+    const methods = useFormContext();
+    return (
+        <>
+            <Select {...methods.register(props.name)}>
+                {options.map((value) => (
+                    <option key={value} value={value}>
+                        {value}
+                    </option>
+                ))}
+            </Select>
+
+            {methods.formState.errors[props.name] && (
+                <p>{methods.formState.errors[props.name]?.message as string}</p>
+            )}
+        </>
+    );
+}
+export default SelectField;

src/components/form/SelectField.tsx

@@ -2,11 +2,11 @@ import { AlertCircleIcon, InfoIcon } from "lucide-react";
 import { ReactNode } from "react";
 import { Dialog } from "../Dialog/Dialog";
 import { Button } from "../Button/Button";
-import { DialogProps ,Heading} from "react-aria-components";
+import { DialogProps, Heading } from "react-aria-components";
 import { chain } from "react-aria";
 
 
-interface AlertDialogProps extends Omit<DialogProps, 'children'> {
+export interface AlertDialogProps extends Omit<DialogProps, 'children'> {
   title: string,
   children: ReactNode,
   variant?: 'info' | 'destructive',

src/components/ui/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,3 @@
+
+export { AlertDialog } from './AlertDialog';
+

src/components/ui/AlertDialog/index.ts

@@ -0,0 +1,7 @@
+
+export {
+    Autocomplete,
+    AutocompleteItem,
+    AutocompleteSection,
+} from "./Autocomplete";
+

src/components/ui/Autocomplete/index.ts

@@ -0,0 +1,6 @@
+
+export {
+    Breadcrumbs,
+    Breadcrumb,
+} from "./Breadcrumbs";
+

src/components/ui/Breadcrumbs/index.ts

@@ -0,0 +1,5 @@
+
+export {
+    Button,
+} from "./Button";
+