Replyke CLI & Component Registry
Shadcn-style component distribution for Replyke comment systems.
What's Included
- CLI Tool (
@replyke/cli) - Install components into your project - Component Registry - Threaded comments system (React web)
- 24 Component Files - Fully transformed, no -core dependencies
- Inline Styles - Copy, paste, customize
Quick Start
1. Install Dependencies
cd packages/cli
pnpm install
pnpm install
2. Build CLI
pnpm build
3. Test in Your Project
In a separate React project:
# Initialize Replyke
node /path/to/cli/packages/cli/dist/index.js init
# Add threaded comments
node /path/to/cli/packages/cli/dist/index.js add comments-threaded
node /path/to/cli/packages/cli/dist/index.js init
# Add threaded comments
node /path/to/cli/packages/cli/dist/index.js add comments-threaded
Project Structure
cli/
+-- packages/
| +-- cli/ # CLI package
| +-- src/
| | +-- commands/ # init, add commands
| | +-- utils/ # registry, transform utilities
| +-- package.json
|
+-- registry/
| +-- react/
| +-- comments-threaded/
| +-- styled/
| +-- registry.json # Component metadata
| +-- files/ # 20 component files
| +-- hooks/ # 2 hook files
| +-- utils/ # 1 utility file
| +-- context/ # 1 context file
|
+-- package.json # Root workspace
+-- pnpm-workspace.yaml # Workspace config
Development Commands
# Build CLI
pnpm build
# Watch mode (for development)
pnpm dev
# Run CLI directly
pnpm cli init
pnpm cli add comments-threaded
pnpm build
# Watch mode (for development)
pnpm dev
# Run CLI directly
pnpm cli init
pnpm cli add comments-threaded
What's Complete
Phase 1: Component Transformation
- All 24 TypeScript files transformed
- No @replyke/comments-threaded-core dependencies
- Hardcoded base styles with customization comments
- Kebab-case file naming
- Relative imports updated
- Logical directory grouping maintained
Phase 2: CLI Implementation
-
initcommand - Project initialization -
addcommand - Component installation - Registry fetching (local for testing)
- Dependency checking
- File copying with structure preservation
Phase 3: Registry Structure
- registry.json metadata
- 24 files organized with logical grouping
- Component descriptions
- Dependency specifications
Phase 4: Workspace Setup
- Root package.json
- pnpm-workspace.yaml
- CLI package.json with dependencies
Testing Instructions
Prerequisites
Create a test React project (in a separate directory):
npm create vite@latest test-replyke-app -- --template react-ts
cd test-replyke-app
npm install
cd test-replyke-app
npm install
Install Required Dependencies
npm install @replyke/react-js @replyke/ui-core-react-js
Run CLI
# Initialize (creates replyke.json)
node /path/to/cli/packages/cli/dist/index.js init
# Add components
node /path/to/cli/packages/cli/dist/index.js add comments-threaded
node /path/to/cli/packages/cli/dist/index.js init
# Add components
node /path/to/cli/packages/cli/dist/index.js add comments-threaded
Use Components
import ThreadedCommentSection from './components/ui/threaded-comment-section';
function App() {
return (
<div>
<ThreadedCommentSection
entityId="test-entity"
/>
div>
);
}