Storybook UI

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

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

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);

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

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

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;
}