updates
This commit is contained in:
@@ -0,0 +1,61 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { format, parse, isValid } from "date-fns"
|
||||
import { CalendarIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/shared/lib/utils"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Calendar } from "@/shared/components/ui/calendar"
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/shared/components/ui/popover"
|
||||
import type { BaseFieldControlProps } from "../types"
|
||||
|
||||
export type DatePickerFieldProps = BaseFieldControlProps<string> & {
|
||||
placeholder?: string
|
||||
}
|
||||
|
||||
export function DatePickerField({
|
||||
value,
|
||||
onChange,
|
||||
onBlur,
|
||||
disabled,
|
||||
invalid,
|
||||
placeholder = "Pick a date",
|
||||
}: DatePickerFieldProps) {
|
||||
const dateValue = value ? parse(value, "yyyy-MM-dd", new Date()) : undefined
|
||||
const isValidDate = dateValue ? isValid(dateValue) : false
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onBlur={onBlur}
|
||||
aria-invalid={invalid || undefined}
|
||||
className={cn(
|
||||
"w-full justify-start text-left font-normal",
|
||||
!isValidDate && "text-muted-foreground",
|
||||
invalid && "border-destructive ring-3 ring-destructive/20",
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{isValidDate ? format(dateValue!, "PPP") : <span>{placeholder}</span>}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={isValidDate ? dateValue : undefined}
|
||||
onSelect={(d) => onChange(d ? format(d, "yyyy-MM-dd") : "")}
|
||||
autoFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import { Input } from "@/shared/components/ui/input"
|
||||
export type TextInputFieldProps = BaseFieldControlProps<string> & {
|
||||
placeholder?: string
|
||||
type?: React.HTMLInputTypeAttribute
|
||||
step?: React.InputHTMLAttributes<HTMLInputElement>["step"]
|
||||
}
|
||||
|
||||
export function TextInputField({
|
||||
@@ -15,6 +16,7 @@ export function TextInputField({
|
||||
invalid,
|
||||
placeholder,
|
||||
type = "text",
|
||||
step,
|
||||
}: TextInputFieldProps) {
|
||||
return (
|
||||
<Input
|
||||
@@ -26,6 +28,7 @@ export function TextInputField({
|
||||
aria-invalid={invalid || undefined}
|
||||
placeholder={placeholder}
|
||||
type={type}
|
||||
step={step}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { ClockIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/shared/lib/utils"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/shared/components/ui/popover"
|
||||
import type { BaseFieldControlProps } from "../types"
|
||||
|
||||
export type TimePickerFieldProps = BaseFieldControlProps<string> & {
|
||||
placeholder?: string
|
||||
withSeconds?: boolean
|
||||
}
|
||||
|
||||
function pad(n: number) {
|
||||
return String(Math.max(0, n)).padStart(2, "0")
|
||||
}
|
||||
|
||||
function parseTime(value: string) {
|
||||
const parts = (value ?? "").split(":")
|
||||
return {
|
||||
hours: Math.min(23, Math.max(0, Number(parts[0]) || 0)),
|
||||
minutes: Math.min(59, Math.max(0, Number(parts[1]) || 0)),
|
||||
seconds: Math.min(59, Math.max(0, Number(parts[2]) || 0)),
|
||||
}
|
||||
}
|
||||
|
||||
export function TimePickerField({
|
||||
value,
|
||||
onChange,
|
||||
onBlur,
|
||||
disabled,
|
||||
invalid,
|
||||
placeholder = "Pick a time",
|
||||
withSeconds = true,
|
||||
}: TimePickerFieldProps) {
|
||||
const { hours, minutes, seconds } = parseTime(value ?? "")
|
||||
const hasValue = !!value
|
||||
|
||||
function update(h: number, m: number, s: number) {
|
||||
const hh = Math.min(23, Math.max(0, h))
|
||||
const mm = Math.min(59, Math.max(0, m))
|
||||
const ss = Math.min(59, Math.max(0, s))
|
||||
onChange(withSeconds ? `${pad(hh)}:${pad(mm)}:${pad(ss)}` : `${pad(hh)}:${pad(mm)}`)
|
||||
}
|
||||
|
||||
const display = hasValue
|
||||
? withSeconds
|
||||
? `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
|
||||
: `${pad(hours)}:${pad(minutes)}`
|
||||
: null
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onBlur={onBlur}
|
||||
aria-invalid={invalid || undefined}
|
||||
className={cn(
|
||||
"w-full justify-start text-left font-normal",
|
||||
!hasValue && "text-muted-foreground",
|
||||
invalid && "border-destructive ring-3 ring-destructive/20",
|
||||
)}
|
||||
>
|
||||
<ClockIcon className="mr-2 h-4 w-4" />
|
||||
{display ?? <span>{placeholder}</span>}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-4" align="start">
|
||||
<div className="flex items-end gap-2">
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="text-xs text-muted-foreground">HH</span>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
max={23}
|
||||
value={pad(hours)}
|
||||
onChange={(e) => update(Number(e.target.value), minutes, seconds)}
|
||||
className="w-16 text-center"
|
||||
/>
|
||||
</div>
|
||||
<span className="mb-2 text-xl font-medium leading-none">:</span>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="text-xs text-muted-foreground">MM</span>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
max={59}
|
||||
value={pad(minutes)}
|
||||
onChange={(e) => update(hours, Number(e.target.value), seconds)}
|
||||
className="w-16 text-center"
|
||||
/>
|
||||
</div>
|
||||
{withSeconds && (
|
||||
<>
|
||||
<span className="mb-2 text-xl font-medium leading-none">:</span>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="text-xs text-muted-foreground">SS</span>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
max={59}
|
||||
value={pad(seconds)}
|
||||
onChange={(e) => update(hours, minutes, Number(e.target.value))}
|
||||
className="w-16 text-center"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
"use client"
|
||||
|
||||
import type { FieldValues, FieldPath } from "react-hook-form"
|
||||
import { RhfField } from "../rhf-field"
|
||||
import { DatePickerField, type DatePickerFieldProps } from "../controls/date-picker-field"
|
||||
import type { BaseFieldControlProps } from "../types"
|
||||
|
||||
type RhfDateFieldProps<
|
||||
TValues extends FieldValues,
|
||||
TName extends FieldPath<TValues>,
|
||||
> = {
|
||||
name: TName
|
||||
label?: string
|
||||
description?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
} & Omit<DatePickerFieldProps, keyof BaseFieldControlProps<string>>
|
||||
|
||||
export function RhfDateField<
|
||||
TValues extends FieldValues,
|
||||
TName extends FieldPath<TValues>,
|
||||
>(props: RhfDateFieldProps<TValues, TName>) {
|
||||
return <RhfField {...props} component={DatePickerField} />
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
"use client"
|
||||
|
||||
import type { FieldValues, FieldPath } from "react-hook-form"
|
||||
import { RhfField } from "../rhf-field"
|
||||
import { TimePickerField, type TimePickerFieldProps } from "../controls/time-picker-field"
|
||||
import type { BaseFieldControlProps } from "../types"
|
||||
|
||||
type RhfTimeFieldProps<
|
||||
TValues extends FieldValues,
|
||||
TName extends FieldPath<TValues>,
|
||||
> = {
|
||||
name: TName
|
||||
label?: string
|
||||
description?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
} & Omit<TimePickerFieldProps, keyof BaseFieldControlProps<string>>
|
||||
|
||||
export function RhfTimeField<
|
||||
TValues extends FieldValues,
|
||||
TName extends FieldPath<TValues>,
|
||||
>(props: RhfTimeFieldProps<TValues, TName>) {
|
||||
return <RhfField {...props} component={TimePickerField} />
|
||||
}
|
||||
@@ -24,6 +24,8 @@ export {
|
||||
export { FileInputField, type FileInputFieldProps } from "./controls/file-input-field"
|
||||
export { ImageInputField, type ImageInputFieldProps } from "./controls/image-input-field"
|
||||
export { DocumentInputField, type DocumentInputFieldProps } from "./controls/document-input-field"
|
||||
export { DatePickerField, type DatePickerFieldProps } from "./controls/date-picker-field"
|
||||
export { TimePickerField, type TimePickerFieldProps } from "./controls/time-picker-field"
|
||||
|
||||
// ── RHF Field Wrappers ──
|
||||
export { RhfTextField } from "./fields/rhf-text-field"
|
||||
@@ -35,3 +37,5 @@ export { RhfImageField } from "./fields/rhf-image-field"
|
||||
export { RhfDocumentField } from "./fields/rhf-document-field"
|
||||
export { RhfAsyncSelectField, RhfAsyncMultiSelectField, type InlineCreateFormProps, type InlineCreateConfig } from "./fields/rhf-async-select-field"
|
||||
export { SimpleTitleForm, type SimpleTitleFormProps } from "./fields/simple-title-form"
|
||||
export { RhfDateField } from "./fields/rhf-date-field"
|
||||
export { RhfTimeField } from "./fields/rhf-time-field"
|
||||
|
||||
@@ -1,10 +1,21 @@
|
||||
"use client"
|
||||
|
||||
import Image from "next/image"
|
||||
import * as React from "react"
|
||||
import { Avatar as AvatarPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/shared/lib/utils"
|
||||
|
||||
type AvatarImageStatus = "idle" | "loading" | "loaded" | "error"
|
||||
|
||||
type AvatarImageStatusContextValue = {
|
||||
status: AvatarImageStatus
|
||||
setStatus: React.Dispatch<React.SetStateAction<AvatarImageStatus>>
|
||||
}
|
||||
|
||||
const AvatarImageStatusContext =
|
||||
React.createContext<AvatarImageStatusContextValue | null>(null)
|
||||
|
||||
function Avatar({
|
||||
className,
|
||||
size = "default",
|
||||
@@ -12,30 +23,59 @@ function Avatar({
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
|
||||
size?: "default" | "sm" | "lg"
|
||||
}) {
|
||||
const [status, setStatus] = React.useState<AvatarImageStatus>("idle")
|
||||
|
||||
return (
|
||||
<AvatarPrimitive.Root
|
||||
data-slot="avatar"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
<AvatarImageStatusContext.Provider value={{ status, setStatus }}>
|
||||
<AvatarPrimitive.Root
|
||||
data-slot="avatar"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</AvatarImageStatusContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarImage({
|
||||
className,
|
||||
sizes = "100%",
|
||||
onLoadingStatusChange,
|
||||
onLoad,
|
||||
onError,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
||||
}: Omit<React.ComponentPropsWithoutRef<typeof Image>, "fill"> &
|
||||
Pick<React.ComponentProps<typeof AvatarPrimitive.Image>, "onLoadingStatusChange">) {
|
||||
const imageStatusContext = React.useContext(AvatarImageStatusContext)
|
||||
const { setStatus } = imageStatusContext ?? {}
|
||||
|
||||
React.useEffect(() => {
|
||||
setStatus?.("loading")
|
||||
onLoadingStatusChange?.("loading")
|
||||
}, [onLoadingStatusChange, setStatus])
|
||||
|
||||
return (
|
||||
<AvatarPrimitive.Image
|
||||
<Image
|
||||
data-slot="avatar-image"
|
||||
fill
|
||||
sizes={sizes}
|
||||
className={cn(
|
||||
"aspect-square size-full rounded-full object-cover",
|
||||
className
|
||||
)}
|
||||
onLoad={(event) => {
|
||||
setStatus?.("loaded")
|
||||
onLoadingStatusChange?.("loaded")
|
||||
onLoad?.(event)
|
||||
}}
|
||||
onError={(event) => {
|
||||
setStatus?.("error")
|
||||
onLoadingStatusChange?.("error")
|
||||
onError?.(event)
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
@@ -45,6 +85,12 @@ function AvatarFallback({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
||||
const imageStatusContext = React.useContext(AvatarImageStatusContext)
|
||||
|
||||
if (imageStatusContext?.status === "loaded") {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<AvatarPrimitive.Fallback
|
||||
data-slot="avatar-fallback"
|
||||
|
||||
@@ -112,7 +112,7 @@ function ComboboxContent({
|
||||
<ComboboxPrimitive.Popup
|
||||
data-slot="combobox-content"
|
||||
data-chips={!!anchor}
|
||||
className={cn("group/combobox-content relative z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
className={cn("group/combobox-content relative z-50 flex flex-col max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
{...props}
|
||||
/>
|
||||
</ComboboxPrimitive.Positioner>
|
||||
@@ -125,7 +125,7 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
|
||||
<ComboboxPrimitive.List
|
||||
data-slot="combobox-list"
|
||||
className={cn(
|
||||
"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
|
||||
"min-h-0 flex-1 scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
Reference in New Issue
Block a user