@etus/ui 0.1.1 → 0.1.3

package/src/components/data-display/AreaChart/AreaChart.tsx

@@ -1,318 +0,0 @@
-"use client"
-
-import type {
-  AreaChartEventProps,
-  AreaChartProps,
-  AreaChartSeriesConfig,
-  AreaChartTooltipCallbackProps,
-} from "./AreaChart.types"
-
-import * as React from "react"
-import {
-  Area,
-  CartesianGrid,
-  Label,
-  AreaChart as RechartsAreaChart,
-  XAxis,
-  YAxis,
-} from "recharts"
-
-import { cn } from "../../../lib/utils"
-import {
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "../Chart"
-
-/**
- * Normalize series to AreaChartSeriesConfig format
- */
-function normalizeSeriesConfig(
-  series: (AreaChartSeriesConfig | string)[]
-): AreaChartSeriesConfig[] {
-  return series.map((s) =>
-    typeof s === "string" ? { dataKey: s } : s
-  )
-}
-
-/**
- * Generate gradient defs for gradient variant
- */
-function GradientDefs({
-  idPrefix,
-  series,
-}: {
-  idPrefix: string
-  series: AreaChartSeriesConfig[]
-}) {
-  return (
-    <defs>
-      {series.map((s) => (
-        <linearGradient
-          key={s.dataKey}
-          id={`${idPrefix}-${s.dataKey}`}
-          x1="0"
-          x2="0"
-          y1="0"
-          y2="1"
-        >
-          <stop
-            offset="5%"
-            stopColor={`var(--color-${s.dataKey})`}
-            stopOpacity={0.8}
-          />
-          <stop
-            offset="95%"
-            stopColor={`var(--color-${s.dataKey})`}
-            stopOpacity={0.1}
-          />
-        </linearGradient>
-      ))}
-    </defs>
-  )
-}
-
-/**
- * AreaChart - Data visualization component for cumulative data
- *
- * Displays quantitative values along a continuous axis with filled area.
- * Ideal for showing trends over time and comparing volumes between series.
- *
- * @example
- * ```tsx
- * const data = [
- *   { month: "Jan", desktop: 186, mobile: 80 },
- *   { month: "Feb", desktop: 305, mobile: 200 },
- * ]
- *
- * const config = {
- *   desktop: { label: "Desktop", color: "hsl(var(--chart-1))" },
- *   mobile: { label: "Mobile", color: "hsl(var(--chart-2))" },
- * }
- *
- * <AreaChart
- *   data={data}
- *   config={config}
- *   xAxisKey="month"
- *   series={["desktop", "mobile"]}
- * />
- * ```
- */
-export function AreaChart({
-  allowDecimals = true,
-  autoMinValue = false,
-  className,
-  config,
-  connectNulls = false,
-  customTooltip,
-  enableLegendSlider = false,
-  curveType = "monotone",
-  data,
-  fill = "solid",
-  fillOpacity = 0.3,
-  gradientIdPrefix = "area-gradient",
-  gridDashArray = "3 3",
-  intervalType,
-  legendPosition = "bottom",
-  maxValue,
-  minValue,
-  onValueChange,
-  series,
-  showGrid = true,
-  showLegend = false,
-  showTooltip = true,
-  showXAxis = true,
-  showYAxis = true,
-  startEndOnly = false,
-  tickGap,
-  tooltipCallback,
-  tooltipIndicator = "dot",
-  variant = "default",
-  xAxisLabel,
-  xAxisKey,
-  xAxisTickFormatter,
-  yAxisLabel,
-  yAxisTickFormatter,
-  yAxisWidth,
-  ...props
-}: AreaChartProps) {
-  const normalizedSeries = normalizeSeriesConfig(series)
-  const isStacked = variant === "stacked" || variant === "percent"
-  const isPercent = variant === "percent"
-  const isGradient = variant === "gradient" || fill === "gradient"
-  const isNoFill = fill === "none"
-  const chartId = React.useId().replaceAll(":", "")
-  const gradientPrefix = `${gradientIdPrefix}-${chartId}`
-  const prevTooltipStateRef = React.useRef<boolean>(false)
-
-  // Handle dot click for onValueChange
-  const handleDotClick = React.useCallback(
-    (dataKey: string) => (data: { payload: Record<string, unknown> }) => {
-      if (!onValueChange) return
-      const payload = data.payload
-      const value = payload[dataKey]
-      onValueChange({
-        category: payload[xAxisKey],
-        dataKey,
-        payload,
-        value: typeof value === "number" ? value : 0,
-      })
-    },
-    [onValueChange, xAxisKey]
-  )
-
-  // Custom tooltip content wrapper for tooltipCallback
-  const TooltipContentWithCallback = React.useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (props: any) => {
-      const { active = false, label, payload } = props
-
-      // Call tooltipCallback when state changes
-      if (tooltipCallback && active !== prevTooltipStateRef.current) {
-        prevTooltipStateRef.current = active
-        tooltipCallback({
-          active,
-          label,
-          payload: payload?.map((p: { dataKey: string | number; value: number; payload: Record<string, unknown> }) => ({
-            dataKey: String(p.dataKey),
-            value: p.value,
-            payload: p.payload,
-          })),
-        })
-      }
-
-      return <ChartTooltipContent indicator={tooltipIndicator} {...props} />
-    },
-    [tooltipCallback, tooltipIndicator]
-  )
-
-  // Calculate Y-axis domain
-  const yDomain = React.useMemo(() => {
-    const min = minValue ?? (autoMinValue ? "auto" : 0)
-    const max = maxValue ?? "auto"
-    return [min, max] as const
-  }, [autoMinValue, maxValue, minValue])
-
-  // Calculate X-axis ticks for startEndOnly
-  const xAxisTicks = React.useMemo(() => {
-    if (!startEndOnly || data.length < 2) return undefined
-    const first = data[0]
-    const last = data[data.length - 1]
-    if (!first || !last) return undefined
-    return [first[xAxisKey], last[xAxisKey]] as string[]
-  }, [data, startEndOnly, xAxisKey])
-
-  return (
-    <div data-slot="area-chart" {...props}>
-      <ChartContainer
-        className={cn(className)}
-        config={config}
-      >
-      <RechartsAreaChart
-        accessibilityLayer
-        data={data}
-        margin={{ left: xAxisLabel ? 20 : 12, right: 12, bottom: yAxisLabel ? 20 : 0 }}
-        stackOffset={isPercent ? "expand" : undefined}
-      >
-        {isGradient && (
-          <GradientDefs idPrefix={gradientPrefix} series={normalizedSeries} />
-        )}
-
-        {showGrid && (
-          <CartesianGrid strokeDasharray={gridDashArray} vertical={false} />
-        )}
-
-        {showXAxis && (
-          <XAxis
-            axisLine={false}
-            dataKey={xAxisKey}
-            interval={intervalType}
-            minTickGap={tickGap}
-            tickFormatter={xAxisTickFormatter}
-            tickLine={false}
-            tickMargin={8}
-            ticks={xAxisTicks}
-          >
-            {xAxisLabel && (
-              <Label offset={-5} position="insideBottom" value={xAxisLabel} />
-            )}
-          </XAxis>
-        )}
-
-        {showYAxis && (
-          <YAxis
-            allowDecimals={allowDecimals}
-            axisLine={false}
-            domain={isPercent ? [0, 1] : yDomain}
-            tickFormatter={isPercent ? (value) => `${(value * 100).toFixed(0)}%` : yAxisTickFormatter}
-            tickLine={false}
-            tickMargin={8}
-            width={yAxisWidth}
-          >
-            {yAxisLabel && (
-              <Label angle={-90} offset={-5} position="insideLeft" value={yAxisLabel} />
-            )}
-          </YAxis>
-        )}
-
-        {showTooltip && (
-          <ChartTooltip
-            content={
-              customTooltip
-                ? customTooltip
-                : tooltipCallback
-                  ? <TooltipContentWithCallback />
-                  : <ChartTooltipContent indicator={tooltipIndicator} />
-            }
-            cursor={false}
-          />
-        )}
-
-        {showLegend && (
-          <ChartLegend
-            align={legendPosition === "left" ? "left" : legendPosition === "right" ? "right" : "center"}
-            content={<ChartLegendContent enableSlider={enableLegendSlider} />}
-            layout={legendPosition === "left" || legendPosition === "right" ? "vertical" : "horizontal"}
-            verticalAlign={legendPosition === "top" ? "top" : legendPosition === "bottom" ? "bottom" : "middle"}
-          />
-        )}
-
-        {normalizedSeries.map((seriesConfig) => {
-          const { dataKey, fillOpacity: seriesFillOpacity, stackId } = seriesConfig
-
-          const areaFill = isGradient
-            ? `url(#${gradientPrefix}-${dataKey})`
-            : `var(--color-${dataKey})`
-
-          const stroke = `var(--color-${dataKey})`
-
-          // Calculate fill opacity: 0 for "none", otherwise use series or default
-          const computedFillOpacity = isNoFill ? 0 : (seriesFillOpacity ?? fillOpacity)
-
-          return (
-            <Area
-              key={dataKey}
-              activeDot={
-                onValueChange
-                  ? { onClick: handleDotClick(dataKey), r: 6, style: { cursor: "pointer" } }
-                  : { r: 6 }
-              }
-              connectNulls={connectNulls}
-              dataKey={dataKey}
-              fill={areaFill}
-              fillOpacity={computedFillOpacity}
-              stackId={isStacked ? "area-stack" : stackId}
-              stroke={stroke}
-              type={curveType}
-            />
-          )
-        })}
-      </RechartsAreaChart>
-      </ChartContainer>
-    </div>
-  )
-}
-
-AreaChart.displayName = "AreaChart"

