avada-feature-request/README.md

Feature Request component library for React applications

# avada-feature-request

A comprehensive React component library for feature request management, providing a complete solution for collecting, displaying, and managing user feature requests.

## ✨ Key Features

- 🎨 **Beautiful UI** - Responsive and modern UI components
- 🔧 **TypeScript** - Full TypeScript support with type safety
- 🎛️ **Flexible Customization** - Easy styling customization with SCSS and Polaris
- 🚀 **Simple Integration** - Quick setup in just a few steps
- 📱 **Mobile-friendly** - Optimized for all devices
- 🔒 **Anonymous Submission** - Support for submissions without login
- 👍 **Voting System** - Like/dislike with real-time updates
- 💬 **Multi-level Comments** - Comment system with replies
- 🏷️ **Categorization** - Bug report, improvement, new feature
- 📊 **Trending** - Display hottest feature requests
- 🔥 **Firebase Integration** - Real-time data with Firestore
- 🎯 **Status Management** - Doing, Considering, Completed

## 📦 Installation

```bash
npm install avada-feature-request
```

or

```bash
yarn add avada-feature-request
```

## 🚀 Quick Start

### 1. Setup Provider

Wrap your application with `FeatureRequestProvider`:

```tsx
import React from 'react';
import { 
  FeatureRequestProvider, 
  FeatureReqHome 
} from 'avada-feature-request';

const shopInfo = {
  id: "shop123",
  shopId: "shop123", 
  shopOwner: "John Doe",
  email: "admin@example.com",
  domain: "example.com",
  avatar: "https://example.com/avatar.jpg"
};

function App() {
  return (
    <FeatureRequestProvider 
      shopInfo={shopInfo}
      appDomain="https://your-app.com"
      fetchAuthenticatedApi={fetchAPI}
      firebaseConfig={{
        apiKey: "your-api-key",
        authDomain: "your-project.firebaseapp.com",
        projectId: "your-project-id",
        // ... other config
      }}
    >
      <div className="container">
        <h1>Feature Requests</h1>
        <FeatureReqHome />
      </div>
    </FeatureRequestProvider>
  );
}
```

### 2. Display Feature Request List

```tsx
import { FeatureReqHome } from 'avada-feature-request';

function FeatureRequestPage() {
  return (
    <div className="feature-requests">
      <FeatureReqHome />
    </div>
  );
}
```

### 3. Create New Feature Request

```tsx
import { CreateFeatureReq } from 'avada-feature-request';

function CreatePage() {
  return (
    <div className="create-feature">
      <CreateFeatureReq />
    </div>
  );
}
```

## 🧩 Main Components

### FeatureRequestProvider

The main provider component that manages global state and API configuration.

**Props:**
- `shopInfo: Shop` - Shop/user information
- `appDomain: string` - Application domain
- `fetchAuthenticatedApi: Function` - Authenticated API call function
- `firebaseConfig?: FirebaseConfig` - Firebase configuration
- `typeRequest?: string[]` - Allowed request types
- `isEmbeddedAppEnv?: boolean` - Embedded app environment
- `onShopInfoUpdate?: Function` - Callback when shop info changes

### FeatureReqHome

Home page component displaying feature requests list with filter and search functionality.

**Features:**
- 🔍 Search by title
- 🎯 Filter by status (Doing, Considering, Completed)
- 📂 Filter by type (new-feature, bug-report, improvement)
- 📈 Sort by trending, newest, most votes
- ♾️ Infinite scroll loading
- 📱 Responsive design

### CreateFeatureReq

Form component for creating new feature requests with validation.

**Features:**
- 📝 Rich text editor for description
- 🏷️ Feature request type selection
- 🔒 Anonymous submission option
- ✅ Complete form validation
- 🎨 User-friendly UI/UX

### FeatureReqDetails

Component for displaying detailed view of a feature request.

**Features:**
- 📄 Full content display with HTML
- 👍 Vote/unvote functionality
- 💬 Multi-level comment system
- 🔗 Social sharing links
- 🏷️ Dynamic status badges

### FeatureReqTrending

