@wealthx/shadcn 1.1.0 → 1.2.0

package/src/components/ui/alert.tsx

@@ -1,7 +1,7 @@
-import { type ReactElement } from "react"
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
 
 /**
  * Alert — WealthX Design System
@@ -11,30 +11,30 @@ import { cn } from "@/lib/utils"
  * WealthX overrides: sharp corners (no rounded-lg), added warning/success/info variants
  */
 const alertVariants = cva(
-  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 border px-4 py-3 text-body-small has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
-        default:     "border-border bg-card text-card-foreground",
-        destructive: "border-destructive/40 bg-destructive/10 text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-destructive",
-        warning:     "border-warning/40 bg-warning/10 text-warning *:data-[slot=alert-description]:text-warning/90 [&>svg]:text-warning",
-        success:     "border-success/40 bg-success/10 text-success *:data-[slot=alert-description]:text-success/90 [&>svg]:text-success",
-        info:        "border-info/40 bg-info/10 text-info *:data-[slot=alert-description]:text-info/90 [&>svg]:text-info",
+        default: "border-border bg-card text-card-foreground",
+        destructive:
+          "border-destructive/40 bg-destructive/10 text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-destructive",
+        warning:
+          "border-warning/40 bg-warning/10 text-warning *:data-[slot=alert-description]:text-warning/90 [&>svg]:text-warning",
+        success:
+          "border-success/40 bg-success/10 text-success *:data-[slot=alert-description]:text-success/90 [&>svg]:text-success",
+        info: "border-info/40 bg-info/10 text-info *:data-[slot=alert-description]:text-info/90 [&>svg]:text-info",
       },
     },
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
-export type AlertProps = React.ComponentProps<"div"> & VariantProps<typeof alertVariants>
+export type AlertProps = React.ComponentProps<"div"> &
+  VariantProps<typeof alertVariants>;
 
-function Alert({
-  className,
-  variant,
-  ...props
-}: AlertProps): ReactElement {
+function Alert({ className, variant, ...props }: AlertProps): ReactElement {
   return (
     <div
       className={cn(alertVariants({ variant }), className)}
@@ -42,25 +42,25 @@ function Alert({
       role="alert"
       {...props}
     />
-  )
+  );
 }
 
-export type AlertTitleProps = React.ComponentProps<"div">
+export type AlertTitleProps = React.ComponentProps<"div">;
 
 function AlertTitle({ className, ...props }: AlertTitleProps): ReactElement {
   return (
     <div
       className={cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
+        "col-start-2 line-clamp-1 min-h-4 text-label-medium",
+        className,
       )}
       data-slot="alert-title"
       {...props}
     />
-  )
+  );
 }
 
-export type AlertDescriptionProps = React.ComponentProps<"div">
+export type AlertDescriptionProps = React.ComponentProps<"div">;
 
 function AlertDescription({
   className,
@@ -69,13 +69,13 @@ function AlertDescription({
   return (
     <div
       className={cn(
-        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
-        className
+        "col-start-2 grid justify-items-start gap-1 text-body-small text-muted-foreground [&_p]:leading-relaxed",
+        className,
       )}
       data-slot="alert-description"
       {...props}
     />
-  )
+  );
 }
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };

package/src/components/ui/avatar.tsx

@@ -1,7 +1,7 @@
-import { type ReactElement } from "react"
-import * as React from "react"
-import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
-import { cn } from "@/lib/utils"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import { cn } from "@/lib/utils";
 
 /**
  * Avatar — shadcn/WealthX
@@ -15,8 +15,8 @@ import { cn } from "@/lib/utils"
  */
 
 export type AvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root> & {
-  size?: "default" | "sm" | "lg"
-}
+  size?: "default" | "sm" | "lg";
+};
 
 function Avatar({
   className,
@@ -27,31 +27,32 @@ function Avatar({
     <AvatarPrimitive.Root
       className={cn(
         "group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
-        className
+        className,
       )}
       data-size={size}
       data-slot="avatar"
       {...props}
     />
-  )
+  );
 }
 
-export type AvatarImageProps = React.ComponentProps<typeof AvatarPrimitive.Image>
+export type AvatarImageProps = React.ComponentProps<
+  typeof AvatarPrimitive.Image
+>;
 
-function AvatarImage({
-  className,
-  ...props
-}: AvatarImageProps): ReactElement {
+function AvatarImage({ className, ...props }: AvatarImageProps): ReactElement {
   return (
     <AvatarPrimitive.Image
       className={cn("aspect-square size-full rounded-full", className)}
       data-slot="avatar-image"
       {...props}
     />
-  )
+  );
 }
 
-export type AvatarFallbackProps = React.ComponentProps<typeof AvatarPrimitive.Fallback>
+export type AvatarFallbackProps = React.ComponentProps<
+  typeof AvatarPrimitive.Fallback
+>;
 
 function AvatarFallback({
   className,
@@ -60,16 +61,16 @@ function AvatarFallback({
   return (
     <AvatarPrimitive.Fallback
       className={cn(
-        "flex size-full items-center justify-center rounded-full overflow-hidden bg-muted text-sm font-sans text-muted-foreground group-data-[size=sm]/avatar:text-xs",
-        className
+        "flex size-full items-center justify-center rounded-full overflow-hidden bg-muted text-body-small font-sans text-muted-foreground group-data-[size=sm]/avatar:text-caption",
+        className,
       )}
       data-slot="avatar-fallback"
       {...props}
     />
-  )
+  );
 }
 
-export type AvatarBadgeProps = React.ComponentProps<"span">
+export type AvatarBadgeProps = React.ComponentProps<"span">;
 
 function AvatarBadge({ className, ...props }: AvatarBadgeProps): ReactElement {
   return (
@@ -79,30 +80,30 @@ function AvatarBadge({ className, ...props }: AvatarBadgeProps): ReactElement {
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
-        className
+        className,
       )}
       data-slot="avatar-badge"
       {...props}
     />
-  )
+  );
 }
 
-export type AvatarGroupProps = React.ComponentProps<"div">
+export type AvatarGroupProps = React.ComponentProps<"div">;
 
 function AvatarGroup({ className, ...props }: AvatarGroupProps): ReactElement {
   return (
     <div
       className={cn(
         "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
-        className
+        className,
       )}
       data-slot="avatar-group"
       {...props}
     />
-  )
+  );
 }
 
