Story Management

/**
 * Creates a story collection for a specific component kind
 * @param kind - The name/category for the component stories
 * @param module - Optional webpack module for hot reloading support
 * @returns Story object with chaining methods
 */
function storiesOf(kind: string, module?: any): Story;

import { storiesOf } from '@kadira/storybook';
import Button from '../src/Button';

// Basic story collection
storiesOf('Button', module)
  .add('default', () => <Button>Default</Button>)
  .add('primary', () => <Button primary>Primary</Button>);

// With hot module replacement
storiesOf('Components/Button', module)
  .add('small', () => <Button size="small">Small Button</Button>)
  .add('large', () => <Button size="large">Large Button</Button>);

/**
 * Adds an individual story to the collection
 * @param storyName - Name for the story variation
 * @param storyFunction - Function returning the component JSX
 * @returns Story object for method chaining
 */
add(storyName: string, storyFunction: Function): Story;

storiesOf('Input', module)
  .add('empty', () => <Input placeholder="Enter text..." />)
  .add('with value', () => <Input value="Hello World" />)
  .add('disabled', () => <Input disabled value="Disabled input" />);

// With actions and props
storiesOf('Form Elements', module)
  .add('interactive input', () => (
    <Input 
      onChange={action('input-changed')}
      onFocus={action('input-focused')}
      placeholder="Type something..."
    />
  ));

/**
 * Returns all registered stories in structured format
 * @returns Array of story kinds with their individual stories
 */
function getStorybook(): Array<{
  kind: string;
  stories: Array<{
    name: string;
    render: Function;
  }>;
}>;

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

// Get all stories programmatically
const allStories = getStorybook();

// Access story structure
allStories.forEach(storyKind => {
  console.log(`Kind: ${storyKind.kind}`);
  storyKind.stories.forEach(story => {
    console.log(`  Story: ${story.name}`);
    // story.render() returns the component JSX
  });
});

// Example output structure:
// [
//   {
//     kind: "Button",
//     stories: [
//       { name: "default", render: Function },
//       { name: "primary", render: Function }
//     ]
//   }
// ]

interface StoryDecorator {
  /**
   * Decorator function that wraps story components
   * @param story - Function that returns the story component
   * @param context - Story context information
   * @returns JSX element wrapping the story
   */
  (story: Function, context: {kind: string, story: string}): Object;
}

interface Story {
  /** Add a story to this collection */
  add(storyName: string, storyFunction: Function): Story;
  /** Add a decorator to all stories in this collection */
  addDecorator(decorator: StoryDecorator): Story;
  /** The kind/category name for this story collection */
  kind: string;
}

interface StoryData {
  /** Category name for the story group */
  kind: string;
  /** Array of individual stories in this category */
  stories: Array<{
    /** Name of the individual story */
    name: string;
    /** Function that renders the story component */
    render: Function;
  }>;
}