Readout list item

import {
  ObcTextboxFontWeight,
  ReadoutDataQuality,
  ReadoutListItem,
  ReadoutSize,
  ReadoutValueType,
} from "@bosunkit/instruments";
import { Anchor, Compass, Gauge, MapPin, Navigation, Target, Waves, Wind } from "lucide-react";
import { useEffect, useState } from "react";
import type { CSSProperties, Dispatch, ReactElement, SetStateAction } from "react";

export const description: string =
  "Althea's passage rows on a one-second feed, aligned by hand with space reservers: a clickable autopilot row whose setpoint the crew is dialing, advised speed, hinted zeros, degrees beside a degree spacer, low-integrity wind, an engine that is off, text rows and a label-only anchor row; tap a row to see what it is for.";

/** Shared widths so the standalone rows line up without a list. */
const VALUE_RESERVER: string = "000.0";
const UNIT_RESERVER: string = "nmi";
const SOURCE_RESERVER: string = "Echosounder";

const ROWS_STYLE: CSSProperties = {
  display: "grid",
  gap: 2,
  padding: 12,
  borderRadius: 10,
  background: "var(--container-section-color)",
  width: "100%",
  maxWidth: 560,
};
const NOTE_STYLE: CSSProperties = { margin: "8px 4px 0", fontSize: 12, color: "var(--element-neutral-color)" };

type RowId = "autopilot" | "sog" | "depth" | "wind" | "engine";

const ROW_NOTES: Record<RowId, string> = {
  autopilot:
    "Autopilot: the crew is turning the knob toward 064° for the Sóller lighthouse; the setpoint shows its focus state.",
  sog: "Speed over ground against the 6.5 kn advised for an 18:00 arrival in Port de Sóller.",
  depth: "Depth from the echosounder; the forward sonar is the second source.",
  wind: "True wind from the masthead unit, marked low integrity until it is recalibrated.",
  engine: "The engine is stopped under sail; its readings return when it starts.",
};

