mirror of
https://github.com/supabase/supabase.git
synced 2026-10-13 21:29:08 +03:00
Gildas GarciaandIvan Vasilov
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import Link from 'next/link'
|
|
import { useForm } from 'react-hook-form'
|
|
import { toast } from 'sonner'
|
|
import {
|
|
Button,
|
|
Checkbox,
|
|
Form,
|
|
FormControl,
|
|
FormDescription,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
} from 'ui'
|
|
import { z } from 'zod'
|
|
|
|
const FormSchema = z.object({
|
|
mobile: z.boolean().default(false).optional(),
|
|
})
|
|
|
|
export default function CheckboxReactHookFormSingle() {
|
|
const form = useForm<z.infer<typeof FormSchema>>({
|
|
resolver: zodResolver(FormSchema),
|
|
defaultValues: {
|
|
mobile: true,
|
|
},
|
|
})
|
|
|
|
function onSubmit(data: z.infer<typeof FormSchema>) {
|
|
toast('You submitted the following values:', {
|
|
description: (
|
|
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
|
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
|
|
</pre>
|
|
),
|
|
})
|
|
}
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
|
<FormField
|
|
control={form.control}
|
|
name="mobile"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
|
|
<FormControl>
|
|
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
|
|
</FormControl>
|
|
<div className="space-y-1 leading-none">
|
|
<FormLabel>Use different settings for my mobile devices</FormLabel>
|
|
<FormDescription>
|
|
You can manage your mobile notifications in the{' '}
|
|
<Link href="/examples/forms">mobile settings</Link> page.
|
|
</FormDescription>
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<Button type="submit">Submit</Button>
|
|
</form>
|
|
</Form>
|
|
)
|
|
}
|