@wealthx/shadcn 1.1.0 → 1.2.0

package/src/components/ui/property-mobile-estimate-line-chart.tsx

@@ -0,0 +1,393 @@
+import React, { useMemo, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  LineElement,
+  PointElement,
+  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,
+  FALLBACK_SECONDARY,
+  FALLBACK_BG,
+  FALLBACK_NEUTRAL,
+  formatAbbrev,
+  formatTooltipDate,
+  formatMonthLabel,
+  ChartPeriodButton,
+} from "./chart-shared";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Tooltip,
+);
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type PropertyPeriod = 1 | 3 | 5 | 10;
+
+export interface PropertyEstimateDataPoint {
+  /** ISO date string e.g. "2024-01-01" */
+  date: string;
+  /** Property estimate value in dollars */
+  estimateValue: number;
+  /** Suburb average price in dollars */
+  suburbAverage: number;
+  /**
+   * Outstanding debt in dollars.
+   * Optional — when provided, a third "Debt" line is rendered.
+   * Used in the property estimate + debt combined view (backoffice / property detail).
+   */
+  debt?: number;
+}
+
+export interface PropertyMobileEstimateLineChartProps {
+  chartData?: PropertyEstimateDataPoint[] | 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 year period selector value */
+  defaultPeriod?: PropertyPeriod;
+  /**
+   * Show or hide the 1Y / 3Y / 5Y / 10Y period selector buttons.
+   * Set to false for dashboard/summary contexts where a fixed view is preferred.
+   * Defaults to true (mobile property detail use case).
+   */
+  showPeriodSelector?: boolean;
+  /** 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 PROPERTY_PERIODS: PropertyPeriod[] = [1, 3, 5, 10];
+
+/** Approx monthly data points per year period */
+const PROPERTY_SLICE_COUNT: Record<PropertyPeriod, number> = {
+  1: 12,
+  3: 36,
+  5: 60,
+  10: 120,
+};
+
+// ---------------------------------------------------------------------------
+// Legend
+// ---------------------------------------------------------------------------
+
+interface LegendItemProps {
+  label: string;
+  color: string;
+  lineWidth: number;
+  dashed?: boolean;
+}
+
+function LegendItem({
+  label,
+  color,
+  lineWidth,
+  dashed = false,
+}: LegendItemProps) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <div
+        style={{
+          width: 24,
+          height: lineWidth,
+          flexShrink: 0,
+          ...(dashed
+            ? {
+                backgroundImage: `repeating-linear-gradient(90deg, ${color} 0px, ${color} 5px, transparent 5px, transparent 9px)`,
+              }
+            : { backgroundColor: color }),
+        }}
+      />
+      <span className="text-[11px] text-muted-foreground leading-none">
+        {label}
+      </span>
+    </div>
+  );
+}
+
+function ChartLegend({
+  primaryColor,
+  secondaryColor,
+  showDebt,
+}: {
+  primaryColor: string;
+  secondaryColor: string;
+  showDebt: boolean;
+}) {
+  return (
+    <div className="flex flex-wrap gap-x-3 gap-y-1.5 pb-2">
+      <LegendItem label="Estimate Value" color={primaryColor} lineWidth={2.5} />
+      <LegendItem
+        label="Suburb Average"
+        color={FALLBACK_NEUTRAL}
+        lineWidth={1.5}
+        dashed={showDebt}
+      />
+      {showDebt && (
+        <LegendItem label="Debt" color={secondaryColor} lineWidth={2} />
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function PropertyMobileEstimateLineChart({
+  chartData,
+  title = "Property Estimate",
+  showLegend = true,
+  legendPosition = "top",
+  showXAxis = true,
+  showYAxis = false,
+  defaultPeriod = 1,
+  showPeriodSelector = true,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false,
+}: PropertyMobileEstimateLineChartProps) {
+  const [period, setPeriod] = useState<PropertyPeriod>(defaultPeriod);
+
+  const themeVars = useThemeVars();
+  const brandPrimary: string =
+    (themeVars["--theme-primary"] as string | undefined) || FALLBACK_PRIMARY;
+  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<PropertyEstimateDataPoint[] | null>(() => {
+    if (!chartData?.length) return null;
+    const count = Math.min(PROPERTY_SLICE_COUNT[period], chartData.length);
+    const start = chartData.length - count;
+    return chartData.slice(start);
+  }, [chartData, period]);
+
+  /** True when at least one data point has a debt value */
+  const showDebt = useMemo(
+    () => !!sliced?.some((p) => p.debt != null && p.debt > 0),
+    [sliced],
+  );
+
+  const labels = useMemo(
+    () => sliced?.map((p) => formatMonthLabel(p.date)) ?? [],
+    [sliced],
+  );
+
+  const data = useMemo<ChartData<"line">>(() => {
+    if (!sliced) return { labels: [], datasets: [] };
+    return {
+      labels,
+      datasets: [
+        {
+          label: "Estimate Value",
+          data: sliced.map((p) => p.estimateValue),
+          borderColor: brandPrimary,
+          backgroundColor: "transparent",
+          borderWidth: 2.5,
+          tension: 0.4,
+          pointRadius: 0,
+          pointHoverRadius: 6,
+          pointHoverBackgroundColor: FALLBACK_BG,
+          pointHoverBorderColor: brandPrimary,
+          pointHoverBorderWidth: 3,
+          pointHitRadius: 10,
+          fill: false,
+        },
+        {
+          label: "Suburb Average",
+          data: sliced.map((p) => p.suburbAverage),
+          borderColor: FALLBACK_NEUTRAL,
+          backgroundColor: "transparent",
+          ...(showDebt ? { borderDash: [4, 4] } : {}),
+          borderWidth: 1.5,
+          tension: 0.4,
+          pointRadius: 0,
+          pointHoverRadius: 5,
+          pointHoverBackgroundColor: FALLBACK_BG,
+          pointHoverBorderColor: FALLBACK_NEUTRAL,
+          pointHoverBorderWidth: 2,
+          pointHitRadius: 10,
+          fill: false,
+        },
+        ...(showDebt
+          ? [
+              {
+                label: "Debt",
+                data: sliced.map((p) => p.debt ?? 0),
+                borderColor: brandSecondary,
+                backgroundColor: "transparent",
+                borderWidth: 2,
+                tension: 0.4,
+                pointRadius: 0,
+                pointHoverRadius: 5,
+                pointHoverBackgroundColor: FALLBACK_BG,
+                pointHoverBorderColor: brandSecondary,
+                pointHoverBorderWidth: 2,
+                pointHitRadius: 10,
+                fill: false,
+              },
+            ]
+          : []),
+      ],
+    };
+  }, [sliced, labels, brandPrimary, brandSecondary, showDebt]);
+
+  const options = useMemo<ChartOptions<"line">>(
+    () => ({
+      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?.[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}: ${formatAbbrev(val)}`;
+            },
+          },
+        },
+      },
+      scales: {
+        x: {
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            maxRotation: 0,
+            minRotation: 0,
+            color: FALLBACK_TICK,
+            font: { size: 10 },
+            maxTicksLimit: 12,
+          },
+        },
+        y: {
+          display: showYAxis,
+          position: "left",
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            padding: 8,
+            maxTicksLimit: 5,
+            color: FALLBACK_TICK,
+            font: { size: 10 },
+            callback: (v) => formatAbbrev(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>
+        {showPeriodSelector && (
+          <CardAction>
+            <div className="flex gap-0.5 sm:gap-1">
+              {PROPERTY_PERIODS.map((p) => (
+                <ChartPeriodButton
+                  key={p}
+                  period={p}
+                  active={period === p}
+                  onClick={() => setPeriod(p)}
+                  unit="Y"
+                />
+              ))}
+            </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
+                primaryColor={brandPrimary}
+                secondaryColor={brandSecondary}
+                showDebt={showDebt}
+              />
+            )}
+            <div style={{ height, width: "100%", position: "relative" }}>
+              <Chart
+                key={`${brandPrimary}__${brandSecondary}`}
+                type="line"
+                data={data}
+                options={options}
+                aria-label={title}
+              />
+            </div>
+            {showLegend && legendPosition === "bottom" && (
+              <ChartLegend
+                primaryColor={brandPrimary}
+                secondaryColor={brandSecondary}
+                showDebt={showDebt}
+              />
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/select.tsx

@@ -1,37 +1,37 @@
-import { type ReactElement } from "react"
-import * as React from "react"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-import { Select as SelectPrimitive } from "@base-ui/react/select"
-import { cn } from "@/lib/utils"
-import { useThemeVars } from "@/lib/theme-provider"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { cn } from "@/lib/utils";
+import { useThemeVars } from "@/lib/theme-provider";
 
-export type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>
+export type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>;
 
-function Select({
-  ...props
-}: SelectProps): ReactElement {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
+function Select({ ...props }: SelectProps): ReactElement {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
-export type SelectGroupProps = React.ComponentProps<typeof SelectPrimitive.Group>
+export type SelectGroupProps = React.ComponentProps<
+  typeof SelectPrimitive.Group
+>;
 
-function SelectGroup({
-  ...props
-}: SelectGroupProps): ReactElement {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+function SelectGroup({ ...props }: SelectGroupProps): ReactElement {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
-export type SelectValueProps = React.ComponentProps<typeof SelectPrimitive.Value>
+export type SelectValueProps = React.ComponentProps<
+  typeof SelectPrimitive.Value
+>;
 
-function SelectValue({
-  ...props
-}: SelectValueProps): ReactElement {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+function SelectValue({ ...props }: SelectValueProps): ReactElement {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
-export type SelectTriggerProps = React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
-}
+export type SelectTriggerProps = React.ComponentProps<
+  typeof SelectPrimitive.Trigger
+> & {
+  size?: "sm" | "default";
+};
 
 function SelectTrigger({
   className,
@@ -42,8 +42,8 @@ function SelectTrigger({
   return (
     <SelectPrimitive.Trigger
       className={cn(
-        "flex w-fit items-center justify-between gap-2 border border-input bg-transparent px-3 py-2 text-sm 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=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        className
+        "flex w-fit items-center justify-between gap-2 border border-input bg-transparent px-3 py-2 text-body-medium 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:font-normal data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
       )}
       data-size={size}
       data-slot="select-trigger"
@@ -54,10 +54,12 @@ function SelectTrigger({
         <ChevronDownIcon className="size-4 opacity-50" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
-  )
+  );
 }
 
-export type SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Popup>
+export type SelectContentProps = React.ComponentProps<
+  typeof SelectPrimitive.Popup
+>;
 
 function SelectContent({
   className,
@@ -68,11 +70,16 @@ function SelectContent({
   const themeVars = useThemeVars();
   return (
     <SelectPrimitive.Portal>
-      <SelectPrimitive.Positioner align="start" alignItemWithTrigger={false} sideOffset={4}>
+      <SelectPrimitive.Positioner
+        className="z-[200]"
+        align="start"
+        alignItemWithTrigger={false}
+        sideOffset={4}
+      >
         <SelectPrimitive.Popup
           className={cn(
-            "relative z-50 max-h-[var(--available-height)] min-w-[8rem] overflow-x-hidden overflow-y-auto border bg-popover p-1 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-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-            className
+            "relative max-h-[var(--available-height)] min-w-[var(--anchor-width,8rem)] overflow-x-hidden overflow-y-auto border bg-popover p-1 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-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+            className,
           )}
           data-slot="select-content"
           style={{ ...themeVars, ...style } as React.CSSProperties}
@@ -84,25 +91,27 @@ function SelectContent({
         </SelectPrimitive.Popup>
       </SelectPrimitive.Positioner>
     </SelectPrimitive.Portal>
-  )
+  );
 }
 
-export type SelectLabelProps = React.ComponentProps<typeof SelectPrimitive.GroupLabel>
+export type SelectLabelProps = React.ComponentProps<
+  typeof SelectPrimitive.GroupLabel
+>;
 
-function SelectLabel({
-  className,
-  ...props
-}: SelectLabelProps): ReactElement {
+function SelectLabel({ className, ...props }: SelectLabelProps): ReactElement {
   return (
     <SelectPrimitive.GroupLabel
-      className={cn("px-2 py-1.5 text-xs font-semibold text-muted-foreground", className)}
+      className={cn(
+        "px-2 py-1.5 text-label-small text-muted-foreground",
+        className,
+      )}
       data-slot="select-label"
       {...props}
     />
-  )
+  );
 }
 
-export type SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item>
+export type SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item>;
 
 function SelectItem({
   className,
@@ -112,8 +121,8 @@ function SelectItem({
   return (
     <SelectPrimitive.Item
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
+        "relative flex w-full cursor-default items-center gap-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
       )}
       data-slot="select-item"
       {...props}
@@ -128,10 +137,10 @@ function SelectItem({
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
-  )
+  );
 }
 
-export type SelectSeparatorProps = React.ComponentProps<"div">
+export type SelectSeparatorProps = React.ComponentProps<"div">;
 
 function SelectSeparator({
   className,
@@ -144,10 +153,12 @@ function SelectSeparator({
       role="separator"
       {...props}
     />
-  )
+  );
 }
 
-export type SelectScrollUpButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>
+export type SelectScrollUpButtonProps = React.ComponentProps<
+  typeof SelectPrimitive.ScrollUpArrow
+>;
 
 function SelectScrollUpButton({
   className,
@@ -157,17 +168,19 @@ function SelectScrollUpButton({
     <SelectPrimitive.ScrollUpArrow
       className={cn(
         "flex cursor-default items-center justify-center py-1",
-        className
+        className,
       )}
       data-slot="select-scroll-up-button"
       {...props}
     >
       <ChevronUpIcon className="size-4" />
     </SelectPrimitive.ScrollUpArrow>
-  )
+  );
 }
 
-export type SelectScrollDownButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>
+export type SelectScrollDownButtonProps = React.ComponentProps<
+  typeof SelectPrimitive.ScrollDownArrow
+>;
 
 function SelectScrollDownButton({
   className,
@@ -177,14 +190,14 @@ function SelectScrollDownButton({
     <SelectPrimitive.ScrollDownArrow
       className={cn(
         "flex cursor-default items-center justify-center py-1",
-        className
+        className,
       )}
       data-slot="select-scroll-down-button"
       {...props}
     >
       <ChevronDownIcon className="size-4" />
     </SelectPrimitive.ScrollDownArrow>
-  )
+  );
 }
 
 export {
@@ -198,4 +211,4 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-}
+};