Motion

import { Badge } from "@bosunkit/components/badge";
import { Button } from "@bosunkit/components/button";
import { MotionPresence, type MotionPreset } from "@bosunkit/components/motion";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "The three presets on one badge each: fade changes opacity only, rise moves up a few pixels as it fades in, " +
  "scale grows from slightly smaller. Each enters over the medium duration and leaves over the fast one.";

const PRESETS: readonly MotionPreset[] = ["fade", "rise", "scale"];

export default function Presets(): ReactElement {
  const [shown, setShown]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(true);
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "var(--space-md)" }}>
      <Button
        size="sm"
        onClick={(): void => {
          setShown((current: boolean): boolean => !current);
        }}
      >
        {shown ? "Hide the badges" : "Show the badges"}
      </Button>
      <div style={{ display: "flex", gap: "var(--space-md)", minHeight: 24 }}>
        {PRESETS.map(
          (preset: MotionPreset): ReactElement => (
            <div key={preset} style={{ display: "flex", flexDirection: "column", gap: 6, width: 96 }}>
              <code style={{ fontSize: 11, color: "var(--text-dim)" }}>{preset}</code>
              <MotionPresence>
                {shown && (
                  <Badge key={preset} variant="green" motion={preset}>
                    GPS 3D
                  </Badge>
                )}
              </MotionPresence>
            </div>
          ),
        )}
      </div>
    </div>
  );
}

import { Badge } from "@bosunkit/components/badge";
import { Button } from "@bosunkit/components/button";
import { MotionPresence } from "@bosunkit/components/motion";
import { MOTION_DURATIONS } from "@bosunkit/tokens/motion";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Enter and exit: a badge the caller adds and removes inside a MotionPresence fades in over the medium duration " +
  "on the enter curve, and out over the fast duration on the exit curve.";

export default function EnterExit(): ReactElement {
  const [shown, setShown]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);
  return (
    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "var(--space-md)" }}>
      <Button
        size="sm"
        onClick={(): void => {
          setShown((current: boolean): boolean => !current);
        }}
      >
        {shown ? "Play the exit" : "Play the entrance"}
      </Button>
      <span style={{ minWidth: 80 }}>
        <MotionPresence initial={false}>
          {shown && (
            <Badge key="fix" variant="green">
              GPS 3D
            </Badge>
          )}
        </MotionPresence>
      </span>
      <code style={{ fontSize: 11, color: "var(--text-dim)" }}>
        {`enter ${String(MOTION_DURATIONS.medium * 1000)} ms --motion-enter-easing · exit ${String(
          MOTION_DURATIONS.fast * 1000,
        )} ms --motion-exit-easing`}
      </code>
    </div>
  );
}

import { Badge } from "@bosunkit/components/badge";
import { Button } from "@bosunkit/components/button";
import { MOTION_DURATIONS } from "@bosunkit/tokens/motion";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Change, pop: a badge's count grows briefly and settles when it changes, over the fast duration on the standard " +
  "curve. The new count is there from the first frame.";

export default function ChangePop(): ReactElement {
  const [count, setCount]: [number, Dispatch<SetStateAction<number>>] = useState<number>(3);
  return (
    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "var(--space-md)" }}>
      <Button
        size="sm"
        onClick={(): void => {
          setCount((current: number): number => current + 1);
        }}
      >
        Another target
      </Button>
      <Badge variant="blue">{`${String(count)} AIS targets`}</Badge>
      <code style={{ fontSize: 11, color: "var(--text-dim)" }}>
        {`${String(MOTION_DURATIONS.fast * 1000)} ms --motion-standard-easing`}
      </code>
    </div>
  );
}

import { Button } from "@bosunkit/components/button";
import { MOTION_DURATIONS } from "@bosunkit/tokens/motion";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Change, fade: a button's new label fades in when it changes, over the fast duration on the standard curve. The " +
  "button keeps its focus, and the fade stays under reduced motion, as it changes only opacity.";

