mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 07:39:07 +03:00
Jonathan Summers-Muir
9b8cc37a34
* init deletion * Update package-lock.json * remove shadcn stories * update TS errors * Update package-lock.json
284 lines
9.6 KiB
TypeScript
284 lines
9.6 KiB
TypeScript
// import { zodResolver } from '@hookform/resolvers/zod'
|
|
// import { StoryContext, StoryObj } from '@storybook/react'
|
|
// import { useForm } from 'react-hook-form'
|
|
// import {
|
|
// Button,
|
|
// FormControl_Shadcn_,
|
|
// FormField_Shadcn_,
|
|
// FormItem_Shadcn_,
|
|
// Form_Shadcn_,
|
|
// PopoverContent_Shadcn_,
|
|
// PopoverTrigger_Shadcn_,
|
|
// Popover_Shadcn_,
|
|
// SelectContent_Shadcn_,
|
|
// SelectItem_Shadcn_,
|
|
// SelectTrigger_Shadcn_,
|
|
// SelectValue_Shadcn_,
|
|
// Select_Shadcn_,
|
|
// Calendar,
|
|
// cn,
|
|
// } from 'ui'
|
|
// import { z } from 'zod'
|
|
// import { transformSourceForm } from '../../lib/transformSource'
|
|
// import { FormItemLayout } from './FormItemLayout'
|
|
// import { Input } from '../../DataInputs/Input'
|
|
// import { Calendar as CalendarIcon } from 'lucide-react'
|
|
// import { format } from 'date-fns'
|
|
|
|
// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
|
// export default {
|
|
// title: 'Form/FormItemLayout',
|
|
// component: FormItemLayout,
|
|
// decorators: [
|
|
// (Story: any) => {
|
|
// return <Story />
|
|
// },
|
|
// ],
|
|
// parameters: {
|
|
// // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
|
// layout: 'centered',
|
|
// docs: {
|
|
// // controls: { exclude: ['style'] },
|
|
// source: {
|
|
// language: 'tsx',
|
|
// transform: (code: string, StoryContext: StoryContext) =>
|
|
// transformSourceForm(code, StoryContext).replace('_c', 'FormInput'),
|
|
// },
|
|
// },
|
|
// },
|
|
// // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
// tags: ['autodocs'],
|
|
// // More on argTypes: https://storybook.js.org/docs/api/argtypes
|
|
// // argTypes: {},
|
|
// }
|
|
|
|
// type Story = StoryObj<typeof FormItemLayout>
|
|
|
|
// export const Primary: Story = {
|
|
// render: function Render(args) {
|
|
// const formSchema = z.object({
|
|
// username: z.string().min(2, {
|
|
// message: 'Username must be at least 2 characters.',
|
|
// }),
|
|
// })
|
|
|
|
// // 1. Define your form.
|
|
// const form = useForm<z.infer<typeof formSchema>>({
|
|
// resolver: zodResolver(formSchema),
|
|
// defaultValues: {
|
|
// username: '',
|
|
// },
|
|
// })
|
|
|
|
// // 2. Define a submit handler.
|
|
// function onSubmit(values: z.infer<typeof formSchema>) {
|
|
// // Do something with the form values.
|
|
// // ✅ This will be type-safe and validated.
|
|
// console.log(values)
|
|
// // action('form form.handleSubmit(onSubmit)')(values)
|
|
// }
|
|
// return (
|
|
// <Form_Shadcn_ {...form}>
|
|
// <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
|
|
// <FormField_Shadcn_
|
|
// name="username"
|
|
// control={form.control}
|
|
// render={({ field }) => (
|
|
// <FormItemLayout {...args}>
|
|
// <FormControl_Shadcn_>
|
|
// <Input placeholder="mildtomato" {...field} />
|
|
// </FormControl_Shadcn_>
|
|
// </FormItemLayout>
|
|
// )}
|
|
// />
|
|
// <Button size="small" type="primary" htmlType="submit">
|
|
// Submit
|
|
// </Button>
|
|
// </form>
|
|
// </Form_Shadcn_>
|
|
// )
|
|
// },
|
|
// args: {
|
|
// label: 'Username',
|
|
// description: 'this is the description',
|
|
// labelOptional: 'optional',
|
|
// },
|
|
// }
|
|
|
|
// export const withSelect: Story = {
|
|
// render: function Render(args) {
|
|
// const FormSchema = z.object({
|
|
// email: z
|
|
// .string({
|
|
// required_error: 'Please select an email to display.',
|
|
// })
|
|
// .email(),
|
|
// })
|
|
|
|
// const form = useForm<z.infer<typeof FormSchema>>({
|
|
// resolver: zodResolver(FormSchema),
|
|
// })
|
|
|
|
// // 2. Define a submit handler.
|
|
// function onSubmit(values: z.infer<typeof FormSchema>) {
|
|
// // Do something with the form values.
|
|
// // ✅ This will be type-safe and validated.
|
|
// console.log(values)
|
|
// // action('form form.handleSubmit(onSubmit)')(values)
|
|
// }
|
|
|
|
// return (
|
|
// <Form_Shadcn_ {...form}>
|
|
// <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
|
|
// <FormField_Shadcn_
|
|
// name="email"
|
|
// control={form.control}
|
|
// render={({ field }) => (
|
|
// <FormItemLayout {...args}>
|
|
// <Select_Shadcn_ onValueChange={field.onChange} defaultValue={field.value}>
|
|
// <FormControl_Shadcn_>
|
|
// <SelectTrigger_Shadcn_>
|
|
// <SelectValue_Shadcn_ placeholder="Select a verified email to display" />
|
|
// </SelectTrigger_Shadcn_>
|
|
// </FormControl_Shadcn_>
|
|
// <SelectContent_Shadcn_>
|
|
// <SelectItem_Shadcn_ value="m@example.com">m@example.com</SelectItem_Shadcn_>
|
|
// <SelectItem_Shadcn_ value="m@google.com">m@google.com</SelectItem_Shadcn_>
|
|
// <SelectItem_Shadcn_ value="m@support.com">m@support.com</SelectItem_Shadcn_>
|
|
// </SelectContent_Shadcn_>
|
|
// </Select_Shadcn_>
|
|
// </FormItemLayout>
|
|
// )}
|
|
// />
|
|
// <Button size="small" type="primary" htmlType="submit">
|
|
// Submit
|
|
// </Button>
|
|
// </form>
|
|
// </Form_Shadcn_>
|
|
// )
|
|
// },
|
|
// args: {
|
|
// label: 'Username',
|
|
// description: 'this is the description',
|
|
// labelOptional: 'optional',
|
|
// },
|
|
// }
|
|
|
|
// export const withLayoutChange: Story = {
|
|
// render: function Render(args) {
|
|
// const formSchema = z.object({
|
|
// username: z.string().min(2, {
|
|
// message: 'Username must be at least 2 characters.',
|
|
// }),
|
|
// })
|
|
|
|
// // 1. Define your form.
|
|
// const form = useForm<z.infer<typeof formSchema>>({
|
|
// resolver: zodResolver(formSchema),
|
|
// defaultValues: {
|
|
// username: '',
|
|
// },
|
|
// })
|
|
|
|
// // 2. Define a submit handler.
|
|
// function onSubmit(values: z.infer<typeof formSchema>) {
|
|
// // Do something with the form values.
|
|
// // ✅ This will be type-safe and validated.
|
|
// console.log(values)
|
|
// // action('form form.handleSubmit(onSubmit)')(values)
|
|
// }
|
|
// return (
|
|
// <Form_Shadcn_ {...form}>
|
|
// <form className="w-[520px] flex flex-col gap-8" onSubmit={form.handleSubmit(onSubmit)}>
|
|
// <FormField_Shadcn_
|
|
// name="username"
|
|
// control={form.control}
|
|
// render={({ field }) => (
|
|
// <FormItemLayout {...args}>
|
|
// <FormControl_Shadcn_>
|
|
// <Input placeholder="mildtomato" {...field} />
|
|
// </FormControl_Shadcn_>
|
|
// </FormItemLayout>
|
|
// )}
|
|
// />
|
|
// <Button size="small" type="primary" htmlType="submit">
|
|
// Submit
|
|
// </Button>
|
|
// </form>
|
|
// </Form_Shadcn_>
|
|
// )
|
|
// },
|
|
// args: {
|
|
// layout: 'horizontal',
|
|
// label: 'Username',
|
|
// description: 'this is the description',
|
|
// labelOptional: 'optional',
|
|
// },
|
|
// }
|
|
|
|
// export const withCalendar: Story = {
|
|
// render: function Render(args) {
|
|
// const FormSchema = z.object({
|
|
// dob: z.date({
|
|
// required_error: 'A date of birth is required.',
|
|
// }),
|
|
// })
|
|
|
|
// const form = useForm<z.infer<typeof FormSchema>>({
|
|
// resolver: zodResolver(FormSchema),
|
|
// })
|
|
// // 2. Define a submit handler.
|
|
// function onSubmit(values: z.infer<typeof FormSchema>) {
|
|
// // Do something with the form values.
|
|
// // ✅ This will be type-safe and validated.
|
|
// console.log(values)
|
|
// // action('form form.handleSubmit(onSubmit)')(values)
|
|
// }
|
|
// return (
|
|
// <Form_Shadcn_ {...form}>
|
|
// <form className="w-[280px] flex flex-col gap-8" onSubmit={form.handleSubmit(onSubmit)}>
|
|
// <FormField_Shadcn_
|
|
// name="dob"
|
|
// control={form.control}
|
|
// render={({ field }) => (
|
|
// <FormItemLayout {...args}>
|
|
// <Popover_Shadcn_>
|
|
// <PopoverTrigger_Shadcn_ asChild>
|
|
// <FormControl_Shadcn_>
|
|
// <Button
|
|
// icon={<CalendarIcon className="text-foreground-muted" size={16} />}
|
|
// type={'default'}
|
|
// className={cn(!field.value && 'text-muted-foreground', 'justify-start')}
|
|
// >
|
|
// {field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
|
|
// </Button>
|
|
// </FormControl_Shadcn_>
|
|
// </PopoverTrigger_Shadcn_>
|
|
// <PopoverContent_Shadcn_ className="w-auto p-0" align="start">
|
|
// <Calendar
|
|
// mode="single"
|
|
// selected={field.value}
|
|
// onSelect={field.onChange}
|
|
// disabled={(date) => date > new Date() || date < new Date('1900-01-01')}
|
|
// initialFocus
|
|
// />
|
|
// </PopoverContent_Shadcn_>
|
|
// </Popover_Shadcn_>
|
|
// </FormItemLayout>
|
|
// )}
|
|
// />
|
|
// <Button size="small" type="primary" htmlType="submit">
|
|
// Submit
|
|
// </Button>
|
|
// </form>
|
|
// </Form_Shadcn_>
|
|
// )
|
|
// },
|
|
// args: {
|
|
// layout: 'vertical',
|
|
// label: 'Date of birth',
|
|
// description: 'Your date of birth is used to calculate your age.',
|
|
// labelOptional: 'optional',
|
|
// },
|
|
// }
|