@commitflow/react

This package is not meant to be installed directly.

Use the commitflow use command to copy component source code to your project.

Quick Start

# Install the CLI
npm install -g @commitflow/cli

# Copy components to your project
commitflow use @react/changelog
commitflow use @react/timeline
commitflow use @react/heatmap

# Install dependencies
npm install react-markdown lucide-react clsx tailwind-merge

Philosophy

Copy-paste components, not dependencies.

These components are designed to be copied into your project using the commitflow use CLI command, giving you:

• ✅ Full ownership of the code
• ✅ Complete customization freedom
• ✅ No breaking changes from library updates
• ✅ Tailwind CSS-driven styling

Available Components

This package contains the following components that can be copied:

• Changelog - Product release notes with AI-generated summaries
• Timeline - Vertical commit history display
• Heatmap - GitHub-style contribution graph

For Users

If you want to use these components in your project, see the main documentation:

• README.md - Quick start guide
• docs/react.md - Complete component API

For Developers

Project Structure

packages/react/
├── src/
│   ├── Changelog.tsx      # Product release notes
│   ├── Timeline.tsx       # Commit history timeline
│   ├── Heatmap.tsx        # Contribution graph
│   ├── types.ts           # Shared TypeScript types
│   └── lib/
│       └── utils.ts       # Utility functions (cn)
├── components.json        # Component manifest (for `commitflow use`)
└── package.json           # Package configuration

Component Manifest

The components.json file defines which files are included in each component:

{
  "changelog": {
    "files": ["src/Changelog.tsx"],
    "export": "Changelog",
    "dependencies": ["react-markdown", "lucide-react"]
  },
  "timeline": {
    "files": ["src/Timeline.tsx", "src/types.ts"],
    "export": "Timeline",
    "dependencies": []
  },
  "heatmap": {
    "files": ["src/Heatmap.tsx", "src/types.ts", "src/lib/utils.ts"],
    "export": "Heatmap",
    "dependencies": []
  }
}

Building

pnpm build

This compiles TypeScript to dist/ for development and testing.

Adding New Components

1. Create the component in src/YourComponent.tsx
2. Add it to components.json:

{
  "yourcomponent": {
    "files": ["src/YourComponent.tsx", "src/types.ts"],
    "export": "YourComponent",
    "dependencies": ["some-package"]
  }
}

3. Update the CLI to reference it: commitflow use @react/yourcomponent

How It Works

When you run commitflow use @react/changelog:

1. CLI resolves the @commitflow/react package path
2. Reads components.json to find component files
3. Copies source files to your project (removing header comments)
4. You get full source code ownership

License

MIT