Custom Analytics Addon for Storybook

Problem Statement

You need to build a custom Storybook addon that tracks user interactions with stories and displays analytics in a dedicated panel. The addon should allow developers to see which stories are being viewed and how often components are being manipulated through controls.

Requirements

1. Analytics Tracking

Create a system that tracks the following events:

• When a story is rendered
• When story arguments (args) are updated

The addon should collect this data and make it available for display.

2. Analytics Panel

Implement a custom panel in the Storybook UI that displays:

• A list of all viewed stories with their view counts
• The total number of arg updates across all stories
• The ability to clear/reset the analytics data

The panel should update in real-time as users interact with stories.

3. Integration

The addon must properly integrate with Storybook's addon system by:

• Registering the panel with the Storybook manager
• Listening to relevant events from the preview
• Properly handling communication between the manager and preview contexts

Implementation Guidelines

• Create the addon as a new module with proper exports
• The addon should work when added to the addons array in Storybook's main configuration
• Implement proper cleanup to avoid memory leaks when switching between stories
• The panel UI should be simple but functional (React components are recommended)
• Store analytics data in component state or a simple in-memory store

Dependencies { .dependencies }

@storybook/manager-api { .dependency }

Provides APIs for creating and managing Storybook addons, including panel registration and state management.

@storybook/preview-api { .dependency }

Provides APIs for interacting with the story preview context and accessing story lifecycle events.

Test Cases

Test Case 1: Panel Registration { .test_case }

File: addon.test.js { .test }

Input: Register the addon with Storybook { .input }

Expected Output: The analytics panel appears in the addons panel list with the correct title { .expected_output }

Tags: @test

Test Case 2: Story View Tracking { .test_case }

File: addon.test.js { .test }

Input: Navigate to three different stories { .input }

Expected Output: The panel displays all three stories with a view count of 1 each { .expected_output }

Tags: @test

Test Case 3: Args Update Tracking { .test_case }

File: addon.test.js { .test }

Input: Change story arguments twice using controls { .input }

Expected Output: The panel shows the total arg update count as 2 { .expected_output }

Tags: @test

Test Case 4: Data Reset { .test_case }

File: addon.test.js { .test }

Input: View stories and update args, then click the clear/reset button { .input }

Expected Output: All analytics data is reset to zero { .expected_output }

Tags: @test