@wealthx/shadcn 1.0.2 → 1.1.0

package/src/components/ui/combobox.tsx

@@ -0,0 +1,217 @@
+/**
+ * Combobox — WealthX Design System
+ * Base: @base-ui/react/combobox
+ * WealthX overrides: square corners (rounded-none), design token colors,
+ * consistent styling with Select component, built-in search filtering.
+ */
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox"
+
+import { cn } from "@/lib/utils"
+
+export type ComboboxProps<Value = string, Multiple extends boolean | undefined = false> =
+  React.ComponentProps<typeof ComboboxPrimitive.Root<Value, Multiple>>
+
+function Combobox<Value, Multiple extends boolean | undefined = false>({
+  ...props
+}: React.ComponentProps<typeof ComboboxPrimitive.Root<Value, Multiple>>) {
+  return <ComboboxPrimitive.Root data-slot="combobox" {...props} />
+}
+
+export type ComboboxTriggerProps = React.ComponentProps<typeof ComboboxPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}
+
+function ComboboxTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: ComboboxTriggerProps) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-2 border border-input bg-transparent px-3 py-2 text-body-small whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20 data-[popup-open]:border-primary data-[popup-open]:ring-[3px] data-[popup-open]:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=combobox-value]:line-clamp-1 *:data-[slot=combobox-value]:flex *:data-[slot=combobox-value]:items-center *:data-[slot=combobox-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.Icon className="transition-transform duration-200 data-[popup-open]:rotate-180">
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </ComboboxPrimitive.Icon>
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+export type ComboboxValueProps = React.ComponentProps<typeof ComboboxPrimitive.Value>
+
+function ComboboxValue({
+  ...props
+}: ComboboxValueProps) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+}
+
+export type ComboboxInputProps = React.ComponentProps<typeof ComboboxPrimitive.Input>
+
+function ComboboxInput({
+  className,
+  ...props
+}: ComboboxInputProps) {
+  return (
+    <div data-slot="combobox-input-wrapper" className="flex items-center gap-2 border-b border-border px-3">
+      <SearchIcon className="size-4 shrink-0 text-muted-foreground" />
+      <ComboboxPrimitive.Input
+        data-slot="combobox-input"
+        className={cn(
+          "h-9 w-full min-w-0 bg-transparent py-1 text-body-small outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export type ComboboxContentProps = React.ComponentProps<typeof ComboboxPrimitive.Popup>
+
+function ComboboxContent({
+  className,
+  children,
+  ...props
+}: ComboboxContentProps) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner sideOffset={4} align="start">
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          className={cn(
+            "relative z-50 max-h-[var(--available-height)] min-w-[8rem] overflow-hidden border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </ComboboxPrimitive.Popup>
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+export type ComboboxListProps = React.ComponentProps<typeof ComboboxPrimitive.List>
+
+function ComboboxList({
+  className,
+  ...props
+}: ComboboxListProps) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "max-h-[min(var(--available-height),18rem)] overflow-y-auto p-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export type ComboboxItemProps = React.ComponentProps<typeof ComboboxPrimitive.Item>
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxItemProps) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-body-small outline-hidden select-none data-[highlighted]:bg-primary/5 data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="combobox-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <ComboboxPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ComboboxPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ComboboxPrimitive.Item>
+  )
+}
+
+export type ComboboxEmptyProps = React.ComponentProps<typeof ComboboxPrimitive.Empty>
+
+function ComboboxEmpty({
+  className,
+  ...props
+}: ComboboxEmptyProps) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={`text-body-small ${cn("py-6 text-center text-muted-foreground empty:hidden", className)}`}
+      {...props}
+    />
+  )
+}
+
+export type ComboboxGroupProps = React.ComponentProps<typeof ComboboxPrimitive.Group>
+
+function ComboboxGroup({
+  ...props
+}: ComboboxGroupProps) {
+  return <ComboboxPrimitive.Group data-slot="combobox-group" {...props} />
+}
+
+export type ComboboxGroupLabelProps = React.ComponentProps<typeof ComboboxPrimitive.GroupLabel>
+
+function ComboboxGroupLabel({
+  className,
+  ...props
+}: ComboboxGroupLabelProps) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-group-label"
+      className={`text-label-small ${cn("px-2 py-1.5 uppercase text-muted-foreground", className)}`}
+      {...props}
+    />
+  )
+}
+
+export type ComboboxSeparatorProps = React.ComponentProps<"div">
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxSeparatorProps) {
+  return (
+    <div
+      role="separator"
+      data-slot="combobox-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Combobox,
+  ComboboxTrigger,
+  ComboboxValue,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxSeparator,
+}

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

@@ -0,0 +1,278 @@
+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,
+  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;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const FALLBACK_SECONDARY = "#162029";
+
+// ---------------------------------------------------------------------------
+// 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 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 null;
+            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 }}
+    >
+      <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>
+  );
+}