@zentauri-ui/zentauri-components 1.8.1 → 1.8.2

package/src/charts/radar/Radar.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import {
+  Legend,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart as RechartsRadarChart,
+  Tooltip,
+} from "recharts";
+
+import { ChartFrame } from "../shared/chart-frame";
+import { getSeriesFill, resolveColor } from "../shared/colors";
+import type { RadarChartProps } from "../shared/types";
+
+export function RadarChart<
+  TDatum extends Record<string, number | string | null | undefined>,
+>({
+  appearance,
+  className,
+  containerStyle,
+  data,
+  density,
+  emptyState = null,
+  height = 320,
+  series,
+  showGrid = true,
+  showLegend = false,
+  showTooltip = true,
+  tooltipColor = "#0f172a",
+  style,
+  xKey,
+  ...props
+}: RadarChartProps<TDatum>) {
+  const hasData = data.length > 0 && series.length > 0;
+
+  return (
+    <ChartFrame
+      appearance={appearance}
+      className={className}
+      containerStyle={containerStyle}
+      density={density}
+      emptyState={emptyState}
+      hasData={hasData}
+      height={height}
+      style={style}
+      {...props}
+    >
+      <RechartsRadarChart data={data}>
+        {showGrid ? <PolarGrid stroke="currentColor" opacity={0.18} /> : null}
+        <PolarAngleAxis
+          dataKey={String(xKey)}
+          tick={{ fill: "currentColor", fontSize: 12 }}
+        />
+        <PolarRadiusAxis tick={{ fill: "currentColor", fontSize: 11 }} />
+        {showTooltip ? (
+          <Tooltip
+            contentStyle={{ color: tooltipColor }}
+            labelStyle={{ color: tooltipColor }}
+            itemStyle={{ color: tooltipColor }}
+          />
+        ) : null}
+        {showLegend ? <Legend /> : null}
+        {series.map((item, index) => {
+          const color = resolveColor(item.color, index);
+          const fill = getSeriesFill(item, index, 0.24);
+          return (
+            <Radar
+              key={item.dataKey}
+              dataKey={item.dataKey}
+              name={item.name}
+              stroke={item.stroke ?? color.stroke}
+              fill={fill ?? color.fill}
+              fillOpacity={0.72}
+            />
+          );
+        })}
+      </RechartsRadarChart>
+    </ChartFrame>
+  );
+}
+
+RadarChart.displayName = "RadarChart";

package/src/charts/radar/index.ts

@@ -0,0 +1,16 @@
+"use client";
+
+export { RadarChart } from "./Radar";
+export type {
+  ChartColor,
+  ChartDatum,
+  ChartMargin,
+  ChartSeries,
+  ChartSharedStatic,
+  RadarChartProps,
+} from "../shared/types";
+export {
+  chartColorValues,
+  chartPalette,
+  chartVariants,
+} from "../shared/variants";

