@wishnova/react

Embeddable feedback widget and community board for Wishnova.

Installation

npm install @wishnova/react

Basic Usage

FeedbackWidget

import { FeedbackWidget } from '@wishnova/react';

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

CommunityBoard

import { CommunityBoard } from '@wishnova/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:

pnpm storybook

This starts Storybook on http://localhost:6006

Or from the workspace root:

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/wishes - Fetch wishes
• GET /api/v1/projects/:projectId/wishes/:wishId/similar - Similar wishes 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:wn- classes for dark mode styles

Building Static Documentation

Generate a static Storybook build for CI/documentation:

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

pnpm test

Runs Vitest unit tests for all components.

Building the Package

pnpm build

Builds the package for npm distribution:

• ESM and CJS modules
• TypeScript type definitions
• Pre-compiled Tailwind CSS with wn- prefix

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