Component displaying trending feature requests.

**Features:**
- 🔥 Smart trending algorithm
- ⏰ Real-time updates
- 🎨 Special card design
- 📊 Metrics display

## 🪝 Hooks

### useFeatureRequest

Hook to access feature request context.

```tsx
import { useFeatureRequest } from 'avada-feature-request';

function MyComponent() {
  const { 
    shopInfo,
    fetchAuthenticatedApi,
    isEmbeddedAppEnv 
  } = useFeatureRequest();

  // Use context values...
}
```

## 🎨 Custom Components

### CustomBadge

Flexible badge component with multiple styles.

```tsx
import { CustomBadge } from 'avada-feature-request';

<CustomBadge 
  tone="success" 
  size="medium"
  progress="complete"
>
  Completed
</CustomBadge>
```

**Props:**
- `tone: 'success' | 'critical' | 'warning' | 'info'`
- `size: 'small' | 'medium' | 'large'`
- `progress: 'incomplete' | 'partiallyComplete' | 'complete'`

### UserComment

Component for displaying comments with avatar and metadata.

### ActionFeatureReq

Component containing action buttons (vote, comment, share).

## 📊 Types & Interfaces

```tsx
// Main Feature Request
interface FeatureRequest {
  id: string;
  title: string;
  description: string;
  status: "Doing" | "Considering" | "Completed";
  featureType: "new-feature" | "bug-report" | "improvement";
  commentCount: number;
  voteCount: number;
  createdAt: string | Date;
  createdBy: {
    id: string;
    name: string;
    email: string;
    avatar?: string;
  };
  shopId: string;
  shopOwner: string;
  isAnonymous?: boolean;
}

// Comment
interface FeatureRequestComment {
  id: string;
  content: string;
  createdAt: string | Date;
  likedUserIds: string[];
  parentId?: string;
  replies?: boolean;
  repliesCount?: number;
  shopId: string;
  shopOwner: string;
  isTeamAvada?: boolean;
  voteCount: number;
}

// Shop Info
interface Shop {
  id: string;
  shopId: string;
  shopOwner: string;
  email: string;
  domain: string;
  avatar?: string;
}
```

## 🛠️ Development

### Building the Project

```bash
# Build library
npm run build

# Build types
npm run build:types

# Watch mode for development
npm run watch
```

### Testing

```bash
# Run tests
npm test

# Lint code
npm run lint
```

## 🎨 Styling

The project uses SCSS and Shopify Polaris for styling. You can override CSS variables:

```scss
// Custom variables
:root {
  --avada-primary-color: #007ace;
  --avada-success-color: #008060;
  --avada-critical-color: #d72c0d;
  --avada-warning-color: #ffc453;
}
```

## 🚀 Deployment

### Build for Production

```bash
npm run build
```

### Publish to NPM

```bash
npm run prepublishOnly
npm publish
```

## 🔧 Firebase Configuration

To use real-time features, you need to configure Firebase:

1. Create a new Firebase project
2. Enable Firestore Database
3. Setup security rules
4. Provide config in `FeatureRequestProvider`

```javascript
// firestore.rules example
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /feature-requests/{document} {
      allow read, write: if true; // Customize based on your needs
    }
  }
}
```

## 📝 Changelog

### v1.0.0
- ✅ Basic features: create, view, vote feature requests
- ✅ Multi-level comment system
- ✅ Real-time updates with Firebase
- ✅ Responsive design
- ✅ TypeScript support

## 🤝 Contributing

We welcome all contributions! Please:

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Merge Request

## 📄 License

MIT License - see the [LICENSE](LICENSE) file for more details.

## 👥 Author

**Nguyen Truong** - [GitLab](https://gitlab.com/TruongNN62)

## 🆘 Support

If you encounter issues or have questions:

- 📧 Email: support@avada.io
- 🐛 Issues: [GitLab Issues](https://gitlab.com/TruongNN62/avada-feature-request/-/issues)
- 📖 Documentation: [Docs](https://docs.avada.io/feature-request)

---

Made with ❤️ by Avada Team