sdaia-ui 1.0.1

package/src/components/LineChart/LineChart.variants.ts

@@ -0,0 +1,324 @@
+/**
+ * LineChart.variants.ts
+ *
+ * All constants for the LineChart component.
+ *
+ * ── Color tokens ──────────────────────────────────────────────────────────────
+ *   Series 1  →  rgba(27,131,84,1)    Colors/Primary-SA-Flag/600-primary (green)
+ *   Series 2  →  rgba(165,123,186,1)  Colors/Tertiary-Lavendar/400 (lavender)
+ *   Goal      →  rgba(245,189,2,1)    Colors/Secondary-Gold/500 (gold)
+ *   Grid      →  #d2d6db (light) / #374151 (dark) — Border/border-neutral-primary
+ *
+ * ── Spacing (follows BarChart pattern) ────────────────────────────────────────
+ *   gap-spacing-lg  — root column gap, legend gap
+ *   gap-spacing-md  — y-axis ↔ chart area
+ *   gap-spacing-xs  — chart body items
+ */
+
+import type { XAxisDataType } from '../XAxis/XAxis.types';
+import type { LineChartLegendPosition, LineChartType } from './LineChart.types';
+
+// ─── Data-viz colours ─────────────────────────────────────────────────────────
+export const SERIES_1_COLOR = 'rgba(27,131,84,1)';
+export const SERIES_2_COLOR = 'rgba(165,123,186,1)';
+export const GOAL_COLOR     = 'rgba(245,189,2,1)';
+
+// ─── Chart heights (total, including legend + x-axis) ─────────────────────────
+export const DEFAULT_HEIGHTS: Record<XAxisDataType, number> = {
+  '3 Days':      260,
+  '5 Work Days': 320,
+  '7 Week Days': 320,
+  '12 Months':   390,
+} as const;
+
+// ─── Layout ───────────────────────────────────────────────────────────────────
+export const ROOT_BASE = 'flex flex-col gap-spacing-lg items-stretch min-w-[350px] w-full';
+
+/** Legend row layout per position — line swatches + labels, `gap-spacing-lg` between items */
+export const LINE_CHART_LEGEND_ROW: Record<LineChartLegendPosition, string> = {
+  'bottom-center':
+    'flex w-full shrink-0 flex-wrap items-center justify-center gap-spacing-lg pt-spacing-xs',
+  'bottom-left':
+    'flex w-full shrink-0 flex-wrap items-center justify-start gap-spacing-lg pt-spacing-xs',
+  'bottom-right':
+    'flex w-full shrink-0 flex-wrap items-center justify-end gap-spacing-lg pt-spacing-xs',
+  'top-center':
+    'flex w-full shrink-0 flex-wrap items-center justify-center gap-spacing-lg',
+  'top-left':
+    'flex w-full shrink-0 flex-wrap items-center justify-start gap-spacing-lg',
+  'top-right':
+    'flex w-full shrink-0 flex-wrap items-center justify-end gap-spacing-lg',
+};
+
+/** Legend colour bar — Figma width 11.67 px; height 2 px for visibility */
+export const LEGEND_SWATCH_WIDTH_PX = 11.67;
+export const LEGEND_SWATCH_HEIGHT_PX = 2;
+
+export const CHART_BODY = 'flex flex-col gap-spacing-xs flex-1 min-h-0 w-full';
+export const Y_AND_LINES_ROW = 'flex gap-spacing-md flex-1 min-h-0 w-full';
+/** `pb-0` so SVG bottom (y=100) aligns with baseline border — avoids fill showing below 0. */
+export const LINES_WRAPPER =
+  'relative flex flex-col justify-between pt-spacing-md pb-0 flex-1 min-h-0 min-w-0';
+
+// ─── Grid line (custom dash + gap) ─
+/** 5px dash, 4px gap (9px period) */
+export const GRID_LINE =
+  'w-full h-px shrink-0 bg-[repeating-linear-gradient(to_right,#d2d6db_0_5px,transparent_5px_9px)] dark:bg-[repeating-linear-gradient(to_right,#374151_0_5px,transparent_5px_9px)]';
+
+/** Bottom horizontal baseline (y = 0 in data space) — solid only here, not on the Y-axis. */
+export const GRID_LINE_BASELINE =
+  'w-full h-0 shrink-0 border-t border-solid border-[#d2d6db] dark:border-[#374151]';
+
+// ─── SVG overlay ──────────────────────────────────────────────────────────────
+export const SVG_OVERLAY = 'absolute inset-0 w-full h-full overflow-visible';
+
+// ─── Default data (all values in 0-100 normalised range) ──────────────────────
+
+export interface InsightData {
+  type: 'Insight';
+  series1: number[];
+  highlightIndex: number;
+}
+
+export interface ComparisonData {
+  type: 'Comparison';
+  series1: number[];
+  series2: number[];
+}
+
+export interface ScoreData {
+  type: 'Score';
+  series1: number[];
+  /** Goal line value in the same 0-100 scale. */
+  goal: number;
+}
+
+export interface ForecastData {
+  type: 'Forecast';
+  /** Past portion (including the split point). */
+  past: number[];
+  /** Future portion starting from the split point (overlaps last past value). */
+  future: number[];
+  /** Index of the split point in the full series (0-based). */
+  splitIndex: number;
+  /** Total data points in the full sequence (past + future − 1 for the overlap). */
+  totalPoints: number;
+}
+
+export type LineChartData = InsightData | ComparisonData | ScoreData | ForecastData;
+
+export const DEFAULT_DATA: Record<string, LineChartData> = {
+  Insight: {
+    type: 'Insight',
+    series1:        [30, 45, 35, 55, 50, 68, 62],
+    highlightIndex: 5,
+  },
+  Comparison: {
+    type: 'Comparison',
+    series1: [40, 55, 48, 62, 58, 72, 68],
+    series2: [25, 32, 42, 35, 48, 44, 52],
+  },
+  Score: {
+    type: 'Score',
+    series1: [55, 62, 58, 68, 65, 72, 75],
+    goal:    70,
+  },
+  Forecast: {
+    type:        'Forecast',
+    past:        [30, 42, 38, 52, 48],   // Mon–Fri  (5 pts, indices 0–4)
+    future:      [48, 60, 70],            // Fri–Sun  (3 pts, indices 4–6, overlap at Fri)
+    splitIndex:  4,
+    totalPoints: 7,
+  },
+};
+
+// ─── SVG helpers ──────────────────────────────────────────────────────────────
+
+/** Full 0–100 scale (fixed domain). */
+export interface YDomain {
+  min: number;
+  max: number;
+}
+
+export const FULL_Y_DOMAIN: YDomain = { min: 0, max: 100 };
+
+const Y_DOMAIN_PADDING_RATIO = 0.06;
+
+/**
+ * Tight Y span from data + padding so the line uses chart height instead of
+ * sitting far above a fixed 0 baseline when values are clustered high.
+ */
+export function computeYDomain(
+  values: number[],
+  paddingRatio = Y_DOMAIN_PADDING_RATIO,
+): YDomain {
+  if (values.length === 0) return { ...FULL_Y_DOMAIN };
+  const dataMin = Math.min(...values);
+  const dataMax = Math.max(...values);
+  const span = dataMax - dataMin;
+  if (span <= 0) {
+    const pad = Math.max(Math.abs(dataMin) * 0.04, 3);
+    return { min: dataMin - pad, max: dataMax + pad };
+  }
+  const pad = span * paddingRatio;
+  return { min: dataMin - pad, max: dataMax + pad };
+}
+
+/** All Y values in the built-in demo dataset for a chart type (for domain). */
+export function collectDefaultSeriesYs(chartType: LineChartType): number[] {
+  switch (chartType) {
+    case 'Insight':
+      return [...(DEFAULT_DATA.Insight as InsightData).series1];
+    case 'Comparison': {
+      const c = DEFAULT_DATA.Comparison as ComparisonData;
+      return [...c.series1, ...c.series2];
+    }
+    case 'Score': {
+      const s = DEFAULT_DATA.Score as ScoreData;
+      return [...s.series1, s.goal];
+    }
+    case 'Forecast': {
+      const f = DEFAULT_DATA.Forecast as ForecastData;
+      return [...f.past, ...f.future];
+    }
+    default:
+      return [0, 100];
+  }
+}
+
+/**
+ * Convert an array of normalised values (0 = bottom, 100 = top) into an SVG
+ * polyline `points` string for a viewBox of "0 0 100 100".
+ *
+ * @param values      - data values (0–100)
+ * @param totalPoints - total number of points in the x-axis sequence
+ * @param startIndex  - index in the sequence where this slice begins
+ * @param domain      - optional Y scale; defaults to 0–100
+ */
+export function toPolylinePoints(
+  values: number[],
+  totalPoints: number,
+  startIndex = 0,
+  domain: YDomain = FULL_Y_DOMAIN,
+): string {
+  return values
+    .map((val, i) => {
+      const x = ((startIndex + i) / (totalPoints - 1)) * 100;
+      const y = getPointY(val, domain);
+      return `${x.toFixed(2)},${y.toFixed(2)}`;
+    })
+    .join(' ');
+}
+
+/**
+ * Build the polygon fill points for the forecast region.
+ * The polygon covers the area under the future line, closing along y = 100.
+ */
+export function toForecastFillPoints(
+  future: number[],
+  splitIndex: number,
+  totalPoints: number,
+  domain: YDomain = FULL_Y_DOMAIN,
+): string {
+  const topEdge = future.map((val, i) => {
+    const x = ((splitIndex + i) / (totalPoints - 1)) * 100;
+    const y = getPointY(val, domain);
+    return `${x.toFixed(2)},${y.toFixed(2)}`;
+  });
+
+  const rightX = ((splitIndex + future.length - 1) / (totalPoints - 1)) * 100;
+  const leftX  = (splitIndex / (totalPoints - 1)) * 100;
+
+  return [...topEdge, `${rightX.toFixed(2)},100`, `${leftX.toFixed(2)},100`].join(' ');
+}
+
+/**
+ * SVG x coordinate for a point at `index` out of `totalPoints` (0–100 space).
+ */
+export function getPointX(index: number, totalPoints: number): number {
+  return (index / (totalPoints - 1)) * 100;
+}
+
+/**
+ * SVG y for a data value: bottom of chart = domain.min, top = domain.max.
+ */
+export function getPointY(value: number, domain: YDomain = FULL_Y_DOMAIN): number {
+  const { min, max } = domain;
+  if (max <= min) return 50;
+  return 100 - ((value - min) / (max - min)) * 100;
+}
+
+// ─── Smooth path helpers (Catmull-Rom → cubic Bézier) ─────────────────────────
+
+/** tension=0.25 → gentle smooth, tension=0.45 → elastic/bouncy */
+export const GRAPH_STYLE_TENSION: Record<string, number> = {
+  noisy:   0,
+  smooth:  0.25,
+  elastic: 0.45,
+};
+
+/**
+ * Generate a smooth SVG path using Catmull-Rom spline interpolation.
+ * tension=0 degrades to straight line segments (same as polyline).
+ */
+export function toSmoothPath(
+  values: number[],
+  totalPoints: number,
+  startIndex = 0,
+  tension = 0.25,
+  domain: YDomain = FULL_Y_DOMAIN,
+): string {
+  if (values.length === 0) return '';
+
+  const pts = values.map((val, i) => ({
+    x: ((startIndex + i) / (totalPoints - 1)) * 100,
+    y: getPointY(val, domain),
+  }));
+
+  const n = pts.length;
+  let d = `M ${pts[0].x.toFixed(2)},${pts[0].y.toFixed(2)}`;
+
+  for (let i = 0; i < n - 1; i++) {
+    const p0 = pts[Math.max(0, i - 1)];
+    const p1 = pts[i];
+    const p2 = pts[i + 1];
+    const p3 = pts[Math.min(n - 1, i + 2)];
+
+    const cp1x = p1.x + (p2.x - p0.x) * tension;
+    const cp1y = p1.y + (p2.y - p0.y) * tension;
+    const cp2x = p2.x - (p3.x - p1.x) * tension;
+    const cp2y = p2.y - (p3.y - p1.y) * tension;
+
+    d += ` C ${cp1x.toFixed(2)},${cp1y.toFixed(2)} ${cp2x.toFixed(2)},${cp2y.toFixed(2)} ${p2.x.toFixed(2)},${p2.y.toFixed(2)}`;
+  }
+
+  return d;
+}
+
+/** Smooth fill path — closes the line path along the bottom (y=100). */
+export function toSmoothFillPath(
+  values: number[],
+  totalPoints: number,
+  startIndex = 0,
+  tension = 0.25,
+  domain: YDomain = FULL_Y_DOMAIN,
+): string {
+  const line = toSmoothPath(values, totalPoints, startIndex, tension, domain);
+  const lastX = ((startIndex + values.length - 1) / (totalPoints - 1)) * 100;
+  const firstX = (startIndex / (totalPoints - 1)) * 100;
+  return `${line} L ${lastX.toFixed(2)},100 L ${firstX.toFixed(2)},100 Z`;
+}
+
+/** Smooth forecast fill — closes future slice at bottom. */
+export function toSmoothForecastFillPath(
+  future: number[],
+  splitIndex: number,
+  totalPoints: number,
+  tension = 0.25,
+  domain: YDomain = FULL_Y_DOMAIN,
+): string {
+  const line = toSmoothPath(future, totalPoints, splitIndex, tension, domain);
+  const rightX = ((splitIndex + future.length - 1) / (totalPoints - 1)) * 100;
+  const leftX = (splitIndex / (totalPoints - 1)) * 100;
+  return `${line} L ${rightX.toFixed(2)},100 L ${leftX.toFixed(2)},100 Z`;
+}

