@altruist03/ui 0.0.0-stage → 0.2.0

package/src/components/ReportCard/ReportCard.tsx

@@ -0,0 +1,183 @@
+import React from 'react';
+import Icon from '@mui/material/Icon';
+import type { ReportCardProps } from './ReportCard.types';
+import { getReportCardTokensFromResolved } from '../../tokens';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+
+export const ReportCard = ({
+  title,
+  icon,
+  items,
+  onItemClick,
+  highlightedItemId,
+  style,
+  className,
+}: ReportCardProps) => {
+  const resolvedTokens = useTokens();
+  const t = getReportCardTokensFromResolved(resolvedTokens);
+  const renderedIcon =
+    typeof icon === 'string' ?
+      <Icon
+        style={{
+          color: t.headerColor,
+          fontSize: 16,
+          display: 'block',
+        }}
+      >
+        {icon}
+      </Icon>
+    : icon;
+
+  return (
+    <div
+      className={className}
+      style={{
+        backgroundColor: t.bodyBackground,
+        borderRadius: t.borderRadius,
+        overflow: 'hidden',
+        boxShadow: t.shadow,
+        ...style,
+      }}
+    >
+      {/* Header */}
+      <div
+        style={{
+          backgroundColor: t.headerBackground,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10,
+          padding: '14px 18px',
+        }}
+      >
+        <span
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: t.headerColor,
+            background: `color-mix(in srgb, ${t.headerColor} 15%, transparent)`,
+            padding: 4,
+            borderRadius: 6,
+            fontSize: 16,
+            lineHeight: 1,
+          }}
+        >
+          {renderedIcon}
+        </span>
+        <span
+          style={{
+            fontSize: 15,
+            fontWeight: 600,
+            color: t.headerColor,
+            letterSpacing: 0.2,
+          }}
+        >
+          {title}
+        </span>
+      </div>
+
+      {/* Body */}
+      <div style={{ display: 'flex', padding: '16px 18px' }}>
+        {/* Left vertical divider */}
+        <div
+          style={{
+            width: 2,
+            backgroundColor: t.dividerColor,
+            borderRadius: 2,
+            flexShrink: 0,
+            marginRight: 16,
+            alignSelf: 'stretch',
+            minHeight: '100%',
+          }}
+        />
+        {/* Items */}
+        <ul
+          style={{
+            listStyle: 'none',
+            margin: 0,
+            padding: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 12,
+          }}
+        >
+          {items.map((item) => (
+            <ReportCardItem
+              key={item.id}
+              label={item.label}
+              bulletColor={t.bulletColor}
+              itemColor={t.itemColor}
+              itemHoverColor={t.itemHoverColor}
+              highlighted={
+                highlightedItemId != null && String(item.id) === String(highlightedItemId)
+              }
+              onClick={onItemClick ? () => onItemClick(item) : undefined}
+            />
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+function ReportCardItem({
+  label,
+  bulletColor,
+  itemColor,
+  itemHoverColor,
+  highlighted,
+  onClick,
+}: {
+  label: string;
+  bulletColor: string;
+  itemColor: string;
+  itemHoverColor: string;
+  highlighted?: boolean;
+  onClick?: () => void;
+}) {
+  const [hovered, setHovered] = React.useState(false);
+
+  return (
+    <li
+      onClick={onClick}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+        cursor: onClick ? 'pointer' : 'default',
+        borderRadius: 6,
+        padding: highlighted ? '2px 6px' : '2px 6px',
+        margin: highlighted ? '0 -6px' : '0 -6px',
+        backgroundColor: highlighted ? 'rgba(82, 118, 10, 0.18)' : 'transparent',
+        transition: 'background-color 0.4s',
+      }}
+    >
+      <span
+        style={{
+          width: 8,
+          height: 8,
+          borderRadius: '50%',
+          backgroundColor: bulletColor,
+          flexShrink: 0,
+          display: 'inline-block',
+        }}
+      />
+      <span
+        style={{
+          fontSize: 13.5,
+          color:
+            highlighted ? '#52760A'
+            : hovered ? itemHoverColor
+            : itemColor,
+          lineHeight: 1.4,
+          transition: 'color 0.15s',
+          fontWeight: highlighted ? 600 : undefined,
+        }}
+      >
+        {label}
+      </span>
+    </li>
+  );
+}

package/src/components/ReportCard/ReportCard.types.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+
+export interface ReportCardItem {
+  id: string;
+  label: string;
+  [key: string]: unknown;
+}
+
+export interface ReportCardProps {
+  title: string;
+  icon: React.ReactNode;
+  items: ReportCardItem[];
+  onItemClick?: (item: ReportCardItem) => void;
+  highlightedItemId?: string | null;
+  style?: React.CSSProperties;
+  className?: string;
+}

package/src/components/SectionIcon/SectionIcon.tsx

@@ -0,0 +1,87 @@
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  type CSSProperties,
+  type ReactElement,
+} from 'react';
+import type { SectionIconProps, SectionIconSize, SectionIconVariant } from './SectionIcon.types';
+
+const SIZE_TOKENS: Record<SectionIconSize, { box: number; icon: number; radius: number }> = {
+  sm: { box: 24, icon: 14, radius: 6 },
+  md: { box: 32, icon: 16, radius: 8 },
+  lg: { box: 40, icon: 20, radius: 10 },
+  xl: { box: 56, icon: 28, radius: 14 },
+};
+
+const VARIANT_TOKENS: Record<SectionIconVariant, { background: string; color: string }> = {
+  green: { background: '#E6F4E0', color: '#52760A' },
+  blue: { background: '#E8EEFF', color: '#3B5BD9' },
+  grey: { background: '#F1F2F5', color: '#4F5560' },
+  red: { background: '#FCE6E6', color: '#C53030' },
+  yellow: { background: '#FFF4D6', color: '#B27800' },
+};
+
+/**
+ * SectionIcon
+ *
+ * A small decorative icon tile (rounded square) used in section headers
+ * (e.g. "View Receipt Report" header on the fuel page). Renders any
+ * `ReactNode` icon inside a coloured background, with the icon coloured
+ * to match the chosen variant.
+ */
+export function SectionIcon({
+  icon,
+  variant = 'green',
+  size = 'md',
+  backgroundColor,
+  color,
+  borderRadius,
+  ariaLabel,
+  className,
+  style,
+}: SectionIconProps) {
+  const sizeTokens = SIZE_TOKENS[size];
+  const variantTokens = VARIANT_TOKENS[variant];
+  const resolvedBackground = backgroundColor ?? variantTokens.background;
+  const resolvedColor = color ?? variantTokens.color;
+  const resolvedRadius = borderRadius ?? sizeTokens.radius;
+
+  const containerStyle: CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: sizeTokens.box,
+    height: sizeTokens.box,
+    minWidth: sizeTokens.box,
+    borderRadius: resolvedRadius,
+    background: resolvedBackground,
+    color: resolvedColor,
+    ...style,
+  };
+
+  const renderIcon = () => {
+    if (!isValidElement(icon)) return icon;
+    const onlyChild = Children.only(icon) as ReactElement<{
+      sx?: Record<string, unknown>;
+      style?: CSSProperties;
+    }>;
+    const existingSx = (onlyChild.props.sx ?? {}) as Record<string, unknown>;
+    return cloneElement(onlyChild, {
+      sx: { fontSize: sizeTokens.icon, ...existingSx },
+      style: { color: resolvedColor, ...(onlyChild.props.style ?? {}) },
+    });
+  };
+
+  return (
+    <span
+      role={ariaLabel ? 'img' : undefined}
+      aria-label={ariaLabel}
+      aria-hidden={ariaLabel ? undefined : true}
+      className={className}
+      style={containerStyle}
+    >
+      {renderIcon()}
+    </span>
+  );
+}

