Report blocks

import type { ReactElement } from "react";
import { Heading } from "@bosunkit/components/heading";
import { Text } from "@bosunkit/components/text";
import { Stack } from "@bosunkit/components/stack";
import PublicationDetails from "../report-metadata/showcase";
import ReportSummary from "./showcase";
import ReportPlanning from "./planning";
export const description: string =
  "A desktop report canvas: full-width publication context, a metric strip, and three columns for decisions, milestones and next actions. All content is illustrative.";
export default function DesktopReport(): ReactElement {
  return (
    <div style={{ width: "100%" }}>
      <div style={{ maxWidth: "var(--bk-report-width)" }}>
        <Stack as="header" space="sm">
          <Heading level={2} variant="heading-page">
            From evidence to a clear decision
          </Heading>
          <Text variant="body-reading" color="text-dim">
            An illustrative engineering review: source context, current progress and proposed next steps in one report.
          </Text>
        </Stack>
      </div>
      <PublicationDetails />
      <ReportSummary />
      <ReportPlanning />
    </div>
  );
}

import type { ReactElement } from "react";
import { FileCheck, GitCommitHorizontal, Rocket, Workflow } from "lucide-react";
import { ReportHighlight, ReportMetrics, ReportPipeline } from "@bosunkit/components/report-blocks";
export const description: string =
  "An illustrative weekly digest. Values describe this example, not measured Bosun results.";
export default function ReportSummary(): ReactElement {
  return (
    <div>
      <ReportHighlight
        eyebrow="Engineering digest · illustrative"
        title="Small steps. Clear progress."
        icon={<Rocket />}
        accent="02"
      >
        A useful update connects what changed, what we learned and the next decision. Give the reader one clear point to
        remember.
      </ReportHighlight>
      <ReportMetrics
        items={[
          {
            label: "Example changes",
            value: "18",
            note: "Across the illustrative reporting week",
            icon: <GitCommitHorizontal />,
            accent: "02",
          },
          { label: "Reviews", value: "7", note: "Example completed reviews", icon: <FileCheck />, accent: "01" },
          {
            label: "Next decisions",
            value: "3",
            note: "Questions to resolve before publication",
            icon: <Workflow />,
            accent: "03",
          },
        ]}
      />
      <ReportPipeline steps={["Collect", "Validate", "Review", "Publish"]} />
    </div>
  );
}

import type { ReactElement } from "react";
import { BookOpen, FlaskConical, Search, Send } from "lucide-react";
import { ReportGrid, ReportPanel, ReportQuote, ReportSteps, ReportNote } from "@bosunkit/components/report-blocks";
export const description: string =
  "An illustrative editorial composition: two perspectives, a short plan and an attributed pull quote.";
export default function ReportStory(): ReactElement {
  return (
    <div>
      <ReportGrid>
        <ReportPanel title="What we learned" icon={<BookOpen />} accent="01">
          <p>Readers need the conclusion and the evidence in the same place. Make the connection explicit.</p>
        </ReportPanel>
        <ReportPanel title="What we’ll explore" icon={<FlaskConical />} accent="03">
          <p>Keep open questions visible. Describe the next experiment and the decision it will support.</p>
        </ReportPanel>
      </ReportGrid>
      <ReportSteps
        items={[
          {
            label: "01",
            title: "Find the signal",
            description: "Collect source material and identify the important change.",
            icon: <Search />,
            accent: "02",
          },
          {
            label: "02",
            title: "Tell the story",
            description: "Connect the result to its consequence for the reader.",
            icon: <BookOpen />,
            accent: "01",
          },
          {
            label: "03",
            title: "Invite a decision",
            description: "End with one useful question or a concrete next step.",
            icon: <Send />,
            accent: "03",
          },
        ]}
      />
      <ReportQuote
        attribution="Illustrative editorial principle"
        context="Example copy, not a customer testimonial"
        accent="05"
      >
        Make the important part easy to find, and the evidence easy to follow.
      </ReportQuote>
      <ReportNote title="Example boundary">
        This composition demonstrates presentation. Its wording and values are illustrative.
      </ReportNote>
    </div>
  );
}

import type { ReactElement } from "react";
import { ReportActions, ReportDecision, ReportMilestones, ReportGrid } from "@bosunkit/components/report-blocks";
export const description: string =
  "An illustrative release review connects a proposal, its checkpoints and the work still to do.";
export default function ReportPlanning(): ReactElement {
  return (
    <ReportGrid columns={3}>
      <ReportDecision
        title="Start with a focused pilot"
        eyebrow="Decision record · Example 03"
        status="Proposed"
        accent="03"
        details={[
          { term: "Decision owner", value: "Example product team" },
          { term: "Review", value: "16 October 2026" },
        ]}
      >
        <p>Invite a small review group to try the report workflow before expanding access.</p>
        <p>
          <strong>Tradeoff:</strong> feedback arrives sooner, while broader distribution waits for the review.
        </p>
      </ReportDecision>
      <ReportMilestones
        title="From first draft to shared result"
        items={[
          {
            label: "12 October",
            dateTime: "2026-10-12",
            title: "Evidence gathered",
            status: "Complete",
            state: "complete",
            description: "Source records are attached to the draft.",
          },
          {
            label: "14 October",
            dateTime: "2026-10-14",
            title: "Review the story",
            status: "In review",
            state: "current",
            description: "Check the conclusion against the evidence and resolve open questions.",
          },
          {
            label: "After review",
            title: "Invite the pilot group",
            status: "Planned",
            description: "Timing depends on the review decision; no release date is confirmed.",
          },
        ]}
      />
      <ReportActions
        title="Make the next step concrete"
        ownerLabel="Owner"
        dueLabel="Due"
        items={[
          {
            title: "Confirm the review criteria",
            owner: "Example product team",
            due: "16 October 2026",
            status: "In progress",
            state: "current",
            description: "Agree what the pilot must establish before wider access.",
          },
          {
            title: "Prepare the pilot invitation",
            owner: "Unassigned",
            due: "After approval",
            status: "Waiting",
            description: "Depends on the distribution decision.",
          },
          {
            title: "Attach source records",
            owner: "Example engineering team",
            due: "12 October 2026",
            status: "Complete",
            state: "complete",
          },
        ]}
      />
    </ReportGrid>
  );
}