@squadbase/vantage 0.6.1-dev2.5f947f1 → 0.6.2-dev1.31accb1

package/registry/ui/data-table.tsx

@@ -1,4 +1,5 @@
 // Copied by `vantage add ui data-table`. This file is yours to edit.
+// Generated from @squadbase/vantage src/components/data-table.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
 /**
  * DataTable — a compound table over TanStack Table. `<DataTable>` owns the
  * table instance and publishes it on context; the toolbar, body, pagination and
@@ -39,28 +40,18 @@ import {
 } from "@tanstack/react-table"
 import { ArrowDown, ArrowUp, ArrowUpDown, Columns3, Search } from "lucide-react"
 
+import { cn } from "@squadbase/vantage/ui"
+import { Button } from "@squadbase/vantage/ui"
+import { Checkbox } from "@squadbase/vantage/ui"
 import {
-  Button,
-  Checkbox,
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  cn,
 } from "@squadbase/vantage/ui"
-
+import { Input } from "@squadbase/vantage/ui"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@squadbase/vantage/ui"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@squadbase/vantage/ui"
 
 /* ------------------------------------------------------------------- types */
 
@@ -152,40 +143,17 @@ export interface DataTableColumnVisibilityProps {
   className?: string
 }
 
-export interface DataTablePresetProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[]
-  data: TData[]
-
-  enableSorting?: boolean
-  sorting?: SortingState
-  onSortingChange?: OnChangeFn<SortingState>
-
-  enableFiltering?: boolean
-  columnFilters?: ColumnFiltersState
-  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>
-  globalFilter?: string
-  onGlobalFilterChange?: OnChangeFn<string>
-
-  enablePagination?: boolean
-  pagination?: PaginationState
-  onPaginationChange?: OnChangeFn<PaginationState>
-  pageCount?: number
-
-  enableRowSelection?: boolean
-  rowSelection?: RowSelectionState
-  onRowSelectionChange?: OnChangeFn<RowSelectionState>
-
+/** The preset takes every `DataTable` prop except `children`, plus a few slots. */
+export type DataTablePresetProps<TData, TValue> = Omit<
+  DataTableProps<TData, TValue>,
+  "children"
+> & {
   enableColumnVisibility?: boolean
-  columnVisibility?: VisibilityState
-  onColumnVisibilityChange?: OnChangeFn<VisibilityState>
   columnLabels?: Record<string, string>
 
   /** Extension slots */
   toolbar?: ReactNode
   bulkActions?: (selectedRows: TData[]) => ReactNode
-
-  meta?: TableMeta<TData>
-  className?: string
 }
 
 /* ------------------------------------------------------------------ helper */
@@ -532,7 +500,6 @@ export const DataTablePagination = forwardRef<HTMLDivElement, DataTablePaginatio
             {totalRows}件中 {rangeStart} - {rangeEnd} を表示
           </span>
           <Select
-            items={Object.fromEntries(pageSizeOptions.map((size) => [String(size), `${size}件`]))}
             value={String(currentPageSize)}
             onValueChange={(value) => table.setPageSize(Number(value))}
           >