export default function Showcase(): ReactElement {
  const [step, setStep]: [number, Dispatch<SetStateAction<number>>] = useState<number>(0);
  const [selected, setSelected]: [RowId, Dispatch<SetStateAction<RowId>>] = useState<RowId>("autopilot");

  useEffect((): (() => void) => {
    const timer: number = window.setInterval((): void => {
      setStep((previous: number): number => previous + 1);
    }, 1000);
    return (): void => {
      window.clearInterval(timer);
    };
  }, []);

  const phase: number = step % 20;
  const dialing: boolean = phase < 8;
  const headingSetpoint: number = dialing ? 54 + phase * 1.25 : 64;
  const heading: number = Math.min(headingSetpoint, 52 + phase * 0.9);
  const speed: number = 6.1 + 0.3 * Math.sin(step / 3);
  const distanceToGo: number = 14.2 - phase * 0.03;
  const depth: number = 42 + 6 * Math.sin(step / 5);
  const trueWind: number = 17 + 2 * Math.sin(step / 2);

  function select(id: RowId): () => void {
    return (): void => {
      setSelected(id);
    };
  }

  return (
    <div style={ROWS_STYLE}>
      <ReadoutListItem
        label="Autopilot"
        hasLeadingIcon
        leadingIcon={<Navigation size={16} aria-hidden />}
        value={heading}
        hasDegree
        maxDigits={3}
        hasSetpoint
        setpoint={headingSetpoint}
        setpointIcon={<Compass size={14} aria-hidden />}
        setpointOptions={{ touching: dialing, hintedZeros: true, spaceReserver: VALUE_RESERVER }}
        valueOptions={{ weight: ObcTextboxFontWeight.bold, hintedZeros: true, spaceReserver: VALUE_RESERVER }}
        unitOptions={{ spaceReserver: UNIT_RESERVER }}
        srcOptions={{ spaceReserver: SOURCE_RESERVER }}
        src="Fluxgate"
        size={ReadoutSize.medium}
        clickable
        onClick={select("autopilot")}
      />
      <ReadoutListItem
        label="SOG"
        hasLeadingIcon
        leadingIcon={<Gauge size={16} aria-hidden />}
        value={speed}
        fractionDigits={1}
        maxDigits={3}
        unit="kn"
        src="GPS"
        hasAdvice
        advice={6.5}
        adviceIcon={<Target size={14} aria-hidden />}
        adviceOptions={{ spaceReserver: VALUE_RESERVER }}
        valueOptions={{ spaceReserver: VALUE_RESERVER }}
        unitOptions={{ spaceReserver: UNIT_RESERVER }}
        srcOptions={{ spaceReserver: SOURCE_RESERVER }}
        hasDegreeSpacer
        clickable
        onClick={select("sog")}
      />
      <ReadoutListItem
        label="Distance to go"
        hasLeadingIcon
        leadingIcon={<MapPin size={16} aria-hidden />}
        value={distanceToGo}
        fractionDigits={1}
        maxDigits={3}
        unit="nmi"
        src="Route"
        valueOptions={{ weight: ObcTextboxFontWeight.semibold, spaceReserver: VALUE_RESERVER }}
        unitOptions={{ spaceReserver: UNIT_RESERVER }}
        srcOptions={{ spaceReserver: SOURCE_RESERVER }}
        hasDegreeSpacer
      />
      <ReadoutListItem
        label="Depth"
        hasLeadingIcon
        leadingIcon={<Waves size={16} aria-hidden />}
        value={depth}
        fractionDigits={1}
        maxDigits={3}
        unit="m"
        src="Echosounder"
        valueOptions={{ spaceReserver: VALUE_RESERVER, hintedZeros: true }}
        unitOptions={{ spaceReserver: UNIT_RESERVER }}
        srcOptions={{ spaceReserver: SOURCE_RESERVER }}
        hasDegreeSpacer
        clickable
        onClick={select("depth")}
      />
      <ReadoutListItem
        label="TWS"
        hasLeadingIcon
        leadingIcon={<Wind size={16} aria-hidden />}
        value={trueWind}
        fractionDigits={1}
        maxDigits={3}
        unit="kn"
        src="Masthead"
        dataQuality={ReadoutDataQuality.lowIntegrity}
        valueOptions={{ spaceReserver: VALUE_RESERVER }}
        unitOptions={{ spaceReserver: UNIT_RESERVER }}
        srcOptions={{ spaceReserver: SOURCE_RESERVER, dataQuality: ReadoutDataQuality.lowIntegrity }}
        hasDegreeSpacer
        clickable
        onClick={select("wind")}
      />
      <ReadoutListItem
        label="Engine"
        value={0}
        off
        offText="Stopped"
        unit="rpm"
        src="J1939"
        valueOptions={{ spaceReserver: VALUE_RESERVER }}
        unitOptions={{ spaceReserver: UNIT_RESERVER }}
        srcOptions={{ spaceReserver: SOURCE_RESERVER }}
        clickable
        onClick={select("engine")}
      />
      <ReadoutListItem
        label="Next waypoint"
        value="Cap de Formentor"
        valueType={ReadoutValueType.text}
        src="Route"
        srcOptions={{ spaceReserver: SOURCE_RESERVER }}
      />
      <ReadoutListItem
        label="Sea temp"
        value={null}
        unit="°C"
        src="Transducer"
        dataQuality={ReadoutDataQuality.invalid}
        valueOptions={{ spaceReserver: VALUE_RESERVER }}
        unitOptions={{ spaceReserver: UNIT_RESERVER }}
        srcOptions={{ spaceReserver: SOURCE_RESERVER }}
      />
      <ReadoutListItem
        label="Anchor alarm off until Sóller"
        hasLeadingIcon
        leadingIcon={<Anchor size={16} aria-hidden />}
        hasValue={false}
      />
      <p style={NOTE_STYLE}>{ROW_NOTES[selected]}</p>
    </div>
  );
}

import { ReadoutListItem } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string = "A row with a label, a value to one decimal, a unit and the source of the reading.";

export default function WithUnitAndSource(): ReactElement {
  return (
    <ReadoutListItem label="Depth" value={23.456} fractionDigits={1} unit="m" src="Sonar" />
  );
}

import { ReadoutListItem } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string = "A row with a value of 20 and a setpoint of 30 beside it.";

export default function WithSetpoint(): ReactElement {
  return (
    <ReadoutListItem value={20} hasSetpoint setpoint={30} />
  );
}