@wealthx/shadcn 1.0.2 → 1.2.0

package/src/components/ui/expense-bar-chart.tsx

@@ -0,0 +1,296 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+  Legend,
+  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 {
+  hexToRgba,
+  DATASET_ALPHAS,
+  FALLBACK_TICK,
+  FALLBACK_SECONDARY,
+  CHART_SLICE_COUNT,
+  CHART_PERIODS,
+  formatTooltipDate,
+  ChartLegendItem,
+  ChartPeriodButton,
+  type ChartPeriod,
+  type ChartGranularity,
+} from "./chart-shared";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ExpenseDataset {
+  /** Expense category label, e.g. "Housing", "Food", "Transport" */
+  label: string;
+  /** One value per data point, aligned to the months array */
+  data: number[];
+}
+
+export interface ExpenseBarChartData {
+  /** Display labels, e.g. ["Jul", "Aug"] for monthly or ["Mar 8", "Mar 9"] for daily */
+  months: string[];
+  /** Optional ISO date strings per point — used for the tooltip title */
+  dates?: string[];
+  datasets: ExpenseDataset[];
+}
+
+export type ExpensePeriod = ChartPeriod;
+export type ExpenseGranularity = ChartGranularity;
+
+export interface ExpenseBarChartProps {
+  /** Full dataset — sliced to the selected period */
+  expenseData: ExpenseBarChartData | null;
+  title?: string;
+  /** Show or hide the chart legend */
+  showLegend?: boolean;
+  /** Show or hide X axis labels */
+  showXAxis?: boolean;
+  /** Show or hide Y axis labels */
+  showYAxis?: boolean;
+  /** Legend placement relative to chart */
+  legendPosition?: "top" | "bottom";
+  /** Default period selector value */
+  defaultPeriod?: ExpensePeriod;
+  /**
+   * Data granularity — controls available period buttons and slice counts.
+   * "monthly" (default): shows 3M / 6M / 12M, slices by month count.
+   * "daily": shows 1M / 3M / 6M / 12M, slices by day count (1M=30, 3M=90, etc.).
+   */
+  granularity?: ExpenseGranularity;
+  /** Chart canvas height in pixels */
+  height?: number;
+  /** Width of the card in pixels */
+  width?: number | string;
+  className?: string;
+  /** Show skeleton loading state instead of the chart */
+  isLoading?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function ExpenseBarChart({
+  expenseData,
+  title = "Expenses",
+  showLegend = true,
+  showXAxis = true,
+  showYAxis = true,
+  legendPosition = "top",
+  defaultPeriod = 6,
+  granularity = "monthly",
+  height = 280,
+  width = "100%",
+  className,
+  isLoading = false,
+}: ExpenseBarChartProps) {
+  const periods = CHART_PERIODS[granularity];
+  const [period, setPeriod] = useState<ExpensePeriod>(defaultPeriod);
+
+  // Reset period when granularity changes, but not on initial mount
+  // (defaultPeriod handles the initial value).
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    setPeriod(CHART_PERIODS[granularity][0]);
+  }, [granularity]);
+
+  const themeVars = useThemeVars();
+  const brandSecondary: string =
+    (themeVars["--theme-secondary"] as string | undefined) ||
+    FALLBACK_SECONDARY;
+  const fontFamily: string =
+    (themeVars["--font-sans"] as string | undefined) || "Figtree, sans-serif";
+
+  const sliced = useMemo<ExpenseBarChartData | null>(() => {
+    if (!expenseData?.months?.length || !expenseData.datasets.length)
+      return null;
+    const count = Math.min(
+      CHART_SLICE_COUNT[granularity][period],
+      expenseData.months.length,
+    );
+    const start = expenseData.months.length - count;
+    return {
+      months: expenseData.months.slice(start),
+      dates: expenseData.dates?.slice(start),
+      datasets: expenseData.datasets.map((ds) => ({
+        ...ds,
+        data: ds.data.slice(start),
+      })),
+    };
+  }, [expenseData, period, granularity]);
+
+  const datasetColors = useMemo(
+    () =>
+      sliced?.datasets.map((_, i) =>
+        hexToRgba(brandSecondary, DATASET_ALPHAS[i % DATASET_ALPHAS.length]),
+      ) ?? [],
+    [sliced, brandSecondary],
+  );
+
+  const chartData = useMemo<ChartData<"bar">>(() => {
+    if (!sliced) return { labels: [], datasets: [] };
+    return {
+      labels: sliced.months,
+      datasets: sliced.datasets.map((ds, i) => ({
+        label: ds.label,
+        data: ds.data,
+        backgroundColor: datasetColors[i],
+        hoverBackgroundColor: hexToRgba(
+          brandSecondary,
+          Math.min(DATASET_ALPHAS[i % DATASET_ALPHAS.length] + 0.15, 1),
+        ),
+        borderWidth: 0,
+        borderRadius: 0,
+        borderSkipped: false,
+        barPercentage: 0.75,
+        categoryPercentage: 0.7,
+        stack: "expense",
+      })),
+    };
+  }, [sliced, datasetColors, brandSecondary]);
+
+  const options = useMemo<ChartOptions<"bar">>(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 800, 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?.dates?.[idx]) {
+                return formatTooltipDate(sliced.dates[idx], granularity);
+              }
+              return tooltipItems[0]?.label ?? "";
+            },
+            label: (ctx) => {
+              const val = ctx.raw as number;
+              if (val === 0) return;
+              return ` ${ctx.dataset.label}: $${val.toLocaleString()}`;
+            },
+          },
+        },
+      },
+      scales: {
+        x: {
+          display: showXAxis,
+          stacked: true,
+          grid: { display: false },
+          border: { display: false },
+          ticks: { font: { size: 10 }, color: FALLBACK_TICK },
+        },
+        y: {
+          display: showYAxis,
+          stacked: true,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            font: { size: 10 },
+            color: FALLBACK_TICK,
+            maxTicksLimit: 5,
+            padding: 8,
+            callback: (v) => `$${Number(v).toLocaleString()}`,
+          },
+        },
+      },
+    }),
+    [showXAxis, showYAxis, sliced, granularity],
+  );
+
+  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">
+            {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" && (
+              <div className="flex flex-wrap gap-x-3 gap-y-1.5 pb-2">
+                {sliced.datasets.map((ds, i) => (
+                  <ChartLegendItem
+                    key={ds.label}
+                    label={ds.label}
+                    color={datasetColors[i]}
+                  />
+                ))}
+              </div>
+            )}
+            <div style={{ height, width: "100%", position: "relative" }}>
+              <Chart
+                key={brandSecondary}
+                type="bar"
+                data={chartData}
+                options={options}
+                aria-label={title}
+              />
+            </div>
+            {showLegend && legendPosition === "bottom" && (
+              <div className="flex flex-wrap gap-x-3 gap-y-1.5 pt-2">
+                {sliced.datasets.map((ds, i) => (
+                  <ChartLegendItem
+                    key={ds.label}
+                    label={ds.label}
+                    color={datasetColors[i]}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/field.tsx

@@ -1,8 +1,8 @@
-import { type ReactElement, useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-import { Separator } from "@/components/ui/separator"
+import { type ReactElement, useMemo } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
 
 /**
  * Field — shadcn/WealthX
@@ -14,7 +14,7 @@ import { Separator } from "@/components/ui/separator"
  *   - FieldError.uniqueErrors: Array.from() instead of spread on Map iterator (es5 compat)
  */
 
-export type FieldSetProps = React.ComponentProps<"fieldset">
+export type FieldSetProps = React.ComponentProps<"fieldset">;
 
 function FieldSet({ className, ...props }: FieldSetProps): ReactElement {
   return (
@@ -22,15 +22,17 @@ function FieldSet({ className, ...props }: FieldSetProps): ReactElement {
       className={cn(
         "flex flex-col gap-6",
         "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
+        className,
       )}
       data-slot="field-set"
       {...props}
     />
-  )
+  );
 }
 
-export type FieldLegendProps = React.ComponentProps<"legend"> & { variant?: "legend" | "label" }
+export type FieldLegendProps = React.ComponentProps<"legend"> & {
+  variant?: "legend" | "label";
+};
 
 function FieldLegend({
   className,
@@ -40,31 +42,31 @@ function FieldLegend({
   return (
     <legend
       className={cn(
-        "mb-3 font-medium",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
-        className
+        "mb-3",
+        "data-[variant=legend]:text-label-large",
+        "data-[variant=label]:text-label-medium",
+        className,
       )}
       data-slot="field-legend"
       data-variant={variant}
       {...props}
     />
-  )
+  );
 }
 
-export type FieldGroupProps = React.ComponentProps<"div">
+export type FieldGroupProps = React.ComponentProps<"div">;
 
 function FieldGroup({ className, ...props }: FieldGroupProps): ReactElement {
   return (
     <div
       className={cn(
         "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
-        className
+        className,
       )}
       data-slot="field-group"
       {...props}
     />
-  )
+  );
 }
 
 const fieldVariants = cva(
@@ -88,10 +90,11 @@ const fieldVariants = cva(
     defaultVariants: {
       orientation: "vertical",
     },
-  }
-)
+  },
+);
 
-export type FieldProps = React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>
+export type FieldProps = React.ComponentProps<"div"> &
+  VariantProps<typeof fieldVariants>;
 
 function Field({
   className,
@@ -106,79 +109,82 @@ function Field({
       role="group"
       {...props}
     />
-  )
+  );
 }
 
-export type FieldContentProps = React.ComponentProps<"div">
+export type FieldContentProps = React.ComponentProps<"div">;
 
-function FieldContent({ className, ...props }: FieldContentProps): ReactElement {
+function FieldContent({
+  className,
+  ...props
+}: FieldContentProps): ReactElement {
   return (
     <div
       className={cn(
         "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
-        className
+        className,
       )}
       data-slot="field-content"
       {...props}
     />
-  )
+  );
 }
 
-export type FieldLabelProps = React.ComponentProps<typeof Label>
+export type FieldLabelProps = React.ComponentProps<typeof Label>;
 
-function FieldLabel({
-  className,
-  ...props
-}: FieldLabelProps): ReactElement {
+function FieldLabel({ className, ...props }: FieldLabelProps): ReactElement {
   return (
     <Label
       className={cn(
         "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
         "has-data-checked:border-primary has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10",
-        className
+        className,
       )}
       data-slot="field-label"
       {...props}
     />
-  )
+  );
 }
 
-export type FieldTitleProps = React.ComponentProps<"div">
+export type FieldTitleProps = React.ComponentProps<"div">;
 
 function FieldTitle({ className, ...props }: FieldTitleProps): ReactElement {
   return (
     <div
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
-        className
+        "flex w-fit items-center gap-2 text-label-medium leading-snug group-data-[disabled=true]/field:opacity-50",
+        className,
       )}
       data-slot="field-label"
       {...props}
     />
-  )
+  );
 }
 
-export type FieldDescriptionProps = React.ComponentProps<"p">
+export type FieldDescriptionProps = React.ComponentProps<"p">;
 
-function FieldDescription({ className, ...props }: FieldDescriptionProps): ReactElement {
+function FieldDescription({
+  className,
+  ...props
+}: FieldDescriptionProps): ReactElement {
   return (
     <p
       className={cn(
-        "text-xs leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "text-caption leading-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
         "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
         "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-        className
+        className,
       )}
       data-slot="field-description"
       {...props}
     />
-  )
+  );
 }
 
 export type FieldSeparatorProps = React.ComponentProps<"div"> & {
-  children?: React.ReactNode
-}
+  children?: React.ReactNode;
+};
 
 function FieldSeparator({
   children,
@@ -188,27 +194,29 @@ function FieldSeparator({
   return (
     <div
       className={cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
+        "relative -my-2 h-5 text-body-small group-data-[variant=outline]/field-group:-mb-2",
+        className,
       )}
       data-content={Boolean(children)}
       data-slot="field-separator"
       {...props}
     >
       <Separator className="absolute inset-0 top-1/2" />
-      {children ? <span
+      {children ? (
+        <span
           className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
           data-slot="field-separator-content"
         >
           {children}
-        </span> : null}
+        </span>
+      ) : null}
     </div>
-  )
+  );
 }
 
 export type FieldErrorProps = React.ComponentProps<"div"> & {
-  errors?: ({ message?: string } | undefined)[]
-}
+  errors?: ({ message?: string } | undefined)[];
+};
 
 function FieldError({
   className,
@@ -218,45 +226,45 @@ function FieldError({
 }: FieldErrorProps): ReactElement | null {
   const content = useMemo(() => {
     if (children) {
-      return children
+      return children;
     }
 
     if (!errors?.length) {
-      return null
+      return null;
     }
 
     const uniqueErrors = Array.from(
-      new Map(errors.map((error) => [error?.message, error])).values()
-    )
+      new Map(errors.map((error) => [error?.message, error])).values(),
+    );
 
     if (uniqueErrors.length === 1) {
-      return uniqueErrors[0]?.message
+      return uniqueErrors[0]?.message;
     }
 
     return (
       <ul className="ml-4 flex list-disc flex-col gap-1">
         {uniqueErrors.map(
           (error) =>
-            error?.message && <li key={error.message}>{error.message}</li>
+            error?.message && <li key={error.message}>{error.message}</li>,
         )}
       </ul>
-    )
-  }, [children, errors])
+    );
+  }, [children, errors]);
 
   if (!content) {
-    return null
+    return null;
   }
 
   return (
     <div
-      className={cn("text-xs font-normal text-destructive", className)}
+      className={cn("text-caption text-destructive", className)}
       data-slot="field-error"
       role="alert"
       {...props}
     >
       {content}
     </div>
-  )
+  );
 }
 
 export {
@@ -270,4 +278,4 @@ export {
   FieldSet,
   FieldContent,
   FieldTitle,
-}
+};