@bark/component-promoter

CLI tool to promote components from product repos to the Bark Design System registry.

Prerequisites

• Node.js >= 22
• GitHub CLI installed and authenticated (gh auth login)

Installation

npm install -g @bark/component-promoter

Or run directly with npx:

npx @bark/component-promoter promote ./components/ui/my-button.tsx

Usage

Validate a component

Check if a component meets the design system requirements:

promote-component validate ./components/ui/button.tsx

Promote a component

Create a PR to add a component to the design system:

promote-component promote ./components/ui/button.tsx

Options:

• -n, --name <name> - Component name (defaults to filename)
• -l, --level <level> - Atomic level: atoms|molecules|organisms|templates|pages (default: atoms)
• -d, --dry-run - Validate and preview without creating PR

Examples

# Promote a button as an atom
promote-component promote ./components/ui/button.tsx

# Promote as a molecule with custom name
promote-component promote ./components/search-bar.tsx -l molecules -n search-bar

# Preview without creating PR
promote-component promote ./components/ui/card.tsx --dry-run

Validation Rules

Components are validated against design system requirements:

Errors (will fail):

• React Router hooks (useLoaderData, useFetcher, useActionData)
• Data access imports
• Analytics hooks/tracking
• Console.log statements
• i18n dependencies

Warnings:

• Component > 200 lines
• Missing TypeScript interfaces

How It Works

1. Validates component against design system rules
2. Generates registry entry with dependencies
3. Creates a branch in the design-system repo
4. Adds component file and updates registry.json
5. Opens a PR for review