@strategicos/ui 0.8.0 → 0.9.0

package/src/components/date-picker-input.tsx

@@ -0,0 +1,287 @@
+"use client"
+
+// Derivado do DatePicker do Tremor (Apache-2.0) e modificado pela Strategicos.
+// Ver THIRD_PARTY_NOTICES.md.
+
+import * as React from "react"
+
+import { useIsMobile } from "../hooks/use-mobile.js"
+import { Calendar } from "./calendar.js"
+import {
+  clampDate, formatDate, inRange, outOfRange, parseDateValue, toDateValue,
+  PickerFooter, PickerHint, PickerTrigger, PresetList, type PickerBaseProps,
+} from "./dates.js"
+import { useFieldControl } from "./field.js"
+import { Popover, PopoverContent } from "./popover.js"
+
+export type DatePreset = { label: string; value: string }
+export type DateRangeValue = [string | null, string | null]
+export type DateRangePreset = { label: string; value: [string, string] }
+
+type SingleProps = PickerBaseProps & {
+  type?: "default"
+  value: string | null
+  onValueChange: (value: string | null) => void
+  presets?: DatePreset[]
+}
+
+type RangeProps = PickerBaseProps & {
+  type: "range"
+  value: DateRangeValue
+  onValueChange: (value: DateRangeValue) => void
+  presets?: DateRangePreset[]
+  /** Meses lado a lado (no celular é sempre um). Padrão: 2. */
+  numberOfColumns?: number
+}
+
+const contentCls = "flex w-auto max-w-[calc(100vw-2rem)] flex-col p-0 sm:flex-row"
+
+/**
+ * Campo que abre um calendário para escolher uma data ou um período, como o
+ * DatePickerInput do Mantine. Não se digita nele — para digitar, `DateInput`.
+ *
+ *   <Field label="Prazo">
+ *     <DatePickerInput value={prazo} onValueChange={setPrazo} minDate={inicio} clearable />
+ *   </Field>
+ *
+ *   <DatePickerInput type="range" value={[inicio, fim]} onValueChange={([i, f]) => …} withApplyButton />
+ *
+ * - Valor: "AAAA-MM-DD" (ou `[início, fim]` no `type="range"`), `null` quando vazio.
+ * - `withApplyButton`: a escolha só vale no Aplicar; fechar de outro jeito
+ *   descarta. Sem ele, escolher o dia (ou o fim do período) já grava e fecha.
+ * - `presets`: atalhos ao lado ("Hoje", "Fim do mês"…); os que caem fora de
+ *   `minDate`/`maxDate` ficam desabilitados.
+ * - Período: o primeiro clique marca o início e o segundo, o fim; se o segundo
+ *   vier antes, os dois trocam.
+ *
+ * Teclado: o calendário abre com o foco no dia escolhido (ou hoje); setas
+ * andam pelos dias, PageUp/PageDown pelos meses, Enter escolhe, Esc fecha.
+ */
+function DatePickerInput(props: SingleProps | RangeProps) {
+  return props.type === "range" ? <RangePicker {...props} /> : <SinglePicker {...props} />
+}
+
+function SinglePicker({
+  type: _type,
+  value,
+  onValueChange,
+  placeholder = "Selecione a data",
+  minDate,
+  maxDate,
+  clearable = false,
+  withApplyButton = false,
+  presets,
+  valueFormatter = formatDate,
+  captionLayout,
+  size,
+  disabled,
+  className,
+  wrapperClassName,
+  align = "start",
+  onOpenChange,
+  ...props
+}: SingleProps) {
+  const controlProps = useFieldControl(props, { withRequired: false })
+  const [open, setOpen] = React.useState(false)
+  // Com o Aplicar, a escolha fica aqui até confirmar.
+  const [draft, setDraft] = React.useState<string | null>(value)
+  const shown = withApplyButton ? draft : value
+
+  const selected = parseDateValue(shown)
+  const committed = parseDateValue(value)
+  const min = parseDateValue(minDate)
+  const max = parseDateValue(maxDate)
+
+  function handleOpenChange(o: boolean) {
+    setOpen(o)
+    if (o) setDraft(value)
+    onOpenChange?.(o)
+  }
+
+  function pick(v: string) {
+    if (withApplyButton) { setDraft(v); return }
+    onValueChange(v)
+    handleOpenChange(false)
+  }
+
+  function apply() {
+    if (draft !== value) onValueChange(draft)
+    handleOpenChange(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PickerTrigger
+        slot="date-picker-input"
+        text={committed ? valueFormatter(committed) : null}
+        placeholder={placeholder}
+        open={open}
+        size={size}
+        disabled={disabled}
+        clearable={clearable}
+        onClear={() => onValueChange(null)}
+        className={className}
+        wrapperClassName={wrapperClassName}
+        controlProps={controlProps}
+      />
+      <PopoverContent
+        align={align}
+        className={contentCls}
+        // O foco vai para o dia (autoFocus do calendário), não para o 1º botão.
+        onOpenAutoFocus={e => e.preventDefault()}
+      >
+        {presets && presets.length > 0 && (
+          <PresetList
+            presets={presets}
+            isActive={v => v === shown}
+            isDisabled={v => !inRange(v, minDate, maxDate)}
+            onSelect={pick}
+          />
+        )}
+        <div className="flex flex-col">
+          <Calendar
+            mode="single"
+            required
+            autoFocus
+            selected={selected}
+            onSelect={d => pick(toDateValue(d))}
+            defaultMonth={selected ?? clampDate(new Date(), min, max)}
+            startMonth={min}
+            endMonth={max}
+            disabled={outOfRange(min, max)}
+            captionLayout={captionLayout}
+          />
+          {withApplyButton && (
+            <PickerFooter onCancel={() => handleOpenChange(false)} onApply={apply}>
+              <PickerHint>{selected ? valueFormatter(selected) : "Nenhuma data"}</PickerHint>
+            </PickerFooter>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function RangePicker({
+  type: _type,
+  value,
+  onValueChange,
+  placeholder = "Selecione o período",
+  minDate,
+  maxDate,
+  clearable = false,
+  withApplyButton = false,
+  presets,
+  numberOfColumns = 2,
+  valueFormatter = formatDate,
+  captionLayout,
+  size,
+  disabled,
+  className,
+  wrapperClassName,
+  align = "start",
+  onOpenChange,
+  ...props
+}: RangeProps) {
+  const controlProps = useFieldControl(props, { withRequired: false })
+  const isMobile = useIsMobile()
+  const [open, setOpen] = React.useState(false)
+  const [draft, setDraft] = React.useState<DateRangeValue>(value)
+  // Início escolhido nesta abertura, à espera do fim.
+  const [pendingFrom, setPendingFrom] = React.useState<Date | null>(null)
+  const shown = withApplyButton ? draft : value
+
+  const from = parseDateValue(shown[0])
+  const to = parseDateValue(shown[1])
+  const min = parseDateValue(minDate)
+  const max = parseDateValue(maxDate)
+
+  const format = (range: DateRangeValue) => {
+    const f = parseDateValue(range[0])
+    const t = parseDateValue(range[1])
+    return f ? `${valueFormatter(f)} – ${t ? valueFormatter(t) : "…"}` : null
+  }
+
+  function handleOpenChange(o: boolean) {
+    setOpen(o)
+    setPendingFrom(null)
+    if (o) setDraft(value)
+    onOpenChange?.(o)
+  }
+
+  function commit(range: [string, string]) {
+    if (withApplyButton) { setDraft(range); setPendingFrom(null); return }
+    onValueChange(range)
+    handleOpenChange(false)
+  }
+
+  function pickDay(day: Date) {
+    if (!pendingFrom) { setPendingFrom(day); return }
+    const [s, e] = day < pendingFrom ? [day, pendingFrom] : [pendingFrom, day]
+    commit([toDateValue(s), toDateValue(e)])
+  }
+
+  function apply() {
+    if (draft[0] !== value[0] || draft[1] !== value[1]) onValueChange(draft)
+    handleOpenChange(false)
+  }
+
+  const hint = pendingFrom
+    ? "Agora escolha o último dia."
+    : withApplyButton && from
+      ? format(shown)
+      : "Escolha o primeiro dia."
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PickerTrigger
+        slot="date-picker-input"
+        text={format(value)}
+        placeholder={placeholder}
+        open={open}
+        size={size}
+        disabled={disabled}
+        clearable={clearable}
+        onClear={() => onValueChange([null, null])}
+        className={className}
+        wrapperClassName={wrapperClassName}
+        controlProps={controlProps}
+      />
+      <PopoverContent align={align} className={contentCls} onOpenAutoFocus={e => e.preventDefault()}>
+        {presets && presets.length > 0 && (
+          <PresetList
+            presets={presets}
+            isActive={v => v[0] === shown[0] && v[1] === shown[1]}
+            isDisabled={v => !inRange(v[0], minDate, maxDate) || !inRange(v[1], minDate, maxDate)}
+            onSelect={commit}
+          />
+        )}
+        <div className="flex flex-col">
+          <Calendar
+            mode="range"
+            autoFocus
+            numberOfMonths={isMobile ? 1 : numberOfColumns}
+            // O cálculo do período é nosso (pickDay): o do DayPicker já fecha
+            // um período de um dia no primeiro clique.
+            selected={pendingFrom ? { from: pendingFrom, to: undefined } : { from, to }}
+            onSelect={(_, day) => pickDay(day)}
+            defaultMonth={from ?? clampDate(new Date(), min, max)}
+            startMonth={min}
+            endMonth={max}
+            disabled={outOfRange(min, max)}
+            captionLayout={captionLayout}
+          />
+          <PickerFooter
+            onCancel={withApplyButton ? () => handleOpenChange(false) : undefined}
+            onApply={withApplyButton ? apply : undefined}
+            applyDisabled={!!pendingFrom}
+          >
+            <PickerHint>{hint}</PickerHint>
+          </PickerFooter>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export { DatePickerInput }

package/src/components/date-time-picker.tsx

@@ -0,0 +1,152 @@
+"use client"
+
+// Derivado do DatePicker do Tremor (Apache-2.0) e modificado pela Strategicos.
+// Ver THIRD_PARTY_NOTICES.md.
+
+import * as React from "react"
+
+import { Calendar } from "./calendar.js"
+import {
+  clampDate, formatDateTime, outOfRange, parseDateValue, toDateValue,
+  PickerFooter, PickerTrigger, type PickerBaseProps,
+} from "./dates.js"
+import { useFieldControl } from "./field.js"
+import { Popover, PopoverContent } from "./popover.js"
+import { TimeInput } from "./time-input.js"
+
+/**
+ * Data e hora num calendário com campo de hora, como o DateTimePicker do
+ * Mantine. Para digitar a data e a hora direto, `DateInput withTime`.
+ *
+ *   <Field label="Reunião">
+ *     <DateTimePicker value={inicio} onValueChange={setInicio} />
+ *   </Field>
+ *
+ * - Valor: "AAAA-MM-DD HH:mm:ss" ou `null`.
+ * - `withApplyButton` vem LIGADO (o botão de confirmar do Mantine): escolhe-se
+ *   o dia e a hora e grava-se no Aplicar. Desligado, cada mudança já grava e o
+ *   calendário fica aberto até sair dele.
+ * - `defaultTime`: hora usada quando ainda não há valor. Padrão: 00:00.
+ * - `minDate`/`maxDate` limitam o DIA ("AAAA-MM-DD").
+ */
+function DateTimePicker({
+  value,
+  onValueChange,
+  placeholder = "Selecione data e hora",
+  minDate,
+  maxDate,
+  clearable = false,
+  withApplyButton = true,
+  withSeconds = false,
+  defaultTime = "00:00",
+  valueFormatter = formatDateTime,
+  captionLayout,
+  size,
+  disabled,
+  className,
+  wrapperClassName,
+  align = "start",
+  onOpenChange,
+  ...props
+}: PickerBaseProps & {
+  value: string | null
+  onValueChange: (value: string | null) => void
+  /** Campo de hora com segundos. */
+  withSeconds?: boolean
+  /** "HH:mm" usada quando ainda não há valor. */
+  defaultTime?: string
+}) {
+  const controlProps = useFieldControl(props, { withRequired: false })
+  const [open, setOpen] = React.useState(false)
+  const [draft, setDraft] = React.useState<string | null>(value)
+  // A hora existe antes do dia: dá para acertá-la e escolher o dia depois.
+  const [time, setTime] = React.useState(() => timeOf(value, defaultTime))
+  const shown = withApplyButton ? draft : value
+
+  const selected = parseDateValue(shown)
+  const committed = parseDateValue(value)
+  const min = parseDateValue(minDate)
+  const max = parseDateValue(maxDate)
+
+  function handleOpenChange(o: boolean) {
+    setOpen(o)
+    if (o) { setDraft(value); setTime(timeOf(value, defaultTime)) }
+    onOpenChange?.(o)
+  }
+
+  function update(v: string) {
+    if (withApplyButton) setDraft(v)
+    else onValueChange(v)
+  }
+
+  // `time` é sempre "HH:mm:ss" (timeOf e changeTime completam).
+  function pickDay(day: Date) {
+    update(`${toDateValue(day)} ${time}`)
+  }
+
+  function changeTime(t: string) {
+    // O campo nativo devolve "" enquanto a hora está pela metade.
+    if (!/^\d{2}:\d{2}(:\d{2})?$/.test(t)) return
+    const full = t.length === 5 ? `${t}:00` : t
+    setTime(full)
+    if (shown) update(`${shown.slice(0, 10)} ${full}`)
+  }
+
+  function apply() {
+    if (draft !== value) onValueChange(draft)
+    handleOpenChange(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PickerTrigger
+        slot="date-time-picker"
+        text={committed ? valueFormatter(committed) : null}
+        placeholder={placeholder}
+        open={open}
+        size={size}
+        disabled={disabled}
+        clearable={clearable}
+        onClear={() => onValueChange(null)}
+        className={className}
+        wrapperClassName={wrapperClassName}
+        controlProps={controlProps}
+      />
+      <PopoverContent align={align} className="w-auto max-w-[calc(100vw-2rem)] p-0" onOpenAutoFocus={e => e.preventDefault()}>
+        <Calendar
+          mode="single"
+          required
+          autoFocus
+          selected={selected}
+          onSelect={pickDay}
+          defaultMonth={selected ?? clampDate(new Date(), min, max)}
+          startMonth={min}
+          endMonth={max}
+          disabled={outOfRange(min, max)}
+          captionLayout={captionLayout}
+        />
+        <PickerFooter
+          onCancel={withApplyButton ? () => handleOpenChange(false) : undefined}
+          onApply={withApplyButton ? apply : undefined}
+          applyDisabled={!draft}
+        >
+          <TimeInput
+            aria-label="Hora"
+            withSeconds={withSeconds}
+            value={withSeconds ? time : time.slice(0, 5)}
+            onChange={e => changeTime(e.target.value)}
+            className="w-32"
+          />
+        </PickerFooter>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+/** "HH:mm:ss" do valor, ou a hora padrão. */
+function timeOf(value: string | null, defaultTime: string) {
+  const t = value && value.length >= 16 ? value.slice(11, 19) : defaultTime
+  return t.length === 5 ? `${t}:00` : t
+}
+
+export { DateTimePicker }