export default function ChangeFade(): ReactElement {
  const [acknowledged, setAcknowledged]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);
  return (
    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "var(--space-md)" }}>
      <Button
        variant="primary"
        onClick={(): void => {
          setAcknowledged((current: boolean): boolean => !current);
        }}
      >
        {acknowledged ? "Acknowledged" : "Acknowledge"}
      </Button>
      <code style={{ fontSize: 11, color: "var(--text-dim)" }}>
        {`${String(MOTION_DURATIONS.fast * 1000)} ms --motion-standard-easing`}
      </code>
    </div>
  );
}

import { Button } from "@bosunkit/components/button";
import { Reading } from "@bosunkit/components/reading";
import { MOTION_DURATIONS, MOTION_HIGHLIGHT_INTERVAL } from "@bosunkit/tokens/motion";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Highlight, opt-in: a reading tints its background when a new value arrives, over the slow duration on the exit " +
  "curve, at most once per interval. Press quickly and only the first press in each interval tints.";

const DEPTHS: readonly number[] = [8.4, 8.1, 7.6, 7.2, 7.5];

export default function Highlight(): ReactElement {
  const [sample, setSample]: [number, Dispatch<SetStateAction<number>>] = useState<number>(0);
  return (
    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "var(--space-md)" }}>
      <Button
        size="sm"
        onClick={(): void => {
          setSample((current: number): number => (current + 1) % DEPTHS.length);
        }}
      >
        Next depth reading
      </Button>
      <Reading
        value={DEPTHS[sample]}
        unit="m"
        label="Depth"
        source="DST810"
        fractionDigits={1}
        motion={{ change: "highlight" }}
      />
      <code style={{ fontSize: 11, color: "var(--text-dim)" }}>
        {`${String(MOTION_DURATIONS.slow * 1000)} ms --motion-exit-easing · at most every ${String(
          MOTION_HIGHLIGHT_INTERVAL,
        )} s`}
      </code>
    </div>
  );
}

import { Badge } from "@bosunkit/components/badge";
import { Button } from "@bosunkit/components/button";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Attention: an unacknowledged alarm's dot flashes on the shared alert clock until it is acknowledged, the only loop " +
  "on screen. It keeps flashing under reduced motion.";

export default function Attention(): ReactElement {
  const [acknowledged, setAcknowledged]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);
  return (
    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "var(--space-md)" }}>
      <Button
        size="sm"
        onClick={(): void => {
          setAcknowledged((current: boolean): boolean => !current);
        }}
      >
        {acknowledged ? "Raise again" : "Acknowledge"}
      </Button>
      <Badge variant="red" unacknowledged={!acknowledged}>
        {acknowledged ? "Bilge alarm, acknowledged" : "Bilge alarm"}
      </Badge>
      <code style={{ fontSize: 11, color: "var(--text-dim)" }}>--bk-flash-fast-on · --bk-flash-fast-off</code>
    </div>
  );
}

import { AlertCard } from "@bosunkit/components/alert-card";
import { Button } from "@bosunkit/components/button";
import { AlertCardGrid } from "@bosunkit/components/alert-card-grid";
import { MOTION_DURATIONS } from "@bosunkit/tokens/motion";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Reorder: an alert list slides its cards to a new order over the medium duration on the standard curve. While a " +
  "card has focus or the pointer is pressed on it, the new order applies at once.";

interface Item {
  readonly id: string;
  readonly title: string;
}

const ITEMS: readonly Item[] = [
  { id: "wind", title: "Wind above reef threshold" },
  { id: "depth", title: "Shallow water" },
  { id: "battery", title: "House battery low" },
];

export default function Reorder(): ReactElement {
  const [order, setOrder]: [readonly Item[], Dispatch<SetStateAction<readonly Item[]>>] =
    useState<readonly Item[]>(ITEMS);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-md)", width: "100%" }}>
      <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "var(--space-md)" }}>
        <Button
          size="sm"
          onClick={(): void => {
            setOrder((current: readonly Item[]): Item[] => [...current.slice(1), ...current.slice(0, 1)]);
          }}
        >
          Move the top card down
        </Button>
        <code style={{ fontSize: 11, color: "var(--text-dim)" }}>
          {`${String(MOTION_DURATIONS.medium * 1000)} ms --motion-standard-easing`}
        </code>
      </div>
      <AlertCardGrid>
        {order.map(
          (item: Item): ReactElement => (
            <AlertCard key={item.id} className="alarm--full" priority="warning" title={item.title} />
          ),
        )}
      </AlertCardGrid>
    </div>
  );
}

