tessl/npm-kadira--storybook

React Storybook: Isolate React Component Development with Hot Reloading.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Actions and Links

Name: tessl/npm-kadira--storybook
Author: tessl

Built-in addon functions for logging component interactions and creating navigation between stories. These utilities help with testing component behavior and organizing story workflows.

Capabilities

Action

Creates action handlers that log component interactions in the Storybook interface for debugging and testing purposes.

/**
 * Creates an action handler that logs interactions
 * @param name - Name for the action that appears in logs
 * @param params - Additional parameters to log with the action
 * @returns Function that can be used as event handler
 */
function action(name: string, ...params: any[]): Function;

Usage Examples:

import { action } from '@kadira/storybook';

// Basic action logging
storiesOf('Button', module)
  .add('with click handler', () => (
    <Button onClick={action('button-clicked')}>
      Click Me
    </Button>
  ));

// Multiple event handlers
storiesOf('Form Input', module)
  .add('interactive', () => (
    <input
      type="text"
      onChange={action('input-changed')}
      onFocus={action('input-focused')}
      onBlur={action('input-blurred')}
      onKeyPress={action('key-pressed')}
      placeholder="Type here..."
    />
  ));

// Action with additional context
storiesOf('List Items', module)
  .add('clickable items', () => (
    <ul>
      <li onClick={action('item-clicked', 'item-1')}>Item 1</li>
      <li onClick={action('item-clicked', 'item-2')}>Item 2</li>
      <li onClick={action('item-clicked', 'item-3')}>Item 3</li>
    </ul>
  ));

// Complex form with multiple actions
storiesOf('Contact Form', module)
  .add('full form', () => (
    <form onSubmit={action('form-submitted')}>
      <input 
        type="text" 
        placeholder="Name"
        onChange={action('name-changed')}
      />
      <input 
        type="email" 
        placeholder="Email"
        onChange={action('email-changed')}
      />
      <textarea 
        placeholder="Message"
        onChange={action('message-changed')}
      />
      <button type="submit">Send</button>
    </form>
  ));

Link To

Creates navigation functions that jump between different stories, useful for creating story workflows and demonstrations.

/**
 * Creates a navigation function to jump between stories
 * @param kind - Target story collection name
 * @param story - Target story name (optional)
 * @returns Function that navigates to the specified story
 */
function linkTo(kind: string, story?: string): Function;

Usage Examples:

import { linkTo } from '@kadira/storybook';

// Basic story navigation
storiesOf('Navigation Examples', module)
  .add('go to button', () => (
    <div>
      <p>This demonstrates navigation between stories</p>
      <button onClick={linkTo('Button', 'default')}>
        View Button Default
      </button>
    </div>
  ));

// Navigation menu
storiesOf('Story Menu', module)
  .add('main menu', () => (
    <nav>
      <ul>
        <li>
          <button onClick={linkTo('Button')}>
            Button Components
          </button>
        </li>
        <li>
          <button onClick={linkTo('Form', 'login')}>
            Login Form
          </button>
        </li>
        <li>
          <button onClick={linkTo('Layout', 'header')}>
            Header Layout
          </button>
        </li>
      </ul>
    </nav>
  ));

// Interactive demo with story flow
storiesOf('User Flow Demo', module)
  .add('start', () => (
    <div>
      <h2>Welcome to our app!</h2>
      <button onClick={linkTo('User Flow Demo', 'step-1')}>
        Get Started
      </button>
    </div>
  ))
  .add('step-1', () => (
    <div>
      <h2>Step 1: Choose your preferences</h2>
      <button onClick={linkTo('User Flow Demo', 'step-2')}>
        Continue
      </button>
      <button onClick={linkTo('User Flow Demo', 'start')}>
        Back
      </button>
    </div>
  ))
  .add('step-2', () => (
    <div>
      <h2>Step 2: Complete setup</h2>
      <button onClick={linkTo('User Flow Demo', 'complete')}>
        Finish
      </button>
      <button onClick={linkTo('User Flow Demo', 'step-1')}>
        Back
      </button>
    </div>
  ))
  .add('complete', () => (
    <div>
      <h2>Setup Complete!</h2>
      <button onClick={linkTo('User Flow Demo', 'start')}>
        Start Over
      </button>
    </div>
  ));

// Context-aware navigation
storiesOf('Product Catalog', module)
  .add('product list', () => (
    <div>
      <h3>Product Categories</h3>
      <button onClick={linkTo('Product Detail', 'electronics')}>
        Electronics
      </button>
      <button onClick={linkTo('Product Detail', 'clothing')}>
        Clothing
      </button>
    </div>
  ));

storiesOf('Product Detail', module)
  .add('electronics', () => (
    <div>
      <h3>Electronics</h3>
      <p>Electronic products...</p>
      <button onClick={linkTo('Product Catalog', 'product list')}>
        Back to Catalog
      </button>
    </div>
  ))
  .add('clothing', () => (
    <div>
      <h3>Clothing</h3>
      <p>Clothing items...</p>
      <button onClick={linkTo('Product Catalog', 'product list')}>
        Back to Catalog
      </button>
    </div>
  ));

Combined Actions and Links

Using actions and links together for comprehensive interactive demonstrations.

import { action, linkTo } from '@kadira/storybook';

storiesOf('Interactive Demo', module)
  .add('shopping cart', () => (
    <div>
      <h3>Shopping Cart</h3>
      <button 
        onClick={(e) => {
          action('add-to-cart')('product-123');
          // Could also navigate after action
          setTimeout(() => linkTo('Checkout', 'review')(), 1000);
        }}
      >
        Add to Cart & Go to Checkout
      </button>
      
      <button onClick={action('remove-item')}>
        Remove Item
      </button>
      
      <button onClick={linkTo('Product Catalog')}>
        Continue Shopping
      </button>
    </div>
  ));

// Form with validation and navigation
storiesOf('User Registration', module)
  .add('registration form', () => {
    const handleSubmit = (e) => {
      e.preventDefault();
      action('form-submitted')(e);
      // Navigate to success page
      linkTo('User Registration', 'success')();
    };
    
    return (
      <form onSubmit={handleSubmit}>
        <input 
          type="email" 
          placeholder="Email"
          onChange={action('email-input')}
        />
        <input 
          type="password" 
          placeholder="Password"
          onChange={action('password-input')}
        />
        <button type="submit">Register</button>
      </form>
    );
  })
  .add('success', () => (
    <div>
      <h2>Registration Successful!</h2>
      <button onClick={linkTo('User Registration', 'registration form')}>
        Register Another User
      </button>
    </div>
  ));

Action Logging Details

Actions appear in the Storybook Actions panel with detailed information about the interaction.

Action Log Information:

Action name
Timestamp
Event details (if applicable)
Additional parameters
Call stack (in development mode)

Example Action Log Output:

button-clicked
  ↳ SyntheticEvent {type: "click", target: button, ...}
  ↳ Timestamp: 14:23:45.123

form-submitted  
  ↳ {email: "user@example.com", password: "***"}
  ↳ Timestamp: 14:24:01.456

Types

interface ActionFunction {
  /**
   * Action handler function that logs interactions
   * Can be used as any event handler (onClick, onChange, etc.)
   */
  (...args: any[]): void;
}

interface LinkFunction {
  /**
   * Navigation function that switches to specified story
   * Typically used as event handler (onClick)
   */
  (): void;
}