@lotics/ui 27.17.1 → 28.0.0

package/src/pipeline.tsx

@@ -1,231 +0,0 @@
-import { type ReactNode } from "react";
-import { View } from "react-native";
-import { Text } from "./text";
-import { Stepper, Step, type StepPositional, type StepStatus } from "./stepper";
-
-export interface PipelineProps {
-  children?: ReactNode;
-  /** Accent for reached nodes + the spine. Defaults to `Stepper`'s neutral ink. */
-  color?: string;
-  accessibilityLabel?: string;
-}
-
-/**
- * A pipeline an item WALKS — ordered milestones where each one carries its own
- * controls: the fields that milestone owns, the conditions attached to it, and
- * the one act that leaves it.
- *
- * **Pick this over `TaskList` when the rows are STAGES, not work items.** A task
- * list models N things you tick in any order, each row structurally identical.
- * A pipeline models ONE thing moving through N positions, where the position
- * decides what you can see and do — a dossier at "awaiting review" offers approve
- * and return; the same dossier two stages on offers neither and shows a portal
- * account instead. Rendering that as a checklist forces every row to carry every
- * control, and the reader has to scan all of them to find the one that is theirs.
- *
- * **And over a bare `Stepper` when the stages need bodies.** `Stepper` renders
- * position — done, current, upcoming on a spine. This adds the anatomy that turns
- * position into a workspace: a title that reads by status, a meta line, per-stage
- * fields, notes and actions.
- *
- * The rules the anatomy encodes:
- * - **Only the current stage should carry an act.** A control on an unreached
- *   stage invites acting out of order; on a passed one it re-offers something
- *   already done. The component does not enforce this — the caller decides what
- *   each stage renders — but the styling assumes it.
- * - **A condition belongs to its stage.** Something being wrong at stage 2 is a
- *   fact about stage 2, so `PipelineNote` sits inside it rather than floating
- *   above the run where it reads as "something is wrong with this record".
- * - **A passed stage stays correctable.** Whatever a stage owns should remain
- *   editable behind you, or the only way to fix a mis-entry is direct table
- *   access.
- *
- * A stage's values stack UNDER its title by default (`PipelineField`), which
- * costs two lines each. On a ladder long enough that this pushes the run past a
- * screenful, `trailing` puts one value on the title's own row instead.
- *
- * ```tsx
- * <Pipeline>
- *   <PipelineStage status="done" title="Submitted">
- *     <PipelineField label="Date"><InlineDatePicker … /></PipelineField>
- *   </PipelineStage>
- *   <PipelineStage status="done" title="Received" trailing={<InlineDatePicker … />} />
- *   <PipelineStage status="current" title="In review" meta="Waiting 3d, Ops">
- *     <PipelineNote tone="warning">Sent back — missing payslips.</PipelineNote>
- *     <PipelineActions>
- *       <Button title="Approve" color="primary" />
- *       <Button title="Return" color="danger-secondary" />
- *     </PipelineActions>
- *   </PipelineStage>
- *   <PipelineStage status="upcoming" title="Filed" />
- * </Pipeline>
- * ```
- */
-export function Pipeline({ children, color, accessibilityLabel }: PipelineProps) {
-  return (
-    <Stepper orientation="vertical" color={color} accessibilityLabel={accessibilityLabel}>
-      {children}
-    </Stepper>
-  );
-}
-
-export interface PipelineStageProps extends StepPositional {
-  status: StepStatus;
-  /** The milestone's name — the one thing every stage shows. */
-  title: string;
-  /** A muted line under the title: how long it has sat here, whose desk it is on.
-   *  Prose, not a value the reader sets. */
-  meta?: string;
-  /**
-   * ONE value the stage owns, on the TITLE's row rather than stacked under it —
-   * the date a milestone was reached, its reference number. Use it when the
-   * ladder is long enough that a `PipelineField` per stage costs two lines each
-   * and pushes the whole run past a screenful; use `PipelineField` when the value
-   * needs a label to be read, or when there is more than one.
-   *
-   * The row is a TEXT line and the value sits on the title's own baseline, so a
-   * `DateStamp` beside a stage name reads as one line about one milestone. Put a
-   * value here, never a control: an editor drags the row to a control band, the
-   * marker follows it, and the ladder stops being something you scan. An ACT
-   * belongs in `PipelineActions`.
-   */
-  trailing?: ReactNode;
-
-  /** The stage's own body — `PipelineNote`, `PipelineField`, `PipelineActions`,
-   *  or anything else. A stage with no body renders as its title alone, which is
-   *  what an unreached stage should be. */
-  children?: ReactNode;
-  /**
-   * Make the stage's MARKER the completion control — the node becomes a
-   * pressable ring instead of a status dot. Reach for it when the ladder is a
-   * worklist the reader ticks off, not just a readout.
-   *
-   * Without it, a caller who wants a tickable ladder puts a checkbox in
-   * `trailing`, which lands a second completion affordance beside a ring that
-   * already looks like one and reads as two controls for one fact.
-   */
-  onToggle?: (done: boolean) => void;
-  accessibilityLabel?: string;
-}
-
-/** One milestone. Every title reads the same — full ink, medium — because the
- *  MARKER carries the status: filled behind, empty ahead. Emphasising one name
- *  encoded that a second time, and muting the passed ones read as "these matter
- *  less" about the part of the record that already happened.
- *
- *  The stage BODY is deliberately not a press target. `Step` can be (a wizard
- *  whose steps navigate), but a pipeline stage is a workspace, not a destination
- *  — its body already holds the controls, and a press target wrapping them would
- *  swallow their taps. `onToggle` is the exception and stays on the MARKER,
- *  which owns no other content and stops its own press. */
-export function PipelineStage(props: PipelineStageProps) {
-  const { status, title, meta, trailing, children, onToggle, accessibilityLabel, ...positional } = props;
-  // `complete` is the terminal stage REACHED — where a finished record sits, not
-  // one it walked past. Muting it like an unreached stage leaves a completed run
-  // with nothing in full ink, so the eye has no landing point and the last thing
-  // that happened reads as the thing that hasn't.
-  // Every stage name reads the same: full ink, medium. The MARKER already says
-  // where the record sits — a filled ring behind, an empty one ahead — so muting
-  // the passed names said it a second time, and said it wrongly: a stage that is
-  // done is the RECORD of what happened, not something to de-emphasise. The kit
-  // makes the same argument for `CheckCircle`, which is monochrome at every
-  // position precisely so a row does not double-code its own state.
-  const titleText = (
-    <Text size="sm" color="default" weight="medium">
-      {title}
-    </Text>
-  );
-  return (
-    <Step
-      status={status}
-      onToggle={onToggle}
-      accessibilityLabel={accessibilityLabel ?? title}
-      // The marker centres on the FIRST ROW, so it has to be told when that row
-      // is a control band and not a line of text — otherwise it stays pinned to
-      // the text and every title reads low by half the difference.
-      // The row is a text line whatever rides it, so the marker centres on
-      // the text rather than on a control band that is no longer there.
-      headHeight={undefined}
-      {...positional}
-    >
-      <View style={{ gap: 6 }}>
-        <View style={{ gap: 2 }}>
-          {trailing != null ? (
-            // Fixed at the control band whatever `trailing` holds: a stage whose
-            // row height followed its content would step the marker in and out of
-            // alignment down the ladder, and a badge would sit on a shorter row
-            // than a date picker two stages up.
-            // BASELINE, not centre: the value sits beside the title as prose, and
-            // two texts of different sizes centred in one row share no baseline —
-            // the smaller one floats, which is exactly what "not aligned with the
-            // label" looks like. The row also stops forcing a control band, since
-            // what rides it now is text, not an editor.
-            <View style={{ flexDirection: "row", alignItems: "baseline", gap: 8 }}>
-              {/* The title keeps its NATURAL width and the slack goes after the
-                  value, so the value sits against the label — "Booked · 16 Jun"
-                  reads as one line about one milestone. Pinning it to the row's
-                  right edge instead made a column of dates that scanned well and
-                  said nothing: the reader had to carry the label across the gap
-                  to know which milestone the date belonged to. */}
-              <View style={{ flexShrink: 1, minWidth: 0 }}>{titleText}</View>
-              {trailing}
-              <View style={{ flex: 1 }} />
-            </View>
-          ) : (
-            titleText
-          )}
-          {meta ? <Text size="xs" color="muted">{meta}</Text> : null}
-        </View>
-        {children}
-      </View>
-    </Step>
-  );
-}
-
-export interface PipelineNoteProps {
-  children: ReactNode;
-  /** `warning` for something outstanding at this stage, `danger` for a refusal,
-   *  `muted` for a plain remark. */
-  tone?: "muted" | "warning" | "danger";
-}
-
-/**
- * A CONDITION attached to one stage — "sent back", "rejected", "waiting on the
- * customer". Prose, never a control: it says what is true, and the controls that
- * answer it sit under it in the same stage.
- *
- * Deliberately not a `Callout`. A callout is a page-level interruption with its
- * own box and tone fill; inside a stage that box competes with the spine and
- * reads as an alert about the whole record. A stage's condition is a line of text
- * in the stage's own column.
- */
-export function PipelineNote({ children, tone = "muted" }: PipelineNoteProps) {
-  return <Text size="xs" color={tone}>{children}</Text>;
-}
-
-export interface PipelineFieldProps {
-  /** The value's name. Stacked ABOVE the control rather than in a label column:
-   *  a stage's content column is already indented past the spine, and a second
-   *  fixed column inside it leaves nothing for the value. */
-  label?: string;
-  children: ReactNode;
-  /** Cap the control's width so a lone text input does not run the full column. */
-  maxWidth?: number;
-}
-
-/** A value this stage OWNS, editable in place. Render it on a passed stage too —
- *  a milestone being behind you is not a reason its facts stop being wrong. */
-export function PipelineField({ label, children, maxWidth = 320 }: PipelineFieldProps) {
-  return (
-    <View style={{ gap: 2, maxWidth }}>
-      {label ? <Text size="xs" color="muted">{label}</Text> : null}
-      {children}
-    </View>
-  );
-}
-
-/** The act(s) that leave this stage. Wraps on a narrow column so a stage with two
- *  verbs never pushes the spine sideways. */
-export function PipelineActions({ children }: { children: ReactNode }) {
-  return <View style={{ flexDirection: "row", gap: 8, flexWrap: "wrap", paddingTop: 2 }}>{children}</View>;
-}