naughtydev/README.md

A delightfully playful React component for collecting user feedback and sending it directly to Slack

# 🌈 NaughtyDev

A delightfully playful React component for collecting user feedback and sending it directly to Slack. Perfect for websites that want to add a touch of fun to their feedback process!

![NaughtyDev Demo](public/naughty.gif)

## ✨ Features

- 🎨 Two stunning button styles: Classic and Crazy
- 🔄 Seamless Slack integration
- 🎮 Pixel-perfect retro aesthetics
- 📱 Fully responsive design
- 🌙 Dark mode support
- ⚡ Zero-config setup

## 🚀 Installation

```bash
# Using npm
npm install naughtydev

# Using yarn
yarn add naughtydev

# Using pnpm
pnpm add naughtydev

# Using bun
bun add naughtydev
```

## 🎮 Quick Start

```jsx
import { FeedbackButton } from 'naughtydev';

function App() {
  return (
    <FeedbackButton 
      slackWebhookUrl={process.env.NEXT_PUBLIC_SLACK_WEBHOOK_URL}
      channelName="Website Feedback"
    />
  );
}
```

## 🎨 Button Variants

### Classic Button
```jsx
<FeedbackButton
  slackWebhookUrl={process.env.NEXT_PUBLIC_SLACK_WEBHOOK_URL}
  channelName="Website Feedback"
/>
```

### Crazy Button (for the adventurous!)
```jsx
<FeedbackButton
  buttonText="🌈 GIMME FEEDBACK! 🦄"
  headerText="✨ Tell Me Something WILD! ✨"
  descriptionText="Go totally BONKERS! 🎪🎢🎡"
  submitText="🚀 BLAST OFF! 💥"
  variant="crazy"
  slackWebhookUrl={process.env.NEXT_PUBLIC_SLACK_WEBHOOK_URL}
  channelName="Crazy Feedback"
/>
```

## ⚙️ Configuration Options

| Prop | Type | Description |
|------|------|-------------|
| `slackWebhookUrl` | `string` | Your Slack webhook URL |
| `channelName` | `string` | Target Slack channel |
| `buttonText` | `string` | Custom button text |
| `headerText` | `string` | Modal header text |
| `descriptionText` | `string` | Feedback form description |
| `submitText` | `string` | Submit button text |
| `variant` | `'default' \| 'crazy'` | Button style variant |
| `size` | `'default' \| 'sm' \| 'lg'` | Button size |

## 🔒 Security Note

Never expose your Slack webhook URL in client-side code. Always use environment variables and proper server-side handling.

## 🛠️ Development

1. Clone the repository
2. Install dependencies: `pnpm install`
3. Start the development server: `pnpm dev`
4. Visit `http://localhost:3000`

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## 📝 License

MIT © [Your Name]

---

Made with 💜 by [mattbratos](https://x.com/mattbratos)