-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #31 from nathanvale/kent
Merge remote-tracking branch 'epic-web'
- Loading branch information
Showing
79 changed files
with
4,309 additions
and
2,059 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| import { useInputEvent } from '@conform-to/react' | ||
| import React, { useId, useRef } from 'react' | ||
| import { Input } from '~/components/ui/input.tsx' | ||
| import { Label } from '~/components/ui/label.tsx' | ||
| import { Checkbox } from '~/components/ui/checkbox.tsx' | ||
| import { Textarea } from '~/components/ui/textarea.tsx' | ||
| import { AlertCircle } from 'lucide-react' | ||
| import { Alert, AlertTitle, AlertDescription } from './ui/alert.tsx' | ||
|
|
||
| export type ListOfErrors = Array<string | null | undefined> | null | undefined | ||
|
|
||
| export function ErrorList({ | ||
| id, | ||
| errors, | ||
| title = 'Error', | ||
| }: { | ||
| errors?: ListOfErrors | ||
| id?: string | ||
| title?: string | ||
| }) { | ||
| const errorsToRender = errors?.filter(Boolean) | ||
| if (!errorsToRender?.length) return null | ||
| return ( | ||
| <Alert variant="destructive"> | ||
| <AlertCircle className="h-4 w-4" /> | ||
| <AlertTitle>{title}</AlertTitle> | ||
| <AlertDescription> | ||
| <ul id={id} className="space-y-2"> | ||
| {errorsToRender.map(e => ( | ||
| <li key={e} className="text-sm font-medium text-destructive"> | ||
| {e} | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </AlertDescription> | ||
| </Alert> | ||
| ) | ||
| } | ||
|
|
||
| export function Field({ | ||
| labelProps, | ||
| inputProps, | ||
| errors, | ||
| className, | ||
| }: { | ||
| labelProps: Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'className'> | ||
| inputProps: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'> | ||
| errors?: ListOfErrors | ||
| className?: string | ||
| }) { | ||
| const fallbackId = useId() | ||
| const id = inputProps.id ?? fallbackId | ||
| const errorId = errors?.length ? `${id}-error` : undefined | ||
| return ( | ||
| <div className={className}> | ||
| <Label htmlFor={id} {...labelProps} /> | ||
| <Input | ||
| id={id} | ||
| aria-invalid={errorId ? true : undefined} | ||
| aria-describedby={errorId} | ||
| {...inputProps} | ||
| /> | ||
| <div className="min-h-[32px] px-4 pb-3 pt-1"> | ||
| {errorId ? <ErrorList id={errorId} errors={errors} /> : null} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export function TextareaField({ | ||
| labelProps, | ||
| textareaProps, | ||
| errors, | ||
| className, | ||
| }: { | ||
| labelProps: React.LabelHTMLAttributes<HTMLLabelElement> | ||
| textareaProps: React.InputHTMLAttributes<HTMLTextAreaElement> | ||
| errors?: ListOfErrors | ||
| className?: string | ||
| }) { | ||
| const fallbackId = useId() | ||
| const id = textareaProps.id ?? textareaProps.name ?? fallbackId | ||
| const errorId = errors?.length ? `${id}-error` : undefined | ||
| return ( | ||
| <div className={className}> | ||
| <Label htmlFor={id} {...labelProps} /> | ||
| <Textarea | ||
| id={id} | ||
| aria-invalid={errorId ? true : undefined} | ||
| aria-describedby={errorId} | ||
| {...textareaProps} | ||
| /> | ||
| <div className="px-4 pb-3 pt-1"> | ||
| {errorId ? <ErrorList id={errorId} errors={errors} /> : null} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export function CheckboxField({ | ||
| labelProps, | ||
| buttonProps, | ||
| errors, | ||
| className, | ||
| }: { | ||
| labelProps: JSX.IntrinsicElements['label'] | ||
| buttonProps: any | ||
| errors?: ListOfErrors | ||
| className?: string | ||
| }) { | ||
| const fallbackId = useId() | ||
| const buttonRef = useRef<HTMLButtonElement>(null) | ||
| // To emulate native events that Conform listen to: | ||
| // See https://conform.guide/integrations | ||
| const control = useInputEvent({ | ||
| // Retrieve the checkbox element by name instead as Radix does not expose the internal checkbox element | ||
| // See https://github.com/radix-ui/primitives/discussions/874 | ||
| ref: () => | ||
| buttonRef.current?.form?.elements.namedItem(buttonProps.name ?? ''), | ||
| onFocus: () => buttonRef.current?.focus(), | ||
| }) | ||
| const id = buttonProps.id ?? buttonProps.name ?? fallbackId | ||
| const errorId = errors?.length ? `${id}-error` : undefined | ||
| return ( | ||
| <div className={className}> | ||
| <div className="flex gap-2"> | ||
| <Checkbox | ||
| id={id} | ||
| ref={buttonRef} | ||
| aria-invalid={errorId ? true : undefined} | ||
| aria-describedby={errorId} | ||
| {...buttonProps} | ||
| onCheckedChange={state => { | ||
| control.change(Boolean(state.valueOf())) | ||
| buttonProps.onCheckedChange?.(state) | ||
| }} | ||
| onFocus={event => { | ||
| control.focus() | ||
| buttonProps.onFocus?.(event) | ||
| }} | ||
| onBlur={event => { | ||
| control.blur() | ||
| buttonProps.onBlur?.(event) | ||
| }} | ||
| type="button" | ||
| /> | ||
| <label | ||
| htmlFor={id} | ||
| {...labelProps} | ||
| className="text-body-xs self-center text-muted-foreground" | ||
| /> | ||
| </div> | ||
| <div className="px-4 pb-3 pt-1"> | ||
| {errorId ? <ErrorList id={errorId} errors={errors} /> : null} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| # shadcn/ui | ||
|
|
||
| Some components in this directory are downloaded via the | ||
| [shadcn/ui](https://ui.shadcn.com) [CLI](https://ui.shadcn.com/docs/cli). Feel | ||
| free to customize them to your needs. It's important to know that shadcn/ui is | ||
| not a library of components you install, but instead it's a registry of prebuilt | ||
| components which you can download and customize. |
Oops, something went wrong.