@squadbase/vantage 0.6.2-dev1.b332e5a → 0.6.2-dev1.d7c0911

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

@@ -0,0 +1,390 @@
+// 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 `npm 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.
+ */
+import { forwardRef, useCallback, useMemo, useState } from "react"
+import { CalendarIcon } from "lucide-react"
+import {
+  addMonths,
+  endOfDay,
+  endOfMonth,
+  endOfWeek,
+  format,
+  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 { 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"
+
+/** 会計年度の開始月の既定（4 月始まり）。 */
+export const DEFAULT_FISCAL_YEAR_START_MONTH = 4
+
+/**
+ * ラベルの言語の既定（英語）。他部品の `DEFAULT_LOCALE`（ja-JP）とは違い、この部品だけ英語を既定にしている。
+ * 従来のプリセットが英語で、既存の利用者の見た目を変えないため。日本語にするなら `locale="ja-JP"` を渡す。
+ */
+export const DEFAULT_DATE_PICKER_LOCALE = "en-US"
+
+/** 1〜12 の整数だけを開始月として受け、それ以外は既定の 4 月に戻す。 */
+export function normalizeFiscalYearStartMonth(month: number | undefined): number {
+  return typeof month === "number" && Number.isInteger(month) && month >= 1 && month <= 12
+    ? month
+    : DEFAULT_FISCAL_YEAR_START_MONTH
+}
+
+/**
+ * `date` を含む年度（または年度基準の四半期）の全期間。`offset` で前後にずらす（`-1` が前の年度/四半期）。
+ * 年度は `fiscalYearStartMonth`（1-12）の 1 日に始まり 12 か月続く。四半期は年度の初日から 3 か月ごと。
+ *
+ * @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 }: { unit: "year" | "quarter"; fiscalYearStartMonth?: number; offset?: number },
+): { from: Date; to: Date } {
+  const startMonth = normalizeFiscalYearStartMonth(fiscalYearStartMonth)
+  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 isJapanese = (locale: string) => locale.toLowerCase().startsWith("ja")
+
+/** 週の始まり（月曜）。日本のビジネス慣習に合わせ、「今週」「先週」はどの locale でも月曜始まり。 */
+const WEEK_OPTIONS = { weekStartsOn: 1 } as const
+
+/** カレンダーに渡す date-fns の locale。`ja*` なら日本語、それ以外は react-day-picker の既定（英語）。 */
+const calendarLocale = (locale: string) => (isJapanese(locale) ? ja : undefined)
+
+/**
+ * 既定のプリセット一覧を作る。ラベルは `locale`（`ja*` なら日本語、それ以外は英語）、
+ * 「今四半期」「前四半期」「今年度」「前年度」は `fiscalYearStartMonth` を基準にする。
+ * 「今〜」は期の初日から今日まで、「前〜」「先月」「先週」は前の期の全期間。週は月曜始まり。`getValue` は押した時点の日付で計算する。
+ *
+ * @example
+ * createDatePresets({ locale: "ja-JP", fiscalYearStartMonth: 4 })
+ */
+export function createDatePresets({
+  locale = DEFAULT_DATE_PICKER_LOCALE,
+  fiscalYearStartMonth = DEFAULT_FISCAL_YEAR_START_MONTH,
+  now = () => new Date(),
+}: { locale?: string; fiscalYearStartMonth?: number; now?: () => Date } = {}): PresetItem[] {
+  const t = PRESET_LABELS[isJapanese(locale) ? "ja" : "en"]
+  const startMonth = normalizeFiscalYearStartMonth(fiscalYearStartMonth)
+  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)
+  })
+}
+
+/** 既定のプリセット（英語・4 月始まり）。`locale` / `fiscalYearStartMonth` を変えるなら `createDatePresets` か DateRangePicker の同名 props。 */
+export const defaultPresets: PresetItem[] = createDatePresets()
+
+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*` なら日本語、それ以外は英語。既定 `"en-US"`（英語）。
+   * 他部品の既定は ja-JP だが、この部品は従来のプリセットが英語だったので既存の見た目を保つため英語を既定にしている。
+   *
+   * @example
+   * <DateRangePicker locale="ja-JP" />
+   */
+  locale?: string
+  /**
+   * 年度の開始月（1-12）。「今年度」「前年度」と、年度基準の「今四半期」「前四半期」の区切りになる。既定 `4`（4 月始まり）。
+   * 範囲外・整数でない値は 4 として扱う。
+   *
+   * @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 = DEFAULT_DATE_PICKER_LOCALE,
+      fiscalYearStartMonth = DEFAULT_FISCAL_YEAR_START_MONTH,
+      maxDate,
+      minDate,
+      placeholder = "期間を選択",
+      disabled = false,
+      className,
+      align = "start",
+    },
+    ref,
+  ) {
+    const [open, setOpen] = useState(false)
+    const isMobile = useIsMobile()
+    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
+      if (!value.to) return format(value.from, "yyyy/MM/dd")
+      return `${format(value.from, "yyyy/MM/dd")} - ${format(value.to, "yyyy/MM/dd")}`
+    }
+    // 選んだ期間がプリセットの結果と一致するときは、日付の前にそのプリセット名を出す。
+    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={isJapanese(locale) ? 1 : undefined}
+                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"

package/registry/ui/delta.tsx

@@ -0,0 +1,188 @@
+// Copied by `vantage add ui delta`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/delta.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * Delta — the change of a value against a comparison, rendered as arrow + signed
+ * change + comparison label ("↑ +12.4% 前月比") on one line.
+ *
+ * Direction, rate, colour and wording are all derived here from `value` and
+ * `comparison` (via `computeComparison`); none of them can be passed in, so they
+ * cannot contradict each other. Colour is never the only signal: the arrow and
+ * the sign always accompany it. Set `polarity="lower-is-better"` for metrics
+ * where a rise is bad (churn, error rate).
+ *
+ * - A flat change (inside `neutralBand`) uses a right arrow (→), never a minus-like dash, so it cannot
+ *   read as "− +0.19pt".
+ * - The label comes from `comparison.vs` and `comparison.grain`: a monthly
+ *   `prior-period` reads "前月比", `prior-year` "前年同月比".
+ * - Pass the metric's `format`: a `percent` metric (a rate) shows the difference
+ *   in percentage points ("−0.5pt") instead of a relative change ("−19.2%"). A minus is
+ *   always U+2212, and the digits of a relative change / points are fixed (default 1:
+ *   "+14.0%" beside "+11.9%"); `digits` sets the same count for every card in a group.
+ * - A running total (YTD / MTD) sets `comparison.toDate`: `prior-year` then reads
+ *   "前年同期比" instead of "前年比" whatever the grain.
+ * - When the values cannot be compared (a null value, no previous one), it shows a single muted
+ *   "—" with no arrow (and the label, so "— 前年同月比" says which comparison is missing). The
+ *   screen-reader text says "比較できません".
+ *
+ * @example
+ * import { Delta } from "@/components/delta"
+ * // Vantage: import { Delta } from "@squadbase/vantage/components"
+ *
+ * <Delta value={48_200_000} comparison={{ previous: 42_900_000, vs: "prior-period", grain: "month" }} />
+ * <Delta value={0.021} format="percent" polarity="lower-is-better"
+ *   comparison={{ previous: 0.026, vs: "prior-year", grain: "month" }} />
+ */
+import { forwardRef, type HTMLAttributes } from "react"
+import { ArrowDown, ArrowRight, ArrowUp } from "lucide-react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@squadbase/vantage/ui"
+import {
+  computeComparison,
+  defaultChangeDisplay,
+  formatChange,
+  formatChangeAmount,
+  type ChangeDisplay,
+  type Comparison,
+  type ComparisonResult,
+  type Polarity,
+} from "@squadbase/vantage/components"
+import { DEFAULT_LOCALE, EMPTY_VALUE, type ValueFormat } from "@squadbase/vantage/components"
+
+const deltaVariants = cva(
+  "inline-flex w-fit shrink-0 items-center gap-1 font-medium whitespace-nowrap tabular-nums",
+  {
+    variants: {
+      variant: {
+        badge: "h-5 rounded-4xl px-2 py-0.5 text-xs font-semibold [&>svg]:size-3",
+        inline: "text-sm [&>svg]:size-3.5",
+      },
+      sentiment: {
+        positive: "text-positive",
+        negative: "text-negative",
+        neutral: "text-neutral",
+      },
+    },
+    compoundVariants: [
+      { variant: "badge", sentiment: "positive", className: "bg-positive-subtle" },
+      { variant: "badge", sentiment: "negative", className: "bg-negative-subtle" },
+      { variant: "badge", sentiment: "neutral", className: "bg-neutral-subtle" },
+    ],
+    defaultVariants: {
+      variant: "badge",
+      sentiment: "neutral",
+    },
+  },
+)
+
+export interface DeltaProps
+  extends
+    Omit<HTMLAttributes<HTMLSpanElement>, "children">,
+    Pick<VariantProps<typeof deltaVariants>, "variant"> {
+  /** The current value. The previous one comes from `comparison`. */
+  value: number | null | undefined
+  /** What the value is compared against. Required so the delta always carries its label. */
+  comparison: Comparison
+  /** Whether a rise is good. Default `"higher-is-better"`. */
+  polarity?: Polarity
+  /** Absolute ratio below which the change reads as flat (0.01 = 1%). Default 0.01. */
+  neutralBand?: number
+  /** Format of the metric itself; a `percent` metric shows its change in points. */
+  format?: ValueFormat
+  /**
+   * `"relative"` ("+12.4%"), `"points"` ("-0.5pt") or `"difference"` (the absolute difference in the
+   * metric's own `format`, "+¥530万"). Default: points for a `percent` format, else relative.
+   */
+  change?: ChangeDisplay
+  /**
+   * 変化（`"relative"` の率・`"points"` の pt）の小数桁数。固定で、末尾の 0 も出す。例: `digits={2}` → "+0.14pt"。
+   * 同じカード群で桁がばらつかないよう、全部に同じ値を渡す。未指定は 1 桁（"+14.0%"）。`"points"` は未指定のとき `format.digits` に従う。
+   */
+  digits?: number
+  /** Locale for the change. Default `"ja-JP"`. */
+  locale?: string
+  /** Show the comparison label ("前月比") after the change. Default true. */
+  showLabel?: boolean
+}
+
+/** Text shown when the values cannot be compared (no previous value, or a zero baseline): the same "—" as every missing value. */
+export const DELTA_NOT_COMPARABLE = EMPTY_VALUE
+
+/**
+ * Screen-reader text, e.g. "前月比 12.4% 増加" / "前月比 0.5 ポイント 減少" / "前月比 横ばい" / "前月比 比較できません".
+ * The amount carries no sign, since the verb already says the direction ("−0.5 ポイント 減少" would negate twice).
+ */
+export function deltaAriaLabel(
+  result: ComparisonResult,
+  locale: string = DEFAULT_LOCALE,
+  change: ChangeDisplay = "relative",
+  format?: ValueFormat,
+  digits?: number,
+): string {
+  const { label, direction, ratio } = result
+  if (direction === "none" || ratio === null) return `${label} 比較できません`
+  if (direction === "flat") return `${label} 横ばい`
+  const amount = formatChangeAmount(result, change, locale, format, digits)
+  if (amount === null) return `${label} 比較できません`
+  return `${label} ${change === "points" ? amount.replace(/pt$/, " ポイント") : amount} ${direction === "up" ? "増加" : "減少"}`
+}
+
+export const Delta = forwardRef<HTMLSpanElement, DeltaProps>(
+  (
+    {
+      value,
+      comparison,
+      polarity,
+      neutralBand,
+      format,
+      change,
+      digits,
+      locale = DEFAULT_LOCALE,
+      showLabel = true,
+      variant = "badge",
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    // Nothing to compare against yet (a draft fills props in steps).
+    if (!comparison) return null
+    const result = computeComparison(value, comparison, { polarity, neutralBand })
+    const display = change ?? defaultChangeDisplay(format)
+    const formatDigits = typeof format === "object" && format !== null && "digits" in format ? format.digits : undefined
+    const changeDigits = display === "points" ? (digits ?? formatDigits) : digits
+    const comparable = result.direction !== "none"
+    const Icon = result.direction === "up" ? ArrowUp : result.direction === "down" ? ArrowDown : ArrowRight
+    const text = formatChange(result, display, locale, format, changeDigits)
+
+    return (
+      <span
+        ref={ref}
+        role="img"
+        data-slot="delta"
+        data-direction={result.direction}
+        data-sentiment={result.sentiment}
+        aria-label={deltaAriaLabel(result, locale, display, format, changeDigits)}
+        className={cn(
+          deltaVariants({ variant, sentiment: result.sentiment }),
+          !comparable && "text-muted-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {comparable && <Icon aria-hidden="true" />}
+        <span aria-hidden="true">{text ?? DELTA_NOT_COMPARABLE}</span>
+        {showLabel && (
+          <span aria-hidden="true" className="font-normal text-muted-foreground">
+            {result.label}
+          </span>
+        )}
+      </span>
+    )
+  },
+)
+Delta.displayName = "Delta"
+
+export { deltaVariants }