@feedinbox/cli/README.md

CLI tool for installing FeedInbox components into your project

# @feedinbox/cli

CLI tool for installing FeedInbox components into your React project. Components are copied directly to your project for full customization control.

## 🚀 Quick Start

```bash
# Install components
npx @feedinbox/cli add react-vanilla
```

## 📦 Installation

No installation required! Use with npx:

```bash
npx @feedinbox/cli --help
```

## 🎨 Available Templates

### react-vanilla
React components with vanilla CSS styling
```bash
npx @feedinbox/cli add react-vanilla
```

### react-tailwind  
React components with Tailwind CSS utilities
```bash
npx @feedinbox/cli add react-tailwind
```

### react-shadcn
React components using shadcn/ui library
```bash
npx @feedinbox/cli add react-shadcn
```

## 📋 Commands

### `add [type]`
Install component templates to your project

```bash
npx @feedinbox/cli add react-vanilla

# Options
npx @feedinbox/cli add react-vanilla --dir src/components/ui --force
```

**Options:**
- `--dir <directory>` - Installation directory (default: `src/components/feedinbox`)
- `--force` - Overwrite existing files
- `--yes` - Skip confirmation prompts

### `list`
Show available component types

```bash
npx @feedinbox/cli list
```

### `init`
Initialize FeedInbox configuration

```bash
npx @feedinbox/cli init
```

Creates `feedinbox.config.json` with your API key and settings.

## 📁 What Gets Installed

When you run `npx @feedinbox/cli add react-vanilla`, it creates:

```
src/components/feedinbox/
├── FeedbackWidget.tsx      ← Feedback collection widget
├── NewsletterWidget.tsx    ← Newsletter subscription widget
├── ContactWidget.tsx       ← Contact form widget
├── index.ts                ← Export file
├── styles/                 ← CSS files (vanilla only)
│   ├── index.css
│   ├── feedback-widget.css
│   ├── newsletter-widget.css
│   └── contact-widget.css
└── README.md               ← Usage instructions
```

## 🔧 Usage After Installation

1. **Install the SDK** (if not already installed):
```bash
npm install @feedinbox/sdk
```

2. **Import and use components**:
```tsx
import { FeedbackWidget } from './components/feedinbox';
// For vanilla CSS:
import './components/feedinbox/styles/index.css';

function App() {
  return (
    <FeedbackWidget
      apiKey="fb_your_api_key"
      onSuccess={(response) => console.log(response)}
    />
  );
}
```

## 🎯 Requirements

- **Node.js**: 16 or higher
- **React project**: The CLI detects React projects automatically
- **TypeScript**: Recommended (components are written in TypeScript)

## 🔍 Project Validation

The CLI automatically validates your project:
- ✅ Checks for `package.json`
- ✅ Detects React dependencies
- ✅ Warns about missing TypeScript

## ⚙️ Configuration

### feedinbox.config.json
Optional configuration file created by `npx @feedinbox/cli init`:

```json
{
  "apiKey": "fb_your_api_key",
  "apiUrl": "https://api.feedinbox.com",
  "workspaceId": "your-workspace-id"
}
```

**⚠️ Security Note**: Add `feedinbox.config.json` to your `.gitignore`

## 🎨 Component Customization

Since components are copied to your project, you have full control:

```tsx
// Modify the component file directly
export const FeedbackWidget: React.FC<Props> = ({ ...props }) => {
  // Add your custom logic here
  const [customState, setCustomState] = useState();
  
  // Your modifications...
};
```

## 📚 Examples

### Next.js Integration

```bash
# In your Next.js project
npx @feedinbox/cli add react-vanilla

# Then use in your components
'use client';
import { FeedbackWidget } from '@/components/feedinbox';
```

### Vite Project

```bash
# In your Vite project
npx @feedinbox/cli add react-tailwind

# Import in your app
import { FeedbackWidget } from './components/feedinbox';
```

### Custom Directory

```bash
# Install to custom location
npx @feedinbox/cli add react-shadcn --dir src/ui/feedinbox
```

## 🐛 Troubleshooting

### "No package.json found"
```bash
# Make sure you're in a Node.js project
npm init -y
```

### "React not detected"
```bash
# Install React if missing
npm install react react-dom
```

### "Directory already exists"
```bash
# Use --force to overwrite
npx @feedinbox/cli add react-vanilla --force
```

## 🔗 Related Packages

- [`@feedinbox/sdk`](https://www.npmjs.com/package/@feedinbox/sdk) - Core TypeScript SDK

## 📄 License

MIT © FeedInbox