import { Tabs, type TabsOption } from "@bosunkit/components/tabs";
import { MOTION_DURATIONS } from "@bosunkit/tokens/motion";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Tabs indicator: the underline slides to the tab the crew selects, over the medium duration on the standard curve.";

const TABS: readonly TabsOption[] = [
  { id: "passage", label: "Passage" },
  { id: "weather", label: "Weather" },
  { id: "tides", label: "Tides" },
];

export default function TabsIndicator(): ReactElement {
  const [active, setActive]: [string, Dispatch<SetStateAction<string>>] = useState<string>("passage");
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-sm)" }}>
      <Tabs tabs={TABS} value={active} onValueChange={setActive} />
      <code style={{ fontSize: 11, color: "var(--text-dim)" }}>
        {`${String(MOTION_DURATIONS.medium * 1000)} ms --motion-standard-easing`}
      </code>
    </div>
  );
}

import { Button } from "@bosunkit/components/button";
import { TaskDialog } from "@bosunkit/components/task-dialog";
import { MOTION_DURATIONS } from "@bosunkit/tokens/motion";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Overlay open and close: a dialog scales in over a fading overlay, in its stylesheet on the same tokens, and leaves " +
  "faster than it came. Its title and body are there from the first frame.";

export default function Overlay(): ReactElement {
  const [open, setOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);
  function close(): void {
    setOpen(false);
  }
  return (
    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "var(--space-md)" }}>
      <Button
        size="sm"
        onClick={(): void => {
          setOpen(true);
        }}
      >
        Open the dialog
      </Button>
      <code style={{ fontSize: 11, color: "var(--text-dim)" }}>
        {`open ${String(MOTION_DURATIONS.medium * 1000)} ms --motion-enter-easing · close ${String(
          MOTION_DURATIONS.fast * 1000,
        )} ms --motion-exit-easing`}
      </code>
      <TaskDialog
        open={open}
        onOpenChange={(open): void => { if (!open) (close)(); }}
        title="Engine hours logged"
        actions={
          <Button variant="primary" onClick={close}>
            Close
          </Button>
        }
      >
        1,842 engine hours are in the log. The next oil change is due at 1,900.
      </TaskDialog>
    </div>
  );
}

import { Badge } from "@bosunkit/components/badge";
import { Button } from "@bosunkit/components/button";
import { DueChip } from "@bosunkit/components/due-chip";
import { useState, type CSSProperties, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Motion on and motion={false} side by side: one press changes both columns, and only the left one moves.";

const COLUMN: CSSProperties = { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 10, width: 220 };

export default function OnOff(): ReactElement {
  const [step, setStep]: [number, Dispatch<SetStateAction<number>>] = useState<number>(0);
  const overdue: boolean = step % 2 === 1;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-md)" }}>
      <Button
        size="sm"
        onClick={(): void => {
          setStep((current: number): number => current + 1);
        }}
      >
        Change everything
      </Button>
      <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-lg)" }}>
        <div style={COLUMN}>
          <code style={{ fontSize: 11, color: "var(--text-dim)" }}>motion on (default)</code>
          <Badge variant="blue">{`${String(step + 3)} AIS targets`}</Badge>
          <DueChip priority={overdue ? "warning" : "caution"} label={overdue ? "Overdue" : "Due tomorrow"} />
          <Button size="sm">{overdue ? "Acknowledged" : "Acknowledge"}</Button>
        </div>
        <div style={COLUMN}>
          <code style={{ fontSize: 11, color: "var(--text-dim)" }}>motion={"{false}"}</code>
          <Badge variant="blue" motion={false}>{`${String(step + 3)} AIS targets`}</Badge>
          <DueChip
            priority={overdue ? "warning" : "caution"}
            label={overdue ? "Overdue" : "Due tomorrow"}
            motion={false}
          />
          <Button size="sm" motion={false}>
            {overdue ? "Acknowledged" : "Acknowledge"}
          </Button>
        </div>
      </div>
    </div>
  );
}