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

package/registry/ui/dashboard-card.tsx

@@ -0,0 +1,217 @@
+// Copied by `vantage add ui dashboard-card`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/dashboard-card.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * DashboardCard — the tighter card used for dashboard tiles: smaller padding
+ * than the plain `Card`, a title/description/action header, and a matching
+ * skeleton for the loading state. `DashboardCardPreset` wires the common
+ * arrangement in one prop-driven component.
+ *
+ * - **Rows line up by subgrid.** `subgrid={3}` (header, content, footer) or `{2}` makes the
+ *   tile span that many rows of its parent grid (`row-span-N` + `grid-template-rows: subgrid`),
+ *   so tiles placed directly in one grid share the top edge of each part. Parts that are not
+ *   given are not drawn (no empty header or footer, no fixed `h-*` / `min-h-*`); the preset puts
+ *   each part on its own row. Without `subgrid` it is a plain block.
+ * - **`size="sm"`** is a step tighter (padding), for two tiles side by side in a narrow place.
+ *
+ * Use it for tiles that hold a chart, ranking or table. For a single KPI use
+ * `KpiCard` — it is already a card, and computes the delta, labels and target
+ * lines from the values.
+ */
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react"
+
+import { cn } from "@squadbase/vantage/ui"
+import { Skeleton } from "@squadbase/vantage/ui"
+import { SampleBadge, SampleClaim, useSampleMark } from "@squadbase/vantage/components"
+
+export interface DashboardCardProps extends HTMLAttributes<HTMLDivElement> {
+  /** 親の grid の何行にまたがって subgrid で揃えるか（ヘッダー・本文・フッターなら 3、ヘッダー・本文なら 2）。未指定なら通常のブロック。 */
+  subgrid?: 2 | 3
+  /** `"sm"` は一段小さい余白。Sheet の中などで 2 枚を横に並べるとき。既定 `"default"`。 */
+  size?: "default" | "sm"
+}
+
+const SUBGRID_CLASS = {
+  2: "row-span-2 grid content-start grid-rows-subgrid",
+  3: "row-span-3 grid content-start grid-rows-subgrid",
+} as const
+
+export const DashboardCard = forwardRef<HTMLDivElement, DashboardCardProps>(
+  ({ className, subgrid, size = "default", ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="dashboard-card"
+      data-size={size}
+      className={cn(
+        "group rounded-xl border bg-card shadow-[var(--shadow-card)] px-1 py-1 text-card-foreground",
+        subgrid && SUBGRID_CLASS[subgrid],
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+DashboardCard.displayName = "DashboardCard"
+
+export interface DashboardCardHeaderProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const DashboardCardHeader = forwardRef<HTMLDivElement, DashboardCardHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="dashboard-card-header"
+      className={cn("flex flex-row items-start justify-between gap-4 px-3 py-3 group-data-[size=sm]:px-2 group-data-[size=sm]:py-2", className)}
+      {...props}
+    />
+  ),
+)
+DashboardCardHeader.displayName = "DashboardCardHeader"
+
+export interface DashboardCardTitleProps extends HTMLAttributes<HTMLHeadingElement> {}
+
+export const DashboardCardTitle = forwardRef<HTMLHeadingElement, DashboardCardTitleProps>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      data-slot="dashboard-card-title"
+      className={cn("text-sm leading-none font-semibold tracking-tight", className)}
+      {...props}
+    />
+  ),
+)
+DashboardCardTitle.displayName = "DashboardCardTitle"
+
+export interface DashboardCardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {}
+
+export const DashboardCardDescription = forwardRef<
+  HTMLParagraphElement,
+  DashboardCardDescriptionProps
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    data-slot="dashboard-card-description"
+    className={cn("text-xs text-muted-foreground", className)}
+    {...props}
+  />
+))
+DashboardCardDescription.displayName = "DashboardCardDescription"
+
+export interface DashboardCardActionProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const DashboardCardAction = forwardRef<HTMLDivElement, DashboardCardActionProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="dashboard-card-action"
+      className={cn("ml-auto shrink-0", className)}
+      {...props}
+    />
+  ),
+)
+DashboardCardAction.displayName = "DashboardCardAction"
+
+export interface DashboardCardContentProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const DashboardCardContent = forwardRef<HTMLDivElement, DashboardCardContentProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} data-slot="dashboard-card-content" className={cn("p-3 group-data-[size=sm]:p-2", className)} {...props} />
+  ),
+)
+DashboardCardContent.displayName = "DashboardCardContent"
+
+export interface DashboardCardFooterProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const DashboardCardFooter = forwardRef<HTMLDivElement, DashboardCardFooterProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="dashboard-card-footer"
+      className={cn("flex items-center px-3 py-1.5 group-data-[size=sm]:px-2", className)}
+      {...props}
+    />
+  ),
+)
+DashboardCardFooter.displayName = "DashboardCardFooter"
+
+export interface DashboardCardSkeletonProps {
+  className?: string
+}
+
+export function DashboardCardSkeleton({ className }: DashboardCardSkeletonProps) {
+  return (
+    <div
+      data-slot="dashboard-card-skeleton"
+      className={cn("rounded-xl border bg-card p-6 shadow-[var(--shadow-card)]", className)}
+    >
+      <div className="flex items-start justify-between gap-4 pb-4">
+        <Skeleton className="h-5 w-32" />
+        <Skeleton className="h-8 w-8 rounded-md" />
+      </div>
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="mt-2 h-4 w-3/4" />
+    </div>
+  )
+}
+
+export interface DashboardCardPresetProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "title">,
+    Pick<DashboardCardProps, "subgrid" | "size"> {
+  title?: ReactNode
+  description?: ReactNode
+  actions?: ReactNode
+  footer?: ReactNode
+  headerClassName?: string
+  contentClassName?: string
+  footerClassName?: string
+}
+
+export function DashboardCardPreset({
+  title,
+  description,
+  actions,
+  footer,
+  children,
+  headerClassName,
+  contentClassName,
+  footerClassName,
+  className,
+  subgrid,
+  ...props
+}: DashboardCardPresetProps) {
+  // Inside SampleData the card shows the mark in its header, and the parts inside it do not repeat it.
+  const sample = useSampleMark()
+  const hasHeader = title || description || actions || sample
+  return (
+    <DashboardCard className={className} subgrid={subgrid} {...props}>
+      <SampleClaim>
+        {hasHeader && (
+          <DashboardCardHeader className={cn(subgrid && "row-start-1", headerClassName)}>
+            {(title || description) && (
+              <div>
+                {title && <DashboardCardTitle>{title}</DashboardCardTitle>}
+                {description && <DashboardCardDescription>{description}</DashboardCardDescription>}
+              </div>
+            )}
+            {(actions || sample) && (
+              <DashboardCardAction className={cn(sample && actions && "flex items-center gap-2")}>
+                {sample && <SampleBadge label={sample.label} />}
+                {actions}
+              </DashboardCardAction>
+            )}
+          </DashboardCardHeader>
+        )}
+        {children && (
+          <DashboardCardContent className={cn(subgrid && "row-start-2", contentClassName)}>
+            {children}
+          </DashboardCardContent>
+        )}
+        {footer && (
+          <DashboardCardFooter className={cn(subgrid === 3 && "row-start-3", footerClassName)}>
+            {footer}
+          </DashboardCardFooter>
+        )}
+      </SampleClaim>
+    </DashboardCard>
+  )
+}