https://github.com/pppp606/ink-title-box
https://github.com/pppp606/ink-title-box
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/pppp606/ink-title-box
- Owner: pppp606
- License: mit
- Created: 2025-09-03T08:23:25.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-22T11:44:10.000Z (9 months ago)
- Last Synced: 2025-09-22T13:19:06.214Z (9 months ago)
- Language: TypeScript
- Size: 370 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ink-title-box
A customizable title box component for [Ink](https://github.com/vadimdemedes/ink) CLI applications that serves as a **perfect drop-in replacement** for Ink's Box component with added title embedding functionality.
## 🎯 **100% Ink Box Compatibility**
TitleBox is fully compatible with Ink's Box component and passes **all official Ink Box tests**:
- ✅ **73 comprehensive tests** using `ink-testing-library`
- ✅ **Complete recreation** of Ink's official test suite from `vadimdemedes/ink`
- ✅ **Identical behavior** when no title is provided
- ✅ **Perfect drop-in replacement** for existing Ink Box usage
**Test coverage includes**: margin, gap, overflow, height, flexbox, borders, padding, dimensions, nested layouts, and all advanced Ink Box features.
## Installation
```bash
npm install ink-title-box
```
## Requirements
- Node.js >=18.0.0
- React ^18.3.1
- Ink ^4.4.1
## Usage
### As a CLI Tool
```bash
# Basic usage
npx ink-title-box "Hello World"
# With options
npx ink-title-box "My Title" --width 60 --color green --padding 2
```
#### CLI Options
- `-w, --width ` - Set box width (default: 40, max: 200)
- `-p, --padding ` - Set box padding (default: 1, max: 10)
- `-c, --color ` - Set border color (default: blue)
- `-h, --help` - Show help message
#### Valid Colors
`black`, `red`, `green`, `yellow`, `blue`, `magenta`, `cyan`, `white`, `gray`, `grey`, `blackBright`, `redBright`, `greenBright`, `yellowBright`, `blueBright`, `magentaBright`, `cyanBright`, `whiteBright`
### As a React Component
```tsx
import React from 'react';
import { render } from 'ink';
import { TitleBox } from 'ink-title-box';
const App = () => (
);
render();
```
#### Component Props
```typescript
interface TitleBoxProps {
title: string;
width?: number; // Box width (default: 40)
padding?: number; // Internal padding (default: 1)
borderColor?: string; // Border color (default: 'blue')
}
```
## Development
### Scripts
```bash
npm run build # Build the project
npm run test # Run tests
npm run test:watch # Run tests in watch mode
npm run lint # Run ESLint
npm run format # Format code with Prettier
npm run typecheck # Run TypeScript checks
npm run quality # Run all quality checks
npm run ci # Run CI pipeline locally
```
### Testing
The project uses Jest with 100% test coverage:
```bash
npm test # Run all tests
npm run test:coverage # Run with coverage report
npm run test:ci # Run in CI mode
```
### Code Quality
- **TypeScript** - Strict type checking
- **ESLint** - Code linting with TypeScript support
- **Prettier** - Code formatting
- **Jest** - Testing with full coverage
## License
MIT
## Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Run quality checks (`npm run quality`)
4. Commit your changes (`git commit -m 'Add amazing feature'`)
5. Push to the branch (`git push origin feature/amazing-feature`)
6. Open a Pull Request
Make sure all tests pass and maintain 100% coverage.