npm package: @flower-city-online/comment-lib
Description: A comprehensive Angular comment library with real-time features, voting, replies, and event emitters. Built with Angular 17+ and Ionic components.
Latest version: 1.1.4

# CommentLib

A comprehensive Angular comment library with real-time features, voting, replies, and event emitters. Built with Angular 17+ and Ionic components.

## Features

- 🎯 **Real-time Comments** - Live comment updates using Socket.IO
- 👍 **Voting System** - Upvote/downvote comments with real-time updates
- 💬 **Nested Replies** - Support for comment replies and threading
- ⭐ **Featured Comments** - Mark important comments as featured
- 🚨 **Reporting System** - Report inappropriate comments
- 📱 **Ionic Integration** - Built with Ionic components for mobile-first design
- 🎨 **Customizable Styling** - SCSS-based styling with Tailwind CSS support
- 📡 **Event Emitters** - Comprehensive event system for all comment actions
- 🔍 **Search & Filter** - Built-in search and sorting capabilities
- 🌐 **Internationalization** - Multi-language support with ngx-translate

## Installation

```bash
npm install @your-username/comment-lib
```

## Peer Dependencies

Make sure you have the following peer dependencies installed:

```bash
npm install @angular/common@^17.0.0 @angular/core@^17.0.0 @angular/forms@^17.0.0 @angular/router@^17.0.0 @ionic/angular@^8.0.0 @ngx-translate/core@^15.0.0 @naniteninja/ionic-lib@^1.0.0 rxjs@^7.0.0 socket.io-client@^4.0.0
```

## Quick Start

### 1. Import the Module

```typescript
import { CommentModule } from '@your-username/comment-lib';

@NgModule({
  imports: [
    CommentModule
  ]
})
export class AppModule { }
```

### 2. Use the Component

```html
<lib-comment-lib 
  [inputValue]="inputValue"
  (commentCreated)="onCommentCreated($event)"
  (commentUpdated)="onCommentUpdated($event)"
  (commentDeleted)="onCommentDeleted($event)"
  (commentVoted)="onCommentVoted($event)"
  (commentUnvoted)="onCommentUnvoted($event)"
  (commentFeatured)="onCommentFeatured($event)"
  (commentUnfeatured)="onCommentUnfeatured($event)"
  (commentReported)="onCommentReported($event)">
</lib-comment-lib>
```

### 3. Handle Events

```typescript
import { IComment } from '@your-username/comment-lib';

export class AppComponent {
  inputValue = {
    modelId: 'your-model-id',
    senderId: 'your-user-id'
  };

  onCommentCreated(comment: IComment): void {
    console.log('Comment created:', comment);
  }

  onCommentUpdated(comment: IComment): void {
    console.log('Comment updated:', comment);
  }

  onCommentDeleted(comment: IComment): void {
    console.log('Comment deleted:', comment);
  }

  onCommentVoted(comment: IComment): void {
    console.log('Comment voted:', comment);
  }

  onCommentUnvoted(comment: IComment): void {
    console.log('Comment unvoted:', comment);
  }

  onCommentFeatured(comment: IComment): void {
    console.log('Comment featured:', comment);
  }

  onCommentUnfeatured(comment: IComment): void {
    console.log('Comment unfeatured:', comment);
  }

  onCommentReported(comment: IComment): void {
    console.log('Comment reported:', comment);
  }
}
```

## API Reference

### InputValue Interface

```typescript
interface InputValue {
  modelId: string;    // ID of the content being commented on
  senderId: string;   // ID of the current user
}
```

### IComment Interface

```typescript
interface IComment {
  _id: string;
  comment: string;
  user: IUser;
  isFeatured: boolean;
  votes: IVote[];
  images: IImage[];
  createdAt: Date;
  updatedAt: Date;
  parentComment?: string;  // For replies
}
```

### Event Emitters

| Event | Description | Payload |
|-------|-------------|---------|
| `commentCreated` | Fired when a new comment is created | `IComment` |
| `commentUpdated` | Fired when a comment is updated | `IComment` |
| `commentDeleted` | Fired when a comment is deleted | `IComment` |
| `commentVoted` | Fired when a comment is voted on | `IComment` |
| `commentUnvoted` | Fired when a vote is removed | `IComment` |
| `commentFeatured` | Fired when a comment is featured | `IComment` |
| `commentUnfeatured` | Fired when a comment is unfeatured | `IComment` |
| `commentReported` | Fired when a comment is reported | `IComment` |

## Styling

The library uses SCSS for styling and includes Tailwind CSS support. You can customize the appearance by overriding the CSS variables or importing your own styles.

## Backend Integration

This library expects a backend service that implements the following endpoints:

- `GET /comments/:modelId` - Get comments for a model
- `POST /comments` - Create a new comment
- `PUT /comments/:id` - Update a comment
- `DELETE /comments/:id` - Delete a comment
- `POST /votes` - Vote on a comment
- `DELETE /votes/:id` - Remove a vote
- `PUT /comments/:id/feature` - Toggle featured status

## Socket.IO Events

The library listens for the following Socket.IO events:

- `commentAdded` - New comment added
- `commentUpdated` - Comment updated
- `commentDeleted` - Comment deleted
- `voteChanged` - Vote added/removed
- `commentFeatureToggled` - Featured status changed

## Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## Support

If you have any questions or need help, please:

1. Check the [Issues](https://github.com/your-username/comment-lib/issues) page
2. Create a new issue if your problem isn't already reported
3. Contact the maintainers

## Changelog

### 1.0.0
- Initial release
- Real-time comment system
- Voting functionality
- Reply system
- Event emitters
- Ionic integration