package/src/components/data-display/AreaChart/AreaChart.types.ts

@@ -1,169 +0,0 @@
-import type { ChartConfig } from "../Chart"
-import type { ComponentPropsWithoutRef, ReactElement } from "react"
-
-/**
- * Curve type for the area chart line
- */
-export type AreaChartCurveType =
-  | "basis"
-  | "basisClosed"
-  | "basisOpen"
-  | "bump"
-  | "bumpX"
-  | "bumpY"
-  | "linear"
-  | "linearClosed"
-  | "monotone"
-  | "monotoneX"
-  | "monotoneY"
-  | "natural"
-  | "step"
-  | "stepAfter"
-  | "stepBefore"
-
-/**
- * Visual variant for area chart rendering
- */
-export type AreaChartVariant = "default" | "gradient" | "percent" | "stacked"
-
-/**
- * Fill style for area chart
- */
-export type AreaChartFill = "gradient" | "none" | "solid"
-
-/**
- * Legend position
- */
-export type AreaChartLegendPosition = "bottom" | "left" | "right" | "top"
-
-/**
- * X-axis interval type
- */
-export type AreaChartIntervalType = "equidistantPreserveStart" | "preserveEnd" | "preserveStart" | "preserveStartEnd" | number
-
-/**
- * Tooltip indicator style
- */
-export type AreaChartTooltipIndicator = "dashed" | "dot" | "line"
-
-/**
- * Event payload for onValueChange callback
- */
-export interface AreaChartEventProps {
-  /** The category value (x-axis) */
-  category: unknown
-  /** The series key that was clicked */
-  dataKey: string
-  /** The full data point */
-  payload: Record<string, unknown>
-  /** The value of the clicked series */
-  value: number
-}
-
-/**
- * Tooltip callback props
- */
-export interface AreaChartTooltipCallbackProps {
-  /** Whether the tooltip is active/visible */
-  active: boolean
-  /** The category label (x-axis value) */
-  label?: string
-  /** Array of series data in the tooltip */
-  payload?: Array<{
-    dataKey: string
-    value: number
-    payload: Record<string, unknown>
-  }>
-}
-
-/**
- * Configuration for a single series in the area chart
- */
-export interface AreaChartSeriesConfig {
-  /** Data key from the data array */
-  dataKey: string
-  /** Optional custom fill color (defaults to config color) */
-  fill?: string
-  /** Fill opacity for this series (0-1) */
-  fillOpacity?: number
-  /** Stack ID for stacked charts (all series with same stackId are stacked) */
-  stackId?: string
-  /** Optional custom stroke color (defaults to config color) */
-  stroke?: string
-}
-
-/**
- * Props for the AreaChart component
- */
-export interface AreaChartProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
-  /** Allow decimals on Y-axis ticks */
-  allowDecimals?: boolean
-  /** Automatically calculate minimum Y-axis value from data */
-  autoMinValue?: boolean
-  /** Additional CSS classes */
-  className?: string
-  /** Chart configuration with colors and labels */
-  config: ChartConfig
-  /** Connect data points through null/undefined values */
-  connectNulls?: boolean
-  /** Custom tooltip content (replaces default tooltip) */
-  customTooltip?: ReactElement
-  /** Enable horizontal scroll/slider for legend with many items */
-  enableLegendSlider?: boolean
-  /** Curve type for the area line */
-  curveType?: AreaChartCurveType
-  /** Data array for the chart */
-  data: Record<string, unknown>[]
-  /** Fill style: solid, gradient, or none (stroke only) */
-  fill?: AreaChartFill
-  /** Default fill opacity for all series (0-1) */
-  fillOpacity?: number
-  /** Gradient definition ID prefix for gradient variant */
-  gradientIdPrefix?: string
-  /** Grid stroke dash array (e.g., "3 3") */
-  gridDashArray?: string
-  /** X-axis interval type for tick display */
-  intervalType?: AreaChartIntervalType
-  /** Legend position relative to chart */
-  legendPosition?: AreaChartLegendPosition
-  /** Maximum Y-axis value (explicit domain upper bound) */
-  maxValue?: number
-  /** Minimum Y-axis value (explicit domain lower bound) */
-  minValue?: number
-  /** Callback when a data point is clicked. Pass null to clear selection. */
-  onValueChange?: (value: AreaChartEventProps | null) => void
-  /** Array of data keys or series configs for Y-axis values */
-  series: (AreaChartSeriesConfig | string)[]
-  /** Show cartesian grid */
-  showGrid?: boolean
-  /** Show legend */
-  showLegend?: boolean
-  /** Show tooltip on hover */
-  showTooltip?: boolean
-  /** Show X-axis */
-  showXAxis?: boolean
-  /** Show Y-axis */
-  showYAxis?: boolean
-  /** Show only first and last X-axis tick labels */
-  startEndOnly?: boolean
-  /** Minimum gap between X-axis ticks in pixels */
-  tickGap?: number
-  /** Callback when tooltip state changes */
-  tooltipCallback?: (props: AreaChartTooltipCallbackProps) => void
-  /** Tooltip indicator style */
-  tooltipIndicator?: AreaChartTooltipIndicator
-  /** Visual variant */
-  variant?: AreaChartVariant
-  /** Label for X-axis */
-  xAxisLabel?: string
-  /** Key from data to use for X-axis */
-  xAxisKey: string
-  /** Custom X-axis tick formatter */
-  xAxisTickFormatter?: (value: unknown) => string
-  /** Label for Y-axis */
-  yAxisLabel?: string
-  /** Custom Y-axis tick formatter */
-  yAxisTickFormatter?: (value: unknown) => string
-  /** Width of the Y-axis in pixels */
-  yAxisWidth?: number
-}

package/src/components/data-display/AreaChart/AreaChart.variants.ts

@@ -1,45 +0,0 @@
-// AreaChart/AreaChart.variants.ts
-import { cva, type VariantProps } from "class-variance-authority"
-
-/**
- * AreaChart style variants using CVA
- *
- * Controls the area fill and stroke appearance.
- *
- * @see https://cva.style/docs
- */
-export const areaChartVariants = cva(
-  // Base styles (always applied)
-  "",
-  {
-    variants: {
-      fillStyle: {
-        solid: "",
-        gradient: "",
-      },
-      stackType: {
-        none: "",
-        stacked: "",
-        percent: "",
-      },
-    },
-    defaultVariants: {
-      fillStyle: "gradient",
-      stackType: "none",
-    },
-  }
-)
-
-/**
- * Area fill opacity configuration
- */
-export const areaFillOpacity = {
-  light: 0.2,
-  default: 0.4,
-  heavy: 0.6,
-} as const
-
-export type AreaFillOpacity = keyof typeof areaFillOpacity
-
-// Export variant prop types
-export type AreaChartVariantProps = VariantProps<typeof areaChartVariants>