Code Coverage Report

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools22.tsx instead.

Usage

The file also exports devtools22Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools22, devtools22Demo } from "@/components/blocks/devtools/devtools22";

export default function Page() {
  return <Devtools22 {...devtools22Demo} />;
}

Props

Types

type FileCoverage = {
  name: string;
  statements: number;
  branches: number;
  functions: number;
  lines: number;
};

type FolderCoverage = { name: string; files: FileCoverage[] };

type OverallCoverage = {
  statements: number;
  branches: number;
  functions: number;
  lines: number;
};

Behavior notes

• "use client" only for the folder expand/collapse state; expanding a folder is real local state, nothing else in the block is interactive.
• defaultOpenFolders sets which folders start expanded via a lazy useState initializer read once on mount, not an effect, so it never fights with the user toggling folders afterward.
• The tree is exactly two levels deep (folders, then files); there is no nested-subfolder recursion.
• Coverage chip color thresholds are fixed: 80% and above is emerald, 50 to 79% is amber, below 50% is red, applied identically to the overall summary and every per-file chip.
• The overall summary numbers are caller-supplied and are not computed by averaging the folders/files data, so they can be set independently of what the tree actually contains.