@bernierllc/feedback-ui

Configurable React feedback UI components with multiple integration methods and a flexible connector system.

Features

• 🎨 Multiple Integration Methods: Floating icon, menu link, or embedded card
• ⚙️ Highly Configurable: Customize feedback types, priority levels, and form fields
• 🔌 Connector System: Route feedback to different backends (extensible architecture)
• 📝 Form Validation: Built-in validation with customizable rules
• ♿ Accessible: ARIA labels and keyboard navigation support
• 📦 TypeScript: Full type safety with comprehensive interfaces
• 🎯 Zero Dependencies: Lightweight with only React and lucide-react

Installation

npm install @bernierllc/feedback-ui

Quick Start

Floating Icon Integration

import { FloatingIcon } from '@bernierllc/feedback-ui';

function App() {
  return (
    <>
      <YourApp />
      <FloatingIcon position="bottom-right" />
    </>
  );
}

Menu Link Integration

import { MenuLink } from '@bernierllc/feedback-ui';

function Sidebar() {
  return (
    <nav>
      <MenuLink>Share Feedback</MenuLink>
    </nav>
  );
}

Card Integration

import { FeedbackCard } from '@bernierllc/feedback-ui';

function SettingsPage() {
  return (
    <div>
      <h1>Settings</h1>
      <FeedbackCard />
    </div>
  );
}

Configuration

All components accept an optional config prop to customize behavior:

import { FloatingIcon, FeedbackConfig } from '@bernierllc/feedback-ui';

const config: FeedbackConfig = {
  // Customize feedback types
  feedbackTypes: [
    { id: 'bug', label: 'Bug Report', enabled: true },
    { id: 'feature', label: 'Feature Request', enabled: true },
  ],
  defaultFeedbackType: 'bug',

  // Configure priority levels
  showPriority: true,
  priorityLevels: [
    { value: 'low', label: 'Low' },
    { value: 'medium', label: 'Medium' },
    { value: 'high', label: 'High' },
  ],
  defaultPriority: 'medium',

  // Field configuration
  showTitle: true,
  titleRequired: true,
  descriptionRequired: true,

  // Validation
  minDescriptionLength: 10,
  maxDescriptionLength: 5000,

  // UI customization
  title: 'Share Your Feedback',
  description: 'Help us improve',
  submitLabel: 'Submit',
  cancelLabel: 'Cancel',
};

<FloatingIcon config={config} />

Connectors

Connectors handle feedback submission to different backends. Implement the FeedbackConnector interface to create custom connectors:

import { FeedbackConnector, FeedbackData } from '@bernierllc/feedback-ui';

const myConnector: FeedbackConnector = {
  id: 'my-backend',
  name: 'My Backend',
  async submit(feedback: FeedbackData) {
    const response = await fetch('/api/feedback', {
      method: 'POST',
      body: JSON.stringify(feedback),
    });

    if (!response.ok) {
      return { success: false, message: 'Submission failed' };
    }

    return { success: true, id: 'feedback-123' };
  },
};

<FloatingIcon connector={myConnector} />

Connector Registry

Register connectors globally for reuse across your application:

import { FeedbackConnectorRegistry } from '@bernierllc/feedback-ui';

// Register connector
FeedbackConnectorRegistry.register(myConnector);

// Retrieve connector
const connector = FeedbackConnectorRegistry.get('my-backend');

// Get connectors for specific feedback type
const bugConnectors = FeedbackConnectorRegistry.getForType('bug');

API Reference

FeedbackConfig

| Property | Type | Default | Description | |----------|------|---------|-------------| | feedbackTypes | FeedbackTypeConfig[] | See defaults | Available feedback types | | defaultFeedbackType | string | 'general' | Default selected type | | showPriority | boolean | true | Show priority selector | | priorityLevels | PriorityLevel[] | Low/Medium/High | Available priority levels | | defaultPriority | Priority | 'medium' | Default priority | | showTitle | boolean | true | Show title field | | titleRequired | boolean | true | Make title required | | descriptionRequired | boolean | true | Make description required | | minDescriptionLength | number | 10 | Min description length | | maxDescriptionLength | number | 5000 | Max description length | | title | string | 'Share Your Feedback' | Modal/card title | | description | string | 'Help us improve...' | Modal/card description | | submitLabel | string | 'Submit Feedback' | Submit button text | | cancelLabel | string | 'Cancel' | Cancel button text |

FeedbackData

interface FeedbackData {
  type: string;
  priority?: 'low' | 'medium' | 'high';
  title?: string;
  description: string;
  metadata?: Record<string, unknown>;
  submittedAt: Date;
  submittedBy?: {
    id?: string;
    name?: string;
    email?: string;
    role?: string;
  };
}

FeedbackConnector

interface FeedbackConnector {
  id: string;
  name: string;
  supportedTypes?: string[]; // Optional: supported feedback types
  submit: (feedback: FeedbackData) => Promise<FeedbackSubmissionResult>;
  validate?: (config: ConnectorConfig) => Promise<ValidationResult>;
}

Examples

Custom Feedback Types

const config: FeedbackConfig = {
  feedbackTypes: [
    {
      id: 'praise',
      label: '👍 Praise',
      description: 'Share what you love',
      enabled: true,
    },
    {
      id: 'complaint',
      label: '😞 Complaint',
      description: 'Let us know what went wrong',
      enabled: true,
    },
  ],
};

<FeedbackCard config={config} />

Minimal Configuration

const config: FeedbackConfig = {
  showTitle: false,
  showPriority: false,
  feedbackTypes: [{ id: 'general', label: 'Feedback', enabled: true }],
};

<FeedbackCard config={config} />

Custom Submission Handler

import { FeedbackData } from '@bernierllc/feedback-ui';

const handleSubmit = async (feedback: FeedbackData) => {
  console.log('Feedback submitted:', feedback);
  // Custom handling logic
};

<FeedbackModal
  isOpen={true}
  onClose={() => {}}
  onSubmit={handleSubmit}
/>

Styling

Components use semantic CSS classes for easy customization:

.feedback-modal-overlay {
  /* Modal overlay styles */
}

.feedback-modal {
  /* Modal container styles */
}

.feedback-floating-button {
  /* Floating icon button styles */
}

.feedback-card {
  /* Card container styles */
}

.feedback-field {
  /* Form field container styles */
}

.feedback-button {
  /* Button styles */
}

License

Copyright (c) 2025 Bernier LLC. Licensed under a limited-use license. See LICENSE file for details.

Support

For issues or questions, contact [email protected]