/** * Source code string shown in the Storybook Docs tab for the LoginForm story. * * Demonstrates the minimal Form + Field + useZodForm integration pattern. */ declare const rhfApiWrapperSource = "\nimport React, { useCallback } from 'react';\nimport {\n Form,\n Field,\n FieldLabel,\n FieldControl,\n useZodForm,\n SimpleInput,\n Button,\n Box,\n Text\n} from '@jtl-software/platform-ui-react';\nimport { z } from 'zod';\n\ninterface IReactHookFormAPIWrapperProps {}\n\n/**\n * Zod schema for the RHF API reference story.\n * Uses `z.coerce.number()` so the HTML number input string is coerced correctly.\n */\nconst apiReferenceSchema = z.object({\n email: z.string().email('Please enter a valid email'),\n age: z.coerce.number({ error: 'Age must be a number' }).min(18, 'Must be 18+').max(100, 'Must be 100 or under'),\n});\n\nconst ReactHookFormAPIWrapper: React.FC = () => {\n const form = useZodForm({\n schema: apiReferenceSchema,\n // onChange mode gives immediate validation feedback on each keystroke\n mode: 'onChange',\n defaultValues: { email: '', age: 18 },\n });\n\n const watchedEmail = form.watch('email');\n const { isValid, isDirty, isSubmitted, errors } = form.formState;\n\n const onSubmit = useCallback((data: z.infer) => {\n console.log(data);\n alert('Form submitted!');\n }, []);\n\n /** getValues() \u2014 returns current value without triggering re-render */\n const handleGetValues = useCallback(() => {\n alert(`Current email: ${form.getValues('email') || '(empty)'}`);\n }, [form]);\n\n /** setValue() \u2014 imperatively sets a field and triggers validate + dirty */\n const handleSetValue = useCallback(() => {\n form.setValue('email', 'sample@example.com', { shouldValidate: true, shouldDirty: true, shouldTouch: true });\n }, [form]);\n\n /** reset() \u2014 clears all fields back to defaultValues */\n const handleReset = useCallback(() => {\n form.reset();\n }, [form]);\n\n /** reset(values) \u2014 resets with specific values instead of defaultValues */\n const handleResetWithValues = useCallback(() => {\n form.reset({ email: 'new@example.com', age: 30 });\n }, [form]);\n\n /** trigger() \u2014 manually validates all fields and returns overall validity */\n const handleTrigger = useCallback(async () => {\n const isFormValid = await form.trigger();\n alert(isFormValid ? 'Form is valid!' : 'Form has errors!');\n }, [form]);\n\n /** clearErrors() \u2014 removes error messages without re-running validation */\n const handleClearErrors = useCallback(() => {\n form.clearErrors();\n }, [form]);\n\n return (\n
\n \n {/* Form fields */}\n \n \n Email\n \n \n \n \n \n Age\n \n \n \n \n \n\n {/* API trigger buttons */}\n \n