or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-rendering.mdindex.mdprovider-system.md
tile.json

tessl/npm-storybook--ui

Core Storybook UI - React based UI components that provide the core interface for Storybook

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/ui@6.5.x

To install, run

npx @tessl/cli install tessl/npm-storybook--ui@6.5.0

index.mddocs/

Storybook UI

Storybook UI is the core React-based user interface library that provides the foundational rendering system for Storybook, a tool for developing UI components in isolation. It offers a minimal Provider API pattern where consumers extend a base Provider class to supply UI elements, API handling, and configuration for the Storybook manager interface.

Package Information

  • Package Name: @storybook/ui
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @storybook/ui

Core Imports

import renderStorybookUI, { Provider, Root, RootProps } from "@storybook/ui";

For CommonJS:

const renderStorybookUI = require("@storybook/ui").default;
const { Provider, Root } = require("@storybook/ui");

Basic Usage

import renderStorybookUI, { Provider } from "@storybook/ui";

// Extend the Provider base class
class MyProvider extends Provider {
  getElements(type) {
    // Return UI elements by type - must be implemented
    return {
      sidebar: { component: MySidebar },
      preview: { component: MyPreview },
      panel: { component: MyPanel }
    };
  }
  
  handleAPI(api) {
    // Handle API initialization - must be implemented
    console.log("API initialized:", api);
    api.setStories(this.stories);
  }
  
  getConfig() {
    // Return configuration object - optional with default empty implementation
    return {
      theme: "light",
      showNav: true
    };
  }
}

// Render the Storybook UI
const domNode = document.getElementById("root");
const provider = new MyProvider();
renderStorybookUI(domNode, provider);

Architecture

Storybook UI implements a minimal provider pattern architecture:

  • Provider System: Base Provider class that must be extended, requiring implementation of getElements() and handleAPI() methods
  • Root Component: React component that wraps the entire Storybook UI with necessary providers (Helmet, Location, Theme)
  • Rendering Function: Single entry point function that validates the provider and mounts the UI to a DOM node

The package has a very focused public API with only 4 exports, maintaining clear separation between public interface and internal implementation.

Capabilities

Core Rendering

Main function to render the Storybook UI into a DOM element using a configured provider.

/**
 * Renders the Storybook UI into a DOM node using the provided provider
 * @param domNode - Target DOM element where the UI will be rendered
 * @param provider - Provider instance that extends the base Provider class
 * @throws Error if provider is not an instance of the Provider class
 */
function renderStorybookUI(domNode: HTMLElement, provider: Provider): void;

Core Rendering

Provider System

Base provider class and React components for building custom Storybook UI implementations.

class Provider {
  /**
   * Get UI elements by type - must be implemented by subclasses
   * @param type - Type identifier for UI elements (from @storybook/addons Types enum)
   * @throws Error if not implemented by subclass
   */
  getElements(type: Types): any;
  
  /**
   * Handle API initialization - must be implemented by subclasses  
   * @param api - The Storybook API instance
   * @throws Error if not implemented by subclass
   */
  handleAPI(api: unknown): void;
  
  /**
   * Return configuration object - has default empty implementation
   * @returns Configuration object for the Storybook UI
   */
  getConfig(): any;
}

interface RootProps {
  /** Provider instance that supplies UI elements and configuration */
  provider: Provider;
  /** Optional browser history instance for routing (currently unused) */
  history?: History;
}

/**
 * Root React component that wraps the Storybook UI with necessary providers
 */
const Root: FunctionComponent<RootProps>;

Provider System

Types

type Types = 'TAB' | 'PANEL' | 'TOOL' | 'TOOLEXTRA' | 'PREVIEW' | 'NOTES_ELEMENT';

interface History {
  // Browser history interface for routing (optional parameter, currently unused in implementation)
  push(path: string): void;
  replace(path: string): void;
  go(delta: number): void;
  back(): void;
  forward(): void;
  listen(listener: Function): Function;
}