hbui-scan

CLI tool that scans React codebases for @honeybook/hbui component usage, styled overrides, and CSS patterns. Provides detailed location tracking and component-centric analysis for design system improvement.

Installation

npm install -g @honeybook/hbui-scan

Usage

hbui-scan <path> [options]

# Scan a directory
hbui-scan ./src

# Scan honeybook-react
hbui-scan /path/to/honeybook-react/src

# Custom output directory
hbui-scan /path/to/honeybook-react/src --output=~/my-scan/

# Output JSON to stdout (for piping/scripting)
hbui-scan /path/to/honeybook-react/src --json

# Disable default ignore patterns
hbui-scan ./src --no-ignore

# Or use npx without installing
npx @honeybook/hbui-scan ./src

Output Structure

.hbui-scans/hbui-report-{timestamp}/
├── scan-info.json          # Scan metadata and statistics
├── css-analysis.json       # Global CSS pattern analysis
├── components/
│   ├── index.json          # Component list with usage stats
│   ├── HBButton.json       # All HBButton data with exact locations
│   ├── HBCard.json         # All HBCard data with exact locations
│   └── ...

Component Report Example

Each component gets its own JSON file with complete usage data:

{
  "componentName": "HBButton",
  "package": "@honeybook/hbui",
  "usages": [
    {
      "filePath": "/src/pages/Settings.tsx",
      "line": 142,
      "columnPosition": 3421,
      "props": {
        "buttonTheme": "primary",
        "size": "md",
        "onClick": "(dynamic)"
      }
    },
    {
      "filePath": "/src/components/Header.tsx",
      "line": 28,
      "columnPosition": 892,
      "props": {
        "buttonTheme": "secondary",
        "disabled": true
      }
    }
  ],
  "styledOverrides": [
    {
      "filePath": "/src/components/CustomButton.tsx",
      "line": 5,
      "variableName": "StyledPrimaryButton",
      "originalComponent": "HBButton",
      "cssProperties": ["padding", "background-color", "border-radius"],
      "cssText": "padding: 12px 24px;\n  background-color: #007aff;\n  border-radius: 6px;"
    }
  ]
}

Development

Built with TypeScript. Uses ts-morph for AST parsing, css-tree for CSS analysis.

Requires Node.js 20+

# Install dependencies
npm install

# Run locally during development (without building)
npm run scan -- ./fixtures

# Build the project
npm run build

# Run quality checks
npm run lint
npm run format:check
npm run type-check
npm test