or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdmarkdown-components.mdprop-tables.mdstory-decoration.md
tile.json

tessl/npm-storybook--addon-info

A Storybook addon to show additional information for your stories.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/addon-info@5.3.x

To install, run

npx @tessl/cli install tessl/npm-storybook--addon-info@5.3.0

index.mddocs/

Storybook Info Addon

The Storybook Info Addon enhances story documentation by displaying additional information alongside stories in the Storybook interface. It provides automatic prop table generation, markdown documentation support, and source code display to improve the developer experience within the Storybook development environment.

Package Information

  • Package Name: @storybook/addon-info
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install --save-dev @storybook/addon-info

Core Imports

import { withInfo, Story, PropTable, setDefaults } from "@storybook/addon-info";

For legacy CommonJS:

const { withInfo, Story, PropTable, setDefaults } = require("@storybook/addon-info");

Basic Usage

import { withInfo } from "@storybook/addon-info";
import { addDecorator } from "@storybook/react";

// Global usage
addDecorator(withInfo);

// Or per story
export default {
  title: "Button",
  decorators: [withInfo],
};

// With options
export const BasicButton = () => <Button>Click me</Button>;
BasicButton.story = {
  parameters: {
    info: {
      text: "This is a basic button component",
      inline: true,
    },
  },
};

Architecture

The addon is built around several key components:

  • Decorator System: withInfo decorator integrates with Storybook's parameter system
  • Story Component: Core React component that renders story information panels
  • Prop Table System: Automatic prop table generation from PropTypes or React docgen
  • Markdown Renderer: Marksy-based markdown processing with custom components
  • Type Display: Intelligent rendering of PropTypes and type information
  • Styling System: Customizable styles through function-based theming

Capabilities

Story Decoration

Core decorator functionality for adding info panels to Storybook stories with flexible configuration options.

/**
 * Main decorator for adding info addon to stories
 * @param {Object|string} options - Configuration options or text content
 * @returns {Function} Storybook decorator function
 */
function withInfo(options);

interface InfoOptions {
  /** Display info inline vs click button to view */
  inline?: boolean;
  /** Toggle display of header with component name */
  header?: boolean;
  /** Display the source code of story component */
  source?: boolean;
  /** Components to show prop tables for */
  propTables?: Array<React.ComponentType>;
  /** Components to exclude from prop tables */
  propTablesExclude?: Array<React.ComponentType>;
  /** Custom styles object or function */
  styles?: Object | Function;
  /** Custom markdown component overrides */
  components?: { [key: string]: React.ComponentType };
  /** Max props to display per line in source code */
  maxPropsIntoLine?: number;
  /** Max object keys to display in prop values */
  maxPropObjectKeys?: number;
  /** Max array length to display in prop values */
  maxPropArrayLength?: number;
  /** Max string length to display in prop values */
  maxPropStringLength?: number;
  /** Custom prop table component */
  TableComponent?: React.ComponentType;
  /** Props to exclude from prop tables */
  excludedPropTypes?: Array<string>;
  /** Text content to display (markdown supported) */
  text?: string;
}

Story Decoration

Prop Table Generation

Automatic prop table generation from React components using PropTypes or React docgen information.

/**
 * Default prop table component for displaying component props
 * @param {Object} props - PropTable component props
 */
function PropTable(props);

interface PropTableProps {
  /** React component type to analyze */
  type?: Function;
  /** Array of prop definitions to display */
  propDefinitions?: Array<PropDefinition>;
  /** Props to exclude from the table */
  excludedPropTypes?: Array<string>;
  /** Max object keys to display */
  maxPropObjectKeys: number;
  /** Max array length to display */
  maxPropArrayLength: number;
  /** Max string length to display */
  maxPropStringLength: number;
}

interface PropDefinition {
  /** Property name */
  property: string;
  /** PropType information object or string */
  propType: Object | string;
  /** Whether the prop is required */
  required?: boolean;
  /** Prop description from docgen or comments */
  description?: string;
  /** Default value for the prop */
  defaultValue?: any;
}

Prop Tables

Markdown Rendering

Custom markdown components for rich text documentation display within story info panels.

// Heading components
function H1(props);
function H2(props);
function H3(props);
function H4(props);
function H5(props);
function H6(props);

// Text components
function P(props);
function A(props);
function LI(props);
function UL(props);

// Code components
function Code(props);
function Pre(props);

Markdown Components

Configuration Options

Default Configuration

const defaultOptions = {
  inline: false,
  header: true,
  source: true,
  propTables: [],
  maxPropsIntoLine: 3,
  maxPropObjectKeys: 3,
  maxPropArrayLength: 3,
  maxPropStringLength: 50,
};

Global Configuration

import { withInfo } from "@storybook/addon-info";
import { addDecorator } from "@storybook/react";

// Set global options
addDecorator(
  withInfo({
    header: false,
    inline: true,
    source: false,
  })
);

Per-Story Configuration

// String shorthand
export const Example = () => <Component />;
Example.story = {
  parameters: {
    info: "This component does something useful",
  },
};

// Full options object
Example.story = {
  parameters: {
    info: {
      text: "Detailed markdown documentation here",
      inline: true,
      propTables: [Component],
    },
  },
};

Types

interface StoryContext {
  /** Story category/group name */
  kind: string;
  /** Individual story name */
  name: string;
}

interface PropTableCompareFunction {
  (element: React.ReactElement, Component: React.ComponentType): boolean;
}

interface StylesFunction {
  (defaultStyles: Object): Object;
}

/**
 * @deprecated Use withInfo options parameter instead
 * Sets global default options for the info addon
 * @param {Object} newDefaults - Default options to merge
 * @returns {Function} Deprecated function
 */
function setDefaults(newDefaults);