-export type AvatarGroupCountProps = React.ComponentProps<"div">
+export type AvatarGroupCountProps = React.ComponentProps<"div">;
 
 function AvatarGroupCount({
   className,
@@ -111,13 +112,13 @@ function AvatarGroupCount({
   return (
     <div
       className={cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
-        className
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-body-small text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className,
       )}
       data-slot="avatar-group-count"
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -127,4 +128,4 @@ export {
   AvatarBadge,
   AvatarGroup,
   AvatarGroupCount,
-}
+};

package/src/components/ui/backoffice-alert-history-chart.tsx

@@ -0,0 +1,260 @@
+import React, { useMemo, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+  type ChartOptions,
+  type ChartData,
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { useThemeVars } from "@/lib/theme-provider";
+import { Card, CardContent, CardHeader, CardTitle, CardAction } from "./card";
+import { Empty, EmptyDescription } from "./empty";
+import { Skeleton } from "./skeleton";
+import { cn } from "@/lib/utils";
+import {
+  FALLBACK_TICK,
+  SEVERITY_COLORS,
+  formatTooltipDate,
+  formatMonthLabel,
+  formatCount,
+  ChartLegendItem,
+  ChartPeriodButton,
+} from "./chart-shared";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface AlertHistoryDataPoint {
+  /** ISO date string e.g. "2024-01-01" */
+  date: string;
+  /** Count of high-severity alerts */
+  high: number;
+  /** Count of medium-severity alerts */
+  medium: number;
+  /** Count of low-severity alerts */
+  low: number;
+}
+
+export type AlertHistoryPeriod = 3 | 6 | 12;
+
+export interface BackofficeAlertHistoryChartProps {
+  chartData?: AlertHistoryDataPoint[] | null;
+  title?: string;
+  /** Show or hide the chart legend */
+  showLegend?: boolean;
+  /** Legend placement relative to the chart */
+  legendPosition?: "top" | "bottom";
+  /** Show or hide X axis labels */
+  showXAxis?: boolean;
+  /** Show or hide Y axis labels */
+  showYAxis?: boolean;
+  /** Default period selector value */
+  defaultPeriod?: AlertHistoryPeriod;
+  /** Chart canvas height in pixels */
+  height?: number;
+  /** Card max-width in pixels or CSS string */
+  width?: number | string;
+  className?: string;
+  /** Show skeleton loading state instead of the chart */
+  isLoading?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const ALERT_PERIODS: AlertHistoryPeriod[] = [3, 6, 12];
+const SLICE_COUNT: Record<AlertHistoryPeriod, number> = { 3: 3, 6: 6, 12: 12 };
+
+// ---------------------------------------------------------------------------
+// Legend
+// ---------------------------------------------------------------------------
+
+function ChartLegend() {
+  return (
+    <div className="flex flex-wrap gap-x-3 gap-y-1.5 pb-2">
+      <ChartLegendItem label="High" color={SEVERITY_COLORS.high} />
+      <ChartLegendItem label="Medium" color={SEVERITY_COLORS.medium} />
+      <ChartLegendItem label="Low" color={SEVERITY_COLORS.low} />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function BackofficeAlertHistoryChart({
+  chartData,
+  title = "Alert History",
+  showLegend = true,
+  legendPosition = "top",
+  showXAxis = true,
+  showYAxis = false,
+  defaultPeriod = 6,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false,
+}: BackofficeAlertHistoryChartProps) {
+  const [period, setPeriod] = useState<AlertHistoryPeriod>(defaultPeriod);
+
+  const themeVars = useThemeVars();
+  const fontFamily: string =
+    (themeVars["--font-sans"] as string | undefined) || "Figtree, sans-serif";
+
+  const sliced = useMemo<AlertHistoryDataPoint[] | null>(() => {
+    if (!chartData?.length) return null;
+    const count = Math.min(SLICE_COUNT[period], chartData.length);
+    return chartData.slice(chartData.length - count);
+  }, [chartData, period]);
+
+  const labels = useMemo(
+    () => sliced?.map((p) => formatMonthLabel(p.date)) ?? [],
+    [sliced],
+  );
+
+  const data = useMemo<ChartData<"bar">>(() => {
+    if (!sliced) return { labels: [], datasets: [] };
+    return {
+      labels,
+      datasets: [
+        {
+          label: "High",
+          data: sliced.map((p) => p.high),
+          backgroundColor: SEVERITY_COLORS.high,
+          borderWidth: 0,
+          stack: "alerts",
+        },
+        {
+          label: "Medium",
+          data: sliced.map((p) => p.medium),
+          backgroundColor: SEVERITY_COLORS.medium,
+          borderWidth: 0,
+          stack: "alerts",
+        },
+        {
+          label: "Low",
+          data: sliced.map((p) => p.low),
+          backgroundColor: SEVERITY_COLORS.low,
+          borderWidth: 0,
+          stack: "alerts",
+        },
+      ],
+    };
+  }, [sliced, labels]);
+
+  const options = useMemo<ChartOptions<"bar">>(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 600, easing: "easeOutQuart" },
+      layout: { padding: 0 },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          mode: "index",
+          intersect: false,
+          padding: 12,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 12, weight: 500 },
+          callbacks: {
+            title: (tooltipItems) => {
+              const idx = tooltipItems[0]?.dataIndex;
+              if (idx != null && sliced?.[idx]?.date) {
+                return formatTooltipDate(sliced[idx].date, "monthly");
+              }
+              return tooltipItems[0]?.label ?? "";
+            },
+            label: (ctx) => {
+              const val = ctx.raw as number;
+              if (val === 0) return;
+              return ` ${ctx.dataset.label}: ${formatCount(val)}`;
+            },
+          },
+        },
+      },
+      scales: {
+        x: {
+          stacked: true,
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            maxRotation: 0,
+            minRotation: 0,
+            color: FALLBACK_TICK,
+            font: { size: 10 },
+          },
+        },
+        y: {
+          stacked: true,
+          display: showYAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            padding: 8,
+            maxTicksLimit: 5,
+            color: FALLBACK_TICK,
+            font: { size: 10 },
+            callback: (v) => formatCount(Number(v)),
+          },
+        },
+      },
+    }),
+    [showXAxis, showYAxis, sliced],
+  );
+
+  return (
+    <Card
+      className={cn("w-full py-4 sm:py-6 gap-2", className)}
+      style={{ maxWidth: width, fontFamily }}
+    >
+      <CardHeader className="px-3 sm:px-6">
+        <CardTitle className="text-sm sm:text-base">{title}</CardTitle>
+        <CardAction>
+          <div className="flex gap-0.5 sm:gap-1">
+            {ALERT_PERIODS.map((p) => (
+              <ChartPeriodButton
+                key={p}
+                period={p}
+                active={period === p}
+                onClick={() => setPeriod(p)}
+              />
+            ))}
+          </div>
+        </CardAction>
+      </CardHeader>
+
+      <CardContent className="px-3 sm:px-6">
+        {isLoading ? (
+          <Skeleton style={{ height, width: "100%" }} />
+        ) : !sliced ? (
+          <Empty className="flex-none p-4" style={{ height }}>
+            <EmptyDescription>No data available</EmptyDescription>
+          </Empty>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {showLegend && legendPosition === "top" && <ChartLegend />}
+            <div style={{ height, width: "100%", position: "relative" }}>
+              <Chart
+                type="bar"
+                data={data}
+                options={options}
+                aria-label={title}
+              />
+            </div>
+            {showLegend && legendPosition === "bottom" && <ChartLegend />}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}