@squadbase/vantage 0.6.1 → 0.6.2-dev1.0010f67

package/registry/ui/date-range-picker.tsx

@@ -0,0 +1,544 @@
+// Copied by `vantage add ui date-range-picker`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/date-range-picker.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * DateRangePicker — a range calendar in a popover with quick presets down the
+ * side. On mobile the presets stack above a single month; on desktop they sit
+ * beside a two-month view. The labels, the date format, the fiscal year start and the
+ * first day of the week follow the page (`<html lang>`) unless `locale` is given.
+ */
+import { forwardRef, useCallback, useMemo, useState } from "react"
+import { CalendarIcon } from "lucide-react"
+import {
+  addMonths,
+  endOfDay,
+  endOfMonth,
+  endOfWeek,
+  isSameDay,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+  subDays,
+  subMonths,
+  subWeeks,
+} from "date-fns"
+import { ja } from "date-fns/locale"
+import type { DateRange as RdpDateRange } from "react-day-picker"
+
+import { cn } from "@squadbase/vantage/ui"
+import { useIsMobile } from "@squadbase/vantage/ui"
+import { formatDate } from "@squadbase/vantage/components"
+import { Button } from "@squadbase/vantage/ui"
+import { Calendar } from "@squadbase/vantage/ui"
+import { Popover, PopoverContent, PopoverTrigger } from "@squadbase/vantage/ui"
+import type { DateRange, PresetItem } from "@squadbase/vantage/components"
+import { useSyncExternalStore } from "react"
+
+/* ---------- inlined from @squadbase/squadkit registry/lib/locale.ts (internal to @squadbase/vantage) ---------- */
+
+/**
+ * The display language of the parts and the defaults that follow it.
+ *
+ * The language comes from `<html lang>`: a tag starting with `ja` reads Japanese, anything else English.
+ * Without a usable `lang` (missing, invalid, or no `document` — SSR, Node) the locale is `FALLBACK_LOCALE`
+ * (`en-US`). A `locale` passed explicitly (a prop, an argument) always wins.
+ *
+ * Parts read the locale through `useLocale` (`hooks/use-locale`) and pass it down; the pure helpers here
+ * and in `format` / `comparison` / `chart-*` take it as an argument and fall back to `documentLocale()`.
+ */
+
+/** The language of the built-in wording: Japanese or English. */
+type UiLanguage = "ja" | "en"
+
+/** The locale used when `<html lang>` gives none (and on the server). */
+const FALLBACK_LOCALE = "en-US"
+
+/** `"ja"` when `locale` starts with `ja` (`ja`, `ja-JP`), else `"en"`. A missing locale is `"en"`. */
+function uiLanguage(locale: string | null | undefined): UiLanguage {
+  return typeof locale === "string" && locale.trim().toLowerCase().startsWith("ja") ? "ja" : "en"
+}
+
+/** A BCP 47 tag in its canonical form (`en-gb` → `en-GB`), or `FALLBACK_LOCALE` when it is empty or invalid. */
+function normalizeLocale(tag: string | null | undefined): string {
+  const value = tag?.trim()
+  if (!value) return FALLBACK_LOCALE
+  try {
+    return Intl.getCanonicalLocales(value)[0] ?? FALLBACK_LOCALE
+  } catch {
+    return FALLBACK_LOCALE
+  }
+}
+
+/**
+ * The locale of the page: `document.documentElement.lang`, canonicalized. `FALLBACK_LOCALE` when it is empty or
+ * invalid, or there is no `document`. Parts read it through `useLocale`, never while rendering.
+ */
+function documentLocale(): string {
+  if (typeof document === "undefined") return FALLBACK_LOCALE
+  return normalizeLocale(document.documentElement?.getAttribute("lang"))
+}
+
+/** `locale` when given, else the page's locale (`documentLocale()`). */
+function resolveLocale(locale?: string | null): string {
+  return locale || documentLocale()
+}
+
+/** Picks the wording table of the locale's language. */
+function pickLocale<T>(table: { ja: T; en: T }, locale?: string | null): T {
+  return table[uiLanguage(resolveLocale(locale))]
+}
+
+/** The currency `format="currency"` uses without a `currency`: JPY for Japanese, USD otherwise. */
+function defaultCurrency(locale?: string | null): string {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? "JPY" : "USD"
+}
+
+/** The month a fiscal year starts in (1–12) when none is given: April for Japanese, January otherwise. */
+function defaultFiscalYearStartMonth(locale?: string | null): number {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? 4 : 1
+}
+
+/** A day of the week, 0 = Sunday … 6 = Saturday (the `Date#getDay` / date-fns numbering). */
+type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
+/** Locales whose week starts on Sunday when the runtime has no week data. */
+const SUNDAY_FIRST = new Set(["en", "en-US", "en-CA"])
+
+/**
+ * The first day of the week: Monday for Japanese; otherwise the locale's convention from `Intl.Locale`
+ * (`en-US` Sunday, `en-GB` Monday). Without week data in the runtime: Sunday for `en` / `en-US` / `en-CA`,
+ * Monday for the rest.
+ */
+function weekStartsOn(locale?: string | null): WeekDay {
+  const tag = normalizeLocale(resolveLocale(locale))
+  if (uiLanguage(tag) === "ja") return 1
+  try {
+    const info = new Intl.Locale(tag) as Intl.Locale & {
+      getWeekInfo?: () => { firstDay: number }
+      weekInfo?: { firstDay: number }
+    }
+    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
+    if (typeof firstDay === "number" && firstDay >= 1 && firstDay <= 7) return (firstDay % 7) as WeekDay
+  } catch {
+    // Fall through to the table below.
+  }
+  return SUNDAY_FIRST.has(tag) ? 0 : 1
+}
+
+/* ---------- inlined from @squadbase/squadkit registry/hooks/use-locale.ts (internal to @squadbase/vantage) ---------- */
+
+const listeners = new Set<() => void>()
+let observer: MutationObserver | null = null
+
+/** One observer on `<html lang>` for every subscribed part. */
+function subscribe(onChange: () => void): () => void {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {}
+  listeners.add(onChange)
+  if (!observer) {
+    observer = new MutationObserver(() => {
+      for (const listener of [...listeners]) listener()
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] })
+  }
+  return () => {
+    listeners.delete(onChange)
+    if (listeners.size === 0 && observer) {
+      observer.disconnect()
+      observer = null
+    }
+  }
+}
+
+const serverLocale = () => FALLBACK_LOCALE
+
+/**
+ * The page's locale (`<html lang>`), following changes made while the page runs. On the server and during
+ * hydration it is `FALLBACK_LOCALE` (`en-US`), so the markup matches; it switches right after.
+ */
+function useDocumentLocale(): string {
+  return useSyncExternalStore(subscribe, documentLocale, serverLocale)
+}
+
+/** The locale a part renders in: its `locale` prop when given, else the page's (`useDocumentLocale`). */
+function useLocale(locale?: string | null): string {
+  const page = useDocumentLocale()
+  return locale || page
+}
+
+/* ---------- end of inlined code ---------- */
+
+/**
+ * 会計年度の開始月のフォールバック（1 月始まり）。ロケールから決まる既定は `defaultFiscalYearStartMonth`
+ * （`<html lang>` が ja なら 4 月、それ以外は 1 月）。
+ */
+export const DEFAULT_FISCAL_YEAR_START_MONTH = 1
+
+/** ラベルの言語のフォールバック（英語）。`locale` を渡さなければ、ほかの部品と同じくページの `<html lang>` に従う。 */
+export const DEFAULT_DATE_PICKER_LOCALE = FALLBACK_LOCALE
+
+/**
+ * 1〜12 の整数だけを開始月として受け、それ以外は `locale` の既定（ja は 4 月、それ以外は 1 月）に戻す。
+ * `locale` の既定はページのロケール（`<html lang>`）。
+ */
+export function normalizeFiscalYearStartMonth(month: number | undefined, locale?: string): number {
+  return typeof month === "number" && Number.isInteger(month) && month >= 1 && month <= 12
+    ? month
+    : defaultFiscalYearStartMonth(locale)
+}
+
+/**
+ * `date` を含む年度（または年度基準の四半期）の全期間。`offset` で前後にずらす（`-1` が前の年度/四半期）。
+ * 年度は `fiscalYearStartMonth`（1-12）の 1 日に始まり 12 か月続く。四半期は年度の初日から 3 か月ごと。
+ * `fiscalYearStartMonth` を省くと `locale`（既定はページのロケール）の既定（ja は 4 月、それ以外は 1 月）。
+ *
+ * @example
+ * // 4 月始まりで 2026-02-10 は 2025 年度（2025-04-01〜2026-03-31）
+ * fiscalPeriodRange(new Date(2026, 1, 10), { unit: "year", fiscalYearStartMonth: 4 })
+ */
+export function fiscalPeriodRange(
+  date: Date,
+  {
+    unit,
+    fiscalYearStartMonth,
+    offset = 0,
+    locale,
+  }: { unit: "year" | "quarter"; fiscalYearStartMonth?: number; offset?: number; locale?: string },
+): { from: Date; to: Date } {
+  const startMonth = normalizeFiscalYearStartMonth(fiscalYearStartMonth, locale)
+  const length = unit === "year" ? 12 : 3
+  const sinceYearStart = (date.getMonth() - (startMonth - 1) + 12) % 12
+  const into = unit === "year" ? sinceYearStart : sinceYearStart % 3
+  const periodStart = addMonths(startOfMonth(subMonths(date, into)), offset * length)
+  return { from: periodStart, to: endOfMonth(addMonths(periodStart, length - 1)) }
+}
+
+const PRESET_LABELS = {
+  ja: {
+    today: "今日",
+    yesterday: "昨日",
+    last7: "過去 7 日間",
+    last14: "過去 14 日間",
+    last28: "過去 28 日間",
+    last30: "過去 30 日間",
+    last90: "過去 90 日間",
+    thisWeek: "今週",
+    lastWeek: "先週",
+    thisMonth: "今月",
+    lastMonth: "先月",
+    thisQuarter: "今四半期",
+    lastQuarter: "前四半期",
+    thisFiscalYear: "今年度",
+    lastFiscalYear: "前年度",
+  },
+  en: {
+    today: "Today",
+    yesterday: "Yesterday",
+    last7: "Last 7 days",
+    last14: "Last 14 days",
+    last28: "Last 28 days",
+    last30: "Last 30 days",
+    last90: "Last 90 days",
+    thisWeek: "This week",
+    lastWeek: "Last week",
+    thisMonth: "This month",
+    lastMonth: "Last month",
+    thisQuarter: "This quarter",
+    lastQuarter: "Last quarter",
+    thisFiscalYear: "This fiscal year",
+    lastFiscalYear: "Last fiscal year",
+  },
+} as const
+
+const TEXT = {
+  ja: { placeholder: "期間を選択", rangeSeparator: " - " },
+  en: { placeholder: "Pick a date range", rangeSeparator: " – " },
+}
+
+/** カレンダーに渡す date-fns の locale。`ja*` なら日本語、それ以外は react-day-picker の既定（英語）。 */
+const calendarLocale = (locale: string) => (uiLanguage(locale) === "ja" ? ja : undefined)
+
+/**
+ * 既定のプリセット一覧を作る。ラベルは `locale`（`ja*` なら日本語、それ以外は英語）、
+ * 「今四半期」「前四半期」「今年度」「前年度」は `fiscalYearStartMonth`（省くと ja は 4 月、それ以外は 1 月）を基準にする。
+ * 「今〜」は期の初日から今日まで、「前〜」「先月」「先週」は前の期の全期間。週の始まりは `locale` の慣習
+ * （ja は月曜、`en-US` は日曜、`en-GB` は月曜。`weekStartsOn`）。`getValue` は押した時点の日付で計算する。
+ * `locale` の既定はページのロケール（`<html lang>`、無ければ `"en-US"`）。
+ *
+ * @example
+ * createDatePresets({ locale: "ja-JP", fiscalYearStartMonth: 4 })
+ */
+export function createDatePresets({
+  locale: localeArg,
+  fiscalYearStartMonth,
+  now = () => new Date(),
+}: { locale?: string; fiscalYearStartMonth?: number; now?: () => Date } = {}): PresetItem[] {
+  const locale = resolveLocale(localeArg)
+  const t = PRESET_LABELS[uiLanguage(locale)]
+  const startMonth = normalizeFiscalYearStartMonth(fiscalYearStartMonth, locale)
+  const WEEK_OPTIONS = { weekStartsOn: weekStartsOn(locale) }
+  const lastDays = (days: number) => () => {
+    const today = now()
+    return { from: startOfDay(subDays(today, days - 1)), to: endOfDay(today) }
+  }
+  const toDate = (unit: "year" | "quarter") => () => {
+    const today = now()
+    return {
+      from: fiscalPeriodRange(today, { unit, fiscalYearStartMonth: startMonth }).from,
+      to: endOfDay(today),
+    }
+  }
+  const previous = (unit: "year" | "quarter") => () =>
+    fiscalPeriodRange(now(), { unit, fiscalYearStartMonth: startMonth, offset: -1 })
+  return [
+    { label: t.today, getValue: lastDays(1) },
+    {
+      label: t.yesterday,
+      getValue: () => {
+        const yesterday = subDays(now(), 1)
+        return { from: startOfDay(yesterday), to: endOfDay(yesterday) }
+      },
+    },
+    { label: t.last7, getValue: lastDays(7) },
+    { label: t.last14, getValue: lastDays(14) },
+    { label: t.last28, getValue: lastDays(28) },
+    { label: t.last30, getValue: lastDays(30) },
+    { label: t.last90, getValue: lastDays(90) },
+    {
+      label: t.thisWeek,
+      getValue: () => {
+        const today = now()
+        return { from: startOfWeek(today, WEEK_OPTIONS), to: endOfDay(today) }
+      },
+    },
+    {
+      label: t.lastWeek,
+      getValue: () => {
+        const lastWeek = subWeeks(now(), 1)
+        return { from: startOfWeek(lastWeek, WEEK_OPTIONS), to: endOfWeek(lastWeek, WEEK_OPTIONS) }
+      },
+    },
+    {
+      label: t.thisMonth,
+      getValue: () => {
+        const today = now()
+        return { from: startOfMonth(today), to: endOfDay(today) }
+      },
+    },
+    {
+      label: t.lastMonth,
+      getValue: () => {
+        const lastMonth = subMonths(now(), 1)
+        return { from: startOfMonth(lastMonth), to: endOfMonth(lastMonth) }
+      },
+    },
+    { label: t.thisQuarter, getValue: toDate("quarter") },
+    { label: t.lastQuarter, getValue: previous("quarter") },
+    { label: t.thisFiscalYear, getValue: toDate("year") },
+    { label: t.lastFiscalYear, getValue: previous("year") },
+  ]
+}
+
+/**
+ * `value` と日単位で同じ範囲を返す最初のプリセットを探す（無ければ `undefined`）。`getValue` は呼んだ時点の日付で計算される。
+ * 「今日」と「今週」が月曜に重なるときなど、複数が一致したら並びの早いほうを返す。
+ */
+export function findMatchingPreset(presets: PresetItem[], value: DateRange | undefined): PresetItem | undefined {
+  const { from, to } = value ?? {}
+  if (!from || !to) return undefined
+  return presets.find((preset) => {
+    const range = preset.getValue()
+    return range.from != null && range.to != null && isSameDay(range.from, from) && isSameDay(range.to, to)
+  })
+}
+
+/**
+ * フォールバック（`en-US`：英語・1 月始まり・日曜始まり）のプリセット。DateRangePicker は `presets` を渡さなければ
+ * ページのロケールからプリセットを作るので、これを渡す必要はない。`locale` / `fiscalYearStartMonth` を変えるなら
+ * `createDatePresets` か DateRangePicker の同名 props。
+ */
+export const defaultPresets: PresetItem[] = createDatePresets({ locale: FALLBACK_LOCALE })
+
+export interface DateRangePickerProps {
+  /**
+   * 選択中の日付範囲。型はこの部品独自の `DateRange`。
+   * react-day-picker の `DateRange` とは別物なので注意 — そちらが必要なら
+   * このファイルの末尾で re-export している `RdpDateRange` を使う。
+   *
+   * @example
+   * import { DateRangePicker, type DateRange } from "@/components/date-range-picker"
+   * // Vantage: import { DateRangePicker, type DateRange } from "@squadbase/vantage/components"
+   *
+   * const [range, setRange] = useState<DateRange | undefined>()
+   * <DateRangePicker value={range} onChange={setRange} />
+   */
+  value?: DateRange
+  onChange?: (range: DateRange) => void
+  /**
+   * ショートカットの一覧。指定すると `locale` / `fiscalYearStartMonth` による既定の一覧の代わりに使う。
+   *
+   * @example
+   * presets={[{ label: "直近 10 日", getValue: () => ({ from: subDays(new Date(), 9), to: new Date() }) }]}
+   */
+  presets?: PresetItem[]
+  showPresets?: boolean
+  /**
+   * プリセットのラベル・日付の書式・カレンダーの月名と曜日・週の始まりのロケール。`ja*` なら日本語、それ以外は英語。
+   * 既定はページのロケール（`<html lang>`、無ければ `"en-US"`）。
+   *
+   * @example
+   * <DateRangePicker locale="ja-JP" />
+   */
+  locale?: string
+  /**
+   * 年度の開始月（1-12）。「今年度」「前年度」と、年度基準の「今四半期」「前四半期」の区切りになる。
+   * 既定はロケールで決まる（ja は `4`、それ以外は `1`）。範囲外・整数でない値はその既定として扱う。
+   *
+   * @example
+   * <DateRangePicker fiscalYearStartMonth={1} />
+   */
+  fiscalYearStartMonth?: number
+  maxDate?: Date
+  minDate?: Date
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+  align?: "start" | "center" | "end"
+}
+
+export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
+  function DateRangePicker(
+    {
+      value,
+      onChange,
+      presets: presetsProp,
+      showPresets = true,
+      locale: localeProp,
+      fiscalYearStartMonth,
+      maxDate,
+      minDate,
+      placeholder,
+      disabled = false,
+      className,
+      align = "start",
+    },
+    ref,
+  ) {
+    const [open, setOpen] = useState(false)
+    const isMobile = useIsMobile()
+    const locale = useLocale(localeProp)
+    const t = TEXT[uiLanguage(locale)]
+    const presets = useMemo(
+      () => presetsProp ?? createDatePresets({ locale, fiscalYearStartMonth }),
+      [presetsProp, locale, fiscalYearStartMonth],
+    )
+
+    const handleCalendarSelect = useCallback(
+      (range: RdpDateRange | undefined) => {
+        onChange?.({ from: range?.from, to: range?.to })
+      },
+      [onChange],
+    )
+
+    const handlePresetClick = useCallback(
+      (preset: PresetItem) => {
+        onChange?.(preset.getValue())
+        setOpen(false)
+      },
+      [onChange],
+    )
+
+    const formatDateRange = () => {
+      if (!value?.from) return placeholder ?? t.placeholder
+      if (!value.to) return formatDate(value.from, "date", locale)
+      return `${formatDate(value.from, "date", locale)}${t.rangeSeparator}${formatDate(value.to, "date", locale)}`
+    }
+    // 選んだ期間がプリセットの結果と一致するときは、日付の前にそのプリセット名を出す。
+    const selectedPreset = findMatchingPreset(presets, value)
+    const presetLabel = selectedPreset?.label
+
+    // 開いたとき、右の月が終了月・左がその前月になるよう、表示月（左の月）を決める。1 か月表示（モバイル）は終了月。
+    const endMonth = value?.to ?? value?.from
+    const defaultMonth = endMonth ? (isMobile ? endMonth : subMonths(endMonth, 1)) : undefined
+
+    const calendarSelected: RdpDateRange | undefined = value?.from
+      ? { from: value.from, to: value.to ?? undefined }
+      : undefined
+
+    return (
+      <div ref={ref} data-slot="date-range-picker">
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger
+            render={
+              <Button
+                variant="outline"
+                disabled={disabled}
+                className={cn(
+                  "w-auto justify-start text-left font-normal",
+                  !value?.from && "text-muted-foreground",
+                  className,
+                )}
+              />
+            }
+            aria-label={presetLabel ? `${presetLabel} ${formatDateRange()}` : formatDateRange()}
+            aria-expanded={open}
+          >
+            <CalendarIcon className="size-4" aria-hidden="true" />
+            {presetLabel ? (
+              <>
+                <span>{presetLabel}</span>
+                <span className="text-muted-foreground">{formatDateRange()}</span>
+              </>
+            ) : (
+              <span>{formatDateRange()}</span>
+            )}
+          </PopoverTrigger>
+          <PopoverContent
+            align={align}
+            className={cn("w-auto gap-0 p-0", isMobile ? "flex-col" : "flex-row")}
+          >
+            {showPresets && (
+              <div className={cn("flex flex-col gap-1 p-3", isMobile ? "border-b" : "border-r")}>
+                {presets.map((preset) => (
+                  <Button
+                    key={preset.label}
+                    variant="ghost"
+                    size="sm"
+                    aria-pressed={selectedPreset === preset}
+                    className={cn(
+                      "justify-start text-xs",
+                      selectedPreset === preset && "bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary",
+                    )}
+                    onClick={() => handlePresetClick(preset)}
+                  >
+                    {preset.label}
+                  </Button>
+                ))}
+              </div>
+            )}
+            <div className="p-3">
+              <Calendar
+                key={`${open}-${isMobile}`}
+                mode="range"
+                defaultMonth={defaultMonth}
+                locale={calendarLocale(locale)}
+                weekStartsOn={weekStartsOn(locale)}
+                numberOfMonths={isMobile ? 1 : 2}
+                selected={calendarSelected}
+                onSelect={handleCalendarSelect}
+                disabled={(date) => {
+                  if (maxDate && date > maxDate) return true
+                  if (minDate && date < minDate) return true
+                  return false
+                }}
+              />
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+    )
+  },
+)
+DateRangePicker.displayName = "DateRangePicker"
+
+export type { DateRange as RdpDateRange } from "react-day-picker"