sdaia-ui 1.0.1 → 1.0.2

package/src/components/Metric/Metric.tsx

@@ -1,584 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { cn } from '../../lib/cn';
-import { Button } from '../Button';
-import { Sparkline } from '../Sparkline';
-import type { MetricProps, MetricType, MetricTrend } from './Metric.types';
-import {
-  CARD,
-  CONTENT_PADDING,
-  CONTENT_GAP,
-  HEADER_BAR,
-  FOOTER_BAR,
-  LABEL,
-  VALUE,
-  TREND_VALUE_GREEN,
-  TREND_VALUE_PURPLE,
-  TREND_LABEL,
-  BADGE_PILL,
-  BADGE_TEXT,
-  BADGE_DOT,
-  STAR_WRAPPER,
-  STAR_GREEN,
-  STAR_PURPLE,
-  STAR_DARK,
-  ICON_MUTED,
-} from './Metric.variants';
-import { StarIcon, MoreVerticalIcon, AlertCircleIcon } from '../../icons/IconFactory';
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
-/**
- * Star `text-*` colour class driven by type × trend.
- *
- * - Icon Left / Icon Top                    → green
- * - Icon Left + Text / trend=Text           → purple
- * - Icon Left + Text / trend=None or Badge  → dark/neutral
- */
-function starColorClass(type: MetricType, trend: MetricTrend): string {
-  if (type === 'Icon Left + Text') {
-    return trend === 'Text' ? STAR_PURPLE : STAR_DARK;
-  }
-  return STAR_GREEN;
-}
-
-/**
- * Trend text accent colour for `type="Icon Left + Text"` → purple; otherwise green.
- */
-function trendAccentClass(type: MetricType): string {
-  return type === 'Icon Left + Text' ? TREND_VALUE_PURPLE : TREND_VALUE_GREEN;
-}
-
-// ─── Primitive sub-components ─────────────────────────────────────────────────
-
-/**
- * MoreVertical (⋮) kebab button.
- * Always rendered in the label row — present in Default, Header, and Footer actions.
- */
-function MoreBtn({ onClick }: { onClick?: () => void }) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      aria-label="More options"
-      className={ICON_MUTED}
-    >
-      {/* SVG has no hard-coded dimensions; it fills the size-icon-xxl wrapper */}
-      <MoreVerticalIcon className="w-icon-lg h-icon-lg" />
-    </button>
-  );
-}
-
-/**
- * Badge pill: bordered pill with a green status dot and the metric `trendValue`.
- *
- * Figma: bg-white border-[#d2d6db] rounded-[6px] px-md py-xs | dot 8px + "100%"
- * The text content is always the trendValue (e.g. "100%"), NOT a custom label.
- */
-function TrendBadge({ value }: { value: string }) {
-  return (
-    <div className={BADGE_PILL}>
-      <span className={BADGE_DOT} aria-hidden="true" />
-      <span className={BADGE_TEXT}>{value}</span>
-    </div>
-  );
-}
-
-/**
- * Inline trend text: coloured percentage + muted secondary label.
- * e.g.  <span green>100% </span><span muted>vs last month</span>
- */
-function TrendText({
-  value,
-  label,
-  type,
-}: {
-  value: string;
-  label: string;
-  type: MetricType;
-}) {
-  return (
-    <p className="shrink-0 whitespace-nowrap">
-      <span className={trendAccentClass(type)}>{value} </span>
-      <span className={TREND_LABEL}>{label}</span>
-    </p>
-  );
-}
-
-// ─── Content layout per type ──────────────────────────────────────────────────
-
-/**
- * Numbers row: value (flex-1) + optional inline trend indicator.
- * Used by Compact, Icon Left, Icon Top, and Icon Left + Text (with Compact graph).
- * For Icon Left + Text with Text trend the trend sits on its own line — see below.
- */
-function NumbersRow({
-  value,
-  trend,
-  trendValue,
-  trendLabel,
-  type,
-  showInlineTrend = true,
-  rowGap = 'gap-spacing-md',
-}: {
-  value: string;
-  trend: MetricTrend;
-  trendValue: string;
-  trendLabel: string;
-  type: MetricType;
-  showInlineTrend?: boolean;
-  /** Gap between value and badge/trend. Figma: spacing-lg for Compact, spacing-md for icon types. */
-  rowGap?: string;
-}) {
-  return (
-    <div className={cn('flex items-center w-full', rowGap)}>
-      <p className={cn(VALUE, 'flex-1 min-w-0')}>{value}</p>
-      {showInlineTrend && trend === 'Badge' && <TrendBadge value={trendValue} />}
-      {showInlineTrend && trend === 'Text' && (
-        <TrendText value={trendValue} label={trendLabel} type={type} />
-      )}
-    </div>
-  );
-}
-
-/**
- * Compact layout — no icon.
- *
- * ```
- * [label, flex-1]  [⋮]
- * [value, flex-1]  [badge | trend-text]   ← inline
- * ```
- */
-function CompactBody({
-  label,
-  value,
-  trend,
-  trendValue,
-  trendLabel,
-  graph,
-  chartTrend,
-  onMoreOptions,
-}: {
-  label: string;
-  value: string;
-  trend: MetricTrend;
-  trendValue: string;
-  trendLabel: string;
-  graph: string;
-  chartTrend: 'Positive' | 'Negative';
-  onMoreOptions?: () => void;
-}) {
-  const isLarge = graph === 'Large';
-  const isCompactGraph = graph === 'Compact';
-
-  return (
-    <>
-      {/* Label row — gap-spacing-lg (12 px) between label and more-vertical (Figma) */}
-      <div className="flex items-center gap-spacing-lg w-full">
-        <p className={cn(LABEL, 'flex-1 min-w-0')}>{label}</p>
-        <MoreBtn onClick={onMoreOptions} />
-      </div>
-
-      {/* Value row (+ compact chart side-by-side) */}
-      <div className={cn('flex items-end gap-spacing-2xl w-full', isCompactGraph && 'flex-1')}>
-        <div className="flex-1 min-w-0">
-          {/* gap-spacing-lg (12 px) between value and badge/trend for Compact (Figma) */}
-          <NumbersRow
-            value={value}
-            trend={trend}
-            trendValue={trendValue}
-            trendLabel={trendLabel}
-            type="Compact"
-            rowGap="gap-spacing-lg"
-          />
-        </div>
-        {isCompactGraph && (
-          <Sparkline type="Wavy" trend={chartTrend} className="shrink-0" />
-        )}
-      </div>
-
-      {/* Full-width large chart */}
-      {isLarge && (
-        <Sparkline type="Wavy" trend={chartTrend} className="w-full h-[64px]" />
-      )}
-    </>
-  );
-}
-
-/**
- * Icon Left layout — 40 px star to the inline-start; content column to the right.
- *
- * ```
- * [★ 40px]  [label, flex-1]  [⋮]
- *           [value, flex-1]  [badge | trend-text]
- * ```
- */
-function IconLeftBody({
-  label,
-  value,
-  trend,
-  trendValue,
-  trendLabel,
-  graph,
-  chartTrend,
-  onMoreOptions,
-}: {
-  label: string;
-  value: string;
-  trend: MetricTrend;
-  trendValue: string;
-  trendLabel: string;
-  graph: string;
-  chartTrend: 'Positive' | 'Negative';
-  onMoreOptions?: () => void;
-}) {
-  const isLarge = graph === 'Large';
-  const isCompactGraph = graph === 'Compact';
-
-  return (
-    <>
-      {/* gap-spacing-xl (16 px) between star and content column (Figma) */}
-      <div className="flex items-start gap-spacing-xl w-full">
-        {/* Star icon */}
-        <div className={cn(STAR_WRAPPER, STAR_GREEN)}>
-          <StarIcon className="w-full h-full" />
-        </div>
-
-        {/* Content column — gap-spacing-lg (12 px) between label-row and numbers-row (Figma) */}
-        <div className="flex flex-col gap-spacing-lg flex-1 min-w-0">
-          {/* Label row — gap-spacing-md (8 px) between label and more-vertical (Figma) */}
-          <div className="flex items-center gap-spacing-md w-full">
-            <p className={cn(LABEL, 'flex-1 min-w-0')}>{label}</p>
-            <MoreBtn onClick={onMoreOptions} />
-          </div>
-
-          {/* Value row (+ compact chart) — numbers row gap-spacing-md (Figma) */}
-          <div className={cn('flex items-end gap-spacing-2xl w-full', isCompactGraph && 'flex-1')}>
-            <div className="flex-1 min-w-0">
-              <NumbersRow
-                value={value}
-                trend={trend}
-                trendValue={trendValue}
-                trendLabel={trendLabel}
-                type="Icon Left"
-              />
-            </div>
-            {isCompactGraph && (
-              <Sparkline type="Wavy" trend={chartTrend} className="shrink-0" />
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Full-width large chart */}
-      {isLarge && (
-        <Sparkline type="Wavy" trend={chartTrend} className="w-full h-[64px]" />
-      )}
-    </>
-  );
-}
-
-/**
- * Icon Top layout — 40 px star alone in the heading row; label + value below.
- *
- * ```
- * [★ 40px, flex-1 space]  [⋮]
- * [label]
- * [value, flex-1]  [trend-text inline]
- * ```
- */
-function IconTopBody({
-  label,
-  value,
-  trend,
-  trendValue,
-  trendLabel,
-  graph,
-  chartTrend,
-  onMoreOptions,
-}: {
-  label: string;
-  value: string;
-  trend: MetricTrend;
-  trendValue: string;
-  trendLabel: string;
-  graph: string;
-  chartTrend: 'Positive' | 'Negative';
-  onMoreOptions?: () => void;
-}) {
-  const isLarge = graph === 'Large';
-  const isCompactGraph = graph === 'Compact';
-
-  return (
-    <>
-      {/* Heading row: star (flex-1) + MoreVertical — gap-spacing-md (8 px) (Figma) */}
-      <div className="flex items-start gap-spacing-md w-full">
-        <div className="flex-1">
-          <div className={cn(STAR_WRAPPER, STAR_GREEN)}>
-            <StarIcon className="w-full h-full" />
-          </div>
-        </div>
-        <MoreBtn onClick={onMoreOptions} />
-      </div>
-
-      {/*
-       * Content col: label + numbers row, gap-spacing-lg (12 px) between them (Figma).
-       * Separated from the heading row by the outer CONTENT_GAP (gap-spacing-2xl = 20 px).
-       */}
-      <div className={cn('flex flex-col gap-spacing-lg w-full', isCompactGraph && 'flex-1')}>
-        {/* Label */}
-        <p className={cn(LABEL, 'w-full')}>{label}</p>
-
-        {/* Value row (+ compact chart) — gap-spacing-md between value and trend (Figma) */}
-        <div className={cn('flex items-end gap-spacing-2xl w-full', isCompactGraph && 'flex-1')}>
-          <div className="flex-1 min-w-0">
-            <NumbersRow
-              value={value}
-              trend={trend}
-              trendValue={trendValue}
-              trendLabel={trendLabel}
-              type="Icon Top"
-            />
-          </div>
-          {isCompactGraph && (
-            <Sparkline type="Wavy" trend={chartTrend} className="shrink-0" />
-          )}
-        </div>
-      </div>
-
-      {/* Full-width large chart */}
-      {isLarge && (
-        <Sparkline type="Wavy" trend={chartTrend} className="w-full h-[64px]" />
-      )}
-    </>
-  );
-}
-
-/**
- * Icon Left + Text layout — star and label share the heading row; value (and
- * trend text on its own line) below.
- *
- * ```
- * [★ 40px  label, flex-1]  [⋮]
- * [value]
- * [trendValue trendLabel]              ← separate line for trend=Text
- * ```
- * With compact graph the chart sits beside the value row instead.
- */
-function IconLeftTextBody({
-  label,
-  value,
-  trend,
-  trendValue,
-  trendLabel,
-  graph,
-  chartTrend,
-  onMoreOptions,
-}: {
-  label: string;
-  value: string;
-  trend: MetricTrend;
-  trendValue: string;
-  trendLabel: string;
-  graph: string;
-  chartTrend: 'Positive' | 'Negative';
-  onMoreOptions?: () => void;
-}) {
-  const isLarge = graph === 'Large';
-  const isCompactGraph = graph === 'Compact';
-  const starColor = starColorClass('Icon Left + Text', trend);
-
-  return (
-    <>
-      {/* Heading row: star + label (flex-1) + MoreVertical
-          gap-spacing-md (8 px) between [star+label wrapper] and more-vertical (Figma) */}
-      <div className="flex items-start gap-spacing-md w-full">
-        {/* gap-spacing-md (8 px) between star icon and label (Figma) */}
-        <div className="flex items-center gap-spacing-md flex-1 min-w-0">
-          <div className={cn(STAR_WRAPPER, starColor)}>
-            <StarIcon className="w-full h-full" />
-          </div>
-          <p className={cn(LABEL, 'flex-1 min-w-0')}>{label}</p>
-        </div>
-        <MoreBtn onClick={onMoreOptions} />
-      </div>
-
-      {/* Content col: value + trend — gap-spacing-md (8 px) between them (Figma) */}
-      <div className={cn('flex items-end gap-spacing-2xl w-full', isCompactGraph && 'flex-1')}>
-        <div className="flex-1 min-w-0 flex flex-col gap-spacing-md">
-          {/* Value */}
-          <p className={VALUE}>{value}</p>
-
-          {/*
-           * Trend text is on its own line for "Icon Left + Text" (Figma pattern).
-           * Badge is shown inline in the numbers row for consistency.
-           */}
-          {trend === 'Text' && (
-            <TrendText value={trendValue} label={trendLabel} type="Icon Left + Text" />
-          )}
-          {trend === 'Badge' && <TrendBadge value={trendValue} />}
-        </div>
-
-        {isCompactGraph && (
-          <Sparkline type="Wavy" trend={chartTrend} className="shrink-0" />
-        )}
-      </div>
-
-      {/* Full-width large chart */}
-      {isLarge && (
-        <Sparkline type="Wavy" trend={chartTrend} className="w-full h-[64px]" />
-      )}
-    </>
-  );
-}
-
-// ─── Action bar content ───────────────────────────────────────────────────────
-
-/**
- * Content rendered inside the Header top-bar or Footer bottom-bar.
- *
- * Header bar → "View report" text link (right-aligned, no left content).
- * Footer bar → same text link OR alert-circle + outlined button when there's a graph.
- *
- * Uses the design system `Button` component for all interactive elements.
- */
-function ActionBarContent({
-  type,
-  graph,
-  actionLabel,
-  onAction,
-}: {
-  type: MetricType;
-  graph: string;
-  actionLabel: string;
-  onAction?: () => void;
-}) {
-  // With no graph: plain transparent text link (green or purple)
-  if (graph === 'None') {
-    const isPurple = type === 'Icon Left + Text';
-    return (
-      <>
-        <span />
-        <Button
-          variant="transparent"
-          size="sm"
-          onClick={onAction}
-          // Override the default dark text with the accent colour; px-0 removes
-          // horizontal padding so it looks like a pure text link (Figma pattern).
-          className={cn(
-            'px-0',
-            isPurple
-              ? 'text-[rgba(128,81,159,1)] hover:text-[rgba(100,60,130,1)]'
-              : 'text-[rgba(27,131,84,1)] hover:text-[rgba(22,106,69,1)]',
-          )}
-        >
-          {actionLabel}
-        </Button>
-      </>
-    );
-  }
-
-  // With a graph: outlined secondary-outline button with alert-circle leading icon
-  return (
-    <>
-      <span />
-      <Button
-        variant="secondary-outline"
-        size="sm"
-        onClick={onAction}
-        leadingIcon={<AlertCircleIcon />}
-      >
-        {actionLabel}
-      </Button>
-    </>
-  );
-}
-
-// ─── Metric ───────────────────────────────────────────────────────────────────
-
-export const Metric = forwardRef<HTMLDivElement, MetricProps>(function Metric(
-  {
-    action = 'Default',
-    type = 'Compact',
-    trend = 'None',
-    graph = 'None',
-    chartTrend = 'Positive',
-    label = 'View 24 hours',
-    value = '2,000',
-    trendValue = '100%',
-    trendLabel = 'vs last month',
-    actionLabel = 'View report',
-    onAction,
-    onMoreOptions,
-    className,
-    ...rest
-  },
-  ref,
-) {
-  const hasHeader = action === 'Header';
-  const hasFooter = action === 'Footer';
-  const contentPadding = CONTENT_PADDING[action] ?? CONTENT_PADDING.Default;
-  // Per-type outer gap between sections inside the card (verified from Figma):
-  //   Compact: spacing-lg (12 px)  |  Icon types: spacing-2xl (20 px)
-  const contentGap = CONTENT_GAP[type] ?? CONTENT_GAP.Compact;
-
-  // Shared body props
-  const bodyProps = {
-    label,
-    value,
-    trend,
-    trendValue,
-    trendLabel,
-    graph,
-    chartTrend,
-    onMoreOptions,
-  };
-
-  return (
-    <div
-      ref={ref}
-      data-slot="metric"
-      data-action={action}
-      data-type={type}
-      data-trend={trend}
-      data-graph={graph}
-      className={cn(CARD, className)}
-      {...rest}
-    >
-      {/* ── Header top-bar ────────────────────────────────────────────────── */}
-      {hasHeader && (
-        <div className={HEADER_BAR}>
-          <ActionBarContent
-
-            type={type}
-            graph={graph}
-            actionLabel={actionLabel}
-            onAction={onAction}
-          />
-        </div>
-      )}
-
-      {/* ── Main content area ─────────────────────────────────────────────── */}
-      <div className={cn(contentPadding, 'flex flex-col', contentGap, 'w-full')}>
-        {type === 'Compact' && <CompactBody {...bodyProps} />}
-        {type === 'Icon Left' && <IconLeftBody {...bodyProps} />}
-        {type === 'Icon Top' && <IconTopBody {...bodyProps} />}
-        {type === 'Icon Left + Text' && <IconLeftTextBody {...bodyProps} />}
-      </div>
-
-      {/* ── Footer bottom-bar ─────────────────────────────────────────────── */}
-      {hasFooter && (
-        <div className={FOOTER_BAR}>
-          <ActionBarContent
-
-            type={type}
-            graph={graph}
-            actionLabel={actionLabel}
-            onAction={onAction}
-          />
-        </div>
-      )}
-    </div>
-  );
-});

package/src/components/Metric/Metric.types.ts

@@ -1,77 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import type { SparklineTrend } from '../Sparkline';
-
-export type MetricAction = 'Default' | 'Footer' | 'Header';
-export type MetricType = 'Compact' | 'Icon Left' | 'Icon Top' | 'Icon Left + Text';
-export type MetricTrend = 'None' | 'Badge' | 'Text';
-export type MetricGraph = 'None' | 'Compact' | 'Large';
-
-export interface MetricProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Card action layout.
-   * - Default: no action bar; MoreVertical (⋮) lives in the label row only.
-   * - Header:  "View report" link in a top bar (border-b), content below.
-   * - Footer:  Content at top, then "View report" link / outlined button in a bottom bar (border-t).
-   * @default 'Default'
-   */
-  action?: MetricAction;
-
-  /**
-   * Icon and layout variant.
-   * - Compact:          No icon. Label row + value row.
-   * - Icon Left:        40 px star to the start; label + value stacked in the adjacent column.
-   * - Icon Top:         40 px star alone in the heading row; label then value below.
-   * - Icon Left + Text: Star + label share the heading row; value + trend below.
-   * @default 'Compact'
-   */
-  type?: MetricType;
-
-  /**
-   * Trend indicator variant shown next to (or below) the value.
-   * - None:  No indicator.
-   * - Badge: Bordered pill with a green dot and `trendValue` text (e.g. "100%").
-   * - Text:  Coloured `trendValue` followed by muted `trendLabel` (e.g. "100% vs last month").
-   * @default 'None'
-   */
-  trend?: MetricTrend;
-
-  /**
-   * Sparkline graph variant.
-   * - None:    No chart.
-   * - Compact: Fixed 128×64 px sparkline aligned to the end of the value row.
-   * - Large:   Full-width sparkline below the content.
-   * @default 'None'
-   */
-  graph?: MetricGraph;
-
-  /** Trend direction for the embedded sparkline. @default 'Positive' */
-  chartTrend?: SparklineTrend;
-
-  /** Metric label / title text. */
-  label?: string;
-
-  /** Main metric value (e.g. "2,000"). */
-  value?: string;
-
-  /**
-   * Percentage or indicator value used by both `trend="Badge"` and `trend="Text"`.
-   * - Badge: shown as the text inside the pill (e.g. "100%").
-   * - Text:  shown in accent colour before `trendLabel` (e.g. "100%").
-   */
-  trendValue?: string;
-
-  /**
-   * Secondary label appended after `trendValue` when `trend="Text"`.
-   * (e.g. "vs last month")
-   */
-  trendLabel?: string;
-
-  /** Action button label shown in header / footer bars. @default "View report" */
-  actionLabel?: string;
-
-  /** Called when the action button is clicked. */
-  onAction?: () => void;
-
-  /** Called when the MoreVertical (⋮) icon is clicked. */
-  onMoreOptions?: () => void;
-}