updates

2026-04-06 02:32:47 +03:00
parent 5f3d208158
commit 24a44481a0
152 changed files with 85913 additions and 44338 deletions
@@ -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"