@wealthx/shadcn 1.0.2 → 1.2.0

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

@@ -0,0 +1,325 @@
+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,
+  FALLBACK_PRIMARY,
+  formatTooltipDate,
+  formatMonthLabel,
+  formatCount,
+  hexToRgba,
+  ChartLegendItem,
+  ChartPeriodButton,
+} from "./chart-shared";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ContactHistoryDataPoint {
+  /** ISO date string e.g. "2024-01-01" */
+  date: string;
+  calls: number;
+  emails: number;
+  meetings: number;
+  notes?: number;
+}
+
+export type ContactHistoryPeriod = 3 | 6 | 12;
+
+export interface BackofficeContactHistoryChartProps {
+  chartData?: ContactHistoryDataPoint[] | 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?: ContactHistoryPeriod;
+  /** 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 CONTACT_PERIODS: ContactHistoryPeriod[] = [3, 6, 12];
+const SLICE_COUNT: Record<ContactHistoryPeriod, number> = {
+  3: 3,
+  6: 6,
+  12: 12,
+};
+
+// ---------------------------------------------------------------------------
+// Legend
+// ---------------------------------------------------------------------------
+
+function ChartLegend({
+  callColor,
+  emailColor,
+  meetingColor,
+  noteColor,
+  showNotes,
+}: {
+  callColor: string;
+  emailColor: string;
+  meetingColor: string;
+  noteColor: string;
+  showNotes: boolean;
+}) {
+  return (
+    <div className="flex flex-wrap gap-x-3 gap-y-1.5 pb-2">
+      <ChartLegendItem label="Calls" color={callColor} />
+      <ChartLegendItem label="Emails" color={emailColor} />
+      <ChartLegendItem label="Meetings" color={meetingColor} />
+      {showNotes && <ChartLegendItem label="Notes" color={noteColor} />}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function BackofficeContactHistoryChart({
+  chartData,
+  title = "Contact History",
+  showLegend = true,
+  legendPosition = "top",
+  showXAxis = true,
+  showYAxis = false,
+  defaultPeriod = 6,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false,
+}: BackofficeContactHistoryChartProps) {
+  const [period, setPeriod] = useState<ContactHistoryPeriod>(defaultPeriod);
+
+  const themeVars = useThemeVars();
+  const brandPrimary: string =
+    (themeVars["--theme-primary"] as string | undefined) || FALLBACK_PRIMARY;
+  const fontFamily: string =
+    (themeVars["--font-sans"] as string | undefined) || "Figtree, sans-serif";
+
+  // Derive 4 shades from the brand primary
+  const callColor = brandPrimary;
+  const emailColor = hexToRgba(brandPrimary, 0.65);
+  const meetingColor = hexToRgba(brandPrimary, 0.4);
+  const noteColor = hexToRgba(brandPrimary, 0.22);
+
+  const sliced = useMemo<ContactHistoryDataPoint[] | null>(() => {
+    if (!chartData?.length) return null;
+    const count = Math.min(SLICE_COUNT[period], chartData.length);
+    return chartData.slice(chartData.length - count);
+  }, [chartData, period]);
+
+  const showNotes = useMemo(
+    () => !!sliced?.some((p) => (p.notes ?? 0) > 0),
+    [sliced],
+  );
+
+  const labels = useMemo(
+    () => sliced?.map((p) => formatMonthLabel(p.date)) ?? [],
+    [sliced],
+  );
+
+  const data = useMemo<ChartData<"bar">>(() => {
+    if (!sliced) return { labels: [], datasets: [] };
+    return {
+      labels,
+      datasets: [
+        {
+          label: "Calls",
+          data: sliced.map((p) => p.calls),
+          backgroundColor: callColor,
+          borderWidth: 0,
+          stack: "contacts",
+        },
+        {
+          label: "Emails",
+          data: sliced.map((p) => p.emails),
+          backgroundColor: emailColor,
+          borderWidth: 0,
+          stack: "contacts",
+        },
+        {
+          label: "Meetings",
+          data: sliced.map((p) => p.meetings),
+          backgroundColor: meetingColor,
+          borderWidth: 0,
+          stack: "contacts",
+        },
+        ...(showNotes
+          ? [
+              {
+                label: "Notes",
+                data: sliced.map((p) => p.notes ?? 0),
+                backgroundColor: noteColor,
+                borderWidth: 0,
+                stack: "contacts",
+              },
+            ]
+          : []),
+      ],
+    };
+  }, [
+    sliced,
+    labels,
+    callColor,
+    emailColor,
+    meetingColor,
+    noteColor,
+    showNotes,
+  ]);
+
+  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">
+            {CONTACT_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
+                callColor={callColor}
+                emailColor={emailColor}
+                meetingColor={meetingColor}
+                noteColor={noteColor}
+                showNotes={showNotes}
+              />
+            )}
+            <div style={{ height, width: "100%", position: "relative" }}>
+              <Chart
+                key={brandPrimary}
+                type="bar"
+                data={data}
+                options={options}
+                aria-label={title}
+              />
+            </div>
+            {showLegend && legendPosition === "bottom" && (
+              <ChartLegend
+                callColor={callColor}
+                emailColor={emailColor}
+                meetingColor={meetingColor}
+                noteColor={noteColor}
+                showNotes={showNotes}
+              />
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/badge.tsx

@@ -1,26 +1,28 @@
-import { type ReactElement } from "react"
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-import { Slot } from "@/lib/slot"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { Slot } from "@/lib/slot";
 
 /**
  * Badge — shadcn/WealthX
  * Base: npx shadcn\@latest add badge (latest)
  * Figma: Design-System---shadcn?node-id=665-2024
  *
- * WealthX: added font-sans. All 6 shadcn variants preserved.
+ * WealthX: added font-sans. Extended with success/warning/info semantic variants.
  */
 const badgeVariants = cva(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium font-sans whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2.5 py-0.5 text-xs font-medium font-sans whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "bg-muted text-muted-foreground [a&]:hover:bg-muted/80",
+        secondary: "bg-muted text-muted-foreground [a&]:hover:bg-muted/80",
         destructive:
           "bg-destructive text-destructive-foreground focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        success: "bg-success text-success-foreground [a&]:hover:bg-success/90",
+        warning: "bg-warning text-warning-foreground [a&]:hover:bg-warning/90",
+        info: "bg-info text-info-foreground [a&]:hover:bg-info/90",
         outline:
           "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
@@ -30,11 +32,11 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 export type BadgeProps = React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }
+  VariantProps<typeof badgeVariants> & { asChild?: boolean };
 
 function Badge({
   className,
@@ -42,7 +44,7 @@ function Badge({
   asChild = false,
   ...props
 }: BadgeProps): ReactElement {
-  const Comp = asChild ? Slot : "span"
+  const Comp = asChild ? Slot : "span";
 
   return (
     <Comp
@@ -51,7 +53,7 @@ function Badge({
       data-variant={variant}
       {...props}
     />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };