tessl/npm-storybook--ui

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

—

Pending

Overview

Eval results

Files

Core Rendering

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

The core rendering functionality provides the main entry point for rendering the Storybook UI into a DOM element. This is the primary function that consumers use to initialize and display the Storybook interface. It includes strict provider validation and React rendering setup.

Capabilities

renderStorybookUI Function

The main function that renders the complete Storybook UI into a specified DOM element with provider validation.

/**
 * 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;

Implementation Details:

Validates that the provider is an actual instance of the Provider class (not just a duck-typed object)
Uses ReactDOM.render to mount the Root component to the specified DOM node
Sets up the complete Storybook UI wrapper with all necessary React providers

Usage Examples:

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

// Basic usage with custom provider
class MyStorybookProvider extends Provider {
  getElements(type) {
    // Return appropriate UI elements for each type
    // This method will throw an error if not implemented
    return {
      sidebar: { component: MySidebar },
      preview: { component: MyPreview },
      panel: { component: MyPanel }
    };
  }
  
  handleAPI(api) {
    // Initialize and configure the Storybook API
    // This method will throw an error if not implemented
    console.log('API initialized:', api);
    api.setStories(this.stories);
  }
  
  getConfig() {
    // Optional method with default empty implementation
    return {
      theme: 'dark',
      showNav: true,
      showPanel: true
    };
  }
}

// Render to a specific DOM element
const container = document.getElementById('storybook-root');
const provider = new MyStorybookProvider();
renderStorybookUI(container, provider);

// Example showing provider validation
class InvalidProvider {
  // This looks like a provider but doesn't extend Provider class
  getElements() { return {}; }
  handleAPI() {}
}

// This will throw an error: "provider is not extended from the base Provider"
try {
  renderStorybookUI(container, new InvalidProvider());
} catch (error) {
  console.error(error.message); // "provider is not extended from the base Provider"
}

Integration Notes

Provider Validation: The function performs strict instanceof checking - the provider must actually extend the Provider class
Synchronous Rendering: The function is synchronous and returns void
DOM Replacement: The function will replace the contents of the target DOM node
React Integration: Uses ReactDOM.render (React 17 style) to mount the complete UI
Error Handling: Throws clear error messages if the provider is invalid

Error Scenarios

// Will throw: "provider is not extended from the base Provider"
renderStorybookUI(domNode, {
  getElements: () => ({}),
  handleAPI: () => {},
  getConfig: () => ({})
});

// Will throw: "provider is not extended from the base Provider"  
renderStorybookUI(domNode, null);

// Will throw: "provider is not extended from the base Provider"
renderStorybookUI(domNode, undefined);

Root Component Integration

The renderStorybookUI function internally creates and renders a Root component:

// Internal implementation (for reference)
ReactDOM.render(<Root key="root" provider={provider} />, domNode);

This Root component wraps the entire Storybook UI with:

HelmetProvider for document head management
LocationProvider for routing
Theme and emotion cache providers
The main App component

Install with Tessl CLI

npx tessl i tessl/npm-storybook--ui

docs