mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 11:25:06 +03:00
Gildas GarciaandIvan Vasilov
093ed8f610
## Problem The date picker pattern we currently have: - requires developers add classes and props themselves to get the expected result. This is cumbersome and prone to error. - does not visually convey the field invalid state like inputs do <img width="702" height="256" alt="image" src="https://github.com/user-attachments/assets/cacd6414-6789-42e3-8d06-88e44fd9fe0a" /> ## Solution Introduce a new `DatePicker` _UI pattern_ that wraps the `Popover` and `Button` components to ease the most common scenarios while still allowing full customization <img width="699" height="250" alt="image" src="https://github.com/user-attachments/assets/e80f842c-28b2-4a4f-b316-c2005e771912" /> ## Component usage Note how we manually pass the `isInvalid` prop to the `<DatePickerButton>` to avoid relying on `react-hook-form` contexts which would make the date picker unusable outside RHF forms. Alternative would be to also have a `<DatePickerInput>` that could be used instead of `<DatePickerButton>` when inside an RHF form. ```tsx <FormField control={form.control} name="expiryDate" render={({ field, fieldState }) => ( <FormItemLayout layout="horizontal" label="Date Picker" description="Date selection with calendar popover" > <FormControl className="col-span-6"> <DatePicker> <DatePickerTrigger asChild> <DatePickerButton isInvalid={fieldState.invalid}> {field.value ? format(field.value, 'PPP') : 'Pick a date'} </DatePickerButton> </DatePickerTrigger> <DatePickerContent> <Calendar mode="single" selected={field.value} onSelect={field.onChange} initialFocus /> </DatePickerContent> </DatePicker> </FormControl> </FormItemLayout> )} /> --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Supabase UI Patterns
This package should be used for components which are built using NPM libraries (react-markdown, reactflow for example),
which make no sense to be included in all apps. It should also be used for components which are constructed using various
components from the ui package.
This package does not have a barrel file - each component has to be imported from its index
(ui-patterns/PrivacySettings, for example). This is intentional so that adding a new component which is used only in
1 or 2 apps doesn't burden the rest of the apps.