PublicArchive/supabase
2
0
Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-05-06 08:56:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove UI form components _Shadcn_ suffix (#45212)

Browse Source 
## Problem

We used to have a `_Shadcn_` suffix for all the shadcn form components
because we also had `formik` form components.
This is not needed anymore.

## Solution

- Remove the suffix
- Update all usages
This commit is contained in:
Gildas Garcia
2026-04-24 12:14:15 +02:00
committed by GitHub
parent 9d2807e19b
commit 0facd341a6
245 changed files with 2954 additions and 3142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/skills/studio-ui-patterns/SKILL.md
+1 -1
View File
@@ -34,7 +34,7 @@ Docs: `apps/design-system/content/docs/ui-patterns/forms.mdx`
- Use `react-hook-form` + `zod`
- Use `FormItemLayout` instead of manually composing `FormItem`/`FormLabel`/`FormMessage`/`FormDescription`
- Wrap inputs with `FormControl_Shadcn_`; use `_Shadcn_` imports from `ui` for primitives
- Wrap inputs with `FormControl`; use `_Shadcn_` imports from `ui` for primitives
Layout selection:
apps/design-system/content/docs/components/switch.mdx
+3 -3
View File
@@ -66,13 +66,13 @@ When using Switch in custom flex layouts (especially with height constraints lik
```tsx
<div className="relative">
<FormField_Shadcn_
<FormField
control={form.control}
name="enabled"
render={({ field }) => (
<FormControl_Shadcn_>
<FormControl>
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl_Shadcn_>
</FormControl>
)}
/>
</div>
apps/design-system/content/docs/fragments/form-item-layout.mdx
+10 -10
View File
@@ -21,27 +21,27 @@ The styling and layout of these components can be customized by passing in the c
The components that can be replaced in `react-hook-form` atoms are highlighted below:
```tsx showLineNumbers {1-2,6-8}
<FormItem_Shadcn_>
<FormLabel_Shadcn_>Username</FormLabel_Shadcn_>
<FormControl_Shadcn_>
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="shadcn" {...field} />
</FormControl_Shadcn_>
<FormDescription_Shadcn_>This is your public display name.</FormDescription_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormDescription>This is your public display name.</FormDescription>
<FormMessage />
</FormItem>
```
Using `FormItemLayout` it can look like this:
```tsx
<FormItemLayout label="Username" description="This is your public display name">
<FormControl_Shadcn_>
<FormControl>
<Input placeholder="mildtomato" {...field} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
```
Please note that you must still use `FormControl_Shadcn_` to wrap input fields.
Please note that you must still use `FormControl` to wrap input fields.
## Examples
apps/design-system/content/docs/ui-patterns/forms.mdx
+1 -1
View File
@@ -51,7 +51,7 @@ Build a custom row when the cells are mixed controls, such as an input paired wi
- Use `layout="horizontal"` for side panels with more width
- Use `layout="vertical"` for side panels with limited width
3. **Wrap inputs in FormControl*Shadcn***: Always wrap form inputs with `FormControl_Shadcn_` to ensure proper form integration.
3. **Wrap inputs in FormControl*Shadcn***: Always wrap form inputs with `FormControl` to ensure proper form integration.
4. **Use Cards for grouping**: Wrap form sections in `Card` components with `CardContent` and `CardFooter` for actions.
apps/design-system/registry/default/example/calendar-form.tsx
+17 -19
View File
@@ -8,13 +8,13 @@ import { toast } from 'sonner'
import {
Button,
Calendar,
Form_Shadcn_,
FormControl_Shadcn_,
FormDescription_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
Popover_Shadcn_,
PopoverContent_Shadcn_,
PopoverTrigger_Shadcn_,
@@ -45,17 +45,17 @@ export default function CalendarForm() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField_Shadcn_
<FormField
control={form.control}
name="dob"
render={({ field }) => (
<FormItem_Shadcn_ className="flex flex-col">
<FormLabel_Shadcn_>Date of birth</FormLabel_Shadcn_>
<FormItem className="flex flex-col">
<FormLabel>Date of birth</FormLabel>
<Popover_Shadcn_>
<PopoverTrigger_Shadcn_ asChild>
<FormControl_Shadcn_>
<FormControl>
<Button
type={'default'}
size="small"
@@ -67,7 +67,7 @@ export default function CalendarForm() {
>
{field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
</Button>
</FormControl_Shadcn_>
</FormControl>
</PopoverTrigger_Shadcn_>
<PopoverContent_Shadcn_ className="w-auto p-0" align="start" side="right">
<Calendar
@@ -79,15 +79,13 @@ export default function CalendarForm() {
/>
</PopoverContent_Shadcn_>
</Popover_Shadcn_>
<FormDescription_Shadcn_>
Your date of birth is used to calculate your age.
</FormDescription_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
<FormDescription>Your date of birth is used to calculate your age.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button htmlType="submit">Submit</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/calendar-react-hook-form.tsx
+17 -19
View File
@@ -8,13 +8,13 @@ import { toast } from 'sonner'
import {
Button,
Calendar,
Form_Shadcn_,
FormControl_Shadcn_,
FormDescription_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
Popover_Shadcn_,
PopoverContent_Shadcn_,
PopoverTrigger_Shadcn_,
@@ -45,17 +45,17 @@ export default function CalendarForm() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField_Shadcn_
<FormField
control={form.control}
name="dob"
render={({ field }) => (
<FormItem_Shadcn_ className="flex flex-col">
<FormLabel_Shadcn_>Date of birth</FormLabel_Shadcn_>
<FormItem className="flex flex-col">
<FormLabel>Date of birth</FormLabel>
<Popover_Shadcn_>
<PopoverTrigger_Shadcn_ asChild>
<FormControl_Shadcn_>
<FormControl>
<Button
type={'outline'}
className={cn(
@@ -66,7 +66,7 @@ export default function CalendarForm() {
{field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button>
</FormControl_Shadcn_>
</FormControl>
</PopoverTrigger_Shadcn_>
<PopoverContent_Shadcn_ className="w-auto p-0" align="start">
<Calendar
@@ -78,15 +78,13 @@ export default function CalendarForm() {
/>
</PopoverContent_Shadcn_>
</Popover_Shadcn_>
<FormDescription_Shadcn_>
Your date of birth is used to calculate your age.
</FormDescription_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
<FormDescription>Your date of birth is used to calculate your age.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button htmlType="submit">Submit</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/checkbox-form-multiple.tsx
+22 -22
View File
@@ -6,13 +6,13 @@ import { toast } from 'sonner'
import {
Button,
Checkbox_Shadcn_,
Form_Shadcn_,
FormControl_Shadcn_,
FormDescription_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from 'ui'
import { z } from 'zod'
@@ -68,31 +68,31 @@ export default function CheckboxReactHookFormMultiple() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField_Shadcn_
<FormField
control={form.control}
name="items"
render={() => (
<FormItem_Shadcn_>
<FormItem>
<div className="mb-4">
<FormLabel_Shadcn_ className="text-base">Sidebar</FormLabel_Shadcn_>
<FormDescription_Shadcn_>
<FormLabel className="text-base">Sidebar</FormLabel>
<FormDescription>
Select the items you want to display in the sidebar.
</FormDescription_Shadcn_>
</FormDescription>
</div>
{items.map((item) => (
<FormField_Shadcn_
<FormField
key={item.id}
control={form.control}
name="items"
render={({ field }) => {
return (
<FormItem_Shadcn_
<FormItem
key={item.id}
className="flex flex-row items-start space-x-3 space-y-0"
>
<FormControl_Shadcn_>
<FormControl>
<Checkbox_Shadcn_
checked={field.value?.includes(item.id)}
onCheckedChange={(checked) => {
@@ -101,19 +101,19 @@ export default function CheckboxReactHookFormMultiple() {
: field.onChange(field.value?.filter((value) => value !== item.id))
}}
/>
</FormControl_Shadcn_>
<FormLabel_Shadcn_ className="font-normal">{item.label}</FormLabel_Shadcn_>
</FormItem_Shadcn_>
</FormControl>
<FormLabel className="font-normal">{item.label}</FormLabel>
</FormItem>
)
}}
/>
))}
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
<FormMessage />
</FormItem>
)}
/>
<Button htmlType="submit">Submit</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/checkbox-form-single.tsx
+16 -16
View File
@@ -7,12 +7,12 @@ import { toast } from 'sonner'
import {
Button,
Checkbox_Shadcn_,
Form_Shadcn_,
FormControl_Shadcn_,
FormDescription_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
} from 'ui'
import { z } from 'zod'
@@ -39,28 +39,28 @@ export default function CheckboxReactHookFormSingle() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField_Shadcn_
<FormField
control={form.control}
name="mobile"
render={({ field }) => (
<FormItem_Shadcn_ className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
<FormControl_Shadcn_>
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
<FormControl>
<Checkbox_Shadcn_ checked={field.value} onCheckedChange={field.onChange} />
</FormControl_Shadcn_>
</FormControl>
<div className="space-y-1 leading-none">
<FormLabel_Shadcn_>Use different settings for my mobile devices</FormLabel_Shadcn_>
<FormDescription_Shadcn_>
<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_Shadcn_>
</FormDescription>
</div>
</FormItem_Shadcn_>
</FormItem>
)}
/>
<Button htmlType="submit">Submit</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/combobox-form.tsx
+18 -18
View File
@@ -12,13 +12,13 @@ import {
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Form_Shadcn_,
FormControl_Shadcn_,
FormDescription_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
Popover_Shadcn_,
PopoverContent_Shadcn_,
PopoverTrigger_Shadcn_,
@@ -61,17 +61,17 @@ export default function ComboboxForm() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField_Shadcn_
<FormField
control={form.control}
name="language"
render={({ field }) => (
<FormItem_Shadcn_ className="flex flex-col">
<FormLabel_Shadcn_>Language</FormLabel_Shadcn_>
<FormItem className="flex flex-col">
<FormLabel>Language</FormLabel>
<Popover_Shadcn_>
<PopoverTrigger_Shadcn_ asChild>
<FormControl_Shadcn_>
<FormControl>
<Button
type="default"
role="combobox"
@@ -91,7 +91,7 @@ export default function ComboboxForm() {
? languages.find((language) => language.value === field.value)?.label
: 'Select language'}
</Button>
</FormControl_Shadcn_>
</FormControl>
</PopoverTrigger_Shadcn_>
<PopoverContent_Shadcn_ className="w-[200px] p-0">
<Command_Shadcn_>
@@ -121,17 +121,17 @@ export default function ComboboxForm() {
</Command_Shadcn_>
</PopoverContent_Shadcn_>
</Popover_Shadcn_>
<FormDescription_Shadcn_>
<FormDescription>
This is the language that will be used in the dashboard.
</FormDescription_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button htmlType="submit" type="secondary" size="small">
Submit
</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/confirmation-modal-demo.tsx
+8 -8
View File
@@ -2,9 +2,9 @@ import { useState } from 'react'
import { useForm } from 'react-hook-form'
import {
Button,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Select_Shadcn_,
SelectContent_Shadcn_,
SelectItem_Shadcn_,
@@ -46,13 +46,13 @@ export default function ConfirmationModalDemo() {
</p>
{/* Dropdown for Postgres version */}
<div className="pt-4">
<Form_Shadcn_ {...form}>
<FormField_Shadcn_
<Form {...form}>
<FormField
control={form.control}
name="postgresVersion"
render={({ field }) => (
<FormItemLayout layout="vertical" label="Postgres version">
<FormControl_Shadcn_>
<FormControl>
<Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
<SelectTrigger_Shadcn_>
<SelectValue_Shadcn_ />
@@ -62,11 +62,11 @@ export default function ConfirmationModalDemo() {
<SelectItem_Shadcn_ value="17.6.1.055">17.6.1.055</SelectItem_Shadcn_>
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</Form_Shadcn_>
</Form>
</div>
</div>
</ConfirmationModal>
apps/design-system/registry/default/example/date-picker-form.tsx
+17 -19
View File
@@ -8,13 +8,13 @@ import { toast } from 'sonner'
import {
Button,
Calendar,
Form_Shadcn_,
FormControl_Shadcn_,
FormDescription_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
Popover_Shadcn_,
PopoverContent_Shadcn_,
PopoverTrigger_Shadcn_,
@@ -45,17 +45,17 @@ export default function DatePickerForm() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField_Shadcn_
<FormField
control={form.control}
name="dob"
render={({ field }) => (
<FormItem_Shadcn_ className="flex flex-col">
<FormLabel_Shadcn_>Date of birth</FormLabel_Shadcn_>
<FormItem className="flex flex-col">
<FormLabel>Date of birth</FormLabel>
<Popover_Shadcn_>
<PopoverTrigger_Shadcn_ asChild>
<FormControl_Shadcn_>
<FormControl>
<Button
type={'outline'}
className={cn(
@@ -66,7 +66,7 @@ export default function DatePickerForm() {
>
{field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
</Button>
</FormControl_Shadcn_>
</FormControl>
</PopoverTrigger_Shadcn_>
<PopoverContent_Shadcn_ className="w-auto p-0" align="start">
<Calendar
@@ -78,15 +78,13 @@ export default function DatePickerForm() {
/>
</PopoverContent_Shadcn_>
</Popover_Shadcn_>
<FormDescription_Shadcn_>
Your date of birth is used to calculate your age.
</FormDescription_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
<FormDescription>Your date of birth is used to calculate your age.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button htmlType="submit">Submit</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/form-item-layout-after-label.tsx
+6 -6
View File
@@ -1,6 +1,6 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
import { Button, Form, FormControl, FormField, Switch } from 'ui'
import { Input } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { InfoTooltip } from 'ui-patterns/info-tooltip'
@@ -24,9 +24,9 @@ export default function FormItemLayoutDemo() {
// action('form form.handleSubmit(onSubmit)')(values)
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
<FormField_Shadcn_
<FormField
control={form.control}
name="functionName"
render={({ field }) => (
@@ -36,9 +36,9 @@ export default function FormItemLayoutDemo() {
labelOptional="Optional"
afterLabel={<InfoTooltip side="top">Added after the label</InfoTooltip>}
>
<FormControl_Shadcn_>
<FormControl>
<Input placeholder="Name of function" {...field} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -46,6 +46,6 @@ export default function FormItemLayoutDemo() {
Submit
</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/form-item-layout-before-label.tsx
+6 -6
View File
@@ -1,6 +1,6 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
import { Button, Form, FormControl, FormField, Switch } from 'ui'
import { Input } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { InfoTooltip } from 'ui-patterns/info-tooltip'
@@ -24,9 +24,9 @@ export default function FormItemLayoutDemo() {
// action('form form.handleSubmit(onSubmit)')(values)
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
<FormField_Shadcn_
<FormField
control={form.control}
name="functionName"
render={({ field }) => (
@@ -36,9 +36,9 @@ export default function FormItemLayoutDemo() {
labelOptional="Optional"
beforeLabel={<InfoTooltip side="top">Added before the label</InfoTooltip>}
>
<FormControl_Shadcn_>
<FormControl>
<Input placeholder="Name of function" {...field} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -46,6 +46,6 @@ export default function FormItemLayoutDemo() {
Submit
</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/form-item-layout-demo.tsx
+6 -6
View File
@@ -1,6 +1,6 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
import { Button, Form, FormControl, FormField } from 'ui'
import { Input } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { z } from 'zod'
@@ -28,9 +28,9 @@ export default function FormItemLayoutDemo() {
// action('form form.handleSubmit(onSubmit)')(values)
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
<FormField_Shadcn_
<FormField
name="username"
control={form.control}
render={({ field }) => (
@@ -39,9 +39,9 @@ export default function FormItemLayoutDemo() {
description="This is your public display name"
labelOptional="optional"
>
<FormControl_Shadcn_>
<FormControl>
<Input placeholder="mildtomato" {...field} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -49,6 +49,6 @@ export default function FormItemLayoutDemo() {
Submit
</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/form-item-layout-with-checkbox-list.tsx
+7 -7
View File
@@ -1,6 +1,6 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { Button, Checkbox_Shadcn_, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
import { Button, Checkbox_Shadcn_, Form, FormControl, FormField } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { z } from 'zod'
@@ -51,9 +51,9 @@ export default function FormItemLayoutDemo() {
// action('form form.handleSubmit(onSubmit)')(values)
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
<FormField_Shadcn_
<FormField
control={form.control}
name="items"
render={() => (
@@ -63,7 +63,7 @@ export default function FormItemLayoutDemo() {
layout="horizontal"
>
{items.map((item) => (
<FormField_Shadcn_
<FormField
key={item.id}
control={form.control}
name="items"
@@ -76,7 +76,7 @@ export default function FormItemLayoutDemo() {
layout="flex"
hideMessage
>
<FormControl_Shadcn_>
<FormControl>
<Checkbox_Shadcn_
checked={field.value?.includes(item.id)}
onCheckedChange={(checked) => {
@@ -85,7 +85,7 @@ export default function FormItemLayoutDemo() {
: field.onChange(field.value?.filter((value) => value !== item.id))
}}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)
}}
@@ -99,6 +99,6 @@ export default function FormItemLayoutDemo() {
Submit
</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx
+6 -13
View File
@@ -1,13 +1,6 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import {
Badge,
Button,
Checkbox_Shadcn_,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
} from 'ui'
import { Badge, Button, Checkbox_Shadcn_, Form, FormControl, FormField } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { z } from 'zod'
@@ -29,9 +22,9 @@ export default function FormItemLayoutDemo() {
// action('form form.handleSubmit(onSubmit)')(values)
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
<FormField_Shadcn_
<FormField
control={form.control}
name="consistent_settings"
render={({ field }) => (
@@ -40,9 +33,9 @@ export default function FormItemLayoutDemo() {
description="This is your public display name."
layout="flex"
>
<FormControl_Shadcn_>
<FormControl>
<Checkbox_Shadcn_ checked={field.value} onCheckedChange={field.onChange} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -50,6 +43,6 @@ export default function FormItemLayoutDemo() {
Submit
</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx
+6 -6
View File
@@ -1,6 +1,6 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Separator } from 'ui'
import { Button, Form, FormControl, FormField, Separator } from 'ui'
import { Input } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { z } from 'zod'
@@ -28,9 +28,9 @@ export default function FormItemLayoutDemo() {
// action('form form.handleSubmit(onSubmit)')(values)
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form className="w-[520px] flex flex-col gap-8" onSubmit={form.handleSubmit(onSubmit)}>
<FormField_Shadcn_
<FormField
name="username"
control={form.control}
render={({ field }) => (
@@ -40,9 +40,9 @@ export default function FormItemLayoutDemo() {
description="This is your public display name"
labelOptional="optional"
>
<FormControl_Shadcn_>
<FormControl>
<Input placeholder="mildtomato" {...field} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -53,6 +53,6 @@ export default function FormItemLayoutDemo() {
</Button>
</div>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/form-item-layout-with-select.tsx
+8 -8
View File
@@ -2,9 +2,9 @@ import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import {
Button,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Select_Shadcn_,
SelectContent_Shadcn_,
SelectItem_Shadcn_,
@@ -36,9 +36,9 @@ export default function FormItemLayoutDemo() {
// action('form form.handleSubmit(onSubmit)')(values)
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
<FormField_Shadcn_
<FormField
name="email"
control={form.control}
render={({ field }) => (
@@ -48,11 +48,11 @@ export default function FormItemLayoutDemo() {
labelOptional="Optional"
>
<Select_Shadcn_ onValueChange={field.onChange} defaultValue={field.value}>
<FormControl_Shadcn_>
<FormControl>
<SelectTrigger_Shadcn_>
<SelectValue_Shadcn_ placeholder="Select a verified email to display" />
</SelectTrigger_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
<SelectContent_Shadcn_>
<SelectItem_Shadcn_ value="m@example.com">m@example.com</SelectItem_Shadcn_>
<SelectItem_Shadcn_ value="m@google.com">m@google.com</SelectItem_Shadcn_>
@@ -66,6 +66,6 @@ export default function FormItemLayoutDemo() {
Submit
</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/form-item-layout-with-switch.tsx
+6 -6
View File
@@ -1,6 +1,6 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
import { Button, Form, FormControl, FormField, Switch } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { z } from 'zod'
@@ -22,9 +22,9 @@ export default function FormItemLayoutDemo() {
// action('form form.handleSubmit(onSubmit)')(values)
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
<FormField_Shadcn_
<FormField
control={form.control}
name="switch_option"
render={({ field }) => (
@@ -34,9 +34,9 @@ export default function FormItemLayoutDemo() {
description="This is an explanation."
layout="flex"
>
<FormControl_Shadcn_>
<FormControl>
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -44,6 +44,6 @@ export default function FormItemLayoutDemo() {
Submit
</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/form-patterns-pagelayout.tsx
+56 -56
View File
@@ -10,9 +10,9 @@ import {
CardContent,
CardFooter,
Checkbox_Shadcn_,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
FormInputGroupInput,
FormInputGroupTextArea,
Input_Shadcn_,
@@ -133,12 +133,12 @@ export default function FormPatternsPageLayout() {
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<Card>
{/* Text Input */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="name"
render={({ field }) => (
@@ -147,9 +147,9 @@ export default function FormPatternsPageLayout() {
label="Text Input"
description="Single-line text entry for short values"
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="Enter text" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -157,7 +157,7 @@ export default function FormPatternsPageLayout() {
{/* Password Input */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="password"
render={({ field }) => (
@@ -166,9 +166,9 @@ export default function FormPatternsPageLayout() {
label="Password Input"
description="Masked input for secure text entry"
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} type="password" placeholder="Enter password" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -176,7 +176,7 @@ export default function FormPatternsPageLayout() {
{/* Copyable Input */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="apiKey"
render={() => (
@@ -185,7 +185,7 @@ export default function FormPatternsPageLayout() {
label="Copyable Input"
description="Read-only input with copy-to-clipboard functionality"
>
<FormControl_Shadcn_>
<FormControl>
<Input
copy
readOnly
@@ -193,7 +193,7 @@ export default function FormPatternsPageLayout() {
onChange={() => {}}
onCopy={() => console.log('Copied to clipboard')}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -201,7 +201,7 @@ export default function FormPatternsPageLayout() {
{/* Number Input */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="maxConnections"
render={({ field }) => (
@@ -210,7 +210,7 @@ export default function FormPatternsPageLayout() {
label="Number Input"
description="Numeric input with min/max validation"
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
type="number"
@@ -218,7 +218,7 @@ export default function FormPatternsPageLayout() {
max={1000}
onChange={(e) => field.onChange(Number(e.target.value))}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -226,7 +226,7 @@ export default function FormPatternsPageLayout() {
{/* Input with Units */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="duration"
render={({ field }) => (
@@ -235,7 +235,7 @@ export default function FormPatternsPageLayout() {
label="Input with Units"
description="Input with additional unit label"
>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
{...field}
@@ -248,7 +248,7 @@ export default function FormPatternsPageLayout() {
<InputGroupText className="font-mono">MB</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -256,7 +256,7 @@ export default function FormPatternsPageLayout() {
{/* Textarea */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="description"
render={({ field }) => (
@@ -265,14 +265,14 @@ export default function FormPatternsPageLayout() {
label="Textarea"
description="Multi-line text input for longer content"
>
<FormControl_Shadcn_>
<FormControl>
<Textarea
{...field}
rows={4}
placeholder="Enter multi-line text"
className="resize-none"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -280,7 +280,7 @@ export default function FormPatternsPageLayout() {
{/* Textarea with addon */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="description"
render={({ field }) => (
@@ -289,7 +289,7 @@ export default function FormPatternsPageLayout() {
label="Textarea"
description="Multi-line text input for longer content with addon"
>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupTextArea
{...field}
@@ -301,7 +301,7 @@ export default function FormPatternsPageLayout() {
<InputGroupText>120 characters left</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -309,7 +309,7 @@ export default function FormPatternsPageLayout() {
{/* Icon Upload */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="description"
render={() => (
@@ -318,7 +318,7 @@ export default function FormPatternsPageLayout() {
label="Icon upload"
description="For icons, avatars, or small images with preview"
>
<FormControl_Shadcn_>
<FormControl>
<div className="flex gap-4 items-center">
<button
type="button"
@@ -367,7 +367,7 @@ export default function FormPatternsPageLayout() {
}}
/>
</div>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -375,7 +375,7 @@ export default function FormPatternsPageLayout() {
{/* File Upload */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="description"
render={() => (
@@ -384,7 +384,7 @@ export default function FormPatternsPageLayout() {
label="File Upload"
description="Drag-and-drop or select files for upload"
>
<FormControl_Shadcn_>
<FormControl>
<div
className={`border-2 rounded-lg p-6 text-center bg-muted transition-colors duration-300 ${
isDragging
@@ -460,7 +460,7 @@ export default function FormPatternsPageLayout() {
)}
</div>
</div>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -468,7 +468,7 @@ export default function FormPatternsPageLayout() {
{/* Switch */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="enableFeature"
render={({ field }) => (
@@ -477,9 +477,9 @@ export default function FormPatternsPageLayout() {
label="Switch"
description="Toggle for boolean on/off states"
>
<FormControl_Shadcn_>
<FormControl>
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -493,18 +493,18 @@ export default function FormPatternsPageLayout() {
description="Boolean values or multiple selections"
>
<div className="w-full flex flex-col gap-4">
<FormField_Shadcn_
<FormField
control={form.control}
name="enableRls"
render={({ field }) => (
<div className="flex items-center w-full justify-start space-x-2">
<FormControl_Shadcn_>
<FormControl>
<Checkbox_Shadcn_
id="enable-rls"
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl_Shadcn_>
</FormControl>
<label
htmlFor="enable-rls"
className="text-sm text-foreground-light leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
@@ -514,18 +514,18 @@ export default function FormPatternsPageLayout() {
</div>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="enableNotifications"
render={({ field }) => (
<div className="flex items-center w-full justify-start space-x-2">
<FormControl_Shadcn_>
<FormControl>
<Checkbox_Shadcn_
id="enable-notifications"
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl_Shadcn_>
</FormControl>
<label
htmlFor="enable-notifications"
className="text-sm text-foreground-light leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
@@ -535,18 +535,18 @@ export default function FormPatternsPageLayout() {
</div>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="enableAnalytics"
render={({ field }) => (
<div className="flex items-center w-full justify-start space-x-2">
<FormControl_Shadcn_>
<FormControl>
<Checkbox_Shadcn_
id="enable-analytics"
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl_Shadcn_>
</FormControl>
<label
htmlFor="enable-analytics"
className="text-sm text-foreground-light leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
@@ -562,7 +562,7 @@ export default function FormPatternsPageLayout() {
{/* Select */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="region"
render={({ field }) => (
@@ -571,7 +571,7 @@ export default function FormPatternsPageLayout() {
label="Select (Dropdown)"
description="Single selection from a list of options"
>
<FormControl_Shadcn_>
<FormControl>
<Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
<SelectTrigger_Shadcn_>
<SelectValue_Shadcn_ placeholder="Select an option" />
@@ -588,7 +588,7 @@ export default function FormPatternsPageLayout() {
</SelectItem_Shadcn_>
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -596,7 +596,7 @@ export default function FormPatternsPageLayout() {
{/* Multi-Select */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="schemas"
render={({ field }) => (
@@ -633,7 +633,7 @@ export default function FormPatternsPageLayout() {
{/* Radio Group */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="queueType"
render={({ field }) => (
@@ -642,7 +642,7 @@ export default function FormPatternsPageLayout() {
label="Radio Group"
description="Single selection from multiple options"
>
<FormControl_Shadcn_>
<FormControl>
<RadioGroupStacked value={field.value} onValueChange={field.onChange}>
<RadioGroupStackedItem
value="basic"
@@ -655,7 +655,7 @@ export default function FormPatternsPageLayout() {
description="Second option description"
/>
</RadioGroupStacked>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -663,7 +663,7 @@ export default function FormPatternsPageLayout() {
{/* Date Picker */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="expiryDate"
render={({ field }) => (
@@ -672,7 +672,7 @@ export default function FormPatternsPageLayout() {
label="Date Picker"
description="Date selection with calendar popover"
>
<FormControl_Shadcn_>
<FormControl>
<Popover_Shadcn_>
<PopoverTrigger_Shadcn_ asChild>
<Button
@@ -692,7 +692,7 @@ export default function FormPatternsPageLayout() {
/>
</PopoverContent_Shadcn_>
</Popover_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -700,7 +700,7 @@ export default function FormPatternsPageLayout() {
{/* Field Array */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="redirectUris"
render={() => (
@@ -725,7 +725,7 @@ export default function FormPatternsPageLayout() {
{/* Key/Value Field Array */}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="httpHeaders"
render={() => (
@@ -783,7 +783,7 @@ export default function FormPatternsPageLayout() {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
</div>
apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
+51 -51
View File
@@ -7,9 +7,9 @@ import {
Button,
Calendar,
Checkbox_Shadcn_,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
FormInputGroupInput,
Input_Shadcn_,
InputGroup,
@@ -135,7 +135,7 @@ export default function FormPatternsSidePanel() {
<SheetHeader>
<SheetTitle>Create Configuration</SheetTitle>
</SheetHeader>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form
id={formId}
onSubmit={form.handleSubmit(onSubmit)}
@@ -143,7 +143,7 @@ export default function FormPatternsSidePanel() {
>
{/* Text Input */}
<SheetSection>
<FormField_Shadcn_
<FormField
control={form.control}
name="name"
render={({ field }) => (
@@ -152,9 +152,9 @@ export default function FormPatternsSidePanel() {
label="Text Input"
description="Single-line text entry for short values"
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<Input_Shadcn_ {...field} placeholder="Enter text" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -164,7 +164,7 @@ export default function FormPatternsSidePanel() {
{/* Password Input */}
<SheetSection>
<FormField_Shadcn_
<FormField
control={form.control}
name="password"
render={({ field }) => (
@@ -173,9 +173,9 @@ export default function FormPatternsSidePanel() {
label="Password Input"
description="Masked input for secure text entry"
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<Input_Shadcn_ {...field} type="password" placeholder="Enter password" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -185,7 +185,7 @@ export default function FormPatternsSidePanel() {
{/* Copyable Input */}
<SheetSection>
<FormField_Shadcn_
<FormField
control={form.control}
name="apiKey"
render={() => (
@@ -194,7 +194,7 @@ export default function FormPatternsSidePanel() {
label="Copyable Input"
description="Read-only input with copy-to-clipboard functionality"
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<Input
copy
readOnly
@@ -203,7 +203,7 @@ export default function FormPatternsSidePanel() {
onChange={() => {}}
onCopy={() => console.log('Copied to clipboard')}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -213,7 +213,7 @@ export default function FormPatternsSidePanel() {
{/* Number Input */}
<SheetSection>
<FormField_Shadcn_
<FormField
control={form.control}
name="maxConnections"
render={({ field }) => (
@@ -222,7 +222,7 @@ export default function FormPatternsSidePanel() {
label="Number Input"
description="Numeric input with min/max validation"
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<Input_Shadcn_
{...field}
type="number"
@@ -230,7 +230,7 @@ export default function FormPatternsSidePanel() {
max={1000}
onChange={(e) => field.onChange(Number(e.target.value))}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -240,7 +240,7 @@ export default function FormPatternsSidePanel() {
{/* Input with Units */}
<SheetSection>
<FormField_Shadcn_
<FormField
control={form.control}
name="duration"
render={({ field }) => (
@@ -249,14 +249,14 @@ export default function FormPatternsSidePanel() {
label="Input with Units"
description="Input with additional unit label"
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<InputGroup>
<FormInputGroupInput {...field} type="number" min={5} max={30} />
<InputGroupAddon align="inline-end">
<InputGroupText>MB</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -266,7 +266,7 @@ export default function FormPatternsSidePanel() {
{/* Textarea */}
<SheetSection>
<FormField_Shadcn_
<FormField
control={form.control}
name="description"
render={({ field }) => (
@@ -275,14 +275,14 @@ export default function FormPatternsSidePanel() {
label="Textarea"
description="Multi-line text input for longer content"
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<Textarea
{...field}
rows={3}
placeholder="Enter multi-line text"
className="resize-none"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -292,7 +292,7 @@ export default function FormPatternsSidePanel() {
{/* Icon Upload */}
<SheetSection>
<FormField_Shadcn_
<FormField
control={form.control}
name="description"
render={() => (
@@ -301,7 +301,7 @@ export default function FormPatternsSidePanel() {
label="Icon upload"
description="For icons, avatars, or small images with preview"
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<div className="flex gap-4 items-center">
<button
type="button"
@@ -350,7 +350,7 @@ export default function FormPatternsSidePanel() {
}}
/>
</div>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -360,7 +360,7 @@ export default function FormPatternsSidePanel() {
{/* File Upload */}
<SheetSection>
<FormField_Shadcn_
<FormField
control={form.control}
name="description"
render={() => (
@@ -369,7 +369,7 @@ export default function FormPatternsSidePanel() {
label="File Upload"
description="Drag-and-drop or select files for upload"
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<div
className={`border-2 rounded-lg p-6 text-center bg-muted transition-colors duration-300 ${
isDragging
@@ -443,7 +443,7 @@ export default function FormPatternsSidePanel() {
)}
</div>
</div>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -453,7 +453,7 @@ export default function FormPatternsSidePanel() {
{/* Switch */}
<SheetSection>
<FormField_Shadcn_
<FormField
control={form.control}
name="enableFeature"
render={({ field }) => (
@@ -462,9 +462,9 @@ export default function FormPatternsSidePanel() {
label="Switch"
description="Toggle for boolean on/off states"
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -478,18 +478,18 @@ export default function FormPatternsSidePanel() {
description="Boolean values or multiple selections"
>
<div className="col-span-6 w-full flex flex-col gap-4">
<FormField_Shadcn_
<FormField
control={form.control}
name="enableRls"
render={({ field }) => (
<div className="flex items-center w-full justify-start space-x-2">
<FormControl_Shadcn_>
<FormControl>
<Checkbox_Shadcn_
id="enable-rls"
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl_Shadcn_>
</FormControl>
<label
htmlFor="enable-rls"
className="text-sm text-foreground-light leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
@@ -499,18 +499,18 @@ export default function FormPatternsSidePanel() {
</div>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="enableNotifications"
render={({ field }) => (
<div className="flex items-center w-full justify-start space-x-2">
<FormControl_Shadcn_>
<FormControl>
<Checkbox_Shadcn_
id="enable-notifications"
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl_Shadcn_>
</FormControl>
<label
htmlFor="enable-notifications"
className="text-sm text-foreground-light leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
@@ -520,18 +520,18 @@ export default function FormPatternsSidePanel() {
</div>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="enableAnalytics"
render={({ field }) => (
<div className="flex items-center w-full justify-start space-x-2">
<FormControl_Shadcn_>
<FormControl>
<Checkbox_Shadcn_
id="enable-analytics"
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl_Shadcn_>
</FormControl>
<label
htmlFor="enable-analytics"
className="text-sm text-foreground-light leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
@@ -549,7 +549,7 @@ export default function FormPatternsSidePanel() {
{/* Select */}
<SheetSection>
<FormField_Shadcn_
<FormField
control={form.control}
name="region"
render={({ field }) => (
@@ -558,7 +558,7 @@ export default function FormPatternsSidePanel() {
label="Select (Dropdown)"
description="Single selection from a list of options"
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
<SelectTrigger_Shadcn_>
<SelectValue_Shadcn_ placeholder="Select an option" />
@@ -575,7 +575,7 @@ export default function FormPatternsSidePanel() {
</SelectItem_Shadcn_>
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -585,7 +585,7 @@ export default function FormPatternsSidePanel() {
{/* Multi-Select */}
<SheetSection>
<FormField_Shadcn_
<FormField
control={form.control}
name="schemas"
render={({ field }) => (
@@ -627,7 +627,7 @@ export default function FormPatternsSidePanel() {
{/* Radio Group */}
<SheetSection>
<FormField_Shadcn_
<FormField
control={form.control}
name="queueType"
render={({ field }) => (
@@ -659,7 +659,7 @@ export default function FormPatternsSidePanel() {
{/* Date Picker */}
<SheetSection>
<FormField_Shadcn_
<FormField
control={form.control}
name="expiryDate"
render={({ field }) => (
@@ -668,7 +668,7 @@ export default function FormPatternsSidePanel() {
label="Date Picker"
description="Date selection with calendar popover"
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<Popover_Shadcn_>
<PopoverTrigger_Shadcn_ asChild>
<Button
@@ -688,7 +688,7 @@ export default function FormPatternsSidePanel() {
/>
</PopoverContent_Shadcn_>
</Popover_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -698,7 +698,7 @@ export default function FormPatternsSidePanel() {
{/* Field Array */}
<SheetSection>
<FormField_Shadcn_
<FormField
control={form.control}
name="redirectUris"
render={() => (
@@ -727,7 +727,7 @@ export default function FormPatternsSidePanel() {
{/* Key/Value Field Array */}
<SheetSection>
<FormField_Shadcn_
<FormField
control={form.control}
name="httpHeaders"
render={() => (
@@ -778,7 +778,7 @@ export default function FormPatternsSidePanel() {
</FormItemLayout>
</SheetSection>
</form>
</Form_Shadcn_>
</Form>
<SheetFooter>
<Button
type="default"
apps/design-system/registry/default/example/input-form.tsx
+17 -17
View File
@@ -5,13 +5,13 @@ import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Form_Shadcn_,
FormControl_Shadcn_,
FormDescription_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
} from 'ui'
import { z } from 'zod'
@@ -41,26 +41,26 @@ export default function InputForm() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
<FormField_Shadcn_
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem_Shadcn_>
<FormLabel_Shadcn_>Username</FormLabel_Shadcn_>
<FormControl_Shadcn_>
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="shadcn" {...field} />
</FormControl_Shadcn_>
<FormDescription_Shadcn_>This is your public display name.</FormDescription_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormDescription>This is your public display name.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button htmlType="submit" type="secondary">
Submit
</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/input-otp-form.tsx
+18 -18
View File
@@ -5,13 +5,13 @@ import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Form_Shadcn_,
FormControl_Shadcn_,
FormDescription_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
InputOTP,
InputOTPGroup,
InputOTPSlot,
@@ -43,15 +43,15 @@ export default function InputOTPForm() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
<FormField_Shadcn_
<FormField
control={form.control}
name="pin"
render={({ field }) => (
<FormItem_Shadcn_>
<FormLabel_Shadcn_>One-Time Password</FormLabel_Shadcn_>
<FormControl_Shadcn_>
<FormItem>
<FormLabel>One-Time Password</FormLabel>
<FormControl>
<InputOTP maxLength={6} {...field}>
<InputOTPGroup>
<InputOTPSlot index={0} />
@@ -62,17 +62,17 @@ export default function InputOTPForm() {
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>
</FormControl_Shadcn_>
<FormDescription_Shadcn_>
</FormControl>
<FormDescription>
Please enter the one-time password sent to your phone.
</FormDescription_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button htmlType="submit">Submit</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/key-value-field-array-demo.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { Button, Form_Shadcn_ } from 'ui'
import { Button, Form } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { KeyValueFieldArray } from 'ui-patterns/form/KeyValueFieldArray/KeyValueFieldArray'
import { getKeyValueFieldArrayValidationIssues } from 'ui-patterns/form/KeyValueFieldArray/validation'
@@ -44,7 +44,7 @@ export default function KeyValueFieldArrayDemo() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form className="w-full max-w-2xl" onSubmit={form.handleSubmit(onSubmit)}>
<FormItemLayout
label="HTTP headers"
@@ -69,6 +69,6 @@ export default function KeyValueFieldArrayDemo() {
</Button>
</div>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/page-layout-settings.tsx
+22 -22
View File
@@ -5,9 +5,9 @@ import {
Card,
CardContent,
CardFooter,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
InputGroup,
InputGroupAddon,
InputGroupInput,
@@ -96,11 +96,11 @@ export default function PageLayoutSettings() {
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Form_Shadcn_ {...refreshTokenForm}>
<Form {...refreshTokenForm}>
<form className="space-y-4">
<Card>
<CardContent className="pt-6">
<FormField_Shadcn_
<FormField
control={refreshTokenForm.control}
name="REFRESH_TOKEN_ROTATION_ENABLED"
render={({ field }) => (
@@ -109,15 +109,15 @@ export default function PageLayoutSettings() {
label="Detect and revoke potentially compromised refresh tokens"
description="Prevent replay attacks from potentially compromised refresh tokens."
>
<FormControl_Shadcn_>
<FormControl>
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={refreshTokenForm.control}
name="SECURITY_REFRESH_TOKEN_REUSE_INTERVAL"
render={({ field }) => (
@@ -126,14 +126,14 @@ export default function PageLayoutSettings() {
label="Refresh token reuse interval"
description="Time interval where the same refresh token can be used multiple times to request for an access token. Recommendation: 10 seconds."
>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<InputGroupAddon align="inline-end">
<InputGroupText>seconds</InputGroupText>
</InputGroupAddon>
<InputGroupInput type="number" min={0} {...field} />
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -154,7 +154,7 @@ export default function PageLayoutSettings() {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
@@ -168,11 +168,11 @@ export default function PageLayoutSettings() {
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Form_Shadcn_ {...userSessionsForm}>
<Form {...userSessionsForm}>
<form className="space-y-4">
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={userSessionsForm.control}
name="SESSIONS_SINGLE_PER_USER"
render={({ field }) => (
@@ -181,16 +181,16 @@ export default function PageLayoutSettings() {
label="Enforce single session per user"
description="If enabled, all but a user's most recently active session will be terminated."
>
<FormControl_Shadcn_>
<FormControl>
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={userSessionsForm.control}
name="SESSIONS_TIMEBOX"
render={({ field }) => (
@@ -200,7 +200,7 @@ export default function PageLayoutSettings() {
description="The amount of time before a user is forced to sign in again. Use 0 for never."
>
<div className="flex items-center">
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<InputGroupAddon align="inline-end">
<InputGroupText>
@@ -209,7 +209,7 @@ export default function PageLayoutSettings() {
</InputGroupAddon>
<InputGroupInput type="number" min={0} {...field} />
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</div>
</FormItemLayout>
)}
@@ -217,7 +217,7 @@ export default function PageLayoutSettings() {
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={userSessionsForm.control}
name="SESSIONS_INACTIVITY_TIMEOUT"
render={({ field }) => (
@@ -227,7 +227,7 @@ export default function PageLayoutSettings() {
description="The amount of time a user needs to be inactive to be forced to sign in again. Use 0 for never."
>
<div className="flex items-center">
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<InputGroupAddon align="inline-end">
<InputGroupText>
@@ -236,7 +236,7 @@ export default function PageLayoutSettings() {
</InputGroupAddon>
<InputGroupInput type="number" {...field} />
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</div>
</FormItemLayout>
)}
@@ -259,7 +259,7 @@ export default function PageLayoutSettings() {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
</PageContainer>
apps/design-system/registry/default/example/radio-group-card-form.tsx
+27 -27
View File
@@ -5,12 +5,12 @@ import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
RadioGroupCard,
RadioGroupCardItem,
} from 'ui'
@@ -39,45 +39,45 @@ export default function RadioGroupForm() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
<FormField_Shadcn_
<FormField
control={form.control}
name="type"
render={({ field }) => (
<FormItem_Shadcn_ className="space-y-4">
<FormLabel_Shadcn_>Notify me about...</FormLabel_Shadcn_>
<FormControl_Shadcn_>
<FormItem className="space-y-4">
<FormLabel>Notify me about...</FormLabel>
<FormControl>
<RadioGroupCard
onValueChange={field.onChange}
defaultValue={field.value}
className="flex flex-wrap gap-3"
>
<FormItem_Shadcn_ asChild>
<FormControl_Shadcn_>
<FormItem asChild>
<FormControl>
<RadioGroupCardItem value="all" label="All new messages" />
</FormControl_Shadcn_>
</FormItem_Shadcn_>
<FormItem_Shadcn_ asChild>
<FormControl_Shadcn_>
</FormControl>
</FormItem>
<FormItem asChild>
<FormControl>
<RadioGroupCardItem value="mentions" label="Direct messages and mentions" />
</FormControl_Shadcn_>
</FormItem_Shadcn_>
<FormItem_Shadcn_ asChild>
<FormControl_Shadcn_>
</FormControl>
</FormItem>
<FormItem asChild>
<FormControl>
<RadioGroupCardItem value="none" label="Nothing" />
</FormControl_Shadcn_>
</FormItem_Shadcn_>
</FormControl>
</FormItem>
</RadioGroupCard>
</FormControl_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button htmlType="submit" type="secondary" size="small">
Submit
</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/radio-group-form.tsx
+30 -32
View File
@@ -5,12 +5,12 @@ import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
RadioGroup_Shadcn_,
RadioGroupItem_Shadcn_,
} from 'ui'
@@ -38,48 +38,46 @@ export default function RadioGroupForm() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
<FormField_Shadcn_
<FormField
control={form.control}
name="type"
render={({ field }) => (
<FormItem_Shadcn_ className="space-y-3">
<FormLabel_Shadcn_>Notify me about...</FormLabel_Shadcn_>
<FormControl_Shadcn_>
<FormItem className="space-y-3">
<FormLabel>Notify me about...</FormLabel>
<FormControl>
<RadioGroup_Shadcn_
onValueChange={field.onChange}
defaultValue={field.value}
className="flex flex-col space-y-1"
>
<FormItem_Shadcn_ className="flex items-center space-x-3 space-y-0">
<FormControl_Shadcn_>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem_Shadcn_ value="all" />
</FormControl_Shadcn_>
<FormLabel_Shadcn_ className="font-normal">All new messages</FormLabel_Shadcn_>
</FormItem_Shadcn_>
<FormItem_Shadcn_ className="flex items-center space-x-3 space-y-0">
<FormControl_Shadcn_>
</FormControl>
<FormLabel className="font-normal">All new messages</FormLabel>
</FormItem>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem_Shadcn_ value="mentions" />
</FormControl_Shadcn_>
<FormLabel_Shadcn_ className="font-normal">
Direct messages and mentions
</FormLabel_Shadcn_>
</FormItem_Shadcn_>
<FormItem_Shadcn_ className="flex items-center space-x-3 space-y-0">
<FormControl_Shadcn_>
</FormControl>
<FormLabel className="font-normal">Direct messages and mentions</FormLabel>
</FormItem>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem_Shadcn_ value="none" />
</FormControl_Shadcn_>
<FormLabel_Shadcn_ className="font-normal">Nothing</FormLabel_Shadcn_>
</FormItem_Shadcn_>
</FormControl>
<FormLabel className="font-normal">Nothing</FormLabel>
</FormItem>
</RadioGroup_Shadcn_>
</FormControl_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button htmlType="submit">Submit</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/radio-group-stacked-form.tsx
+27 -27
View File
@@ -5,12 +5,12 @@ import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
RadioGroupStacked,
RadioGroupStackedItem,
} from 'ui'
@@ -39,44 +39,44 @@ export default function RadioGroupForm() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
<FormField_Shadcn_
<FormField
control={form.control}
name="type"
render={({ field }) => (
<FormItem_Shadcn_ className="space-y-4">
<FormLabel_Shadcn_>Notify me about...</FormLabel_Shadcn_>
<FormControl_Shadcn_>
<FormItem className="space-y-4">
<FormLabel>Notify me about...</FormLabel>
<FormControl>
<RadioGroupStacked onValueChange={field.onChange} defaultValue={field.value}>
<FormItem_Shadcn_ asChild>
<FormControl_Shadcn_>
<FormItem asChild>
<FormControl>
<RadioGroupStackedItem value="all" label="All new messages" />
</FormControl_Shadcn_>
</FormItem_Shadcn_>
<FormItem_Shadcn_ asChild>
<FormControl_Shadcn_>
</FormControl>
</FormItem>
<FormItem asChild>
<FormControl>
<RadioGroupStackedItem
value="mentions"
label="Direct messages and mentions"
/>
</FormControl_Shadcn_>
</FormItem_Shadcn_>
<FormItem_Shadcn_ asChild>
<FormControl_Shadcn_>
</FormControl>
</FormItem>
<FormItem asChild>
<FormControl>
<RadioGroupStackedItem value="none" label="Nothing" />
</FormControl_Shadcn_>
</FormItem_Shadcn_>
</FormControl>
</FormItem>
</RadioGroupStacked>
</FormControl_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button htmlType="submit" type="secondary" size="small">
Submit
</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/select-form.tsx
+18 -18
View File
@@ -6,13 +6,13 @@ import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Form_Shadcn_,
FormControl_Shadcn_,
FormDescription_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
Select_Shadcn_,
SelectContent_Shadcn_,
SelectItem_Shadcn_,
@@ -45,38 +45,38 @@ export default function SelectForm() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
<FormField_Shadcn_
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem_Shadcn_>
<FormLabel_Shadcn_>Email</FormLabel_Shadcn_>
<FormItem>
<FormLabel>Email</FormLabel>
<Select_Shadcn_ onValueChange={field.onChange} defaultValue={field.value}>
<FormControl_Shadcn_>
<FormControl>
<SelectTrigger_Shadcn_>
<SelectValue_Shadcn_ placeholder="Select a verified email to display" />
</SelectTrigger_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
<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_>
<FormDescription_Shadcn_>
<FormDescription>
You can manage email addresses in your{' '}
<Link href="/examples/forms">email settings</Link>.
</FormDescription_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button htmlType="submit" type="secondary">
Submit
</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/single-value-field-array-demo.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { Button, Form_Shadcn_ } from 'ui'
import { Button, Form } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { SingleValueFieldArray } from 'ui-patterns/form/SingleValueFieldArray/SingleValueFieldArray'
import { z } from 'zod'
@@ -26,7 +26,7 @@ export default function SingleValueFieldArrayDemo() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form className="w-full max-w-2xl" onSubmit={form.handleSubmit(onSubmit)}>
<FormItemLayout
label="Redirect URIs"
@@ -50,6 +50,6 @@ export default function SingleValueFieldArrayDemo() {
</Button>
</div>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/switch-form.tsx
+23 -25
View File
@@ -5,12 +5,12 @@ import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Form_Shadcn_,
FormControl_Shadcn_,
FormDescription_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
Switch,
} from 'ui'
import { z } from 'zod'
@@ -39,48 +39,46 @@ export default function SwitchForm() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
<div>
<h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
<div className="space-y-4">
<FormField_Shadcn_
<FormField
control={form.control}
name="marketing_emails"
render={({ field }) => (
<FormItem_Shadcn_ className="flex flex-row items-center justify-between rounded-lg border p-4">
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
<div className="space-y-0.5">
<FormLabel_Shadcn_ className="text-base">Marketing emails</FormLabel_Shadcn_>
<FormDescription_Shadcn_>
<FormLabel className="text-base">Marketing emails</FormLabel>
<FormDescription>
Receive emails about new products, features, and more.
</FormDescription_Shadcn_>
</FormDescription>
</div>
<FormControl_Shadcn_>
<FormControl>
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl_Shadcn_>
</FormItem_Shadcn_>
</FormControl>
</FormItem>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="security_emails"
render={({ field }) => (
<FormItem_Shadcn_ className="flex flex-row items-center justify-between rounded-lg border p-4">
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
<div className="space-y-0.5">
<FormLabel_Shadcn_ className="text-base">Security emails</FormLabel_Shadcn_>
<FormDescription_Shadcn_>
Receive emails about your account security.
</FormDescription_Shadcn_>
<FormLabel className="text-base">Security emails</FormLabel>
<FormDescription>Receive emails about your account security.</FormDescription>
</div>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled
aria-readonly
/>
</FormControl_Shadcn_>
</FormItem_Shadcn_>
</FormControl>
</FormItem>
)}
/>
</div>
@@ -89,6 +87,6 @@ export default function SwitchForm() {
Submit
</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/design-system/registry/default/example/textarea-form.tsx
+18 -18
View File
@@ -5,13 +5,13 @@ import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Form_Shadcn_,
FormControl_Shadcn_,
FormDescription_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
Textarea,
} from 'ui'
import { z } from 'zod'
@@ -43,32 +43,32 @@ export default function TextareaForm() {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
<FormField_Shadcn_
<FormField
control={form.control}
name="bio"
render={({ field }) => (
<FormItem_Shadcn_>
<FormLabel_Shadcn_>Bio</FormLabel_Shadcn_>
<FormControl_Shadcn_>
<FormItem>
<FormLabel>Bio</FormLabel>
<FormControl>
<Textarea
placeholder="Tell us a little bit about yourself"
className="resize-none"
{...field}
/>
</FormControl_Shadcn_>
<FormDescription_Shadcn_>
</FormControl>
<FormDescription>
You can <span>@mention</span> other users and organizations.
</FormDescription_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button htmlType="submit" type="alternative">
Submit
</Button>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/docs/components/Feedback/FeedbackModal.tsx
+9 -17
View File
@@ -1,14 +1,6 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { SubmitHandler, useForm } from 'react-hook-form'
import {
Button,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Input_Shadcn_,
Modal,
Textarea,
} from 'ui'
import { Button, Form, FormControl, FormField, Input_Shadcn_, Modal, Textarea } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import * as z from 'zod'
@@ -53,29 +45,29 @@ function FeedbackModal({ visible, page, onCancel, onSubmit }: FeedbackModalProps
onCancel={handleCancel}
onEscapeKeyDown={handleCancel}
>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(handleSubmit)}>
<Modal.Content className="pt-4 pb-2 flex flex-col gap-2">
<input type="hidden" id="page" {...form.register('page')} />
<FormField_Shadcn_
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItemLayout layout="vertical" label="Title">
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<Input_Shadcn_ {...field} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="comment"
render={({ field }) => (
<FormItemLayout layout="vertical" label="Comment" afterLabel="(not anonymous)">
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<Textarea {...field} rows={4} className="resize-none" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -113,7 +105,7 @@ function FeedbackModal({ visible, page, onCancel, onSubmit }: FeedbackModalProps
</div>
</Modal.Content>
</form>
</Form_Shadcn_>
</Form>
</Modal>
)
}
apps/studio/components/interfaces/APIKeys/CreatePublishableAPIKeyDialog.tsx
+11 -11
View File
@@ -14,9 +14,9 @@ import {
DialogSectionSeparator,
DialogTitle,
DialogTrigger,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
} from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -92,13 +92,13 @@ export const CreatePublishableAPIKeyDialog = () => {
</DialogHeader>
<DialogSectionSeparator />
<DialogSection className="flex flex-col gap-4">
<Form_Shadcn_ {...form}>
<Form {...form}>
<form
className="flex flex-col gap-4"
id={FORM_ID}
onSubmit={form.handleSubmit(onSubmit)}
>
<FormField_Shadcn_
<FormField
key="name"
name="name"
control={form.control}
@@ -107,13 +107,13 @@ export const CreatePublishableAPIKeyDialog = () => {
label="Name"
description="A short name of lowercase alphanumeric characters and underscore, must start with letter or underscore."
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
key="description"
name="description"
control={form.control}
@@ -122,14 +122,14 @@ export const CreatePublishableAPIKeyDialog = () => {
label="Description"
description="Provide a description about what this key is used for."
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="(Optional)" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</form>
</Form_Shadcn_>
</Form>
</DialogSection>
<DialogFooter>
<Button form={FORM_ID} htmlType="submit" loading={isCreatingAPIKey}>
apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx
+11 -11
View File
@@ -18,9 +18,9 @@ import {
DialogSectionSeparator,
DialogTitle,
DialogTrigger,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
} from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -99,13 +99,13 @@ export const CreateSecretAPIKeyDialog = () => {
</DialogHeader>
<DialogSectionSeparator />
<DialogSection className="flex flex-col gap-4">
<Form_Shadcn_ {...form}>
<Form {...form}>
<form
className="flex flex-col gap-4"
id={FORM_ID}
onSubmit={form.handleSubmit(onSubmit)}
>
<FormField_Shadcn_
<FormField
key="name"
name="name"
control={form.control}
@@ -114,29 +114,29 @@ export const CreateSecretAPIKeyDialog = () => {
label="Name"
description="A short, unique name of lowercased letters, digits and underscore"
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="Example: my_super_secret_key_123" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
key="description"
name="description"
control={form.control}
render={({ field }) => (
<FormItemLayout label="Description" labelOptional="Optional">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder="Short notes on how or where this key will be used"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</form>
</Form_Shadcn_>
</Form>
<Alert_Shadcn_ variant="warning">
<ShieldCheck />
<AlertTitle_Shadcn_>Securing your API key</AlertTitle_Shadcn_>
apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenDialog.tsx
+11 -11
View File
@@ -13,9 +13,9 @@ import {
DialogSection,
DialogSectionSeparator,
DialogTitle,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
Select_Shadcn_,
SelectContent_Shadcn_,
@@ -176,36 +176,36 @@ export const NewTokenDialog = ({
/>
)}
<DialogSection className="flex flex-col gap-4">
<Form_Shadcn_ {...form}>
<Form {...form}>
<form
id={formId}
className="flex flex-col gap-4"
onSubmit={form.handleSubmit(onSubmit)}
>
<FormField_Shadcn_
<FormField
key="tokenName"
name="tokenName"
control={form.control}
render={({ field }) => (
<FormItemLayout name="tokenName" label="Name">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
id="tokenName"
{...field}
placeholder="Provide a name for your token"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
key="expiresAt"
name="expiresAt"
control={form.control}
render={({ field }) => (
<FormItemLayout name="expiresAt" label="Expires in">
<div className="flex gap-2">
<FormControl_Shadcn_ className="flex-grow">
<FormControl className="flex-grow">
<Select_Shadcn_ value={field.value} onValueChange={handleExpiryChange}>
<SelectTrigger_Shadcn_>
<SelectValue_Shadcn_ placeholder="Expires at" />
@@ -220,7 +220,7 @@ export const NewTokenDialog = ({
)}
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
{isCustomExpiry && (
<DatePicker
selectsRange={false}
@@ -247,7 +247,7 @@ export const NewTokenDialog = ({
)}
/>
</form>
</Form_Shadcn_>
</Form>
</DialogSection>
<DialogFooter>
<Button
apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/BasicInfo.tsx
+8 -8
View File
@@ -2,8 +2,8 @@ import dayjs from 'dayjs'
import { useEffect, useState } from 'react'
import { Control, ControllerRenderProps } from 'react-hook-form'
import {
FormControl_Shadcn_,
FormField_Shadcn_,
FormControl,
FormField,
Input_Shadcn_,
Select_Shadcn_,
SelectContent_Shadcn_,
@@ -65,31 +65,31 @@ export const BasicInfo = ({
return (
<div className="space-y-4 px-5 sm:px-6 py-6">
<FormField_Shadcn_
<FormField
key="tokenName"
name="tokenName"
control={control}
render={({ field }) => (
<FormItemLayout name="tokenName" label="Name">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
id="tokenName"
{...field}
placeholder="Provide a name for your token"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
key="expiresAt"
name="expiresAt"
control={control}
render={({ field }) => (
<FormItemLayout name="expiresAt" label="Expires in">
<div className="flex gap-2">
<FormControl_Shadcn_ className="flex-grow">
<FormControl className="flex-grow">
<Select_Shadcn_
value={field.value}
onValueChange={(value) => handleExpiryChange(value, field)}
@@ -107,7 +107,7 @@ export const BasicInfo = ({
)}
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
{isCustomSelected && (
<DatePicker
selectsRange={false}
apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/ResourceAccess/ResourceAccess.tsx
+6 -6
View File
@@ -1,4 +1,4 @@
import { FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
import { FormControl, FormField } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { ResourceAccessProps } from './ResourceAccess.types'
@@ -41,13 +41,13 @@ export const ResourceAccess = ({ control, resourceAccess, setValue }: ResourceAc
return (
<div className="space-y-4 px-5 sm:px-6 py-6">
<FormField_Shadcn_
<FormField
key="resourceAccess"
name="resourceAccess"
control={control}
render={({ field }) => (
<FormItemLayout name="resourceAccess" label="Resource access">
<FormControl_Shadcn_>
<FormControl>
<div className="space-y-3">
<fieldset className="flex gap-3">
<legend className="sr-only">Resource access level</legend>
@@ -69,13 +69,13 @@ export const ResourceAccess = ({ control, resourceAccess, setValue }: ResourceAc
{RESOURCE_OPTIONS.find((opt) => opt.value === field.value)?.description}
</p>
</div>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
{resourceAccess === 'selected-orgs' && (
<FormField_Shadcn_
<FormField
key="selectedOrganizations"
name="selectedOrganizations"
control={control}
@@ -94,7 +94,7 @@ export const ResourceAccess = ({ control, resourceAccess, setValue }: ResourceAc
)}
{resourceAccess === 'selected-projects' && (
<FormField_Shadcn_
<FormField
key="selectedProjects"
name="selectedProjects"
control={control}
apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/ResourceAccess/ResourceMultiSelector.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { useMemo } from 'react'
import { FormControl_Shadcn_ } from 'ui'
import { FormControl } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
MultiSelector,
@@ -38,7 +38,7 @@ export const ResourceMultiSelector = ({
return (
<FormItemLayout name={fieldName} label={label}>
<FormControl_Shadcn_ className="overflow-visible">
<FormControl className="overflow-visible">
<MultiSelector values={displayValues} onValuesChange={handleValuesChange}>
<MultiSelectorTrigger
deletableBadge
@@ -63,7 +63,7 @@ export const ResourceMultiSelector = ({
)}
</MultiSelectorContent>
</MultiSelector>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)
}
apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
+3 -3
View File
@@ -7,7 +7,7 @@ import { useForm, type SubmitHandler } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Form_Shadcn_,
Form,
ScrollArea,
Separator,
Sheet,
@@ -287,7 +287,7 @@ export const NewScopedTokenSheet = ({
</div>
)}
<Form_Shadcn_ {...form}>
<Form {...form}>
<div className="flex flex-col gap-0 overflow-visible">
<BasicInfo
control={form.control}
@@ -309,7 +309,7 @@ export const NewScopedTokenSheet = ({
setResourceSearchOpen={setResourceSearchOpen}
/>
</div>
</Form_Shadcn_>
</Form>
</div>
</ScrollArea>
<SheetFooter className="!justify-end w-full mt-auto py-4 border-t">
apps/studio/components/interfaces/Account/Preferences/AnalyticsSettings.tsx
+6 -6
View File
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
import { useConsentState } from 'common'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { Card, CardContent, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
import { Card, CardContent, Form, FormControl, FormField, Switch } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
PageSection,
@@ -61,10 +61,10 @@ export const AnalyticsSettings = () => {
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Form_Shadcn_ {...form}>
<Form {...form}>
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="telemetryEnabled"
render={({ field }) => (
@@ -73,7 +73,7 @@ export const AnalyticsSettings = () => {
label="Send telemetry data from Supabase services"
description="By opting in to sharing telemetry data, Supabase can analyze usage patterns to enhance user experience and use it for marketing and advertising purposes"
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={(value) => {
@@ -81,13 +81,13 @@ export const AnalyticsSettings = () => {
handleToggle(value)
}}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
</Card>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
)
apps/studio/components/interfaces/Account/Preferences/ChangeEmailAddress.tsx
+8 -8
View File
@@ -7,9 +7,9 @@ import {
Button,
DialogFooter,
DialogSection,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
} from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -91,7 +91,7 @@ export const ChangeEmailAddressForm = ({ onClose }: { onClose: () => void }) =>
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form id="update-email-form" onSubmit={form.handleSubmit(onSubmit)}>
<div className="self-center">
<HCaptcha
@@ -104,7 +104,7 @@ export const ChangeEmailAddressForm = ({ onClose }: { onClose: () => void }) =>
</div>
<DialogSection>
<FormField_Shadcn_
<FormField
name="email"
control={form.control}
render={({ field }) => (
@@ -112,9 +112,9 @@ export const ChangeEmailAddressForm = ({ onClose }: { onClose: () => void }) =>
label="Provide a new email address"
description="A confirmation email will be sent to the provided email address"
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="example@email.com" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -129,6 +129,6 @@ export const ChangeEmailAddressForm = ({ onClose }: { onClose: () => void }) =>
</Button>
</DialogFooter>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/studio/components/interfaces/Account/Preferences/DashboardSettingsToggles.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { Card, Form_Shadcn_ } from 'ui'
import { Card, Form } from 'ui'
import * as z from 'zod'
import { DashboardToggle } from './DashboardToggle'
@@ -61,7 +61,7 @@ export const DashboardSettingsToggles = () => {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<Card>
<DashboardToggle
form={form}
@@ -79,6 +79,6 @@ export const DashboardSettingsToggles = () => {
isLast
/>
</Card>
</Form_Shadcn_>
</Form>
)
}
apps/studio/components/interfaces/Account/Preferences/DashboardToggle.tsx
+4 -4
View File
@@ -1,6 +1,6 @@
import type { ReactNode } from 'react'
import type { FieldValues, Path, UseFormReturn } from 'react-hook-form'
import { CardContent, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
import { CardContent, FormControl, FormField, Switch } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
interface DashboardToggleProps<T extends FieldValues> {
@@ -22,12 +22,12 @@ export function DashboardToggle<T extends FieldValues>({
}: DashboardToggleProps<T>) {
return (
<CardContent className={isLast ? undefined : 'border-b'}>
<FormField_Shadcn_
<FormField
control={form.control}
name={name}
render={({ field }) => (
<FormItemLayout layout="flex-row-reverse" label={label} description={description}>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={(value) => {
@@ -35,7 +35,7 @@ export function DashboardToggle<T extends FieldValues>({
onToggle(value)
}}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
+14 -14
View File
@@ -14,11 +14,11 @@ import {
DialogSection,
DialogTitle,
DialogTrigger,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
Input_Shadcn_,
Separator,
} from 'ui'
@@ -150,23 +150,23 @@ export const DeleteAccountButton = () => {
</DialogFooter>
</>
) : (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form
id="account-deletion-request"
onSubmit={form.handleSubmit(() => onConfirmDelete())}
>
<DialogSection>
<FormField_Shadcn_
<FormField
name="account"
control={form.control}
render={({ field }) => (
<FormItem_Shadcn_>
<FormLabel_Shadcn_>
<FormItem>
<FormLabel>
Please type{' '}
<span className="font-bold">{profile?.primary_email ?? ''}</span> to
confirm
</FormLabel_Shadcn_>
<FormControl_Shadcn_>
</FormLabel>
<FormControl>
<Input_Shadcn_
autoFocus
{...field}
@@ -174,8 +174,8 @@ export const DeleteAccountButton = () => {
disabled={isPending}
placeholder="Enter the account above"
/>
</FormControl_Shadcn_>
</FormItem_Shadcn_>
</FormControl>
</FormItem>
)}
/>
</DialogSection>
@@ -193,7 +193,7 @@ export const DeleteAccountButton = () => {
</Button>
</DialogFooter>
</form>
</Form_Shadcn_>
</Form>
)}
</>
)}
apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
+17 -17
View File
@@ -7,9 +7,9 @@ import {
Card,
CardContent,
CardFooter,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
Select_Shadcn_,
SelectContent_Shadcn_,
@@ -96,37 +96,37 @@ export const ProfileInformation = () => {
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form id={formId} className="space-y-6 w-full" onSubmit={form.handleSubmit(onSubmit)}>
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="first_name"
render={({ field }) => (
<FormItemLayout label="First name" layout="flex-row-reverse">
<FormControl_Shadcn_ className="col-span-8">
<FormControl className="col-span-8">
<Input_Shadcn_ {...field} placeholder="First name" className="w-full" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="last_name"
render={({ field }) => (
<FormItemLayout label="Last name" layout="flex-row-reverse">
<FormControl_Shadcn_ className="col-span-8">
<FormControl className="col-span-8">
<Input_Shadcn_ {...field} placeholder="Last name" className="w-full" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="primary_email"
render={({ field }) => (
@@ -139,7 +139,7 @@ export const ProfileInformation = () => {
}
layout="flex-row-reverse"
>
<FormControl_Shadcn_ className="col-span-8">
<FormControl className="col-span-8">
<div className="flex flex-col gap-1">
<Select_Shadcn_
value={field.value}
@@ -159,13 +159,13 @@ export const ProfileInformation = () => {
</SelectContent_Shadcn_>
</Select_Shadcn_>
</div>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="username"
render={({ field }) => (
@@ -178,7 +178,7 @@ export const ProfileInformation = () => {
}
layout="flex-row-reverse"
>
<FormControl_Shadcn_ className="col-span-8">
<FormControl className="col-span-8">
<div className="flex flex-col gap-1">
<Input_Shadcn_
{...field}
@@ -187,7 +187,7 @@ export const ProfileInformation = () => {
disabled={profile?.is_sso_user}
/>
</div>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -209,7 +209,7 @@ export const ProfileInformation = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
)
apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx
+11 -11
View File
@@ -4,7 +4,7 @@ import { LOCAL_STORAGE_KEYS } from 'common'
import { useEffect, useState } from 'react'
import { useForm, type SubmitHandler } from 'react-hook-form'
import { toast } from 'sonner'
import { Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Input, Input_Shadcn_ } from 'ui'
import { Form, FormControl, FormField, Input, Input_Shadcn_ } from 'ui'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
@@ -91,13 +91,13 @@ const FirstStep = ({ visible, isEnrolling, reset, enroll, onClose }: FirstStepPr
onCancel={onClose}
onConfirm={form.handleSubmit(onSubmit)}
>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form
id="verify-otp-form"
className="flex flex-col gap-4"
onSubmit={form.handleSubmit(onSubmit)}
>
<FormField_Shadcn_
<FormField
key="name"
name="name"
control={form.control}
@@ -107,14 +107,14 @@ const FirstStep = ({ visible, isEnrolling, reset, enroll, onClose }: FirstStepPr
label="Provide a name to identify this app"
description="A string will be randomly generated if a name is not provided"
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ id="name" {...field} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</form>
</Form_Shadcn_>
</Form>
</ConfirmationModal>
)
}
@@ -236,19 +236,19 @@ const SecondStep = ({
}
/>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form
id="verify-otp-form"
className="flex flex-col gap-4"
onSubmit={form.handleSubmit(onSubmit)}
>
<FormField_Shadcn_
<FormField
key="code"
name="code"
control={form.control}
render={({ field }) => (
<FormItemLayout name="code" label="Authentication code">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
id="code"
autoFocus
@@ -256,12 +256,12 @@ const SecondStep = ({
placeholder="XXXXXX"
className="font-mono"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</form>
</Form_Shadcn_>
</Form>
</div>
)}
</ConfirmationModal>
apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
+12 -12
View File
@@ -7,9 +7,9 @@ import { SubmitHandler, useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input,
Select_Shadcn_,
SelectContent_Shadcn_,
@@ -127,13 +127,13 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
<SheetTitle>Create a rule for "{lint?.title}"</SheetTitle>
</SheetHeader>
<SheetSection className="overflow-auto flex-grow px-0">
<Form_Shadcn_ {...form}>
<Form {...form}>
<form
id={formId}
className="flex flex-col gap-y-4"
onSubmit={form.handleSubmit(onSubmit)}
>
<FormField_Shadcn_
<FormField
name="is_disabled"
control={form.control}
render={({ field }) => (
@@ -145,13 +145,13 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
>
<Tooltip>
<TooltipTrigger type="button">
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={field.disabled || assigned_to === 'all'}
/>
</FormControl_Shadcn_>
</FormControl>
</TooltipTrigger>
{assigned_to === 'all' && (
<TooltipContent side="bottom" className="w-72">
@@ -168,7 +168,7 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
<Separator />
<FormField_Shadcn_
<FormField
name="assigned_to"
control={form.control}
render={({ field }) => (
@@ -210,7 +210,7 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
<Separator />
<FormField_Shadcn_
<FormField
name="note"
control={form.control}
render={({ field }) => (
@@ -220,18 +220,18 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
label="Description"
labelOptional="Optional"
>
<FormControl_Shadcn_>
<FormControl>
<Input.TextArea
{...field}
className="[&>div>div>div>textarea]:text-sm"
placeholder="e.g Describe why this rule is being set"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</form>
</Form_Shadcn_>
</Form>
</SheetSection>
<SheetFooter>
<Button disabled={isCreating} type="default" onClick={() => onOpenChange(false)}>
apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Form.tsx
+12 -12
View File
@@ -11,11 +11,11 @@ import {
CardContent,
CardFooter,
CardHeader,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormField,
FormItem,
FormMessage,
Select_Shadcn_,
SelectContent_Shadcn_,
SelectItem_Shadcn_,
@@ -225,12 +225,12 @@ function OrganizationSelector({
disabled = false,
}: OrganizationSelectorProps): ReactNode {
return (
<Form_Shadcn_ {...form}>
<FormField_Shadcn_
<Form {...form}>
<FormField
control={form.control}
name="selectedOrgSlug"
render={({ field }) => (
<FormItem_Shadcn_>
<FormItem>
<FormLayout
label="Organization to grant API access to"
description={
@@ -240,7 +240,7 @@ function OrganizationSelector({
}
isReactForm
>
<FormControl_Shadcn_>
<FormControl>
<Select_Shadcn_
value={field.value || undefined}
disabled={disabled}
@@ -261,12 +261,12 @@ function OrganizationSelector({
))}
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
</FormLayout>
</FormItem_Shadcn_>
</FormItem>
)}
/>
</Form_Shadcn_>
</Form>
)
}
apps/studio/components/interfaces/App/UpdateBillingAddressModal.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ import {
DialogHeader,
DialogSection,
DialogTitle,
Form_Shadcn_ as Form,
Form,
} from 'ui'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
+6 -15
View File
@@ -4,16 +4,7 @@ import { useParams } from 'common'
import { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Card,
CardContent,
CardFooter,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Switch,
} from 'ui'
import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Switch } from 'ui'
import { Admonition, GenericSkeletonLoader } from 'ui-patterns'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
@@ -123,11 +114,11 @@ export const AuditLogsForm = () => {
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmitAuditLogs)} className="space-y-4">
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="AUDIT_LOG_DISABLE_POSTGRES"
render={({ field }) => (
@@ -157,13 +148,13 @@ export const AuditLogsForm = () => {
</p>
}
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={!field.value}
onCheckedChange={(value) => field.onChange(!value)}
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -209,7 +200,7 @@ export const AuditLogsForm = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
)
apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
+23 -23
View File
@@ -6,8 +6,7 @@ import ReactMarkdown from 'react-markdown'
import {
Button,
Calendar,
FormControl_Shadcn_,
FormField_Shadcn_,
FormControl,
FormInputGroupInput,
Input_Shadcn_,
InputGroup,
@@ -24,7 +23,8 @@ import {
SheetSection,
Switch,
Textarea,
useWatch_Shadcn_,
FormField as UIFormField,
useWatch,
} from 'ui'
import { Input as DataInput } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -65,7 +65,7 @@ const FormField = ({
)
}
const fieldValue = useWatch_Shadcn_({ control, name })
const fieldValue = useWatch({ control, name })
if (!hasAccess) {
const planMessage = organizationSlug
? `Only available on [Pro plan](/org/${organizationSlug}/billing?panel=subscriptionPlan) and above.`
@@ -75,7 +75,7 @@ const FormField = ({
const disabled =
disabledProp || (properties.type === 'boolean' ? !hasAccess && !fieldValue : !hasAccess)
const showValue = useWatch_Shadcn_({
const showValue = useWatch({
control,
name: properties.show?.key,
disabled: properties.show == null,
@@ -102,7 +102,7 @@ const FormField = ({
return (
<>
<SheetSection>
<FormField_Shadcn_
<UIFormField
control={control}
name={name}
disabled={disabled || readOnly}
@@ -118,7 +118,7 @@ const FormField = ({
) : null
}
>
<FormControl_Shadcn_>
<FormControl>
<Popover_Shadcn_>
<PopoverTrigger_Shadcn_ asChild>
<Button
@@ -141,7 +141,7 @@ const FormField = ({
/>
</PopoverContent_Shadcn_>
</Popover_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -154,7 +154,7 @@ const FormField = ({
return (
<>
<SheetSection>
<FormField_Shadcn_
<UIFormField
control={control}
name={name}
disabled={disabled}
@@ -168,7 +168,7 @@ const FormField = ({
) : null
}
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
{properties.isSecret ? (
<DataInput
{...field}
@@ -181,7 +181,7 @@ const FormField = ({
) : (
<Input_Shadcn_ {...field} id={name} readOnly={readOnly} />
)}
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -194,7 +194,7 @@ const FormField = ({
return (
<>
<SheetSection>
<FormField_Shadcn_
<UIFormField
control={control}
name={name}
disabled={disabled}
@@ -208,7 +208,7 @@ const FormField = ({
) : null
}
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<Textarea
{...field}
id={name}
@@ -217,7 +217,7 @@ const FormField = ({
className="resize-none"
readOnly={readOnly}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -230,7 +230,7 @@ const FormField = ({
return (
<>
<SheetSection>
<FormField_Shadcn_
<UIFormField
control={control}
name={name}
disabled={disabled}
@@ -244,7 +244,7 @@ const FormField = ({
) : null
}
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
{properties.units ? (
<InputGroup>
<FormInputGroupInput
@@ -273,7 +273,7 @@ const FormField = ({
readOnly={readOnly}
/>
)}
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -286,7 +286,7 @@ const FormField = ({
return (
<>
<SheetSection>
<FormField_Shadcn_
<UIFormField
control={control}
name={name}
disabled={disabled || readOnly}
@@ -309,14 +309,14 @@ const FormField = ({
</div>
}
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<Switch
id={name}
checked={field.value}
onCheckedChange={field.onChange}
size="small"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -329,7 +329,7 @@ const FormField = ({
return (
<>
<SheetSection>
<FormField_Shadcn_
<UIFormField
control={control}
name={name}
disabled={disabled || readOnly}
@@ -347,7 +347,7 @@ const FormField = ({
) : null
}
>
<FormControl_Shadcn_ className="col-span-6">
<FormControl className="col-span-6">
<Select_Shadcn_
defaultValue={properties.enum[0]?.value}
value={field.value}
@@ -373,7 +373,7 @@ const FormField = ({
))}
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
+3 -3
View File
@@ -10,7 +10,7 @@ import ReactMarkdown from 'react-markdown'
import { toast } from 'sonner'
import {
Button,
Form_Shadcn_,
Form,
Sheet,
SheetContent,
SheetFooter,
@@ -216,7 +216,7 @@ export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps)
/>
<SheetTitle>{provider.title}</SheetTitle>
</SheetHeader>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form
id={formId}
name={formId}
@@ -273,7 +273,7 @@ export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps)
</SheetSection>
)}
</form>
</Form_Shadcn_>
</Form>
<SheetFooter className="shrink-0">
<div className="flex items-center justify-between w-full">
<DocsButton href={provider.link} />
apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
+17 -17
View File
@@ -14,9 +14,9 @@ import {
Card,
CardContent,
CardFooter,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Switch,
WarningIcon,
} from 'ui'
@@ -160,11 +160,11 @@ export const BasicAuthSettingsForm = () => {
)}
{isSuccess && (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="DISABLE_SIGNUP"
render={({ field }) => (
@@ -173,20 +173,20 @@ export const BasicAuthSettingsForm = () => {
label="Allow new users to sign up"
description="If this is disabled, new users will not be able to sign up to your application"
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
{showManualLinking && (
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="SECURITY_MANUAL_LINKING_ENABLED"
render={({ field }) => (
@@ -206,20 +206,20 @@ export const BasicAuthSettingsForm = () => {
</>
}
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
)}
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="EXTERNAL_ANONYMOUS_USERS_ENABLED"
render={({ field }) => (
@@ -239,13 +239,13 @@ export const BasicAuthSettingsForm = () => {
</>
}
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -305,7 +305,7 @@ export const BasicAuthSettingsForm = () => {
)}
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="MAILER_AUTOCONFIRM"
render={({ field }) => (
@@ -314,13 +314,13 @@ export const BasicAuthSettingsForm = () => {
label="Confirm email"
description="Users will need to confirm their email address before signing in for the first time"
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -342,7 +342,7 @@ export const BasicAuthSettingsForm = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
)}
</PageSectionContent>
</PageSection>
apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx
+45 -45
View File
@@ -8,9 +8,9 @@ import { toast } from 'sonner'
import {
Button,
cn,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
FormInputGroupInput,
Input,
Input_Shadcn_,
@@ -28,7 +28,7 @@ import {
SheetSection,
SheetTitle,
Switch,
useWatch_Shadcn_,
useWatch,
} from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import * as z from 'zod'
@@ -233,7 +233,7 @@ export const CreateOrUpdateCustomProviderSheet = ({
}
const isManualConfiguration =
useWatch_Shadcn_({ control: form.control, name: 'provider_type' }) === 'oauth2'
useWatch({ control: form.control, name: 'provider_type' }) === 'oauth2'
const {
confirmOnClose,
@@ -247,7 +247,7 @@ export const CreateOrUpdateCustomProviderSheet = ({
},
})
const issuerUrlValue = useWatch_Shadcn_({ control: form.control, name: 'issuer' })
const issuerUrlValue = useWatch({ control: form.control, name: 'issuer' })
return (
<Sheet open={visible} onOpenChange={handleOpenChange}>
@@ -275,14 +275,14 @@ export const CreateOrUpdateCustomProviderSheet = ({
</SheetTitle>
</div>
</SheetHeader>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form
className="flex-grow overflow-auto"
onSubmit={form.handleSubmit(onSubmit)}
id={FORM_ID}
>
<SheetSection className="flex-grow px-5 space-y-4">
<FormField_Shadcn_
<FormField
control={form.control}
name="identifier"
render={({ field }) => (
@@ -291,7 +291,7 @@ export const CreateOrUpdateCustomProviderSheet = ({
label="Provider Identifier"
description="Lowercase letters, numbers, and hyphens only. Used in SDK: signInWithOAuth({ provider: 'custom:my-company' })"
>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<InputGroupAddon align="inline-start">
<InputGroupText>custom:</InputGroupText>
@@ -307,24 +307,24 @@ export const CreateOrUpdateCustomProviderSheet = ({
}}
/>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItemLayout layout="horizontal" label="Display Name">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="Provider name" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="provider_type"
render={({ field }) => (
@@ -350,7 +350,7 @@ export const CreateOrUpdateCustomProviderSheet = ({
<Separator />
<SheetSection className="flex-grow px-5 space-y-4">
<FormSectionLabel>OAuth Endpoints</FormSectionLabel>
<FormField_Shadcn_
<FormField
control={form.control}
name="issuer"
render={({ field }) => (
@@ -359,58 +359,58 @@ export const CreateOrUpdateCustomProviderSheet = ({
label="Issuer URL"
description="Base URL of your OAuth provider. Discovery runs when you save."
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="https://auth.company.com" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</SheetSection>
{isManualConfiguration ? (
<SheetSection className="flex-grow px-5 pt-0 space-y-4" key="manual-config">
<FormField_Shadcn_
<FormField
control={form.control}
name="authorization_url"
render={({ field }) => (
<FormItemLayout layout="horizontal" label="Authorization URL">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder="https://auth.company.com/oauth/authorize"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="token_url"
render={({ field }) => (
<FormItemLayout layout="horizontal" label="Token URL">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder="https://auth.company.com/oauth/token"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="userinfo_url"
render={({ field }) => (
<FormItemLayout layout="horizontal" label="Userinfo URL">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder="https://auth.company.com/oauth/userinfo"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="jwks_uri"
render={({ field }) => (
@@ -419,19 +419,19 @@ export const CreateOrUpdateCustomProviderSheet = ({
label="JWKS URI"
description="Required for ID token verification"
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder="https://auth.company.com/.well-known/jwks.json"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</SheetSection>
) : (
<SheetSection className="flex-grow px-5 pt-0 space-y-4" key="discovery-config">
<FormField_Shadcn_
<FormField
control={form.control}
name="discovery_url"
render={({ field }) => (
@@ -440,7 +440,7 @@ export const CreateOrUpdateCustomProviderSheet = ({
label="Discovery URL"
description="Leave empty to use standard path: {issuer}/.well-known/openid-configuration. Only needed if your provider uses a non-standard discovery path. Discovery runs when you save."
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder={
@@ -449,7 +449,7 @@ export const CreateOrUpdateCustomProviderSheet = ({
: 'https://github.company.com/.well-known/openid-configuration'
}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -457,32 +457,32 @@ export const CreateOrUpdateCustomProviderSheet = ({
)}
<Separator />
<SheetSection className="flex-grow px-5 space-y-4">
<FormField_Shadcn_
<FormField
control={form.control}
name="client_id"
render={({ field }) => (
<FormItemLayout layout="horizontal" label="Client ID">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="Client ID" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="client_secret"
render={({ field }) => (
<FormItemLayout layout="horizontal" label="Client Secret">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} type="password" placeholder="Client secret" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</SheetSection>
<Separator />
<SheetSection className="flex-grow px-5 space-y-4">
<FormField_Shadcn_
<FormField
control={form.control}
name="scopes"
render={({ field }) => (
@@ -491,13 +491,13 @@ export const CreateOrUpdateCustomProviderSheet = ({
label="Scopes"
description="Comma-separated list. Common: openid, email, profile"
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="openid, email, profile" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="email_optional"
render={({ field }) => (
@@ -506,9 +506,9 @@ export const CreateOrUpdateCustomProviderSheet = ({
label="Allow users without email"
description="Allows the user to successfully authenticate when the provider does not return an email address."
>
<FormControl_Shadcn_>
<FormControl>
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -530,7 +530,7 @@ export const CreateOrUpdateCustomProviderSheet = ({
</FormItemLayout>
</SheetSection>
</form>
</Form_Shadcn_>
</Form>
<SheetFooter>
<Button type="default" onClick={confirmOnClose}>
Cancel
apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
+6 -15
View File
@@ -6,16 +6,7 @@ import Link from 'next/link'
import { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Card,
CardContent,
CardFooter,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Switch,
} from 'ui'
import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Switch } from 'ui'
import { Admonition } from 'ui-patterns/admonition'
import {
PageSection,
@@ -192,7 +183,7 @@ export const EmailTemplates = () => {
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Form_Shadcn_ {...notificationsForm}>
<Form {...notificationsForm}>
<form onSubmit={notificationsForm.handleSubmit(onSubmit)} className="space-y-4">
<Card>
{TEMPLATES_SCHEMAS.filter((t) => t.misc?.emailTemplateType === 'security').map(
@@ -219,17 +210,17 @@ export const EmailTemplates = () => {
</Link>
<div className="flex items-center gap-4 h-full pl-2 relative">
<FormField_Shadcn_
<FormField
control={notificationsForm.control}
name={templateEnabledKey}
render={({ field }) => (
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
)}
/>
@@ -265,7 +256,7 @@ export const EmailTemplates = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
</>
apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
+8 -8
View File
@@ -10,9 +10,9 @@ import {
Button,
CardContent,
CardFooter,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
Label_Shadcn_,
Tooltip,
@@ -227,14 +227,14 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
}, [hasChanges])
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<CardContent>
{Object.keys(properties).map((x: string) => {
const property = properties[x]
if (property.type === 'string' && x !== messageSlug) {
return (
<FormField_Shadcn_
<FormField
key={x}
control={form.control}
name={x}
@@ -258,9 +258,9 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
) : null
}
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ id={x} {...field} disabled={!canUpdateConfig} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -367,6 +367,6 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
)}
</form>
<PreventNavigationOnUnsavedChanges hasChanges={hasChanges} />
</Form_Shadcn_>
</Form>
)
}
apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
+23 -23
View File
@@ -6,9 +6,9 @@ import { SubmitHandler, useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
RadioGroupStacked,
RadioGroupStackedItem,
@@ -296,13 +296,13 @@ export const CreateHookSheet = ({
</SheetHeader>
<Separator />
<SheetSection className="overflow-auto flex-grow px-0">
<Form_Shadcn_ {...form}>
<Form {...form}>
<form
id={FORM_ID}
className="space-y-6 w-full py-5 flex-1"
onSubmit={form.handleSubmit(onSubmit)}
>
<FormField_Shadcn_
<FormField
key="enabled"
name="enabled"
control={form.control}
@@ -317,23 +317,23 @@ export const CreateHookSheet = ({
: undefined
}
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={field.disabled}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<Separator />
<FormField_Shadcn_
<FormField
control={form.control}
name="selectedType"
render={({ field }) => (
<FormItemLayout label="Hook type" className="px-5">
<FormControl_Shadcn_>
<FormControl>
<RadioGroupStacked
value={field.value}
onValueChange={(value) => field.onChange(value)}
@@ -353,14 +353,14 @@ export const CreateHookSheet = ({
description="Used to call any HTTPS endpoint."
/>
</RadioGroupStacked>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
{values.selectedType === 'postgres' ? (
<>
<div className="grid grid-cols-2 gap-8 px-5">
<FormField_Shadcn_
<FormField
key="postgresValues.schema"
control={form.control}
name="postgresValues.schema"
@@ -369,7 +369,7 @@ export const CreateHookSheet = ({
label="Postgres Schema"
description="Postgres schema where the function is defined"
>
<FormControl_Shadcn_>
<FormControl>
<SchemaSelector
size="small"
showError={false}
@@ -378,11 +378,11 @@ export const CreateHookSheet = ({
onSelectSchema={(name) => field.onChange(name)}
disabled={field.disabled}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
key="postgresValues.functionName"
control={form.control}
name="postgresValues.functionName"
@@ -391,7 +391,7 @@ export const CreateHookSheet = ({
label="Postgres function"
description="This function will be called by Supabase Auth each time the hook is triggered"
>
<FormControl_Shadcn_>
<FormControl>
<FunctionSelector
size="small"
schema={values.postgresValues.schema}
@@ -419,7 +419,7 @@ export const CreateHookSheet = ({
</span>
}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -441,7 +441,7 @@ export const CreateHookSheet = ({
</>
) : (
<div className="flex flex-col gap-4 px-5">
<FormField_Shadcn_
<FormField
key="httpsValues.url"
control={form.control}
name="httpsValues.url"
@@ -450,13 +450,13 @@ export const CreateHookSheet = ({
label="URL"
description="Supabase Auth will send a HTTPS POST request to this URL each time the hook is triggered."
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
key="httpsValues.secret"
control={form.control}
name="httpsValues.secret"
@@ -477,7 +477,7 @@ export const CreateHookSheet = ({
</div>
}
>
<FormControl_Shadcn_>
<FormControl>
<div className="flex flex-row">
<Input_Shadcn_ {...field} className="rounded-r-none border-r-0" />
<Button
@@ -494,14 +494,14 @@ export const CreateHookSheet = ({
Generate secret
</Button>
</div>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</div>
)}
</form>
</Form_Shadcn_>
</Form>
</SheetSection>
<SheetFooter>
{!isCreating && (
apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
+27 -27
View File
@@ -11,9 +11,9 @@ import {
Card,
CardContent,
CardFooter,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
FormInputGroupInput,
Input_Shadcn_,
InputGroup,
@@ -350,11 +350,11 @@ export const MfaAuthSettingsForm = () => {
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Form_Shadcn_ {...totpForm}>
<Form {...totpForm}>
<form onSubmit={totpForm.handleSubmit(onSubmitTotpForm)} className="space-y-4">
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={totpForm.control}
name="MFA_TOTP"
render={({ field }) => (
@@ -363,7 +363,7 @@ export const MfaAuthSettingsForm = () => {
label="TOTP (App Authenticator)"
description="Control use of TOTP (App Authenticator) factors"
>
<FormControl_Shadcn_>
<FormControl>
<Select_Shadcn_
value={field.value}
onValueChange={field.onChange}
@@ -380,14 +380,14 @@ export const MfaAuthSettingsForm = () => {
))}
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={totpForm.control}
name="MFA_MAX_ENROLLED_FACTORS"
render={({ field }) => (
@@ -396,7 +396,7 @@ export const MfaAuthSettingsForm = () => {
label="Maximum number of per-user MFA factors"
description="How many MFA factors can be enrolled at once per user."
>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
type="number"
@@ -413,7 +413,7 @@ export const MfaAuthSettingsForm = () => {
<InputGroupText>factors</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -436,7 +436,7 @@ export const MfaAuthSettingsForm = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
@@ -447,7 +447,7 @@ export const MfaAuthSettingsForm = () => {
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Form_Shadcn_ {...phoneForm}>
<Form {...phoneForm}>
<form
onSubmit={(e) => {
e.preventDefault()
@@ -456,7 +456,7 @@ export const MfaAuthSettingsForm = () => {
>
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={phoneForm.control}
name="MFA_PHONE"
render={({ field }) => (
@@ -465,7 +465,7 @@ export const MfaAuthSettingsForm = () => {
label="Phone"
description="Control use of phone factors"
>
<FormControl_Shadcn_>
<FormControl>
<Select_Shadcn_
value={field.value}
onValueChange={field.onChange}
@@ -482,7 +482,7 @@ export const MfaAuthSettingsForm = () => {
))}
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -498,7 +498,7 @@ export const MfaAuthSettingsForm = () => {
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={phoneForm.control}
name="MFA_PHONE_OTP_LENGTH"
render={({ field }) => (
@@ -507,7 +507,7 @@ export const MfaAuthSettingsForm = () => {
label="Phone OTP Length"
description="Number of digits in OTP"
>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
type="number"
@@ -524,14 +524,14 @@ export const MfaAuthSettingsForm = () => {
<InputGroupText>digits</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={phoneForm.control}
name="MFA_PHONE_TEMPLATE"
render={({ field }) => (
@@ -540,7 +540,7 @@ export const MfaAuthSettingsForm = () => {
label="Phone verification message"
description="To format the OTP code use `{{ .Code }}`"
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
type="text"
{...field}
@@ -550,7 +550,7 @@ export const MfaAuthSettingsForm = () => {
data-form-type="other" // Dashlane
data-bwignore // Bitwarden
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -588,7 +588,7 @@ export const MfaAuthSettingsForm = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
@@ -619,11 +619,11 @@ export const MfaAuthSettingsForm = () => {
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Form_Shadcn_ {...securityForm}>
<Form {...securityForm}>
<form onSubmit={securityForm.handleSubmit(onSubmitSecurityForm)}>
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={securityForm.control}
name="MFA_ALLOW_LOW_AAL"
render={({ field }) => (
@@ -632,13 +632,13 @@ export const MfaAuthSettingsForm = () => {
label="Limit duration of AAL1 sessions"
description="A user's session will be terminated unless they verify one of their factors within 15 minutes of initial sign in. Recommendation: ON"
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={!field.value}
onCheckedChange={(value) => field.onChange(!value)}
disabled={!canUpdateConfig || !hasAccessToEnhanceSecurity}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -673,7 +673,7 @@ export const MfaAuthSettingsForm = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
</>
apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
+25 -25
View File
@@ -12,11 +12,11 @@ import { toast } from 'sonner'
import {
Button,
cn,
Form_Shadcn_,
FormControl_Shadcn_,
FormDescription_Shadcn_,
FormField_Shadcn_,
FormLabel_Shadcn_,
Form,
FormControl,
FormDescription,
FormField,
FormLabel,
Input_Shadcn_,
Separator,
Sheet,
@@ -265,27 +265,27 @@ export const CreateOrUpdateOAuthAppSheet = ({
</div>
</SheetHeader>
<SheetSection className="overflow-auto flex-grow px-0">
<Form_Shadcn_ {...form}>
<Form {...form}>
<form className="space-y-6" onSubmit={form.handleSubmit(onSubmit)} id={FORM_ID}>
<div className="px-5 flex items-start justify-between gap-4">
<div className="flex-grow space-y-4">
<FormField_Shadcn_
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItemLayout label="Name">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="My OAuth App" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="logo_uri"
render={() => (
<FormItemLayout label="Logo" description="Upload a logo for your OAuth app">
<FormControl_Shadcn_>
<FormControl>
<div className="flex gap-4 items-center">
<button
type="button"
@@ -325,7 +325,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
onChange={onFileUpload}
/>
</div>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -338,12 +338,12 @@ export const CreateOrUpdateOAuthAppSheet = ({
<div className="px-5">
<Panel>
<Panel.Content className="space-y-2">
<FormField_Shadcn_
<FormField
control={form.control}
name="client_id"
render={() => (
<FormItemLayout label="Client ID">
<FormControl_Shadcn_>
<FormControl>
<Input
copy
readOnly
@@ -352,14 +352,14 @@ export const CreateOrUpdateOAuthAppSheet = ({
onChange={() => {}}
onCopy={() => toast.success('Client ID copied to clipboard')}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
{!isPublicClient && (
<>
<FormField_Shadcn_
<FormField
control={form.control}
name="client_secret"
render={() => (
@@ -367,7 +367,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
label="Client Secret"
description="Client secret is hidden for security. Use the regenerate button to create a new one."
>
<FormControl_Shadcn_>
<FormControl>
<Input
readOnly
type="password"
@@ -375,7 +375,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
value="****************************************************************"
onChange={() => {}}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -397,7 +397,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
)}
<div className="px-5 gap-2 flex flex-col">
<FormLabel_Shadcn_ className="text-foreground">Redirect URIs</FormLabel_Shadcn_>
<FormLabel className="text-foreground">Redirect URIs</FormLabel>
<SingleValueFieldArray
control={form.control}
name="redirect_uris"
@@ -409,13 +409,13 @@ export const CreateOrUpdateOAuthAppSheet = ({
minimumRows={1}
rowsClassName="space-y-2"
/>
<FormDescription_Shadcn_ className="text-foreground-lighter">
<FormDescription className="text-foreground-lighter">
URLs where users will be redirected after authentication.
</FormDescription_Shadcn_>
</FormDescription>
</div>
<Separator />
<FormField_Shadcn_
<FormField
control={form.control}
name="client_type"
render={({ field }) => (
@@ -435,7 +435,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
}
className={'px-5'}
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value === 'public'}
onCheckedChange={(checked) =>
@@ -443,12 +443,12 @@ export const CreateOrUpdateOAuthAppSheet = ({
}
disabled={isEditMode}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</form>
</Form_Shadcn_>
</Form>
</SheetSection>
<SheetFooter>
<Button type="default" disabled={isCreating || isUpdating} onClick={onClose}>
apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
+14 -14
View File
@@ -11,9 +11,9 @@ import {
Card,
CardContent,
CardFooter,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
Switch,
} from 'ui'
@@ -214,11 +214,11 @@ export const OAuthServerSettingsForm = () => {
<>
<PageSection>
<PageSectionContent>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="OAUTH_SERVER_ENABLED"
render={({ field }) => (
@@ -227,13 +227,13 @@ export const OAuthServerSettingsForm = () => {
label="Enable the Supabase OAuth Server"
description="Enable OAuth server functionality for your project to create and manage OAuth applications."
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={handleOAuthServerToggle}
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -266,7 +266,7 @@ export const OAuthServerSettingsForm = () => {
</FormItemLayout>
</CardContent>
<CardContent className="space-y-4">
<FormField_Shadcn_
<FormField
control={form.control}
name="OAUTH_SERVER_AUTHORIZATION_PATH"
render={({ field }) => (
@@ -275,9 +275,9 @@ export const OAuthServerSettingsForm = () => {
layout="flex-row-reverse"
description="Path where you'll implement the OAuth authorization UI (consent screens)."
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="/auth/authorize" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -315,7 +315,7 @@ export const OAuthServerSettingsForm = () => {
})()}
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="OAUTH_SERVER_ALLOW_DYNAMIC_REGISTRATION"
render={({ field }) => (
@@ -334,13 +334,13 @@ export const OAuthServerSettingsForm = () => {
</>
}
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={handleDynamicAppsToggle}
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -363,7 +363,7 @@ export const OAuthServerSettingsForm = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
{isSuccess && authConfig?.OAUTH_SERVER_ENABLED && form.watch('OAUTH_SERVER_ENABLED') && (
apps/studio/components/interfaces/Auth/Passkeys/PasskeysSettingsForm.tsx
+19 -19
View File
@@ -8,12 +8,12 @@ import {
Card,
CardContent,
CardFooter,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
Switch,
useWatch_Shadcn_,
useWatch,
} from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
@@ -279,7 +279,7 @@ export const PasskeysSettingsForm = () => {
updateAuthConfig({ projectRef, config: payload })
}
const passKeysEnabled = useWatch_Shadcn_({ control: form.control, name: 'PASSKEY_ENABLED' })
const passKeysEnabled = useWatch({ control: form.control, name: 'PASSKEY_ENABLED' })
if (isPermissionsLoaded && !canReadConfig) {
return <NoPermission resourceText="view passkey settings" />
@@ -290,11 +290,11 @@ export const PasskeysSettingsForm = () => {
}
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="PASSKEY_ENABLED"
render={({ field }) => (
@@ -309,13 +309,13 @@ export const PasskeysSettingsForm = () => {
</>
}
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -324,7 +324,7 @@ export const PasskeysSettingsForm = () => {
{passKeysEnabled && (
<>
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="WEBAUTHN_RP_DISPLAY_NAME"
render={({ field }) => (
@@ -333,15 +333,15 @@ export const PasskeysSettingsForm = () => {
label="Relying Party Display Name"
description="A human-readable name for your application shown during passkey registration."
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="My project" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="WEBAUTHN_RP_ID"
render={({ field }) => (
@@ -350,15 +350,15 @@ export const PasskeysSettingsForm = () => {
label="Relying Party ID"
description='The domain name for your application (e.g. "example.com"). This determines which passkeys can be used.'
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="example.com" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="WEBAUTHN_RP_ORIGINS"
render={({ field }) => (
@@ -367,9 +367,9 @@ export const PasskeysSettingsForm = () => {
label="Relying Party Origins"
description='Comma-separated list of allowed origins (e.g. "https://example.com"). HTTPS is required except for localhost.'
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="https://example.com" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -396,6 +396,6 @@ export const PasskeysSettingsForm = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
)
}
apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
+16 -16
View File
@@ -8,9 +8,9 @@ import {
Card,
CardContent,
CardFooter,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
FormInputGroupInput,
InputGroup,
InputGroupAddon,
@@ -219,11 +219,11 @@ export const PerformanceSettingsForm = () => {
<ScaffoldSection isFullWidth>
<ScaffoldSectionTitle className="mb-4">Request duration</ScaffoldSectionTitle>
<Form_Shadcn_ {...requestDurationForm}>
<Form {...requestDurationForm}>
<form onSubmit={requestDurationForm.handleSubmit(onSubmitRequestDurationForm)}>
<Card>
<CardContent className="pt-6">
<FormField_Shadcn_
<FormField
control={requestDurationForm.control}
name="API_MAX_REQUEST_DURATION"
render={({ field }) => (
@@ -239,7 +239,7 @@ export const PerformanceSettingsForm = () => {
>
<div className="flex flex-col gap-2">
<div className="relative">
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
type="number"
@@ -252,7 +252,7 @@ export const PerformanceSettingsForm = () => {
<InputGroupText>seconds</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</div>
<p className="text-xs text-right text-foreground-muted">
@@ -286,17 +286,17 @@ export const PerformanceSettingsForm = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</ScaffoldSection>
<ScaffoldSection isFullWidth>
<ScaffoldSectionTitle className="mb-4">Connection management</ScaffoldSectionTitle>
<Form_Shadcn_ {...databaseForm}>
<Form {...databaseForm}>
<form onSubmit={databaseForm.handleSubmit(onSubmitDatabaseForm)} className="space-y-4">
<Card>
<CardContent className="pt-6 flex flex-col gap-4">
<FormField_Shadcn_
<FormField
control={databaseForm.control}
name="DB_MAX_POOL_SIZE_UNIT"
render={({ field }) => (
@@ -311,7 +311,7 @@ export const PerformanceSettingsForm = () => {
</p>
}
>
<FormControl_Shadcn_>
<FormControl>
<Select_Shadcn_
value={field.value}
onValueChange={(value) => {
@@ -357,13 +357,13 @@ export const PerformanceSettingsForm = () => {
</SelectItem_Shadcn_>
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={databaseForm.control}
name="DB_MAX_POOL_SIZE"
render={({ field }) => (
@@ -382,7 +382,7 @@ export const PerformanceSettingsForm = () => {
>
<div className="flex flex-col gap-2">
<div className="relative">
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
type="number"
@@ -395,7 +395,7 @@ export const PerformanceSettingsForm = () => {
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</div>
{isLoadingMaxConns ? (
<ShimmeringLoader className="py-2 w-16 ml-auto" />
@@ -436,7 +436,7 @@ export const PerformanceSettingsForm = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</ScaffoldSection>
</>
)
apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
+46 -46
View File
@@ -11,11 +11,11 @@ import {
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
Input_Shadcn_,
Popover_Shadcn_,
PopoverContent_Shadcn_,
@@ -110,36 +110,36 @@ export const PolicyDetailsV2 = ({
<>
<div className="px-5 py-5 flex flex-col gap-y-4 border-b">
<div className="items-start justify-between gap-4 grid grid-cols-12">
<FormField_Shadcn_
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem_Shadcn_ className="col-span-6 flex flex-col gap-y-1">
<FormLabel_Shadcn_>Policy Name</FormLabel_Shadcn_>
<FormControl_Shadcn_>
<FormItem className="col-span-6 flex flex-col gap-y-1">
<FormLabel>Policy Name</FormLabel>
<FormControl>
<Input_Shadcn_
{...field}
disabled={!canUpdatePolicies}
className="bg-control border-control"
placeholder="Provide a name for your policy"
/>
</FormControl_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="table"
render={({ field }) => (
<FormItem_Shadcn_ className="col-span-6 flex flex-col gap-y-1">
<FormLabel_Shadcn_>
<FormItem className="col-span-6 flex flex-col gap-y-1">
<FormLabel>
Table
<code className="text-code-inline">on</code> clause
</FormLabel_Shadcn_>
</FormLabel>
{authContext === 'database' && (
<FormControl_Shadcn_>
<FormControl>
<Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
<PopoverTrigger_Shadcn_ asChild>
<Button
@@ -199,32 +199,32 @@ export const PolicyDetailsV2 = ({
</Command_Shadcn_>
</PopoverContent_Shadcn_>
</Popover_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
)}
{authContext === 'realtime' && (
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
disabled
value="messages.realtime"
className="bg-control border-control"
/>
</FormControl_Shadcn_>
</FormControl>
)}
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
<FormMessage />
</FormItem>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="behavior"
render={({ field }) => (
<FormItem_Shadcn_ className="col-span-6 flex flex-col gap-y-1">
<FormLabel_Shadcn_>
<FormItem className="col-span-6 flex flex-col gap-y-1">
<FormLabel>
Policy Behavior <code className="text-code-inline">as</code> clause
</FormLabel_Shadcn_>
<FormControl_Shadcn_>
</FormLabel>
<FormControl>
<Select_Shadcn_
disabled={isEditing}
value={field.value}
@@ -250,20 +250,20 @@ export const PolicyDetailsV2 = ({
</SelectGroup_Shadcn_>
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="command"
render={({ field }) => (
<FormItem_Shadcn_ className="col-span-12 flex flex-col gap-y-1">
<FormLabel_Shadcn_>
<FormItem className="col-span-12 flex flex-col gap-y-1">
<FormLabel>
Policy Command <code className="text-code-inline">for</code> clause
</FormLabel_Shadcn_>
<FormControl_Shadcn_>
</FormLabel>
<FormControl>
<RadioGroup_Shadcn_
disabled={isEditing}
value={field.value}
@@ -288,20 +288,20 @@ export const PolicyDetailsV2 = ({
/>
))}
</RadioGroup_Shadcn_>
</FormControl_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="roles"
render={({ field }) => (
<FormItem_Shadcn_ className="col-span-12 flex flex-col gap-y-1">
<FormLabel_Shadcn_>
<FormItem className="col-span-12 flex flex-col gap-y-1">
<FormLabel>
Target Roles <code className="text-code-inline">to</code> clause
</FormLabel_Shadcn_>
<FormControl_Shadcn_>
</FormLabel>
<FormControl>
<MultiSelectV2
disabled={!canUpdatePolicies}
options={formattedRoles}
@@ -310,9 +310,9 @@ export const PolicyDetailsV2 = ({
searchPlaceholder="Search for a role"
onChange={(roles) => form.setValue('roles', roles.join(', '))}
/>
</FormControl_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/index.tsx
+3 -3
View File
@@ -12,7 +12,7 @@ import {
Button,
Checkbox_Shadcn_,
cn,
Form_Shadcn_,
Form,
Label_Shadcn_,
ScrollArea,
Sheet,
@@ -290,7 +290,7 @@ export const PolicyEditorPanel = memo(function ({
return (
<>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)}>
<Sheet open={visible} onOpenChange={handleOpenChange}>
<SheetContent
@@ -571,7 +571,7 @@ export const PolicyEditorPanel = memo(function ({
</SheetContent>
</Sheet>
</form>
</Form_Shadcn_>
</Form>
<DiscardChangesConfirmationDialog
{...modalProps}
apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
+15 -15
View File
@@ -11,9 +11,9 @@ import {
Card,
CardContent,
CardFooter,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Select_Shadcn_,
SelectContent_Shadcn_,
SelectItem_Shadcn_,
@@ -250,11 +250,11 @@ export const ProtectionAuthSettingsForm = () => {
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Form_Shadcn_ {...protectionForm}>
<Form {...protectionForm}>
<form onSubmit={protectionForm.handleSubmit(onSubmitProtection)} className="space-y-4">
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={protectionForm.control}
name="SECURITY_CAPTCHA_ENABLED"
render={({ field }) => (
@@ -263,13 +263,13 @@ export const ProtectionAuthSettingsForm = () => {
label="Enable Captcha protection"
description="Protect authentication endpoints from bots and abuse."
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -278,7 +278,7 @@ export const ProtectionAuthSettingsForm = () => {
{SECURITY_CAPTCHA_ENABLED && (
<>
<CardContent>
<FormField_Shadcn_
<FormField
control={protectionForm.control}
name="SECURITY_CAPTCHA_PROVIDER"
render={({ field }) => {
@@ -287,7 +287,7 @@ export const ProtectionAuthSettingsForm = () => {
)
return (
<FormItemLayout layout="flex-row-reverse" label="Choose Captcha Provider">
<FormControl_Shadcn_>
<FormControl>
<Select_Shadcn_
value={field.value}
onValueChange={field.onChange}
@@ -304,7 +304,7 @@ export const ProtectionAuthSettingsForm = () => {
))}
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
<InlineLink
href={
field.value === 'hcaptcha'
@@ -324,7 +324,7 @@ export const ProtectionAuthSettingsForm = () => {
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={protectionForm.control}
name="SECURITY_CAPTCHA_SECRET"
render={({ field }) => (
@@ -333,9 +333,9 @@ export const ProtectionAuthSettingsForm = () => {
label="Captcha secret"
description="Obtain this secret from the provider."
>
<FormControl_Shadcn_>
<FormControl>
<Input {...field} reveal copy disabled={!canUpdateConfig} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -344,7 +344,7 @@ export const ProtectionAuthSettingsForm = () => {
)}
<CardContent>
<FormField_Shadcn_
<FormField
control={protectionForm.control}
name="PASSWORD_HIBP_ENABLED"
render={({ field }) => (
@@ -383,7 +383,7 @@ export const ProtectionAuthSettingsForm = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
)
apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
+31 -31
View File
@@ -10,9 +10,9 @@ import {
Card,
CardContent,
CardFooter,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
FormInputGroupInput,
InputGroup,
InputGroupAddon,
@@ -221,11 +221,11 @@ export const RateLimits = () => {
<>
<PageSection>
<PageSectionContent>
<Form_Shadcn_ {...rateLimitForm}>
<Form {...rateLimitForm}>
<form onSubmit={rateLimitForm.handleSubmit(onSubmitRateLimitForm)}>
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={rateLimitForm.control}
name="RATE_LIMIT_EMAIL_SENT"
render={({ field }) => (
@@ -236,7 +236,7 @@ export const RateLimits = () => {
>
<Tooltip>
<TooltipTrigger asChild>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
type="number"
@@ -248,7 +248,7 @@ export const RateLimits = () => {
<InputGroupText>emails/h</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</TooltipTrigger>
{!canUpdateConfig || !canUpdateEmailLimit ? (
<TooltipContent side="left" className="w-80 p-4">
@@ -296,7 +296,7 @@ export const RateLimits = () => {
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={rateLimitForm.control}
name="RATE_LIMIT_SMS_SENT"
render={({ field }) => (
@@ -307,7 +307,7 @@ export const RateLimits = () => {
>
<Tooltip>
<TooltipTrigger asChild>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
type="number"
@@ -319,7 +319,7 @@ export const RateLimits = () => {
<InputGroupText>sms/h</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</TooltipTrigger>
{!canUpdateConfig || !canUpdateSMSRateLimit ? (
<TooltipContent side="left" className="w-80 p-4">
@@ -345,7 +345,7 @@ export const RateLimits = () => {
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={rateLimitForm.control}
name="RATE_LIMIT_TOKEN_REFRESH"
render={({ field }) => (
@@ -356,7 +356,7 @@ export const RateLimits = () => {
>
<Tooltip>
<TooltipTrigger asChild>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
type="number"
@@ -368,7 +368,7 @@ export const RateLimits = () => {
<InputGroupText>requests/5 min</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</TooltipTrigger>
{!canUpdateConfig && (
<TooltipContent side="left" className="w-80 p-4">
@@ -393,7 +393,7 @@ export const RateLimits = () => {
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={rateLimitForm.control}
name="RATE_LIMIT_VERIFY"
render={({ field }) => (
@@ -404,7 +404,7 @@ export const RateLimits = () => {
>
<Tooltip>
<TooltipTrigger asChild>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
type="number"
@@ -416,7 +416,7 @@ export const RateLimits = () => {
<InputGroupText>requests/5 min</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</TooltipTrigger>
{!canUpdateConfig && (
<TooltipContent side="left" className="w-80 p-4">
@@ -441,7 +441,7 @@ export const RateLimits = () => {
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={rateLimitForm.control}
name="RATE_LIMIT_ANONYMOUS_USERS"
render={({ field }) => (
@@ -452,7 +452,7 @@ export const RateLimits = () => {
>
<Tooltip>
<TooltipTrigger asChild>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
type="number"
@@ -464,7 +464,7 @@ export const RateLimits = () => {
<InputGroupText>requests/h</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</TooltipTrigger>
{!canUpdateConfig || !canUpdateAnonymousUsersRateLimit ? (
<TooltipContent side="left" className="w-80 p-4">
@@ -488,7 +488,7 @@ export const RateLimits = () => {
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={rateLimitForm.control}
name="RATE_LIMIT_OTP"
render={({ field }) => (
@@ -499,7 +499,7 @@ export const RateLimits = () => {
>
<Tooltip>
<TooltipTrigger asChild>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
type="number"
@@ -511,7 +511,7 @@ export const RateLimits = () => {
<InputGroupText>requests/5 min</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</TooltipTrigger>
{!canUpdateConfig && (
<TooltipContent side="left" className="w-80 p-4">
@@ -536,7 +536,7 @@ export const RateLimits = () => {
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={rateLimitForm.control}
name="RATE_LIMIT_WEB3"
render={({ field }) => (
@@ -547,7 +547,7 @@ export const RateLimits = () => {
>
<Tooltip>
<TooltipTrigger asChild>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
type="number"
@@ -559,7 +559,7 @@ export const RateLimits = () => {
<InputGroupText>requests/5 min</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</TooltipTrigger>
{!canUpdateConfig || !canUpdateWeb3RateLimit ? (
<TooltipContent side="left" className="w-80 p-4">
@@ -601,7 +601,7 @@ export const RateLimits = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
@@ -615,11 +615,11 @@ export const RateLimits = () => {
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Form_Shadcn_ {...ipForwardingForm}>
<Form {...ipForwardingForm}>
<form onSubmit={ipForwardingForm.handleSubmit(onSubmitIPForwardingForm)}>
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={ipForwardingForm.control}
name="SECURITY_SB_FORWARDED_FOR_ENABLED"
render={({ field }) => (
@@ -636,13 +636,13 @@ export const RateLimits = () => {
</InlineLink>
</>
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={(value) => field.onChange(value)}
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -666,7 +666,7 @@ export const RateLimits = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
</>
apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
+3 -3
View File
@@ -4,7 +4,7 @@ import { useParams } from 'common'
import { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { Button, cn, DialogSectionSeparator, Form_Shadcn_, Modal, ScrollArea } from 'ui'
import { Button, cn, DialogSectionSeparator, Form, Modal, ScrollArea } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { SingleValueFieldArray } from 'ui-patterns/form/SingleValueFieldArray/SingleValueFieldArray'
import * as z from 'zod'
@@ -94,7 +94,7 @@ export const AddNewURLModal = ({ visible, allowList, onClose }: AddNewURLModalPr
header="Add new redirect URLs"
description="This will add a URL to a list of allowed URLs that can interact with your Authentication services for this project."
>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<Modal.Content className="flex flex-col gap-y-2 px-0">
<Label className="px-5">URL</Label>
@@ -130,7 +130,7 @@ export const AddNewURLModal = ({ visible, allowList, onClose }: AddNewURLModalPr
</Button>
</Modal.Content>
</form>
</Form_Shadcn_>
</Form>
</Modal>
)
}
apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
+22 -22
View File
@@ -9,9 +9,9 @@ import {
Card,
CardContent,
CardFooter,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
FormInputGroupInput,
InputGroup,
InputGroupAddon,
@@ -203,14 +203,14 @@ export const SessionsAuthSettingsForm = () => {
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Form_Shadcn_ {...refreshTokenForm}>
<Form {...refreshTokenForm}>
<form
onSubmit={refreshTokenForm.handleSubmit(onSubmitRefreshTokens)}
className="space-y-4"
>
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={refreshTokenForm.control}
name="REFRESH_TOKEN_ROTATION_ENABLED"
render={({ field }) => (
@@ -219,19 +219,19 @@ export const SessionsAuthSettingsForm = () => {
label="Detect and revoke potentially compromised refresh tokens"
description="Prevent replay attacks from potentially compromised refresh tokens."
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={refreshTokenForm.control}
name="SECURITY_REFRESH_TOKEN_REUSE_INTERVAL"
render={({ field }) => (
@@ -240,7 +240,7 @@ export const SessionsAuthSettingsForm = () => {
label="Refresh token reuse interval"
description="Time interval where the same refresh token can be used multiple times to request for an access token. Recommendation: 10 seconds."
>
<FormControl_Shadcn_ className="w-full">
<FormControl className="w-full">
<InputGroup>
<FormInputGroupInput
type="number"
@@ -252,7 +252,7 @@ export const SessionsAuthSettingsForm = () => {
<InputGroupText>seconds</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -278,7 +278,7 @@ export const SessionsAuthSettingsForm = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
@@ -289,14 +289,14 @@ export const SessionsAuthSettingsForm = () => {
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Form_Shadcn_ {...userSessionsForm}>
<Form {...userSessionsForm}>
<form
onSubmit={userSessionsForm.handleSubmit(onSubmitUserSessions)}
className="space-y-4"
>
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={userSessionsForm.control}
name="SESSIONS_SINGLE_PER_USER"
render={({ field }) => (
@@ -305,20 +305,20 @@ export const SessionsAuthSettingsForm = () => {
label="Enforce single session per user"
description="If enabled, all but a user's most recently active session will be terminated."
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={!canUpdateConfig || !hasUserSessionsEntitlement}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={userSessionsForm.control}
name="SESSIONS_TIMEBOX"
render={({ field }) => (
@@ -327,7 +327,7 @@ export const SessionsAuthSettingsForm = () => {
label="Time-box user sessions"
description="The amount of time before a user is forced to sign in again. Use 0 for never."
>
<FormControl_Shadcn_ className="w-full">
<FormControl className="w-full">
<InputGroup>
<FormInputGroupInput
type="number"
@@ -341,14 +341,14 @@ export const SessionsAuthSettingsForm = () => {
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</CardContent>
<CardContent>
<FormField_Shadcn_
<FormField
control={userSessionsForm.control}
name="SESSIONS_INACTIVITY_TIMEOUT"
render={({ field }) => (
@@ -357,7 +357,7 @@ export const SessionsAuthSettingsForm = () => {
label="Inactivity timeout"
description="The amount of time a user needs to be inactive to be forced to sign in again. Use 0 for never."
>
<FormControl_Shadcn_ className="w-full">
<FormControl className="w-full">
<InputGroup>
<FormInputGroupInput
type="number"
@@ -371,7 +371,7 @@ export const SessionsAuthSettingsForm = () => {
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -408,7 +408,7 @@ export const SessionsAuthSettingsForm = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
</>
apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx
+8 -8
View File
@@ -9,9 +9,9 @@ import {
Card,
CardContent,
CardFooter,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
} from 'ui'
import { GenericSkeletonLoader } from 'ui-patterns'
@@ -112,11 +112,11 @@ const SiteUrl = () => {
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Form_Shadcn_ {...siteUrlForm}>
<Form {...siteUrlForm}>
<form onSubmit={siteUrlForm.handleSubmit(onSubmitSiteUrl)}>
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={siteUrlForm.control}
name="SITE_URL"
render={({ field }) => (
@@ -125,9 +125,9 @@ const SiteUrl = () => {
label="Site URL"
description="Configure the default redirect URL used when a redirect URL is not specified or doesn't match one from the allow list. This value is also exposed as a template variable in the email templates section. Wildcards cannot be used here."
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} disabled={!canUpdateConfig} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -150,7 +150,7 @@ const SiteUrl = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
)
apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
+29 -29
View File
@@ -10,9 +10,9 @@ import {
CardContent,
CardFooter,
cn,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
FormInputGroupInput,
Input_Shadcn_,
InputGroup,
@@ -221,11 +221,11 @@ export const SmtpForm = () => {
return (
<PageSection>
<PageSectionContent>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<Card>
<CardContent>
<FormField_Shadcn_
<FormField
control={form.control}
name="ENABLE_SMTP"
render={({ field }) => (
@@ -243,13 +243,13 @@ export const SmtpForm = () => {
</p>
}
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -275,7 +275,7 @@ export const SmtpForm = () => {
</p>
</div>
<div className="col-span-8 space-y-4">
<FormField_Shadcn_
<FormField
control={form.control}
name="SMTP_ADMIN_EMAIL"
render={({ field }) => (
@@ -283,18 +283,18 @@ export const SmtpForm = () => {
label="Sender email address"
description="The email address the emails are sent from."
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder="noreply@yourdomain.com"
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="SMTP_SENDER_NAME"
render={({ field }) => (
@@ -302,13 +302,13 @@ export const SmtpForm = () => {
label="Sender name"
description="Name displayed in the recipient's inbox."
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder="Your Name"
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -325,7 +325,7 @@ export const SmtpForm = () => {
</p>
</div>
<div className="col-span-8 space-y-4">
<FormField_Shadcn_
<FormField
control={form.control}
name="SMTP_HOST"
render={({ field }) => (
@@ -333,13 +333,13 @@ export const SmtpForm = () => {
label="Host"
description="Hostname or IP address of your SMTP server."
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder="your.smtp.host.com"
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -355,7 +355,7 @@ export const SmtpForm = () => {
/>
)}
<FormField_Shadcn_
<FormField
control={form.control}
name="SMTP_PORT"
render={({ field }) => (
@@ -371,7 +371,7 @@ export const SmtpForm = () => {
</>
}
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
type="number"
value={field.value}
@@ -379,12 +379,12 @@ export const SmtpForm = () => {
placeholder="587"
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="SMTP_MAX_FREQUENCY"
render={({ field }) => (
@@ -392,7 +392,7 @@ export const SmtpForm = () => {
label="Minimum interval per user"
description="The minimum time in seconds between emails before another email can be sent to the same user."
>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
type="number"
@@ -404,12 +404,12 @@ export const SmtpForm = () => {
<InputGroupText>seconds</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="SMTP_USER"
render={({ field }) => (
@@ -417,18 +417,18 @@ export const SmtpForm = () => {
label="Username"
description="Username for your SMTP server."
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder="SMTP Username"
disabled={!canUpdateConfig}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="SMTP_PASS"
render={({ field }) => (
@@ -436,9 +436,9 @@ export const SmtpForm = () => {
label="Password"
description="Password for your SMTP server. For security reasons, this password cannot be viewed once saved."
>
<FormControl_Shadcn_>
<FormControl>
<Input {...field} reveal copy disabled={!canUpdateConfig} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -489,7 +489,7 @@ export const SmtpForm = () => {
</CardFooter>
</Card>
</form>
</Form_Shadcn_>
</Form>
</PageSectionContent>
</PageSection>
)
apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AwsRegionSelector.tsx
+3 -3
View File
@@ -9,7 +9,7 @@ import {
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
FormControl_Shadcn_,
FormControl,
Popover_Shadcn_,
PopoverContent_Shadcn_,
PopoverTrigger_Shadcn_,
@@ -61,7 +61,7 @@ export const AwsRegionSelector = ({
return (
<Popover_Shadcn_ open={open} onOpenChange={setOpen}>
<PopoverTrigger_Shadcn_ asChild>
<FormControl_Shadcn_>
<FormControl>
<Button
type="default"
role="combobox"
@@ -75,7 +75,7 @@ export const AwsRegionSelector = ({
>
{value ?? 'Select a region'}
</Button>
</FormControl_Shadcn_>
</FormControl>
</PopoverTrigger_Shadcn_>
<PopoverContent_Shadcn_ id={listboxId} className="p-0" sameWidthAsTrigger>
<Command_Shadcn_>
apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAuth0Dialog.tsx
+11 -11
View File
@@ -12,9 +12,9 @@ import {
DialogHeader,
DialogSection,
DialogTitle,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
Separator,
} from 'ui'
@@ -96,10 +96,10 @@ export const CreateAuth0IntegrationDialog = ({
</DialogHeader>
<Separator />
<DialogSection>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
{/* Enabled flag can't be changed for now because there's no update API call for integrations */}
{/* <FormField_Shadcn_
{/* <FormField
key="enabled"
control={form.control}
name="enabled"
@@ -109,13 +109,13 @@ export const CreateAuth0IntegrationDialog = ({
label={`Enable Auth0 Auth Connection`}
layout="flex"
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={field.disabled}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -124,7 +124,7 @@ export const CreateAuth0IntegrationDialog = ({
This will enable a JWT token from your Auth0 project to access data from this
Supabase project.
</p>
<FormField_Shadcn_
<FormField
key="auth0DomainName"
control={form.control}
name="auth0DomainName"
@@ -139,12 +139,12 @@ export const CreateAuth0IntegrationDialog = ({
>
https://
</Button>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
className="border-l-0 rounded-none border-r-0 z-50"
{...field}
/>
</FormControl_Shadcn_>
</FormControl>
<Button
type="default"
size="small"
@@ -158,7 +158,7 @@ export const CreateAuth0IntegrationDialog = ({
)}
/>
</form>
</Form_Shadcn_>
</Form>
</DialogSection>
<DialogFooter>
{!isCreating && (
apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
+12 -12
View File
@@ -13,9 +13,9 @@ import {
DialogHeader,
DialogSection,
DialogTitle,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
Separator,
} from 'ui'
@@ -108,10 +108,10 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
</DialogHeader>
<Separator />
<DialogSection>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
{/* Enabled flag can't be changed for now because there's no update API call for integrations */}
{/* <FormField_Shadcn_
{/* <FormField
key="enabled"
control={form.control}
name="enabled"
@@ -121,13 +121,13 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
label={`Enable Amazon Cognito Auth Connection`}
layout="flex"
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={field.disabled}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -136,7 +136,7 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
This will enable a JWT token from Amazon Cognito project to access data from this
Supabase project.
</p>
<FormField_Shadcn_
<FormField
key="awsCognitoUserPoolId"
control={form.control}
name="awsCognitoUserPoolId"
@@ -151,14 +151,14 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
>
https://cognito-idp.{awsRegion}.amazonaws.com/
</Button>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ className="rounded-l-none border-l-0 z-50" {...field} />
</FormControl_Shadcn_>
</FormControl>
</div>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="awsRegion"
render={({ field }) => (
@@ -168,7 +168,7 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
)}
/>
</form>
</Form_Shadcn_>
</Form>
</DialogSection>
<DialogFooter>
{!isCreating && (
apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateClerkAuthDialog.tsx
+8 -8
View File
@@ -11,9 +11,9 @@ import {
DialogHeader,
DialogSection,
DialogTitle,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
Separator,
} from 'ui'
@@ -103,7 +103,7 @@ export const CreateClerkAuthIntegrationDialog = ({
<Separator />
<DialogSection>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<p className="text-sm text-foreground-light">
Register your Clerk domain. Visit{' '}
@@ -116,25 +116,25 @@ export const CreateClerkAuthIntegrationDialog = ({
</InlineLink>{' '}
to configure your Clerk instance.
</p>
<FormField_Shadcn_
<FormField
key="domain"
control={form.control}
name="domain"
render={({ field }) => (
<FormItemLayout label="Clerk Domain">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder={
'https://clerk.example.com or https://example.clerk.accounts.dev'
}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</form>
</Form_Shadcn_>
</Form>
</DialogSection>
<DialogFooter>
<Button disabled={isPending} type="default" onClick={() => onClose()}>
apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateFirebaseAuthDialog.tsx
+11 -11
View File
@@ -12,9 +12,9 @@ import {
DialogHeader,
DialogSection,
DialogTitle,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
Separator,
} from 'ui'
@@ -98,10 +98,10 @@ export const CreateFirebaseAuthIntegrationDialog = ({
<Separator />
<DialogSection>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
{/* Enabled flag can't be changed for now because there's no update API call for integrations */}
{/* <FormField_Shadcn_
{/* <FormField
key="enabled"
control={form.control}
name="enabled"
@@ -111,13 +111,13 @@ export const CreateFirebaseAuthIntegrationDialog = ({
label={`Enable Firebase Auth Connection`}
layout="flex"
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={field.disabled}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -127,20 +127,20 @@ export const CreateFirebaseAuthIntegrationDialog = ({
This will enable a JWT token from a specific Firebase project to access data from
this Supabase project.
</p>
<FormField_Shadcn_
<FormField
key="firebaseProjectId"
control={form.control}
name="firebaseProjectId"
render={({ field }) => (
<FormItemLayout label="Firebase Auth Project ID">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</form>
</Form_Shadcn_>
</Form>
</DialogSection>
<DialogFooter>
{!isCreating && (
apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateWorkOSDialog.tsx
+11 -11
View File
@@ -12,9 +12,9 @@ import {
DialogHeader,
DialogSection,
DialogTitle,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
Separator,
} from 'ui'
@@ -102,10 +102,10 @@ export const CreateWorkOSIntegrationDialog = ({
<Separator />
<DialogSection>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
{/* Enabled flag can't be changed for now because there's no update API call for integrations */}
{/* <FormField_Shadcn_
{/* <FormField
key="enabled"
control={form.control}
name="enabled"
@@ -115,13 +115,13 @@ export const CreateWorkOSIntegrationDialog = ({
label={`Enable Firebase Auth Connection`}
layout="flex"
>
<FormControl_Shadcn_>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={field.disabled}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -130,7 +130,7 @@ export const CreateWorkOSIntegrationDialog = ({
<p className="text-sm text-foreground-light">
Enables a JWT from WorkOS to access data from this Supabase project.
</p>
<FormField_Shadcn_
<FormField
key="issuerURL"
control={form.control}
name="issuerURL"
@@ -139,17 +139,17 @@ export const CreateWorkOSIntegrationDialog = ({
label="WorkOS Issuer URL"
description="Obtain your issuer URL from the WorkOS dashboard."
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder="https://api.workos.com/user_management/client_ABCDEFGHIJKLMNOPQRSTUVWXYZ"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</form>
</Form_Shadcn_>
</Form>
</DialogSection>
<DialogFooter>
{!isCreating && (
apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx
+11 -11
View File
@@ -7,9 +7,9 @@ import { toast } from 'sonner'
import {
Button,
cn,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
Modal,
Select_Shadcn_,
@@ -87,7 +87,7 @@ export const BanUserModal = ({ visible, user, onClose }: BanUserModalProps) => {
header="Confirm to ban user"
onCancel={() => onClose()}
>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<Modal.Content className="flex flex-col gap-y-3">
<p className="text-sm">
@@ -95,23 +95,23 @@ export const BanUserModal = ({ visible, user, onClose }: BanUserModalProps) => {
for a specified duration.
</p>
<div className="flex items-start gap-x-2 [&>div:first-child]:flex-grow">
<FormField_Shadcn_
<FormField
control={form.control}
name="value"
render={({ field }) => (
<FormItemLayout className="[&>div>div]:mt-0" label="Set a ban duration">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="unit"
render={({ field }) => (
<FormItemLayout className="[&>div>div]:mt-0 mt-[33px]">
<FormControl_Shadcn_>
<FormControl>
<Select_Shadcn_
{...field}
value={field.value}
@@ -125,7 +125,7 @@ export const BanUserModal = ({ visible, user, onClose }: BanUserModalProps) => {
<SelectItem_Shadcn_ value="days">Days</SelectItem_Shadcn_>
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -150,7 +150,7 @@ export const BanUserModal = ({ visible, user, onClose }: BanUserModalProps) => {
</Button>
</Modal.Content>
</form>
</Form_Shadcn_>
</Form>
</Modal>
)
}
apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx
+30 -30
View File
@@ -12,12 +12,12 @@ import {
DialogHeader,
DialogSectionSeparator,
DialogTitle,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
Input_Shadcn_,
} from 'ui'
import * as z from 'zod'
@@ -68,19 +68,19 @@ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => {
<DialogTitle>Create a new user</DialogTitle>
</DialogHeader>
<DialogSectionSeparator />
<Form_Shadcn_ {...form}>
<Form {...form}>
<form
id="create-user"
className="flex flex-col gap-y-4 p-6"
onSubmit={form.handleSubmit(onCreateUser)}
>
<FormField_Shadcn_
<FormField
name="email"
control={form.control}
render={({ field }) => (
<FormItem_Shadcn_ className="flex flex-col gap-1">
<FormLabel_Shadcn_>Email address</FormLabel_Shadcn_>
<FormControl_Shadcn_>
<FormItem className="flex flex-col gap-1">
<FormLabel>Email address</FormLabel>
<FormControl>
<div className="items-center relative">
<Mail
size={18}
@@ -98,19 +98,19 @@ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => {
className="pl-8"
/>
</div>
</FormControl_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField_Shadcn_
<FormField
name="password"
control={form.control}
render={({ field }) => (
<FormItem_Shadcn_ className="flex flex-col gap-1">
<FormLabel_Shadcn_>User Password</FormLabel_Shadcn_>
<FormControl_Shadcn_>
<FormItem className="flex flex-col gap-1">
<FormLabel>User Password</FormLabel>
<FormControl>
<div className="items-center relative">
<Lock
size={18}
@@ -127,33 +127,33 @@ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => {
className="pl-8"
/>
</div>
</FormControl_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField_Shadcn_
<FormField
name="autoConfirmUser"
control={form.control}
render={({ field }) => (
<FormItem_Shadcn_ className="flex items-center gap-x-2">
<FormControl_Shadcn_>
<FormItem className="flex items-center gap-x-2">
<FormControl>
<Checkbox_Shadcn_
checked={field.value}
onCheckedChange={(value) => field.onChange(value)}
/>
</FormControl_Shadcn_>
<FormLabel_Shadcn_>Auto Confirm User?</FormLabel_Shadcn_>
</FormItem_Shadcn_>
</FormControl>
<FormLabel>Auto Confirm User?</FormLabel>
</FormItem>
)}
/>
<FormLabel_Shadcn_>
<FormLabel>
<p className="text-sm text-foreground-lighter">
A confirmation email will not be sent when creating a user via this form.
</p>
</FormLabel_Shadcn_>
</FormLabel>
<Button
block
@@ -165,7 +165,7 @@ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => {
Create user
</Button>
</form>
</Form_Shadcn_>
</Form>
</DialogContent>
</Dialog>
)
apps/studio/components/interfaces/Auth/Users/InviteUserModal.tsx
+6 -13
View File
@@ -3,14 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useParams } from 'common'
import { SubmitHandler, useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Input_Shadcn_,
Modal,
} from 'ui'
import { Button, Form, FormControl, FormField, Input_Shadcn_, Modal } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import * as z from 'zod'
@@ -69,17 +62,17 @@ const InviteUserModal = ({ visible, setVisible }: InviteUserModalProps) => {
header="Invite a new user"
onCancel={handleToggle}
>
<Form_Shadcn_ {...form}>
<Form {...form}>
<Modal.Content>
<form id={formId} onSubmit={form.handleSubmit(onInviteUser)} noValidate>
<FormField_Shadcn_
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItemLayout layout="vertical" label="User email">
<FormControl_Shadcn_ className="relative col-span-6">
<FormControl className="relative col-span-6">
<Input_Shadcn_ {...field} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -98,7 +91,7 @@ const InviteUserModal = ({ visible, setVisible }: InviteUserModalProps) => {
Invite user
</Button>
</Modal.Content>
</Form_Shadcn_>
</Form>
</Modal>
)
}
apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
+6 -6
View File
@@ -26,10 +26,10 @@ import {
CommandInput_Shadcn_ as CommandInput,
CommandItem_Shadcn_ as CommandItem,
CommandList_Shadcn_ as CommandList,
FormControl_Shadcn_ as FormControl,
FormField_Shadcn_ as FormField,
FormItem_Shadcn_,
FormMessage_Shadcn_ as FormMessage,
FormControl,
FormField,
FormItem,
FormMessage,
Input_Shadcn_ as Input,
Popover_Shadcn_ as Popover,
PopoverContent_Shadcn_ as PopoverContent,
@@ -446,12 +446,12 @@ export const NewPaymentMethodElement = forwardRef(
name="tax_id_value"
control={form.control}
render={({ field }) => (
<FormItem_Shadcn_>
<FormItem>
<FormControl>
<Input {...field} placeholder={selectedTaxId?.placeholder} />
</FormControl>
<FormMessage />
</FormItem_Shadcn_>
</FormItem>
)}
/>
)}
apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
+14 -14
View File
@@ -21,9 +21,9 @@ import {
DialogSection,
DialogSectionSeparator,
DialogTitle,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
Label_Shadcn_ as Label,
Switch,
@@ -291,7 +291,7 @@ export const CreateBranchModal = () => {
</DialogHeader>
<DialogSectionSeparator />
<Form_Shadcn_ {...form}>
<Form {...form}>
<form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
{promptPlanUpgrade && (
<UpgradeToPro
@@ -309,18 +309,18 @@ export const CreateBranchModal = () => {
padding="medium"
className={cn('space-y-4', promptPlanUpgrade && 'opacity-25 pointer-events-none')}
>
<FormField_Shadcn_
<FormField
control={form.control}
name="branchName"
render={({ field }) => (
<FormItemLayout label="Preview Branch Name">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder="e.g. staging, dev-feature-x"
autoComplete="off"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -341,7 +341,7 @@ export const CreateBranchModal = () => {
{isSuccessConnections &&
(githubConnection ? (
<FormField_Shadcn_
<FormField
control={form.control}
name="gitBranchName"
render={({ field }) => (
@@ -372,7 +372,7 @@ export const CreateBranchModal = () => {
description="Automatically deploy changes on every commit"
>
<div className="relative w-full">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder="e.g. main, feat/some-feature"
@@ -382,7 +382,7 @@ export const CreateBranchModal = () => {
setIsGitBranchValid(false)
}}
/>
</FormControl_Shadcn_>
</FormControl>
<div className="absolute top-2.5 right-3 flex items-center gap-2">
{field.value ? (
isCheckingGHBranchValidity ? (
@@ -411,7 +411,7 @@ export const CreateBranchModal = () => {
))}
{allowDataBranching && (
<FormField_Shadcn_
<FormField
control={form.control}
name="withData"
render={({ field }) => (
@@ -426,13 +426,13 @@ export const CreateBranchModal = () => {
className="[&>div>label]:mb-1"
description="Clone production data into this branch"
>
<FormControl_Shadcn_>
<FormControl>
<Switch
disabled={!hasPitrEnabled}
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -632,7 +632,7 @@ export const CreateBranchModal = () => {
</ButtonTooltip>
</DialogFooter>
</form>
</Form_Shadcn_>
</Form>
</DialogContent>
</Dialog>
)
apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx
+11 -11
View File
@@ -17,9 +17,9 @@ import {
DialogSection,
DialogSectionSeparator,
DialogTitle,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
Label_Shadcn_ as Label,
} from 'ui'
@@ -215,21 +215,21 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
<DialogTitle>Edit branch "{branch?.name}"</DialogTitle>
</DialogHeader>
<DialogSectionSeparator />
<Form_Shadcn_ {...form}>
<Form {...form}>
<form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
<DialogSection padding="medium" className="space-y-4">
<FormField_Shadcn_
<FormField
control={form.control}
name="branchName"
render={({ field }) => (
<FormItemLayout label="Preview branch name">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder="e.g. staging, dev-feature-x"
autoComplete="off"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -250,7 +250,7 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
{isSuccessConnections &&
(githubConnection ? (
<FormField_Shadcn_
<FormField
control={form.control}
name="gitBranchName"
render={({ field }) => (
@@ -276,7 +276,7 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
description="Automatically deploy changes on every commit"
>
<div className="relative">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
placeholder="e.g. main, feat/some-feature"
@@ -286,7 +286,7 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
setIsGitBranchValid(false)
}}
/>
</FormControl_Shadcn_>
</FormControl>
<div className="absolute top-2.5 right-3 flex items-center gap-2">
{field.value ? (
isChecking ? (
@@ -338,7 +338,7 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
</Button>
</DialogFooter>
</form>
</Form_Shadcn_>
</Form>
</DialogContent>
</Dialog>
)
apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/CreateNewProjectDialog.tsx
+11 -11
View File
@@ -11,9 +11,9 @@ import {
DialogHeader,
DialogSection,
DialogTitle,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input,
Input_Shadcn_,
} from 'ui'
@@ -102,7 +102,7 @@ export const CreateNewProjectDialog = ({
This process will create a new project and restore your database to it.
</DialogDescription>
</DialogHeader>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form
id={'create-new-project-form'}
onSubmit={form.handleSubmit((data) => {
@@ -134,23 +134,23 @@ export const CreateNewProjectDialog = ({
})}
>
<DialogSection className="pb-6 space-y-4 text-sm">
<FormField_Shadcn_
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItemLayout label="New Project Name">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ placeholder="Enter a name" type="text" {...field} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItemLayout>
<FormControl_Shadcn_>
<FormControl>
<Input
id="db-password"
label="Database password"
@@ -175,7 +175,7 @@ export const CreateNewProjectDialog = ({
/>
}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -190,7 +190,7 @@ export const CreateNewProjectDialog = ({
</Button>
</DialogFooter>
</form>
</Form_Shadcn_>
</Form>
</DialogContent>
</Dialog>
)
apps/studio/components/interfaces/Database/EnumeratedTypes/CreateEnumeratedTypeSidePanel.tsx
+23 -23
View File
@@ -24,13 +24,13 @@ import {
AlertTitle_Shadcn_,
Button,
cn,
Form_Shadcn_,
FormControl_Shadcn_,
FormDescription_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
Input_Shadcn_,
SidePanel,
} from 'ui'
@@ -144,32 +144,32 @@ const CreateEnumeratedTypeSidePanel = ({
}}
>
<SidePanel.Content className="py-4">
<Form_Shadcn_ {...form}>
<Form {...form}>
<form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
<FormField_Shadcn_
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem_Shadcn_>
<FormLabel_Shadcn_>Name</FormLabel_Shadcn_>
<FormControl_Shadcn_>
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input_Shadcn_ {...field} />
</FormControl_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem_Shadcn_>
<FormLabel_Shadcn_>Description</FormLabel_Shadcn_>
<FormControl_Shadcn_>
<FormItem>
<FormLabel>Description</FormLabel>
<FormControl>
<Input_Shadcn_ {...field} />
</FormControl_Shadcn_>
<FormDescription_Shadcn_>Optional</FormDescription_Shadcn_>
</FormItem_Shadcn_>
</FormControl>
<FormDescription>Optional</FormDescription>
</FormItem>
)}
/>
@@ -242,7 +242,7 @@ const CreateEnumeratedTypeSidePanel = ({
Update
</Button>
</form>
</Form_Shadcn_>
</Form>
</SidePanel.Content>
</SidePanel>
)
apps/studio/components/interfaces/Database/EnumeratedTypes/EditEnumeratedTypeSidePanel.tsx
+23 -23
View File
@@ -24,13 +24,13 @@ import {
AlertTitle_Shadcn_,
Button,
cn,
Form_Shadcn_,
FormControl_Shadcn_,
FormDescription_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
Input_Shadcn_,
SidePanel,
} from 'ui'
@@ -179,32 +179,32 @@ const EditEnumeratedTypeSidePanel = ({
}}
>
<SidePanel.Content className="py-4">
<Form_Shadcn_ {...form}>
<Form {...form}>
<form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
<FormField_Shadcn_
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem_Shadcn_>
<FormLabel_Shadcn_>Name</FormLabel_Shadcn_>
<FormControl_Shadcn_>
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input_Shadcn_ {...field} />
</FormControl_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem_Shadcn_>
<FormLabel_Shadcn_>Description</FormLabel_Shadcn_>
<FormControl_Shadcn_>
<FormItem>
<FormLabel>Description</FormLabel>
<FormControl>
<Input_Shadcn_ {...field} />
</FormControl_Shadcn_>
<FormDescription_Shadcn_>Optional</FormDescription_Shadcn_>
</FormItem_Shadcn_>
</FormControl>
<FormDescription>Optional</FormDescription>
</FormItem>
)}
/>
@@ -275,7 +275,7 @@ const EditEnumeratedTypeSidePanel = ({
Update
</Button>
</form>
</Form_Shadcn_>
</Form>
</SidePanel.Content>
</SidePanel>
)
apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypeValueRow.tsx
+8 -16
View File
@@ -2,15 +2,7 @@ import { useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { GripVertical, Trash } from 'lucide-react'
import type { Control, FieldPath, FieldValues } from 'react-hook-form'
import {
Button,
FormControl_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Input_Shadcn_,
} from 'ui'
import { Button, FormControl, FormField, FormItem, FormLabel, FormMessage, Input_Shadcn_ } from 'ui'
interface EnumeratedTypeValueRowProps<
TFieldValues extends FieldValues = FieldValues,
@@ -44,13 +36,13 @@ const EnumeratedTypeValueRow = <TFieldValues extends FieldValues>({
}
return (
<FormField_Shadcn_
<FormField
control={control}
name={name}
render={({ field: inputField }) => (
<FormItem_Shadcn_ ref={setNodeRef} style={style}>
<FormLabel_Shadcn_ className="sr-only">Value {index}</FormLabel_Shadcn_>
<FormControl_Shadcn_>
<FormItem ref={setNodeRef} style={style}>
<FormLabel className="sr-only">Value {index}</FormLabel>
<FormControl>
<div className="flex items-center space-x-2 space-y-2">
<button
ref={setActivatorNodeRef}
@@ -74,9 +66,9 @@ const EnumeratedTypeValueRow = <TFieldValues extends FieldValues>({
onClick={() => onRemoveValue()}
/>
</div>
</FormControl_Shadcn_>
<FormMessage_Shadcn_ className="ml-6" />
</FormItem_Shadcn_>
</FormControl>
<FormMessage className="ml-6" />
</FormItem>
)}
/>
)
apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
+11 -11
View File
@@ -11,9 +11,9 @@ import {
DialogSection,
DialogSectionSeparator,
DialogTitle,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
Select_Shadcn_,
SelectContent_Shadcn_,
@@ -168,7 +168,7 @@ export const EnableExtensionModal = ({
)}
<DialogSection>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form id="enable-extensions-form" onSubmit={form.handleSubmit(onSubmit)}>
{isLoading ? (
<div className="space-y-2">
@@ -191,7 +191,7 @@ export const EnableExtensionModal = ({
</div>
) : (
<div className="flex flex-col gap-y-2">
<FormField_Shadcn_
<FormField
key="schema"
name="schema"
control={form.control}
@@ -200,7 +200,7 @@ export const EnableExtensionModal = ({
name="schema"
label="Select a schema to enable the extension for"
>
<FormControl_Shadcn_>
<FormControl>
<Select_Shadcn_
value={field.value}
onValueChange={field.onChange}
@@ -231,7 +231,7 @@ export const EnableExtensionModal = ({
})}
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -244,15 +244,15 @@ export const EnableExtensionModal = ({
)}
{schema === 'custom' && (
<FormField_Shadcn_
<FormField
key="name"
name="name"
control={form.control}
render={({ field }) => (
<FormItemLayout name="name" label="Schema name">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -260,7 +260,7 @@ export const EnableExtensionModal = ({
</div>
)}
</form>
</Form_Shadcn_>
</Form>
</DialogSection>
<DialogFooter>
apps/studio/components/interfaces/Database/Functions/CreateFunction/CreateFunctionConfigParamsSection.test.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { useForm } from 'react-hook-form'
import { Form_Shadcn_ } from 'ui'
import { Form } from 'ui'
import { describe, expect, it } from 'vitest'
import { CreateFunctionConfigParamsSection } from './CreateFunctionConfigParamsSection'
@@ -18,9 +18,9 @@ const CreateFunctionConfigParamsHarness = () => {
})
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<CreateFunctionConfigParamsSection />
</Form_Shadcn_>
</Form>
)
}
apps/studio/components/interfaces/Database/Functions/CreateFunction/FunctionEditor.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { Maximize2, Minimize2 } from 'lucide-react'
import { Button, cn, FormControl_Shadcn_, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
import { Button, cn, FormControl, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
import CodeEditor from '@/components/ui/CodeEditor/CodeEditor'
@@ -16,7 +16,7 @@ export const FunctionEditor = ({
}) => {
return (
<div className={cn('rounded-md relative group flex-grow')}>
<FormControl_Shadcn_>
<FormControl>
{language !== undefined && (
<CodeEditor
id="database-functions-editor"
@@ -26,7 +26,7 @@ export const FunctionEditor = ({
onInputChange={field.onChange}
/>
)}
</FormControl_Shadcn_>
</FormControl>
<div
className={cn(
'absolute top-0 right-2 bg-surface-300 border border-strong rounded h-[28px]',
apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
+43 -45
View File
@@ -7,13 +7,13 @@ import { toast } from 'sonner'
import {
Button,
cn,
Form_Shadcn_,
FormControl_Shadcn_,
FormDescription_Shadcn_,
FormField_Shadcn_,
FormItem_Shadcn_,
FormLabel_Shadcn_,
FormMessage_Shadcn_,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
Input_Shadcn_,
Radio,
ScrollArea,
@@ -168,14 +168,14 @@ export const CreateFunction = ({
<div className="flex flex-col grow w-full">
<CreateFunctionHeader selectedFunction={func?.name} isDuplicating={isDuplicating} />
<Separator />
<Form_Shadcn_ {...form}>
<Form {...form}>
<form
id={FORM_ID}
className="flex-grow overflow-auto"
onSubmit={form.handleSubmit(onSubmit)}
>
<SheetSection className={focusedEditor ? 'hidden' : ''}>
<FormField_Shadcn_
<FormField
control={form.control}
name="name"
render={({ field }) => (
@@ -184,16 +184,16 @@ export const CreateFunction = ({
description="Name will also be used for the function name in postgres"
layout="horizontal"
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="Name of function" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</SheetSection>
<Separator className={focusedEditor ? 'hidden' : ''} />
<SheetSection className={focusedEditor ? 'hidden' : 'space-y-4'}>
<FormField_Shadcn_
<FormField
control={form.control}
name="schema"
render={({ field }) => (
@@ -202,19 +202,19 @@ export const CreateFunction = ({
description="Tables made in the table editor will be in 'public'"
layout="horizontal"
>
<FormControl_Shadcn_>
<FormControl>
<SchemaSelector
selectedSchemaName={field.value}
excludedSchemas={protectedSchemas?.map((s) => s.name)}
size="small"
onSelectSchema={(name) => field.onChange(name)}
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
{!isEditing && (
<FormField_Shadcn_
<FormField
control={form.control}
name="return_type"
render={({ field }) => (
@@ -247,21 +247,19 @@ export const CreateFunction = ({
</SheetSection>
<Separator className={focusedEditor ? 'hidden' : ''} />
<SheetSection className={`${focusedEditor ? 'h-full' : ''} !px-0`}>
<FormField_Shadcn_
<FormField
control={form.control}
name="definition"
render={({ field }) => (
<FormItem_Shadcn_ className="space-y-4 flex flex-col h-full">
<FormItem className="space-y-4 flex flex-col h-full">
<div className="px-content">
<FormLabel_Shadcn_ className="text-base text-foreground">
Definition
</FormLabel_Shadcn_>
<FormDescription_Shadcn_ className="text-sm text-foreground-light">
<FormLabel className="text-base text-foreground">Definition</FormLabel>
<FormDescription className="text-sm text-foreground-light">
<p>
The language below should be written in <code>{language}</code>.
</p>
{!isEditing && <p>Change the language in the Advanced Settings below.</p>}
</FormDescription_Shadcn_>
</FormDescription>
</div>
<div
className={cn(
@@ -277,8 +275,8 @@ export const CreateFunction = ({
/>
</div>
<FormMessage_Shadcn_ className="px-content" />
</FormItem_Shadcn_>
<FormMessage className="px-content" />
</FormItem>
)}
/>
</SheetSection>
@@ -301,7 +299,7 @@ export const CreateFunction = ({
<>
<SheetSection className={focusedEditor ? 'hidden' : 'space-y-2 pt-0'}>
<FormFieldLanguage />
<FormField_Shadcn_
<FormField
control={form.control}
name="behavior"
render={({ field }) => (
@@ -337,12 +335,12 @@ export const CreateFunction = ({
<Separator className={focusedEditor ? 'hidden' : ''} />
<SheetSection className={focusedEditor ? 'hidden' : ''}>
<h5 className="text-base text-foreground mb-4">Type of Security</h5>
<FormField_Shadcn_
<FormField
control={form.control}
name="security_definer"
render={({ field }) => (
<FormItem_Shadcn_>
<FormControl_Shadcn_ className="col-span-8">
<FormItem>
<FormControl className="col-span-8">
{/* TODO: This RadioGroup imports Formik state, replace it with a clean component */}
<Radio.Group
type="cards"
@@ -377,9 +375,9 @@ export const CreateFunction = ({
}
/>
</Radio.Group>
</FormControl_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</SheetSection>
@@ -388,7 +386,7 @@ export const CreateFunction = ({
</>
)}
</form>
</Form_Shadcn_>
</Form>
<SheetFooter>
<Button disabled={isCreating || isUpdating} type="default" onClick={confirmOnClose}>
Cancel
@@ -433,22 +431,22 @@ const FormFieldArgs = ({ readonly }: FormFieldConfigParamsProps) => {
{fields.map((field, index) => {
return (
<div className="flex flex-row space-x-1" key={field.id}>
<FormField_Shadcn_
<FormField
name={`args.${index}.name`}
render={({ field }) => (
<FormItem_Shadcn_ className="flex-1">
<FormControl_Shadcn_>
<FormItem className="flex-1">
<FormControl>
<Input_Shadcn_ {...field} disabled={readonly} placeholder="argument_name" />
</FormControl_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField_Shadcn_
<FormField
name={`args.${index}.type`}
render={({ field }) => (
<FormItem_Shadcn_ className="flex-1">
<FormControl_Shadcn_>
<FormItem className="flex-1">
<FormControl>
{readonly ? (
<Input_Shadcn_ value={field.value} disabled readOnly className="h-auto" />
) : (
@@ -473,9 +471,9 @@ const FormFieldArgs = ({ readonly }: FormFieldConfigParamsProps) => {
</Select_Shadcn_>
</>
)}
</FormControl_Shadcn_>
<FormMessage_Shadcn_ />
</FormItem_Shadcn_>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
@@ -534,7 +532,7 @@ const FormFieldLanguage = () => {
}, [enabledExtensions])
return (
<FormField_Shadcn_
<FormField
name="language"
render={({ field }) => (
<FormItemLayout label="Language" layout="horizontal">
apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
+3 -3
View File
@@ -8,7 +8,7 @@ import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs'
import { useEffect, useRef, useState } from 'react'
import { SubmitHandler, useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { Button, Form_Shadcn_, SidePanel } from 'ui'
import { Button, Form, SidePanel } from 'ui'
import { FormSchema, WebhookFormValues } from './EditHookPanel.constants'
import { FormContents } from './FormContents'
@@ -339,11 +339,11 @@ export const EditHookPanel = () => {
</div>
}
>
<Form_Shadcn_ {...form}>
<Form {...form}>
<form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)}>
<FormContents form={form} selectedHook={selectedHook} />
</form>
</Form_Shadcn_>
</Form>
</SidePanel>
<DiscardChangesConfirmationDialog {...modalProps} />
</>
apps/studio/components/interfaces/Database/Hooks/FormContents.tsx
+15 -15
View File
@@ -6,8 +6,8 @@ import { useEffect } from 'react'
import { UseFormReturn } from 'react-hook-form'
import {
Checkbox_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
FormControl,
FormField,
Input_Shadcn_,
Label_Shadcn_,
RadioGroupStacked,
@@ -18,7 +18,7 @@ import {
SelectTrigger_Shadcn_,
SelectValue_Shadcn_,
SidePanel,
useWatch_Shadcn_,
useWatch,
} from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -63,8 +63,8 @@ export const FormContents = ({ form, selectedHook }: FormContentsProps) => {
const legacyServiceRole = keys.find((x) => x.name === 'service_role')?.api_key ?? '[YOUR API KEY]'
const httpUrl = useWatch_Shadcn_({ control: form.control, name: 'http_url' })
const httpHeaders = useWatch_Shadcn_({ control: form.control, name: 'httpHeaders' })
const httpUrl = useWatch({ control: form.control, name: 'http_url' })
const httpHeaders = useWatch({ control: form.control, name: 'httpHeaders' })
const { data: tables = [] } = useTableNamesQuery({
projectRef: project?.ref,
@@ -105,14 +105,14 @@ export const FormContents = ({ form, selectedHook }: FormContentsProps) => {
<div>
<FormSection header={<FormSectionLabel className="lg:!col-span-4">General</FormSectionLabel>}>
<FormSectionContent loading={false} className="lg:!col-span-8">
<FormField_Shadcn_
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItemLayout label="Name" layout="vertical" className="gap-1">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="my_webhook" />
</FormControl_Shadcn_>
</FormControl>
<p className="mt-2 text-xs text-foreground-lighter">
Do not use spaces/whitespaces
</p>
@@ -137,7 +137,7 @@ export const FormContents = ({ form, selectedHook }: FormContentsProps) => {
}
>
<FormSectionContent loading={false} className="lg:!col-span-8">
<FormField_Shadcn_
<FormField
control={form.control}
name="table_id"
render={({ field }) => (
@@ -148,11 +148,11 @@ export const FormContents = ({ form, selectedHook }: FormContentsProps) => {
description="This is the table the trigger will watch for changes. You can only select 1 table for a trigger."
>
<Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
<FormControl_Shadcn_>
<FormControl>
<SelectTrigger_Shadcn_>
<SelectValue_Shadcn_ placeholder="Select a table" />
</SelectTrigger_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
<SelectContent_Shadcn_>
{tables.map((table) => (
<SelectItem_Shadcn_ key={table.id} value={table.id.toString()}>
@@ -168,7 +168,7 @@ export const FormContents = ({ form, selectedHook }: FormContentsProps) => {
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="events"
render={({ field }) => (
@@ -216,12 +216,12 @@ export const FormContents = ({ form, selectedHook }: FormContentsProps) => {
}
>
<FormSectionContent loading={false} className="lg:!col-span-8">
<FormField_Shadcn_
<FormField
control={form.control}
name="function_type"
render={({ field }) => (
<FormItemLayout label="Type of webhook" layout="vertical" className="gap-1">
<FormControl_Shadcn_>
<FormControl>
<RadioGroupStacked
value={field.value}
onValueChange={(functionType) => {
@@ -270,7 +270,7 @@ export const FormContents = ({ form, selectedHook }: FormContentsProps) => {
</RadioGroupStackedItem>
))}
</RadioGroupStacked>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
apps/studio/components/interfaces/Database/Hooks/HTTPHeaders.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useParams } from 'common'
import { UseFormReturn } from 'react-hook-form'
import { useWatch_Shadcn_ } from 'ui'
import { useWatch } from 'ui'
import { KeyValueFieldArray } from 'ui-patterns/form/KeyValueFieldArray/KeyValueFieldArray'
import { WebhookFormValues } from './EditHookPanel.constants'
@@ -31,7 +31,7 @@ export const HTTPHeaders = ({ form }: HTTPHeadersProps) => {
const { serviceKey, secretKey } = getKeys(apiKeys)
const apiKey = secretKey?.api_key ?? serviceKey?.api_key ?? '[YOUR API KEY]'
const functionType = useWatch_Shadcn_({ control: form.control, name: 'function_type' })
const functionType = useWatch({ control: form.control, name: 'function_type' })
const addActions =
functionType === 'supabase_function'
? buildEdgeFunctionHeaderAddActions({
apps/studio/components/interfaces/Database/Hooks/HTTPParameters.test.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { useForm } from 'react-hook-form'
import { Form_Shadcn_ } from 'ui'
import { Form } from 'ui'
import { describe, expect, it } from 'vitest'
import { type WebhookFormValues } from './EditHookPanel.constants'
@@ -23,9 +23,9 @@ const HTTPParametersHarness = () => {
})
return (
<Form_Shadcn_ {...form}>
<Form {...form}>
<HTTPParameters form={form} />
</Form_Shadcn_>
</Form>
)
}
apps/studio/components/interfaces/Database/Hooks/HTTPRequestConfig.tsx
+16 -16
View File
@@ -3,15 +3,15 @@ import Link from 'next/link'
import { UseFormReturn } from 'react-hook-form'
import {
Button,
FormControl_Shadcn_,
FormField_Shadcn_,
FormControl,
FormField,
Input_Shadcn_,
Select_Shadcn_,
SelectContent_Shadcn_,
SelectItem_Shadcn_,
SelectTrigger_Shadcn_,
SelectValue_Shadcn_,
useWatch_Shadcn_,
useWatch,
} from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -35,7 +35,7 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
const { data: functions } = useEdgeFunctionsQuery({ projectRef: ref })
const edgeFunctions = functions ?? []
const functionType = useWatch_Shadcn_({ control: form.control, name: 'function_type' })
const functionType = useWatch({ control: form.control, name: 'function_type' })
return (
<FormSection
@@ -50,17 +50,17 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
}
>
<FormSectionContent loading={false} className="lg:!col-span-8">
<FormField_Shadcn_
<FormField
control={form.control}
name="http_method"
render={({ field }) => (
<FormItemLayout label="Method" layout="vertical" className="gap-1">
<Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
<FormControl_Shadcn_>
<FormControl>
<SelectTrigger_Shadcn_>
<SelectValue_Shadcn_ />
</SelectTrigger_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
<SelectContent_Shadcn_>
<SelectItem_Shadcn_ value="GET">GET</SelectItem_Shadcn_>
<SelectItem_Shadcn_ value="POST">POST</SelectItem_Shadcn_>
@@ -71,7 +71,7 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
/>
{functionType === 'http_request' ? (
<FormField_Shadcn_
<FormField
control={form.control}
name="http_url"
render={({ field }) => (
@@ -81,9 +81,9 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
className="gap-1"
description="URL of the HTTP request. Must include HTTP/HTTPS"
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="http://api.com/path/resource" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -98,7 +98,7 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
</div>
</div>
) : functionType === 'supabase_function' && edgeFunctions.length > 0 ? (
<FormField_Shadcn_
<FormField
control={form.control}
name="http_url"
render={({ field }) => (
@@ -108,11 +108,11 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
className="gap-1"
>
<Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
<FormControl_Shadcn_>
<FormControl>
<SelectTrigger_Shadcn_>
<SelectValue_Shadcn_ placeholder="Select an edge function" />
</SelectTrigger_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
<SelectContent_Shadcn_>
{edgeFunctions.map((fn) => {
const restUrl = selectedProject?.restUrl
@@ -132,7 +132,7 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
/>
) : null}
<FormField_Shadcn_
<FormField
control={form.control}
name="timeout_ms"
render={({ field }) => (
@@ -142,7 +142,7 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
layout="vertical"
className="gap-1"
>
<FormControl_Shadcn_>
<FormControl>
<div className="relative">
<Input_Shadcn_
{...field}
@@ -154,7 +154,7 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
ms
</span>
</div>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx
+20 -20
View File
@@ -6,8 +6,8 @@ import {
AccordionItem_Shadcn_,
AccordionTrigger_Shadcn_,
Badge,
FormControl_Shadcn_,
FormField_Shadcn_,
FormControl,
FormField,
FormInputGroupInput,
InputGroup,
InputGroupAddon,
@@ -49,7 +49,7 @@ export const AdvancedSettings = ({
</AccordionTrigger_Shadcn_>
<AccordionContent_Shadcn_ className="!pb-0 pt-3 [&>div]:flex [&>div]:flex-col [&>div]:gap-y-4">
{/* Batch wait time - applies to all destinations */}
<FormField_Shadcn_
<FormField
control={form.control}
name="maxFillMs"
render={({ field }) => (
@@ -69,7 +69,7 @@ export const AdvancedSettings = ({
</>
}
>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
{...field}
@@ -82,12 +82,12 @@ export const AdvancedSettings = ({
<InputGroupText>milliseconds</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="maxTableSyncWorkers"
render={({ field }) => (
@@ -103,7 +103,7 @@ export const AdvancedSettings = ({
</>
}
>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
{...field}
@@ -116,12 +116,12 @@ export const AdvancedSettings = ({
<InputGroupText>workers</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="maxCopyConnectionsPerTable"
render={({ field }) => (
@@ -140,7 +140,7 @@ export const AdvancedSettings = ({
</>
}
>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
{...field}
@@ -153,12 +153,12 @@ export const AdvancedSettings = ({
<InputGroupText>connections</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="invalidatedSlotBehavior"
render={({ field }) => (
@@ -167,7 +167,7 @@ export const AdvancedSettings = ({
layout="horizontal"
description="Behavior when the replication slot is invalidated"
>
<FormControl_Shadcn_>
<FormControl>
<Select_Shadcn_ value={field.value ?? 'error'} onValueChange={field.onChange}>
<SelectTrigger_Shadcn_ className="capitalize">
{field.value ?? 'error'}
@@ -187,14 +187,14 @@ export const AdvancedSettings = ({
</SelectItem_Shadcn_>
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
{type === 'BigQuery' && (
<>
<FormField_Shadcn_
<FormField
control={form.control}
name="connectionPoolSize"
render={({ field }) => (
@@ -215,7 +215,7 @@ export const AdvancedSettings = ({
</>
}
>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
{...field}
@@ -228,12 +228,12 @@ export const AdvancedSettings = ({
<InputGroupText>connections</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="maxStalenessMins"
render={({ field }) => (
@@ -258,7 +258,7 @@ export const AdvancedSettings = ({
</>
}
>
<FormControl_Shadcn_>
<FormControl>
<InputGroup>
<FormInputGroupInput
{...field}
@@ -271,7 +271,7 @@ export const AdvancedSettings = ({
<InputGroupText>minutes</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationNameInput.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import type { UseFormReturn } from 'react-hook-form'
import { FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_ } from 'ui'
import { FormControl, FormField, Input_Shadcn_ } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import type { DestinationPanelSchemaType } from './DestinationForm.schema'
@@ -10,14 +10,14 @@ type DestinationNameInputProps = {
export const DestinationNameInput = ({ form }: DestinationNameInputProps) => {
return (
<FormField_Shadcn_
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItemLayout label="Name" layout="horizontal">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="My destination" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationPanelFields.tsx
+27 -27
View File
@@ -5,8 +5,8 @@ import { useState } from 'react'
import type { UseFormReturn } from 'react-hook-form'
import {
Button,
FormControl_Shadcn_,
FormField_Shadcn_,
FormControl,
FormField,
Input_Shadcn_,
Select_Shadcn_,
SelectContent_Shadcn_,
@@ -35,7 +35,7 @@ export const BigQueryFields = ({ form }: { form: UseFormReturn<DestinationPanelS
<div className="flex flex-col gap-y-6 p-5">
<p className="text-sm font-medium text-foreground">BigQuery settings</p>
<div className="flex flex-col gap-y-4">
<FormField_Shadcn_
<FormField
control={form.control}
name="projectId"
render={({ field }) => (
@@ -44,14 +44,14 @@ export const BigQueryFields = ({ form }: { form: UseFormReturn<DestinationPanelS
label="Project ID"
description="The Google Cloud project ID where data will be sent"
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="my-gcp-project" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="datasetId"
render={({ field }) => (
@@ -60,14 +60,14 @@ export const BigQueryFields = ({ form }: { form: UseFormReturn<DestinationPanelS
layout="horizontal"
description="The BigQuery dataset where replicated tables will be created"
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="my_dataset" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="serviceAccountKey"
render={({ field }) => (
@@ -76,7 +76,7 @@ export const BigQueryFields = ({ form }: { form: UseFormReturn<DestinationPanelS
label="Service Account Key"
description="Service account credentials JSON for authenticating with BigQuery"
>
<FormControl_Shadcn_>
<FormControl>
<TextArea_Shadcn_
{...field}
rows={5}
@@ -84,7 +84,7 @@ export const BigQueryFields = ({ form }: { form: UseFormReturn<DestinationPanelS
placeholder='{"type": "service_account", "project_id": "...", ...}'
className="font-mono text-xs"
/>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
@@ -159,7 +159,7 @@ export const AnalyticsBucketFields = ({
<p className="text-sm font-medium text-foreground">Analytics Bucket settings</p>
<div className="flex flex-col gap-y-4">
<FormField_Shadcn_
<FormField
control={form.control}
name="warehouseName"
render={({ field }) => (
@@ -189,7 +189,7 @@ export const AnalyticsBucketFields = ({
Failed to retrieve buckets
</Button>
) : (
<FormControl_Shadcn_>
<FormControl>
<Select_Shadcn_
value={field.value}
onValueChange={(value) => {
@@ -226,13 +226,13 @@ export const AnalyticsBucketFields = ({
</SelectGroup_Shadcn_>
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
)}
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="namespace"
render={({ field }) => (
@@ -262,7 +262,7 @@ export const AnalyticsBucketFields = ({
Failed to retrieve namespaces
</Button>
) : (
<FormControl_Shadcn_>
<FormControl>
<Select_Shadcn_
value={field.value}
onValueChange={(value) => {
@@ -298,14 +298,14 @@ export const AnalyticsBucketFields = ({
</SelectGroup_Shadcn_>
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
)}
</FormItemLayout>
)}
/>
{namespace === CREATE_NEW_NAMESPACE && (
<FormField_Shadcn_
<FormField
control={form.control}
name="newNamespaceName"
render={({ field }) => (
@@ -314,15 +314,15 @@ export const AnalyticsBucketFields = ({
layout="horizontal"
description="A unique name for the new namespace"
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="new_namespace" value={field.value || ''} />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
)}
<FormField_Shadcn_
<FormField
control={form.control}
name="catalogToken"
render={({ field }) => (
@@ -360,7 +360,7 @@ export const AnalyticsBucketFields = ({
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="s3AccessKeyId"
render={({ field }) => (
@@ -416,7 +416,7 @@ export const AnalyticsBucketFields = ({
Failed to retrieve keys
</Button>
) : (
<FormControl_Shadcn_>
<FormControl>
<Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
<SelectTrigger_Shadcn_>
{field.value === CREATE_NEW_KEY
@@ -440,14 +440,14 @@ export const AnalyticsBucketFields = ({
</SelectGroup_Shadcn_>
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormControl>
)}
</FormItemLayout>
)}
/>
{s3AccessKeyId !== CREATE_NEW_KEY && (
<FormField_Shadcn_
<FormField
control={form.control}
name="s3SecretAccessKey"
render={({ field }) => (
@@ -457,14 +457,14 @@ export const AnalyticsBucketFields = ({
className="relative"
description="The secret key corresponding to your selected access key ID"
>
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_
{...field}
type={showSecretAccessKey ? 'text' : 'password'}
value={field.value ?? ''}
placeholder="Provide the secret access key"
/>
</FormControl_Shadcn_>
</FormControl>
<Button
type="default"
icon={showSecretAccessKey ? <Eye /> : <EyeOff />}
apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NewPublicationPanel.tsx
+11 -11
View File
@@ -4,9 +4,9 @@ import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Form,
FormControl,
FormField,
Input_Shadcn_,
Sheet,
SheetContent,
@@ -84,24 +84,24 @@ export const NewPublicationPanel = ({ visible, sourceId, onClose }: NewPublicati
<SheetDescription>Replicate table changes to destinations</SheetDescription>
</SheetHeader>
<SheetSection className="flex-grow overflow-auto">
<Form_Shadcn_ {...form}>
<Form {...form}>
<form
id={formId}
onSubmit={form.handleSubmit(onSubmit)}
className="flex flex-col gap-y-4"
>
<FormField_Shadcn_
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItemLayout label="Name" layout="vertical">
<FormControl_Shadcn_>
<FormControl>
<Input_Shadcn_ {...field} placeholder="Name" />
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
<FormField_Shadcn_
<FormField
control={form.control}
name="tables"
render={({ field }) => (
@@ -109,7 +109,7 @@ export const NewPublicationPanel = ({ visible, sourceId, onClose }: NewPublicati
label="Tables"
description="Which tables to replicate to destinations"
>
<FormControl_Shadcn_>
<FormControl>
<MultiSelector
values={field.value}
onValuesChange={field.onChange}
@@ -133,12 +133,12 @@ export const NewPublicationPanel = ({ visible, sourceId, onClose }: NewPublicati
</MultiSelector.List>
</MultiSelector.Content>
</MultiSelector>
</FormControl_Shadcn_>
</FormControl>
</FormItemLayout>
)}
/>
</form>
</Form_Shadcn_>
</Form>
</SheetSection>
<SheetFooter>
<Button type="default" disabled={creatingPublication} onClick={onClose}>

Some files were not shown because too many files have changed in this diff Show More