package/src/components/LineChart/index.ts

@@ -0,0 +1,7 @@
+export { LineChart } from './LineChart';
+export type {
+  LineChartProps,
+  LineChartType,
+  GraphStyle,
+  LineChartLegendPosition,
+} from './LineChart.types';

package/src/components/Link/Link.tsx

@@ -0,0 +1,81 @@
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { SIZE_MAP, COLOR_MAP, DISABLED } from './Link.variants';
+import type { LinkProps } from './Link.types';
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
+  {
+    children,
+    size = 'md',
+    variant = 'primary',
+    inline = false,
+    disabled = false,
+    visited = false,
+    leadingIcon,
+    trailingIcon,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const sizeConfig = SIZE_MAP[size];
+  const colorConfig = COLOR_MAP[variant];
+
+  const colorClasses = disabled
+    ? DISABLED
+    : visited
+      ? cn(colorConfig.visited, colorConfig.visitedDark)
+      : cn(
+          colorConfig.default,
+          colorConfig.hover,
+          colorConfig.active,
+          colorConfig.focusRing,
+          colorConfig.defaultDark,
+          colorConfig.hoverDark,
+          colorConfig.activeDark,
+          colorConfig.focusRingDark,
+        );
+
+  return (
+    <a
+      ref={ref}
+      data-slot="link"
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? -1 : undefined}
+      className={cn(
+        'inline-flex items-center py-[2px] rounded-[2px] font-[500] outline-none motion-feedback',
+        sizeConfig.text,
+        sizeConfig.gap,
+        colorClasses,
+        inline && !disabled && 'underline underline-offset-2',
+        inline && disabled && 'underline underline-offset-2',
+        className,
+      )}
+      {...rest}
+    >
+      {leadingIcon && (
+        <span
+          data-slot="link-leading-icon"
+          className="flex-shrink-0 [&>svg]:h-full [&>svg]:w-full"
+          style={{ width: sizeConfig.iconSize, height: sizeConfig.iconSize }}
+        >
+          {leadingIcon}
+        </span>
+      )}
+
+      {children && (
+        <span data-slot="link-label">{children}</span>
+      )}
+
+      {trailingIcon && (
+        <span
+          data-slot="link-trailing-icon"
+          className="flex-shrink-0 [&>svg]:h-full [&>svg]:w-full"
+          style={{ width: sizeConfig.iconSize, height: sizeConfig.iconSize }}
+        >
+          {trailingIcon}
+        </span>
+      )}
+    </a>
+  );
+});

