@squadbase/vantage 0.6.2-stg.3a2ba98 → 0.7.0-dev1.275b4ed

package/registry/ui/filter-bar.tsx

@@ -0,0 +1,551 @@
+// Copied by `vantage add ui filter-bar`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/filter-bar.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * FilterBar — a compound filter row. `<FilterBar>` holds the (always
+ * controlled) filter values on context; the select, multi-select, active-chip
+ * and clear parts read and update them. `FilterBarPreset` builds the whole row
+ * from a `FilterConfig[]`.
+ */
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react"
+import { ChevronDown, X } from "lucide-react"
+
+import { cn } from "@squadbase/vantage/ui"
+import { Badge } from "@squadbase/vantage/ui"
+import { Button } from "@squadbase/vantage/ui"
+import { Checkbox } from "@squadbase/vantage/ui"
+import { Popover, PopoverContent, PopoverTrigger } from "@squadbase/vantage/ui"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@squadbase/vantage/ui"
+import type { FilterConfig, FilterOption, FilterValues } 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 ---------- */
+
+/* --------------------------------------------------------------- context */
+
+interface FilterBarContextValue {
+  /** Current filter values (controlled from outside) */
+  value: FilterValues
+  /** Notify the parent of a value change */
+  onChange: (next: FilterValues) => void
+  /** Optional clear callback — undefined means no clear button */
+  onClear?: () => void
+}
+
+const FilterBarContext = createContext<FilterBarContextValue | null>(null)
+
+const TEXT = {
+  ja: {
+    filters: "フィルター",
+    selected: (count: number) => ` (${count}件選択中)`,
+    remove: (filter: string, option: string) => `${filter}: ${option} を削除`,
+    clear: "クリア",
+    clearAll: "すべてのフィルターをクリア",
+  },
+  en: {
+    filters: "Filters",
+    selected: (count: number) => ` (${count} selected)`,
+    remove: (filter: string, option: string) => `Remove ${filter}: ${option}`,
+    clear: "Clear",
+    clearAll: "Clear all filters",
+  },
+}
+
+const useText = () => TEXT[uiLanguage(useLocale())]
+
+function useFilterBar(): FilterBarContextValue {
+  const ctx = useContext(FilterBarContext)
+  if (!ctx) throw new Error("useFilterBar must be used within <FilterBar>")
+  return ctx
+}
+
+/* ------------------------------------------------------------------ root */
+
+export interface FilterBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  value: FilterValues
+  onChange: (values: FilterValues) => void
+  onClear?: () => void
+  className?: string
+  children?: ReactNode
+}
+
+export const FilterBar = forwardRef<HTMLDivElement, FilterBarProps>(
+  ({ value, onChange, onClear, className, children, ...props }, ref) => {
+    const t = useText()
+    return (
+      <FilterBarContext.Provider value={{ value, onChange, onClear }}>
+        <div
+          ref={ref}
+          role="search"
+          aria-label={t.filters}
+          data-slot="filter-bar"
+          className={cn("flex flex-wrap items-center gap-2", className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </FilterBarContext.Provider>
+    )
+  },
+)
+FilterBar.displayName = "FilterBar"
+
+/* ---------------------------------------------------------------- select */
+
+export interface FilterBarSelectProps {
+  filterKey: string
+  label: string
+  options: FilterOption[]
+  placeholder?: string
+  /**
+   * 渡すと、選択肢の先頭に「絞り込まない」項目をこの文言で足す（例: `"すべて"`）。選ぶとこのキーを値から外す（`undefined`）ので、
+   * アクティブチップにも出ない。絞り込んでいないときのトリガーは `placeholder`（既定は `label`）のまま。既定は足さない。
+   * @example allLabel="すべて"
+   */
+  allLabel?: string
+  className?: string
+}
+
+/** 「すべて」項目の値。実際の選択肢の値と衝突しない内部用の印で、`onChange` には渡らない。 */
+const ALL_VALUE = "__squadkit_all__"
+
+export function FilterBarSelect({
+  filterKey,
+  label,
+  options,
+  placeholder,
+  allLabel,
+  className,
+}: FilterBarSelectProps) {
+  const { value, onChange } = useFilterBar()
+  const hasAll = allLabel !== undefined
+  const items = hasAll ? [{ value: ALL_VALUE, label: allLabel }, ...options] : options
+  const current = value[filterKey] as string | undefined
+
+  // Base UI reports `null` when the selection is cleared — drop the key so
+  // "no filter" reads as absent rather than as an empty string. "すべて" does the same.
+  const handleChange = (selected: string | null) =>
+    onChange({ ...value, [filterKey]: selected === null || selected === ALL_VALUE ? undefined : selected })
+
+  return (
+    <Select
+      // FilterOption is already `{ value, label }` — Base UI uses it to show the
+      // label (not the raw value) in the trigger.
+      items={items}
+      value={current ?? ""}
+      onValueChange={handleChange}
+    >
+      <SelectTrigger size="sm" aria-label={label} data-slot="filter-bar-select" className={className}>
+        <SelectValue placeholder={placeholder ?? label} />
+      </SelectTrigger>
+      <SelectContent>
+        {hasAll && <SelectItem value={ALL_VALUE}>{allLabel}</SelectItem>}
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value} disabled={option.disabled}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+FilterBarSelect.displayName = "FilterBarSelect"
+
+/* ---------------------------------------------------------- multi-select */
+
+export interface FilterBarMultiSelectProps {
+  filterKey: string
+  label: string
+  options: FilterOption[]
+  placeholder?: string
+  className?: string
+}
+
+export function FilterBarMultiSelect({
+  filterKey,
+  label,
+  options,
+  placeholder,
+  className,
+}: FilterBarMultiSelectProps) {
+  const { value, onChange } = useFilterBar()
+  const t = useText()
+  const selected = (value[filterKey] as string[] | undefined) ?? []
+
+  const handleToggle = (option: string) => {
+    const next = selected.includes(option)
+      ? selected.filter((v) => v !== option)
+      : [...selected, option]
+    // Drop the key entirely when nothing is left, so "no filter" reads as absent.
+    onChange({ ...value, [filterKey]: next.length > 0 ? next : undefined })
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={<Button variant="outline" size="sm" className={cn("h-8 gap-1", className)} />}
+        aria-label={`${placeholder ?? label}${selected.length > 0 ? t.selected(selected.length) : ""}`}
+        data-slot="filter-bar-multi-select"
+      >
+        {placeholder ?? label}
+        {selected.length > 0 && (
+          <Badge variant="secondary" className="ml-1 px-1.5 py-0 text-xs">
+            {selected.length}
+          </Badge>
+        )}
+        <ChevronDown className="size-3.5 opacity-50" aria-hidden="true" />
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-56 p-2">
+        <div className="flex flex-col gap-1" role="group" aria-label={label}>
+          {options.map((option) => (
+            <label
+              key={option.value}
+              className="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+            >
+              <Checkbox
+                checked={selected.includes(option.value)}
+                disabled={option.disabled}
+                onCheckedChange={() => handleToggle(option.value)}
+              />
+              {option.label}
+            </label>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+FilterBarMultiSelect.displayName = "FilterBarMultiSelect"
+
+/* ---------------------------------------------------------- active chips */
+
+export interface FilterBarActiveChipsProps {
+  /** Filter configs used to resolve option labels. Without them, raw values show. */
+  filters?: FilterConfig[]
+  className?: string
+}
+
+interface ActiveChip {
+  key: string
+  filterLabel: string
+  optionLabel: string
+  optionValue?: string
+  isMulti: boolean
+}
+
+export function FilterBarActiveChips({ filters, className }: FilterBarActiveChipsProps) {
+  const { value, onChange } = useFilterBar()
+  const t = useText()
+
+  const getActiveChips = (): ActiveChip[] => {
+    const chips: ActiveChip[] = []
+
+    const pushRaw = (key: string, v: string | string[]) => {
+      if (typeof v === "string") {
+        chips.push({ key, filterLabel: key, optionLabel: v, isMulti: false })
+      } else {
+        for (const val of v) {
+          chips.push({ key, filterLabel: key, optionLabel: val, optionValue: val, isMulti: true })
+        }
+      }
+    }
+
+    for (const [key, v] of Object.entries(value)) {
+      if (v === undefined || v === "") continue
+
+      const filter = filters?.find((f) => f.key === key)
+      if (!filter) {
+        pushRaw(key, v)
+        continue
+      }
+
+      if (filter.type === "select" && typeof v === "string") {
+        const option = filter.options?.find((o) => o.value === v)
+        chips.push({
+          key,
+          filterLabel: filter.label,
+          optionLabel: option?.label ?? v,
+          isMulti: false,
+        })
+      } else if (filter.type === "multi-select" && Array.isArray(v)) {
+        for (const val of v) {
+          const option = filter.options?.find((o) => o.value === val)
+          chips.push({
+            key,
+            filterLabel: filter.label,
+            optionLabel: option?.label ?? val,
+            optionValue: val,
+            isMulti: true,
+          })
+        }
+      }
+    }
+
+    return chips
+  }
+
+  const handleRemoveFilter = (key: string, optionValue?: string) => {
+    if (optionValue !== undefined) {
+      const current = (value[key] as string[] | undefined) ?? []
+      const next = current.filter((v) => v !== optionValue)
+      onChange({ ...value, [key]: next.length > 0 ? next : undefined })
+    } else {
+      onChange({ ...value, [key]: undefined })
+    }
+  }
+
+  const activeChips = getActiveChips()
+
+  if (activeChips.length === 0) return null
+
+  return (
+    <>
+      {activeChips.map((chip) => (
+        <Badge
+          key={`${chip.key}-${chip.optionValue ?? "single"}`}
+          variant="secondary"
+          className={cn("gap-1 pr-1", className)}
+          data-slot="filter-bar-chip"
+        >
+          <span className="text-xs text-muted-foreground">{chip.filterLabel}:</span>
+          {chip.optionLabel}
+          <button
+            type="button"
+            className="ml-0.5 rounded-full p-0.5 hover:bg-muted-foreground/20"
+            onClick={() => handleRemoveFilter(chip.key, chip.optionValue)}
+            aria-label={t.remove(chip.filterLabel, chip.optionLabel)}
+          >
+            <X className="size-3" aria-hidden="true" />
+          </button>
+        </Badge>
+      ))}
+    </>
+  )
+}
+FilterBarActiveChips.displayName = "FilterBarActiveChips"
+
+/* ----------------------------------------------------------- clear button */
+
+export interface FilterBarClearButtonProps {
+  /** Override the button label. Defaults to "Clear" (ja: "クリア"). */
+  label?: string
+  className?: string
+}
+
+export function FilterBarClearButton({ label, className }: FilterBarClearButtonProps) {
+  const { value, onClear } = useFilterBar()
+  const t = useText()
+  const hasActiveFilters = Object.values(value).some((v) =>
+    Array.isArray(v) ? v.length > 0 : v !== undefined && v !== "",
+  )
+  if (!hasActiveFilters || !onClear) return null
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className={cn("h-7 px-2 text-xs", className)}
+      onClick={onClear}
+      aria-label={t.clearAll}
+      data-slot="filter-bar-clear-button"
+    >
+      {label ?? t.clear}
+    </Button>
+  )
+}
+FilterBarClearButton.displayName = "FilterBarClearButton"
+
+/* ------------------------------------------------------------------ preset */
+
+export interface FilterBarPresetProps {
+  filters: FilterConfig[]
+  value: FilterValues
+  onChange: (values: FilterValues) => void
+  onClear?: () => void
+  className?: string
+}
+
+/** Not given yet (a draft fills props in steps): render empty, keep the same value between renders. */
+const NO_FILTERS: never[] = []
+const NO_FILTER_VALUES: FilterValues = {}
+
+/** The whole row built from a `FilterConfig[]`. */
+export function FilterBarPreset({
+  filters = NO_FILTERS,
+  value = NO_FILTER_VALUES,
+  onChange,
+  onClear,
+  className,
+}: FilterBarPresetProps) {
+  return (
+    <FilterBar value={value} onChange={onChange} onClear={onClear} className={className}>
+      {filters.map((filter) => {
+        if (filter.type === "select") {
+          return (
+            <FilterBarSelect
+              key={filter.key}
+              filterKey={filter.key}
+              label={filter.label}
+              placeholder={filter.placeholder}
+              allLabel={filter.allLabel}
+              options={filter.options ?? []}
+            />
+          )
+        }
+        if (filter.type === "multi-select") {
+          return (
+            <FilterBarMultiSelect
+              key={filter.key}
+              filterKey={filter.key}
+              label={filter.label}
+              placeholder={filter.placeholder}
+              options={filter.options ?? []}
+            />
+          )
+        }
+        return null
+      })}
+      <FilterBarActiveChips filters={filters} />
+      {onClear && <FilterBarClearButton />}
+    </FilterBar>
+  )
+}
+FilterBarPreset.displayName = "FilterBarPreset"