wip: add documentation for the upload component

frontend/src/app/(mentoring)/mentoring.view.tsx

@@ -1,12 +1,11 @@
 import Link from 'next/link'
-import { useForm, SubmitHandler, FormProvider } from "react-hook-form"
+
+import { useMentoringModel } from './mentoring.model'
+
 import { TextInput } from '@/components/form/text-input'
 import { AlertBox } from '@/components/ui/alert-box'
 import { ErrorMessage } from '@/components/ui/error-message'
-import { Upload } from '@/components/upload'
 
-import { useMentoringModel } from './mentoring.model'
-import { useEffect } from 'react'
 
 type MentoringViewProps = ReturnType<typeof useMentoringModel>
 
@@ -20,11 +19,6 @@ export function MentoringView(props: MentoringViewProps) {
 		isSubmitting,
 		submitButtonLabel,
 	} = props
-const methods = useForm<any>();
-	const formValues = methods.watch();
-   useEffect(()=>{
-	console.log(formValues)
-   },[formValues])
 	return (
 		<main className="flex items-center justify-center bg-gray-100">
 			<div className="w-full max-w-md bg-white shadow-lg rounded-lg p-6">
@@ -77,14 +71,6 @@ const methods = useForm<any>();
 						</button>
 					</div>
 				</form>
-				<FormProvider {...methods}>
-
-							<form onSubmit={methods.handleSubmit(d => console.log(d))}>
-
-				<Upload />
-				<button type='submit'>Submit</button>
-							</form>
-				</FormProvider>
 				{registrationResult && (
 					<AlertBox
 						className="mt-4"

frontend/src/components/upload/MockFormProvider.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useForm, FormProvider, UseFormReturn } from 'react-hook-form';
+
+interface MockFormProviderProps {
+  children: React.ReactNode;
+  defaultValues?: Record<string, any>;
+  methods?: Partial<UseFormReturn>;
+}
+
+export const MockFormProvider: React.FC<MockFormProviderProps> = ({ children, defaultValues = {}, methods = {} }) => {
+  const formMethods = useForm({ defaultValues });
+  const combinedMethods = { ...formMethods, ...methods };
+
+  return <FormProvider {...combinedMethods}>{children}</FormProvider>;
+};

frontend/src/components/upload/upload.stories.tsx

@@ -0,0 +1,30 @@
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Upload } from "./index";
+import { MockFormProvider as FormProvider } from './MockFormProvider';
+
+type Story = StoryObj<typeof Upload>;
+
+const meta: Meta<typeof Upload> = {
+    component: Upload,
+    title: 'Components/Upload',
+    argTypes:{
+        name:{
+            control:{type:'text'},
+            description: 'Field identifier in React hook form'
+        }
+    },
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta
+
+export const Default:Story = {
+    render: () => (
+        <FormProvider>
+            <Upload/>
+        </FormProvider>
+    )
+}