package/src/charts/scatter/Scatter.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import {
+  Scatter,
+  ScatterChart as RechartsScatterChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import {
+  ChartDecorators,
+  ChartFrame,
+  defaultChartMargin,
+} from "../shared/chart-frame";
+import { resolveColor } from "../shared/colors";
+import type { ScatterChartProps } from "../shared/types";
+
+export function ScatterChart<
+  TDatum extends Record<string, number | string | null | undefined>,
+>({
+  appearance,
+  className,
+  containerStyle,
+  data,
+  density,
+  emptyState = null,
+  height = 320,
+  margin = defaultChartMargin,
+  series,
+  showGrid = true,
+  showLegend = false,
+  showTooltip = true,
+  tooltipColor = "#0f172a",
+  style,
+  syncId,
+  xKey,
+  ...props
+}: ScatterChartProps<TDatum>) {
+  const hasData = data.length > 0 && series.length > 0;
+  const xAxisKey = String(xKey);
+  const isNumericX = typeof data[0]?.[xAxisKey] === "number";
+
+  return (
+    <ChartFrame
+      appearance={appearance}
+      className={className}
+      containerStyle={containerStyle}
+      density={density}
+      emptyState={emptyState}
+      hasData={hasData}
+      height={height}
+      style={style}
+      {...props}
+    >
+      <RechartsScatterChart data={data} margin={margin} syncId={syncId}>
+        <ChartDecorators
+          axis={
+            <>
+              <XAxis
+                dataKey={xAxisKey}
+                type={isNumericX ? "number" : "category"}
+                minTickGap={24}
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                fontSize={12}
+              />
+              <YAxis
+                dataKey="__chartY"
+                type="number"
+                width={40}
+                tickLine={false}
+                tickMargin={8}
+                axisLine={false}
+                fontSize={12}
+              />
+            </>
+          }
+          showGrid={showGrid}
+          showLegend={showLegend}
+          showTooltip={showTooltip}
+          tooltipColor={tooltipColor}
+        />
+        {series.map((item, index) => {
+          const color = resolveColor(item.color, index);
+          return (
+            <Scatter
+              key={item.dataKey}
+              data={data.map((entry) => ({
+                ...entry,
+                __chartY: entry[item.dataKey],
+              }))}
+              name={item.name}
+              fill={item.fill ?? color.stroke}
+              line={item.stroke ? { stroke: item.stroke } : false}
+            />
+          );
+        })}
+      </RechartsScatterChart>
+    </ChartFrame>
+  );
+}
+
+ScatterChart.displayName = "ScatterChart";

package/src/charts/scatter/index.ts

@@ -0,0 +1,16 @@
+"use client";
+
+export { ScatterChart } from "./Scatter";
+export type {
+  ChartColor,
+  ChartDatum,
+  ChartMargin,
+  ChartSeries,
+  ChartSharedStatic,
+  ScatterChartProps,
+} from "../shared/types";
+export {
+  chartColorValues,
+  chartPalette,
+  chartVariants,
+} from "../shared/variants";

package/src/charts/shared/chart-frame.tsx

@@ -39,6 +39,7 @@ type ChartFrameProps = HTMLAttributes<HTMLDivElement> & {
   emptyState?: ReactNode;
   hasData: boolean;
   height: number;
+  overlay?: ReactNode;
   style?: CSSProperties;
   children: ReactNode;
 };
@@ -54,6 +55,7 @@ export function ChartFrame({
   emptyState = null,
   hasData,
   height,
+  overlay,
   style,
   ...props
 }: ChartFrameProps) {
@@ -63,8 +65,7 @@ export function ChartFrame({
     "--chart-height": `${height}px`,
     ...style,
   } as CSSProperties;
-  const canRenderChart =
-    (size?.width ?? 0) > 0 && (size?.height ?? 0) > 0;
+  const canRenderChart = (size?.width ?? 0) > 0 && (size?.height ?? 0) > 0;
 
   if (!hasData) {
     return (
@@ -99,6 +100,7 @@ export function ChartFrame({
           </ResponsiveContainer>
         ) : null}
       </div>
+      {overlay}
     </div>
   );
 }

package/src/charts/shared/types.ts

@@ -2,9 +2,18 @@ import type { VariantProps } from "class-variance-authority";
 import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
 
 import type { chartPalette, chartVariants } from "./variants";
-import { PieProps } from "recharts";
+import type { PieProps } from "recharts";
 
-export type ChartType = "area" | "bar" | "bubble" | "line" | "pie";
+export type ChartType =
+  | "area"
+  | "bar"
+  | "bubble"
+  | "funnel"
+  | "line"
+  | "pie"
+  | "radar"
+  | "scatter"
+  | "stacked-bar";
 
 export type ChartColor = keyof typeof chartPalette;
 
@@ -61,6 +70,17 @@ export type LineChartProps<TDatum extends ChartDatum = ChartDatum> =
 export type BubbleChartProps<TDatum extends ChartDatum = ChartDatum> =
   BaseChartProps<TDatum>;
 
+export type RadarChartProps<TDatum extends ChartDatum = ChartDatum> =
+  BaseChartProps<TDatum>;
+
+export type ScatterChartProps<TDatum extends ChartDatum = ChartDatum> =
+  BaseChartProps<TDatum>;
+
+export type StackedBarChartProps<TDatum extends ChartDatum = ChartDatum> = Omit<
+  BaseChartProps<TDatum>,
+  "stacked"
+>;
+
 export type PieChartProps<TDatum extends ChartDatum = ChartDatum> =
   ChartSharedStatic &
     Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
@@ -75,6 +95,8 @@ export type PieChartProps<TDatum extends ChartDatum = ChartDatum> =
       containerStyle?: CSSProperties;
       paddingAngle?: PieProps["paddingAngle"];
       cornerRadius?: PieProps["cornerRadius"];
+      center?: ReactNode;
+      colorKey?: keyof TDatum & string;
       label?: boolean;
       labelLine?: boolean;
       labelColor?: string;
@@ -84,3 +106,21 @@ export type PieChartProps<TDatum extends ChartDatum = ChartDatum> =
       outerRadius?: PieProps["outerRadius"];
       shape?: PieProps["shape"];
     };
+
+export type FunnelChartProps<TDatum extends ChartDatum = ChartDatum> =
+  ChartSharedStatic &
+    Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+      data: TDatum[];
+      dataKey: keyof TDatum & string;
+      nameKey: keyof TDatum & string;
+      height?: number;
+      showLegend?: boolean;
+      showTooltip?: boolean;
+      tooltipColor?: string;
+      emptyState?: ReactNode;
+      containerStyle?: CSSProperties;
+      colorKey?: keyof TDatum & string;
+      label?: boolean;
+      stroke?: string;
+      fill?: string;
+    };

package/src/charts/stacked-bar/StackedBar.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { BarChart } from "../bar/Bar";
+import type { StackedBarChartProps } from "../shared/types";
+
+export function StackedBarChart<
+  TDatum extends Record<string, number | string | null | undefined>,
+>(props: StackedBarChartProps<TDatum>) {
+  return <BarChart {...props} stacked />;
+}
+
+StackedBarChart.displayName = "StackedBarChart";

package/src/charts/stacked-bar/index.ts

@@ -0,0 +1,16 @@
+"use client";
+
+export { StackedBarChart } from "./StackedBar";
+export type {
+  ChartColor,
+  ChartDatum,
+  ChartMargin,
+  ChartSeries,
+  ChartSharedStatic,
+  StackedBarChartProps,
+} from "../shared/types";
+export {
+  chartColorValues,
+  chartPalette,
+  chartVariants,
+} from "../shared/variants";

package/src/hooks/index.ts

@@ -49,6 +49,18 @@ export {
   useSessionStorage,
   type UseSessionStorageResult,
 } from "./useSessionStorage";
+export {
+  useTableFilter,
+  type TableFilterPredicate,
+  type TableFilterState,
+  type UseTableFilterParams,
+  type UseTableFilterResult,
+} from "./useTableFilter";
+export {
+  useTableSort,
+  type UseTableSortParams,
+  type UseTableSortResult,
+} from "./useTableSort";
 export { useThrottledCallback } from "./useThrottledCallback";
 export { useToggle } from "./useToggle";
 export { useWindowSize, type WindowSize } from "./useWindowSize";

package/src/hooks/useTableFilter/index.ts

@@ -0,0 +1,7 @@
+export {
+  type TableFilterPredicate,
+  type TableFilterState,
+  type UseTableFilterParams,
+  type UseTableFilterResult,
+} from "./types";
+export { useTableFilter } from "./useTableFilter";

package/src/hooks/useTableFilter/types.ts

@@ -0,0 +1,28 @@
+export type TableFilterState<TKey extends string = string> = Partial<
+  Record<TKey, string>
+>;
+
+export type TableFilterPredicate<TData, TKey extends string = string> = (
+  row: TData,
+  filterValue: string,
+  filterKey: TKey,
+) => boolean;
+
+export type UseTableFilterParams<TData, TKey extends string = string> = {
+  data: readonly TData[];
+  filters?: TableFilterState<TKey>;
+  defaultFilters?: TableFilterState<TKey>;
+  onFiltersChange?: (filters: TableFilterState<TKey>) => void;
+  getColumnValue?: (row: TData, filterKey: TKey) => unknown;
+  filterPredicate?: TableFilterPredicate<TData, TKey>;
+};
+
+export type UseTableFilterResult<TData, TKey extends string = string> = {
+  filters: TableFilterState<TKey>;
+  filteredData: TData[];
+  hasActiveFilters: boolean;
+  setFilter: (filterKey: TKey, value: string) => void;
+  setFilters: (filters: TableFilterState<TKey>) => void;
+  clearFilter: (filterKey: TKey) => void;
+  clearFilters: () => void;
+};

package/src/hooks/useTableFilter/useTableFilter.test.ts

@@ -0,0 +1,141 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { useTableFilter } from "./useTableFilter";
+
+const rows = [
+  { name: "Atlas", status: "active", seats: 12 },
+  { name: "Beacon", status: "paused", seats: 4 },
+  { name: "Comet", status: "active", seats: 8 },
+] as const;
+
+describe("useTableFilter", () => {
+  it("should return all rows when no filters are active", () => {
+    const { result } = renderHook(() => useTableFilter({ data: rows }));
+    expect(result.current.filteredData).toEqual(rows);
+    expect(result.current.hasActiveFilters).toBe(false);
+  });
+
+  it("should filter rows by a string column value", () => {
+    const { result } = renderHook(() =>
+      useTableFilter({
+        data: rows,
+        defaultFilters: { status: "active" },
+      }),
+    );
+    expect(result.current.filteredData.map((row) => row.name)).toEqual([
+      "Atlas",
+      "Comet",
+    ]);
+    expect(result.current.hasActiveFilters).toBe(true);
+  });
+
+  it("should combine multiple column filters", () => {
+    const { result } = renderHook(() =>
+      useTableFilter({
+        data: rows,
+        defaultFilters: { status: "active", name: "com" },
+      }),
+    );
+    expect(result.current.filteredData).toEqual([rows[2]]);
+  });
+
+  it("should update and clear filters in uncontrolled mode", () => {
+    const { result } = renderHook(() => useTableFilter({ data: rows }));
+
+    act(() => {
+      result.current.setFilter("name", "bea");
+    });
+    expect(result.current.filteredData).toEqual([rows[1]]);
+
+    act(() => {
+      result.current.clearFilter("name");
+    });
+    expect(result.current.filteredData).toEqual(rows);
+
+    act(() => {
+      result.current.setFilters({ status: "paused" });
+    });
+    expect(result.current.filteredData).toEqual([rows[1]]);
+
+    act(() => {
+      result.current.clearFilters();
+    });
+    expect(result.current.filteredData).toEqual(rows);
+  });
+
+  it("should preserve batched uncontrolled filter updates", () => {
+    const { result } = renderHook(() => useTableFilter({ data: rows }));
+
+    act(() => {
+      result.current.setFilter("status", "active");
+      result.current.setFilter("name", "atlas");
+    });
+
+    expect(result.current.filters).toEqual({
+      status: "active",
+      name: "atlas",
+    });
+    expect(result.current.filteredData).toEqual([rows[0]]);
+  });
+
+  it("should support controlled filters", () => {
+    const handleFiltersChange = vi.fn();
+    const { result, rerender } = renderHook(
+      ({ filters }: { filters: Record<string, string> }) =>
+        useTableFilter({
+          data: rows,
+          filters,
+          onFiltersChange: handleFiltersChange,
+        }),
+      { initialProps: { filters: { status: "active" } } },
+    );
+
+    expect(result.current.filteredData.length).toBe(2);
+    act(() => {
+      result.current.setFilter("name", "atlas");
+    });
+    expect(handleFiltersChange).toHaveBeenCalledWith({
+      status: "active",
+      name: "atlas",
+    });
+    expect(result.current.filters).toEqual({ status: "active" });
+
+    rerender({ filters: { status: "active", name: "atlas" } });
+    expect(result.current.filteredData).toEqual([rows[0]]);
+  });
+
+  it("should support custom value accessors and predicates", () => {
+    const { result } = renderHook(() =>
+      useTableFilter({
+        data: rows,
+        defaultFilters: { seats: "10" },
+        getColumnValue: (row, key) => row[key],
+        filterPredicate: (row, value, key) => Number(row[key]) >= Number(value),
+      }),
+    );
+    expect(result.current.filteredData).toEqual([rows[0]]);
+  });
+
+  it("should remove blank filter values", () => {
+    const { result } = renderHook(() =>
+      useTableFilter({
+        data: rows,
+        defaultFilters: { name: "   " },
+      }),
+    );
+    expect(result.current.filters).toEqual({});
+    expect(result.current.hasActiveFilters).toBe(false);
+  });
+
+  it("should guard against null filters at runtime", () => {
+    const { result } = renderHook(() =>
+      useTableFilter({
+        data: rows,
+        filters: null as unknown as Record<string, string>,
+      }),
+    );
+    expect(result.current.filters).toEqual({});
+    expect(result.current.filteredData).toEqual(rows);
+  });
+});