sdaia-ui 1.0.1 → 1.0.2

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

@@ -1,324 +0,0 @@
-/**
- * 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

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

package/src/components/Link/Link.tsx

@@ -1,81 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

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