package/src/components/SectionIcon/SectionIcon.types.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+export type SectionIconVariant = 'green' | 'blue' | 'grey' | 'red' | 'yellow';
+export type SectionIconSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface SectionIconProps {
+  /** Icon node to render inside the tile (e.g. an MUI icon). */
+  icon: ReactNode;
+  /** Visual variant — controls background and icon colour. Defaults to "green". */
+  variant?: SectionIconVariant;
+  /** Tile size — controls box and icon size. Defaults to "md". */
+  size?: SectionIconSize;
+  /** Override the background colour (wins over variant). */
+  backgroundColor?: string;
+  /** Override the icon colour (wins over variant). */
+  color?: string;
+  /** Optional radius override (defaults to design-system md radius). */
+  borderRadius?: number | string;
+  /** Accessibility label; when omitted, the tile is decorative (aria-hidden). */
+  ariaLabel?: string;
+  className?: string;
+  style?: CSSProperties;
+}

package/src/components/SegmentedInputField/SegmentedInputField.stories.tsx

@@ -0,0 +1,165 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { SegmentedInputField } from "./SegmentedInputField";
+import type { SegmentedInputFieldProps } from "./SegmentedInputField.types";
+
+const meta: Meta<typeof SegmentedInputField> = {
+  title: "Design System/SegmentedInputField",
+  component: SegmentedInputField,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "24px", maxWidth: "780px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    values: Array(6).fill(""),
+    type: "text",
+    inputMode: "numeric",
+    autoComplete: "one-time-code",
+    size: "lg",
+    disabled: false,
+    error: false,
+    maxLength: 1,
+    getAriaLabel: (index) => `Segment ${index + 1}`,
+    sanitizeSegment: (raw) => raw.replace(/[^0-9]/g, "").slice(0, 1),
+    validateSegment: (nextValue) => nextValue === "" || /^[0-9]$/.test(nextValue),
+    onPasteValue: (pasted, length) => {
+      const numbers = pasted.replace(/[^0-9]/g, "");
+      return Array(length)
+        .fill("")
+        .map((_, idx) => numbers[idx] ?? "");
+    },
+  } as SegmentedInputFieldProps,
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: ["sm", "md", "lg"],
+    },
+    disabled: { control: { type: "boolean" } },
+    error: { control: { type: "boolean" } },
+    type: { control: { type: "text" } },
+    inputMode: { control: { type: "text" } },
+    autoComplete: { control: { type: "text" } },
+    maxLength: { control: { type: "number" } },
+    showSeparator: { control: { type: "boolean" } },
+    values: { control: { type: "object" } },
+    onValuesChange: { table: { disable: true } },
+    separator: { table: { disable: true } },
+    getAriaLabel: { table: { disable: true } },
+    sanitizeSegment: { table: { disable: true } },
+    validateSegment: { table: { disable: true } },
+    onPasteValue: { table: { disable: true } },
+    isSegmentComplete: { table: { disable: true } },
+    onSegmentKeyDown: { table: { disable: true } },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SegmentedInputField>;
+
+const Controlled = (props: SegmentedInputFieldProps) => {
+  const [values, setValues] = useState<string[]>(props.values);
+
+  React.useEffect(() => {
+    setValues(props.values);
+  }, [props.values]);
+
+  return <SegmentedInputField {...props} values={values} onValuesChange={setValues} />;
+};
+
+export const Playground: Story = {
+  render: (args) => <Controlled {...args} />,
+};
+
+const ShowcaseComponent = () => {
+  const [otp, setOtp] = useState(Array(6).fill(""));
+  const [ip, setIp] = useState(["", "", "", ""]);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <div>
+        <div style={{ marginBottom: "8px", fontWeight: 600 }}>
+          OTP (6 digits)
+        </div>
+        <SegmentedInputField
+          values={otp}
+          onValuesChange={setOtp}
+          type="password"
+          inputMode="numeric"
+          maxLength={1}
+          autoComplete="one-time-code"
+          getAriaLabel={(i) => `OTP digit ${i + 1}`}
+          sanitizeSegment={(raw) => raw.replace(/[^0-9]/g, "").slice(0, 1)}
+          validateSegment={(v) => v === "" || /^[0-9]$/.test(v)}
+          onPasteValue={(pasted, length) => {
+            const numbers = pasted.replace(/[^0-9]/g, "");
+            return Array(length)
+              .fill("")
+              .map((_, idx) => numbers[idx] ?? "");
+          }}
+        />
+      </div>
+
+      <div>
+        <div style={{ marginBottom: "8px", fontWeight: 600 }}>
+          IPv4 pattern (supports "*" per octet)
+        </div>
+        <SegmentedInputField
+          values={ip}
+          onValuesChange={setIp}
+          inputMode="numeric"
+          maxLength={3}
+          autoComplete="off"
+          showSeparator
+          separator={<span className="spanMargin m-0">.</span>}
+          getAriaLabel={(i) => `IP part ${i + 1}`}
+          sanitizeSegment={(raw) => {
+            if (raw === "*") return raw;
+            return raw.replace(/[^0-9]/g, "").slice(0, 3);
+          }}
+          validateSegment={(v) => {
+            if (v === "" || v === "*") return true;
+            const n = Number(v);
+            return Number.isInteger(n) && n >= 0 && n <= 255;
+          }}
+          isSegmentComplete={(v) => v === "*" || v.length === 3}
+        />
+      </div>
+
+      <div>
+        <div style={{ marginBottom: "8px", fontWeight: 600 }}>Error</div>
+        <SegmentedInputField
+          values={otp}
+          onValuesChange={setOtp}
+          error
+          inputMode="numeric"
+          maxLength={1}
+          getAriaLabel={(i) => `OTP digit ${i + 1}`}
+          sanitizeSegment={(raw) => raw.replace(/[^0-9]/g, "").slice(0, 1)}
+          validateSegment={(v) => v === "" || /^[0-9]$/.test(v)}
+        />
+      </div>
+
+      <div>
+        <div style={{ marginBottom: "8px", fontWeight: 600 }}>Disabled</div>
+        <SegmentedInputField
+          values={otp}
+          onValuesChange={setOtp}
+          disabled
+          inputMode="numeric"
+          maxLength={1}
+          getAriaLabel={(i) => `OTP digit ${i + 1}`}
+          sanitizeSegment={(raw) => raw.replace(/[^0-9]/g, "").slice(0, 1)}
+          validateSegment={(v) => v === "" || /^[0-9]$/.test(v)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const Showcase: Story = {
+  render: () => <ShowcaseComponent />,
+};

package/src/components/SegmentedInputField/SegmentedInputField.tsx

@@ -0,0 +1,174 @@
+import React, { useRef } from "react";
+import { useTokens } from "../../ThemeProvider/ThemeContext";
+import { TextField } from "../TextField/TextField";
+import type {
+  SegmentedInputFieldProps,
+  SegmentedInputChangeContext,
+} from "./SegmentedInputField.types";
+
+export const SegmentedInputField = ({
+  values,
+  onValuesChange,
+  disabled = false,
+  error = false,
+  type = "text",
+  size = "lg",
+  className,
+  containerClassName,
+  inputClassName = "otp-container-size",
+  inputMode,
+  autoComplete,
+  maxLength = 1,
+  separator = null,
+  showSeparator = false,
+  getAriaLabel,
+  sanitizeSegment = (v) => v,
+  validateSegment = () => true,
+  onSegmentKeyDown,
+  onPasteValue,
+  isSegmentComplete,
+}: SegmentedInputFieldProps) => {
+  const inputRefs = useRef<
+    Array<HTMLInputElement | HTMLTextAreaElement | null>
+  >([]);
+  const tokens = useTokens();
+
+  const focusInput = (index: number) => {
+    const target = inputRefs.current[index];
+    if (target && typeof target.focus === "function") target.focus();
+  };
+
+  // Token-driven segment width so layout matches design system sizing
+  // across responsive breakpoints and avoids relying on legacy CSS.
+  const segmentWidth =
+    tokens?.semantic?.size?.[size]?.otpWidth ??
+    tokens?.semantic?.field?.otpWidth;
+
+  const setValueAt = (index: number, rawValue: string) => {
+    const current = [...values];
+    const sanitized = sanitizeSegment(rawValue, index, current);
+    const next = [...current];
+    next[index] = sanitized;
+    const context: SegmentedInputChangeContext = {
+      previousValues: current,
+      nextValues: next,
+    };
+    if (!validateSegment(sanitized, index, context)) return;
+    onValuesChange(next);
+    const complete =
+      isSegmentComplete?.(sanitized, index, next) ??
+      (Boolean(sanitized) &&
+        (maxLength ? sanitized.length >= maxLength : true));
+    if (complete && index < values.length - 1) focusInput(index + 1);
+  };
+
+  const handleKeyDown = (
+    index: number,
+    e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const current = [...values];
+    const context: SegmentedInputChangeContext = {
+      previousValues: current,
+      nextValues: current,
+    };
+    onSegmentKeyDown?.(index, e, context);
+    if (e.defaultPrevented) return;
+
+    if (e.key === "Backspace") {
+      e.preventDefault();
+      const next = [...current];
+      if (next[index]) {
+        next[index] = "";
+      } else if (index > 0) {
+        next[index - 1] = "";
+        focusInput(index - 1);
+      }
+      onValuesChange(next);
+      return;
+    }
+
+    if (e.key === "ArrowLeft" && index > 0) {
+      e.preventDefault();
+      focusInput(index - 1);
+      return;
+    }
+
+    if (e.key === "ArrowRight" && index < values.length - 1) {
+      e.preventDefault();
+      focusInput(index + 1);
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
+    if (!onPasteValue) return;
+    e.preventDefault();
+    const rawText = e.clipboardData?.getData("text") ?? "";
+    const next = onPasteValue(rawText, values.length);
+    if (!Array.isArray(next) || next.length !== values.length) return;
+    onValuesChange(next);
+    let lastFilled = 0;
+    for (let i = next.length - 1; i >= 0; i -= 1) {
+      if (next[i]) {
+        lastFilled = i;
+        break;
+      }
+    }
+    focusInput(lastFilled);
+  };
+
+  return (
+    <div
+      className={[containerClassName, className].filter(Boolean).join(" ")}
+      onPaste={handlePaste}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: tokens.foundation.spacing["2"],
+      }}
+    >
+      {values.map((value, index) => (
+        <React.Fragment key={index}>
+          <div
+            className={inputClassName}
+            style={
+              segmentWidth
+                ? {
+                    width: segmentWidth,
+                    minWidth: segmentWidth,
+                    flex: "0 0 auto",
+                  }
+                : undefined
+            }
+          >
+            <TextField
+              value={value}
+              onChange={(e) => setValueAt(index, e.target.value)}
+              type={type}
+              fullWidth
+              size={size}
+              label=""
+              disabled={disabled}
+              error={error}
+              inputRef={(el) => {
+                inputRefs.current[index] = el;
+              }}
+              autoComplete={autoComplete}
+              inputProps={{
+                inputMode,
+                maxLength,
+                onKeyDown: (
+                  e: React.KeyboardEvent<
+                    HTMLInputElement | HTMLTextAreaElement
+                  >,
+                ) => handleKeyDown(index, e),
+                "aria-label": getAriaLabel?.(index),
+              }}
+            />
+          </div>
+          {showSeparator && index < values.length - 1 ? separator : null}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};

package/src/components/SegmentedInputField/SegmentedInputField.types.ts

@@ -0,0 +1,51 @@
+import type React from "react";
+import type { TextFieldSize } from "../TextField/TextField.types";
+
+export interface SegmentedInputChangeContext {
+  previousValues: string[];
+  nextValues: string[];
+}
+
+export interface SegmentedInputFieldProps {
+  values: string[];
+  onValuesChange: (nextValues: string[]) => void;
+  disabled?: boolean;
+  /** When true, shows error styling on each segment input. */
+  error?: boolean;
+  type?: React.InputHTMLAttributes<HTMLInputElement>["type"];
+  size?: TextFieldSize;
+  className?: string;
+  containerClassName?: string;
+  inputClassName?: string;
+  inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
+  autoComplete?: string;
+  maxLength?: number;
+  separator?: React.ReactNode;
+  showSeparator?: boolean;
+  getAriaLabel?: (index: number) => string;
+  sanitizeSegment?: (
+    rawValue: string,
+    index: number,
+    values: string[],
+  ) => string;
+  validateSegment?: (
+    nextSegmentValue: string,
+    index: number,
+    context: SegmentedInputChangeContext,
+  ) => boolean;
+  onSegmentKeyDown?: (
+    index: number,
+    event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
+    context: SegmentedInputChangeContext,
+  ) => void;
+  onPasteValue?: (pastedText: string, length: number) => string[];
+  /**
+   * Determines when to auto-advance focus to the next segment.
+   * Defaults to "segment is non-empty AND reaches maxLength (if provided)".
+   */
+  isSegmentComplete?: (
+    segmentValue: string,
+    index: number,
+    values: string[],
+  ) => boolean;
+}