package/src/components/Link/Link.types.ts

@@ -0,0 +1,23 @@
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+
+export type LinkSize = 'sm' | 'md' | 'lg';
+export type LinkStyle = 'primary' | 'neutral';
+
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Size of the link */
+  size?: LinkSize;
+  /** Visual style */
+  variant?: LinkStyle;
+  /** Show underline */
+  inline?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Visited state (controlled) */
+  visited?: boolean;
+  /** Leading icon element */
+  leadingIcon?: ReactNode;
+  /** Trailing icon element */
+  trailingIcon?: ReactNode;
+  /** Link content */
+  children?: ReactNode;
+}

package/src/components/Link/Link.variants.ts

@@ -0,0 +1,69 @@
+import type { LinkSize, LinkStyle } from './Link.types';
+
+/* ── Size configuration ───────────────────────────────────────── */
+export interface LinkSizeConfig {
+  text: string;
+  gap: string;
+  iconSize: number;
+}
+
+export const SIZE_MAP: Record<LinkSize, LinkSizeConfig> = {
+  sm: {
+    text: 'text-text-xs',
+    gap: 'gap-spacing-xxs',
+    iconSize: 14,
+  },
+  md: {
+    text: 'text-text-sm',
+    gap: 'gap-spacing-xs',
+    iconSize: 16,
+  },
+  lg: {
+    text: 'text-text-md',
+    gap: 'gap-spacing-sm',
+    iconSize: 20,
+  },
+};
+
+/* ── Color configuration ──────────────────────────────────────── */
+export interface LinkColorConfig {
+  default: string;
+  hover: string;
+  active: string;
+  focusRing: string;
+  visited: string;
+  defaultDark: string;
+  hoverDark: string;
+  activeDark: string;
+  focusRingDark: string;
+  visitedDark: string;
+}
+
+export const COLOR_MAP: Record<LinkStyle, LinkColorConfig> = {
+  primary: {
+    default: 'text-[rgba(27,131,84,1)]',
+    hover: 'hover:text-[rgba(84,192,138,1)]',
+    active: 'active:text-[rgba(136,216,173,1)]',
+    focusRing: 'focus:ring-2 focus:ring-[rgba(27,131,84,0.7)] focus:ring-offset-1',
+    visited: 'text-[rgba(20,87,58,1)]',
+    defaultDark: 'dark:text-[rgba(255,255,255,1)]',
+    hoverDark: 'dark:hover:text-[rgba(255,255,255,0.8)]',
+    activeDark: 'dark:active:text-[rgba(255,255,255,0.6)]',
+    focusRingDark: 'dark:focus:ring-[rgba(255,255,255,0.4)]',
+    visitedDark: 'dark:text-[rgba(255,255,255,0.9)]',
+  },
+  neutral: {
+    default: 'text-[rgba(56,66,80,1)]',
+    hover: 'hover:text-[rgba(108,115,127,1)]',
+    active: 'active:text-[rgba(157,164,174,1)]',
+    focusRing: 'focus:ring-2 focus:ring-[rgba(22,22,22,0.7)] focus:ring-offset-1',
+    visited: 'text-[rgba(77,87,97,1)]',
+    defaultDark: 'dark:text-[rgba(255,255,255,1)]',
+    hoverDark: 'dark:hover:text-[rgba(255,255,255,0.8)]',
+    activeDark: 'dark:active:text-[rgba(255,255,255,0.6)]',
+    focusRingDark: 'dark:focus:ring-[rgba(255,255,255,0.4)]',
+    visitedDark: 'dark:text-[rgba(255,255,255,0.9)]',
+  },
+};
+
+export const DISABLED = 'text-[rgba(157,164,174,1)] dark:text-[rgba(255,255,255,0.3)] pointer-events-none';

package/src/components/Link/index.ts

@@ -0,0 +1,2 @@
+export { Link } from './Link';
+export type { LinkProps, LinkSize, LinkStyle } from './Link.types';