npm package: @goodideadev/react
Description: Embeddable feedback widget and community board for Good Idea
Author: Good Idea
Latest version: 2.0.0

# @goodideadev/react

Embeddable feedback widget and community board for Good Idea.

## Installation

```bash
npm install @goodideadev/react
```

## Basic Usage

### FeedbackWidget

```jsx
import { FeedbackWidget } from '@goodideadev/react';

export function App() {
  return (
    <FeedbackWidget
      projectId="your-project-id"
      collectSentiment={true}
      offerEmailFollowup={true}
    />
  );
}
```

### CommunityBoard

```jsx
import { CommunityBoard } from '@goodideadev/react';

export function Board() {
  return <CommunityBoard projectId="your-project-id" />;
}
```

## Props Documentation

See TypeScript types in `src/types.ts` for all available props.

## Development

### Component Development with Storybook

Storybook provides an interactive development environment for developing and testing components in isolation.

#### Starting Storybook

From the `packages/react` directory:

```bash
pnpm storybook
```

This starts Storybook on **http://localhost:6006**

Or from the workspace root:

```bash
pnpm storybook
```

#### Storybook Features

- **Interactive Component Isolation** - Develop components separately from the main app
- **Hot Module Reloading** - Changes update immediately without page refresh
- **Prop Controls** - Interactively adjust component props in the UI
- **Dark Mode Testing** - Toggle between light and dark themes using next-themes
- **API Mocking** - All API endpoints are mocked with Mock Service Worker (MSW)
- **Auto Documentation** - Props and stories generate documentation automatically
- **Responsive Testing** - Test components at different viewport sizes

#### Story Files

Stories are defined in `src/components/*.stories.tsx` files. Each component has comprehensive stories demonstrating:

- Default usage with all features
- Props disabled/enabled combinations
- Different configurations and positions
- Edge cases and minimal configurations
- Error states and variants

Example story locations:
- `src/components/FeedbackWidget.stories.tsx`
- `src/components/FeedbackDialog.stories.tsx`
- `src/components/FeedbackForm.stories.tsx`
- `src/components/FeedbackTrigger.stories.tsx`
- `src/components/CommunityBoard.stories.tsx`

#### API Mocking in Stories

Stories use Mock Service Worker (MSW) to intercept API requests:

- **POST /api/v1/messages** - Feedback submission
- **GET /api/v1/projects/:projectId/ideas** - Fetch ideas
- **GET /api/v1/projects/:projectId/ideas/:ideaId/similar** - Similar ideas search

Requests made by components in stories are automatically intercepted and mocked without hitting the real backend.

#### Dark Mode Testing

The components support light and dark modes via next-themes:

1. In Storybook, find the theme toggle in the top toolbar
2. Click to switch between light and dark modes
3. Components automatically respond to theme changes
4. Use `dark:gi-` classes for dark mode styles

#### Building Static Documentation

Generate a static Storybook build for CI/documentation:

```bash
pnpm build-storybook
```

Creates `storybook-static/` with pre-rendered stories. The output can be:
- Served statically on a documentation site
- Used for design review and QA
- Integrated into CI pipelines

#### Adding Stories for New Components

When adding a new component:

1. Create `src/components/ComponentName.tsx`
2. Create `src/components/ComponentName.stories.tsx` with:
   - Meta configuration with component description
   - Props defined in argTypes with interactive controls
   - At least 3-5 story variations
   - JSDoc comments for auto-generated docs
3. Test locally: `pnpm storybook`
4. Verify dark mode and API mocking work
5. Test in static build: `pnpm build-storybook`

### Running Tests

```bash
pnpm test
```

Runs Vitest unit tests for all components.

### Building the Package

```bash
pnpm build
```

Builds the package for npm distribution:
- ESM and CJS modules
- TypeScript type definitions
- Pre-compiled Tailwind CSS with `gi-` prefix

The build does not include Storybook files, which are development-only.