@@ -635,31 +602,11 @@ DataTableColumnVisibility.displayName = "DataTableColumnVisibility"
 
 /** The usual arrangement — toolbar, body and pagination — in one component. */
 export function DataTablePreset<TData, TValue>({
-  columns,
-  data,
-  enableSorting,
-  sorting,
-  onSortingChange,
-  enableFiltering,
-  columnFilters,
-  onColumnFiltersChange,
-  globalFilter,
-  onGlobalFilterChange,
-  enablePagination,
-  pagination,
-  onPaginationChange,
-  pageCount,
-  enableRowSelection,
-  rowSelection,
-  onRowSelectionChange,
   enableColumnVisibility = false,
-  columnVisibility,
-  onColumnVisibilityChange,
   columnLabels,
   toolbar,
   bulkActions,
-  meta,
-  className,
+  ...tableProps
 }: DataTablePresetProps<TData, TValue>) {
   const toolbarSlot =
     toolbar || enableColumnVisibility ? (
@@ -670,36 +617,14 @@ export function DataTablePreset<TData, TValue>({
     ) : undefined
 
   return (
-    <DataTable<TData, TValue>
-      columns={columns}
-      data={data}
-      enableSorting={enableSorting}
-      sorting={sorting}
-      onSortingChange={onSortingChange}
-      enableFiltering={enableFiltering}
-      columnFilters={columnFilters}
-      onColumnFiltersChange={onColumnFiltersChange}
-      globalFilter={globalFilter}
-      onGlobalFilterChange={onGlobalFilterChange}
-      enablePagination={enablePagination}
-      pagination={pagination}
-      onPaginationChange={onPaginationChange}
-      pageCount={pageCount}
-      enableRowSelection={enableRowSelection}
-      rowSelection={rowSelection}
-      onRowSelectionChange={onRowSelectionChange}
-      columnVisibility={columnVisibility}
-      onColumnVisibilityChange={onColumnVisibilityChange}
-      meta={meta}
-      className={className}
-    >
+    <DataTable<TData, TValue> {...tableProps}>
       <DataTableToolbar
-        showSearch={enableFiltering}
+        showSearch={tableProps.enableFiltering}
         toolbar={toolbarSlot}
         bulkActions={bulkActions as ((selectedRows: unknown[]) => ReactNode) | undefined}
       />
       <DataTableContent />
-      {enablePagination && <DataTablePagination />}
+      {tableProps.enablePagination && <DataTablePagination />}
     </DataTable>
   )
 }

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

@@ -0,0 +1,209 @@
+// Copied by `vantage add ui date-range-picker`. This file is yours to edit.
+// Generated from @squadbase/vantage src/components/date-range-picker.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+/**
+ * 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, useState } from "react"
+import { CalendarIcon } from "lucide-react"
+import { endOfDay, endOfMonth, format, startOfDay, startOfMonth, subDays, subMonths } 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"
+
+export const defaultPresets: PresetItem[] = [
+  {
+    label: "Today",
+    getValue: () => {
+      const today = new Date()
+      return { from: startOfDay(today), to: endOfDay(today) }
+    },
+  },
+  {
+    label: "Yesterday",
+    getValue: () => {
+      const yesterday = subDays(new Date(), 1)
+      return { from: startOfDay(yesterday), to: endOfDay(yesterday) }
+    },
+  },
+  {
+    label: "Last 7 days",
+    getValue: () => {
+      const today = new Date()
+      return { from: startOfDay(subDays(today, 6)), to: endOfDay(today) }
+    },
+  },
+  {
+    label: "Last 14 days",
+    getValue: () => {
+      const today = new Date()
+      return { from: startOfDay(subDays(today, 13)), to: endOfDay(today) }
+    },
+  },
+  {
+    label: "Last 30 days",
+    getValue: () => {
+      const today = new Date()
+      return { from: startOfDay(subDays(today, 29)), to: endOfDay(today) }
+    },
+  },
+  {
+    label: "Last 90 days",
+    getValue: () => {
+      const today = new Date()
+      return { from: startOfDay(subDays(today, 89)), to: endOfDay(today) }
+    },
+  },
+  {
+    label: "This month",
+    getValue: () => {
+      const today = new Date()
+      return { from: startOfMonth(today), to: endOfDay(today) }
+    },
+  },
+  {
+    label: "Last month",
+    getValue: () => {
+      const lastMonth = subMonths(new Date(), 1)
+      return { from: startOfMonth(lastMonth), to: endOfMonth(lastMonth) }
+    },
+  },
+]
+
+export interface DateRangePickerProps {
+  /**
+   * 選択中の日付範囲。型は Vantage 独自の `DateRange`。
+   * react-day-picker の `DateRange` とは別物なので注意 — そちらが必要なら
+   * このファイルの末尾で re-export している `RdpDateRange` を使う。
+   *
+   * @example
+   * import type { DateRange } from "@squadbase/vantage/components"
+   *
+   * const [range, setRange] = useState<DateRange | undefined>()
+   * <DateRangePicker value={range} onChange={setRange} />
+   */
+  value?: DateRange
+  onChange?: (range: DateRange) => void
+  presets?: PresetItem[]
+  showPresets?: boolean
+  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 = defaultPresets,
+      showPresets = true,
+      maxDate,
+      minDate,
+      placeholder = "Select date range",
+      disabled = false,
+      className,
+      align = "start",
+    },
+    ref,
+  ) {
+    const [open, setOpen] = useState(false)
+    const isMobile = useIsMobile()
+
+    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", { locale: ja })
+      return `${format(value.from, "yyyy/MM/dd", { locale: ja })} - ${format(value.to, "yyyy/MM/dd", { locale: ja })}`
+    }
+
+    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={formatDateRange()}
+            aria-expanded={open}
+          >
+            <CalendarIcon className="size-4" aria-hidden="true" />
+            <span>{formatDateRange()}</span>
+          </PopoverTrigger>
+          <PopoverContent
+            align={align}
+            className={cn("w-auto p-0", isMobile ? "flex flex-col" : "flex")}
+          >
+            {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"
+                    className="justify-start text-xs"
+                    onClick={() => handlePresetClick(preset)}
+                  >
+                    {preset.label}
+                  </Button>
+                ))}
+              </div>
+            )}
+            <div className="p-3">
+              <Calendar
+                mode="range"
+                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/dialog.tsx

@@ -0,0 +1,159 @@
+// Copied by `vantage add ui dialog`. This file is yours to edit.
+// Generated from @squadbase/vantage src/ui/dialog.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@squadbase/vantage/ui"
+import { Button } from "@squadbase/vantage/ui"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "cn-font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}