fubi/README.md

A lightweight, universal in-page feedback and collaboration tool for web applications.

# Fubi

Fubi is a lightweight, universal in-page feedback and collaboration tool. It allows users to leave contextual comments on specific elements of any web application, streamlining the feedback process for teams. For more information, visit [fubi.dev](https://fubi.dev). 

## Features

- 🎯 **Element Isolation**: Select and isolate specific page elements for targeted feedback
- 💬 **Threads & Comments**: Create comment threads attached to specific page elements
- ✅ **Mark as Done**: Track progress by marking feedback threads as completed
- 🔄 **Page Switcher**: Easily navigate between pages where feedback is provided
- ⚡ **Real-time**: Get notified of new comments and changes instantly
- 🔌 **Easy Integration**: Simple to integrate into any web application
- 📦 **Tiny**: Lightweight package with minimal impact on your website

## Installation

```bash
npm install fubi
```

## Basic Usage

```js
import { fubi } from 'fubi';

// Initialize Fubi with your configuration
const app = fubi({
  project: 'my-project',
  content: "body", // any valid CSS selector
  ignore: ["script", "style", "noscript", "br", "hr"], // array of elements to ignore
  target: "body" // where to mount the Fubi container
});
```

## Activation

To open the Fubi feedback interface, simply add the `fubi` parameter to your URL:

```
https://yourwebsite.com/?fubi
```

This makes it easy to share feedback-enabled links with your team.

## Helper Classes

Fubi provides several helper classes to control which elements can be selected for feedback:

- **`fubi-ignore`**: Add this class to any element you want Fubi to ignore. The element itself won't be selectable for feedback.

- **`fubi-ignore-all`**: Add this class to a container element to make all of its contents unselectable. This is useful for UI components that shouldn't receive feedback.

- **`fubi-ignore-stop`**: This class can be used inside a `fubi-ignore-all` container to re-enable element selection. Any element with this class (and its children) will be selectable again, effectively stopping the ignore behavior.

Example usage:

```html
<!-- Regular element that can be selected -->
<div>This element can be selected</div>

<!-- Single element that can't be selected -->
<div class="fubi-ignore">This element can't be selected</div>

<!-- Container where nothing can be selected -->
<ul class="fubi-ignore-all">
  <li>Can't be selected</li>
  <li>Can't be selected</li>
  <!-- This element and its children become selectable again -->
  <li class="fubi-ignore-stop">
    <a href="/page">This can be selected</a>
  </li>
</ul>
```

## Getting Started

To use Fubi, you'll need to create an account at [fubi.dev](https://fubi.dev) where you can set up your projects and manage your feedback.