Interactive Button with Event Logging

Build a Button component story that logs user interaction events to make them inspectable during development.

Requirements

Create a React Button component story that captures and logs user interaction events. The story should handle click events, mouse hover events (mouseEnter/mouseLeave), and focus/blur events. Event data should be visible in the UI for inspection during development.

Implementation

@generates

Test Cases

• Clicking the button logs a click event with event data @test
• Hovering over the button logs mouseEnter and mouseLeave events @test
• Focusing and blurring the button logs focus and blur events @test

API

/**
 * Button component that accepts event handlers as props
 */
export default {
  title: 'Components/Button',
  component: Button,
  // Configure automatic event handler attachment
};

/**
 * Default story showing a button with all event handlers
 */
export const InteractiveButton = {
  // Story configuration with event handlers
};

Dependencies { .dependencies }

@storybook/react { .dependency }

Provides React framework support for Storybook

@storybook/addon-actions { .dependency }

Provides event logging and action panel display capabilities

react { .dependency }

React library for building the component