mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 15:49:09 +03:00
df52ea7ee0
* Update the design of the sonner toasts. Add the close button by default. * Migrate studio and www apps to use the SonnerToaster. * Migrate all toasts from studio. * Migrate all leftover toasts in studio. * Add a new toast component with progress. Use it in studio. * Migrate the design-system app. * Refactor the consent toast to use sonner. * Switch docs to use the new sonner toasts. * Remove toast examples from the design-system app. * Remove all toast-related components and old code. * Fix the progress bar in the toast progress component. Also make the bottom components vertically centered. * Fix the width of the toast progress. * Use text-foreground-lighter instead of muted for ToastProgress text * Rename ToastProgress to SonnerProgress. * Shorten the text in sonner progress. * Use the correct classes for the close button. Add a const var for the default toast duration. Remove the custom width class from sonner. * Set the position for all progress toasts to bottom right. Set the duration for all toasts to the default (when reusing a toast id from loading/progress toast, the duration is set to infinity). * Fix the playwright tests. * Refactor imports to use ui instead of @ui. * Change all imports of react-hot-toast with sonner. These components were merged since the last commit to this branch. * Remove react-hot-toast lib. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
106 lines
3.1 KiB
TypeScript
106 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import Image from 'next/image'
|
|
import { useForm } from 'react-hook-form'
|
|
import { toast } from 'sonner'
|
|
import z from 'zod'
|
|
|
|
import {
|
|
Button,
|
|
Form_Shadcn_,
|
|
FormDescription_Shadcn_,
|
|
FormField_Shadcn_,
|
|
FormItem_Shadcn_,
|
|
FormLabel_Shadcn_,
|
|
FormMessage_Shadcn_,
|
|
} from 'ui'
|
|
import {
|
|
MultiSelector,
|
|
MultiSelectorContent,
|
|
MultiSelectorInput,
|
|
MultiSelectorItem,
|
|
MultiSelectorList,
|
|
MultiSelectorTrigger,
|
|
} from 'ui-patterns/multi-select'
|
|
|
|
const form = z.object({
|
|
value: z.array(z.string()).nonempty('Please select at least one person'),
|
|
})
|
|
|
|
type Form = z.infer<typeof form>
|
|
|
|
const users = [
|
|
{
|
|
name: 'ThePrimeagen',
|
|
picture: 'https://pbs.twimg.com/profile_images/1759330620160049152/2i_wkOoK_400x400.jpg',
|
|
},
|
|
{
|
|
name: 'Shadcn',
|
|
picture: 'https://pbs.twimg.com/profile_images/1593304942210478080/TUYae5z7_400x400.jpg',
|
|
},
|
|
{
|
|
name: 'Theo',
|
|
picture: 'https://pbs.twimg.com/profile_images/1605762947686375425/lsoGWWty_400x400.jpg',
|
|
},
|
|
]
|
|
|
|
const MultiSelectZod = () => {
|
|
const multiForm = useForm<Form>({
|
|
resolver: zodResolver(form),
|
|
defaultValues: form.parse({ value: [users[0].name] }),
|
|
})
|
|
|
|
const onSubmit = (data: Form) => {
|
|
toast('Form submitted ', { description: JSON.stringify(data, null, 2) })
|
|
}
|
|
|
|
return (
|
|
<Form_Shadcn_ {...multiForm}>
|
|
<form onSubmit={multiForm.handleSubmit(onSubmit)} className="space-y-3 grid gap-3 w-full">
|
|
<FormField_Shadcn_
|
|
control={multiForm.control}
|
|
name="value"
|
|
render={({ field }) => (
|
|
<FormItem_Shadcn_ className="w-full">
|
|
<FormLabel_Shadcn_>Invite people</FormLabel_Shadcn_>
|
|
<MultiSelector onValuesChange={field.onChange} values={field.value} size={'small'}>
|
|
<MultiSelectorTrigger>
|
|
<MultiSelectorInput placeholder="Select people to invite" />
|
|
</MultiSelectorTrigger>
|
|
<MultiSelectorContent>
|
|
<MultiSelectorList>
|
|
{users.map((user) => (
|
|
<MultiSelectorItem key={user.name} value={user.name}>
|
|
<div className="flex items-center space-x-2">
|
|
<Image
|
|
src={user.picture}
|
|
alt={user.name}
|
|
width={32}
|
|
height={32}
|
|
className="w-8 h-8 rounded-full"
|
|
/>
|
|
<span>{user.name}</span>
|
|
</div>
|
|
</MultiSelectorItem>
|
|
))}
|
|
</MultiSelectorList>
|
|
</MultiSelectorContent>
|
|
</MultiSelector>
|
|
<FormDescription_Shadcn_>
|
|
Select people to invite to this event
|
|
</FormDescription_Shadcn_>
|
|
<FormMessage_Shadcn_ />
|
|
</FormItem_Shadcn_>
|
|
)}
|
|
/>
|
|
<Button type="secondary" size="medium" htmlType="submit">
|
|
Submit
|
|
</Button>
|
|
</form>
|
|
</Form_Shadcn_>
|
|
)
|
|
}
|
|
|
|
export default MultiSelectZod
|