Storybook Preview Web

import { 
  PreviewWeb, 
  DocsContext, 
  simulatePageLoad, 
  simulateDOMContentLoaded,
  composeStory,
  composeStories,
  setProjectAnnotations
} from "@storybook/preview-web";

const { 
  PreviewWeb, 
  DocsContext, 
  simulatePageLoad, 
  simulateDOMContentLoaded,
  composeStory,
  composeStories,
  setProjectAnnotations
} = require("@storybook/preview-web");

import { 
  PreviewWeb, 
  DocsContext, 
  simulatePageLoad, 
  simulateDOMContentLoaded,
  composeStory
} from "@storybook/preview-web";

// Initialize preview web instance (sets up global __STORYBOOK_PREVIEW__)
const preview = new PreviewWeb();

// DocsContext is typically created internally by Storybook
// but shows the required constructor signature
const docsContext = new DocsContext(
  channel,
  store,
  renderStoryToElement,
  csfFiles
);

// Simulate page events for testing
simulatePageLoad(document.body);
simulateDOMContentLoaded();

// Compose story for testing
import * as ButtonStories from './Button.stories';
const Primary = composeStory(ButtonStories.Primary, ButtonStories.default);
const renderedStory = Primary({ label: 'Hello World' });

import { PreviewWeb, DocsContext } from "@storybook/preview-web";

import { PreviewWeb, DocsContext } from "@storybook/preview-api";

class Preview<TRenderer extends Renderer> {
  constructor();
  // Core preview functionality methods
}

class PreviewWithSelection<TFramework extends AnyFramework> extends Preview<TFramework> {
  constructor();
  // Selection and navigation functionality
}

class PreviewWeb<TFramework extends AnyFramework> extends PreviewWithSelection<TFramework> {
  constructor();
  // Web-specific preview implementation
  // Sets up global __STORYBOOK_PREVIEW__ instance
}

class DocsContext<TRenderer extends Renderer> {
  constructor(
    channel: Channel,
    store: StoryStore<TRenderer>,
    renderStoryToElement: DocsContextProps<TRenderer>['renderStoryToElement'],
    csfFiles: CSFFile<TRenderer>[]
  );
  
  // Core documentation methods
  referenceMeta(metaExports: ModuleExports, attach: boolean): void;
  resolveOf<TType extends ResolvedModuleExportType>(
    moduleExportOrType: ModuleExport | TType,
    validTypes?: TType[]
  ): ResolvedModuleExportFromType<TType, TRenderer>;
  storyIdByName(storyName: StoryName): StoryId;
  storyById(id?: StoryId): PreparedStory<TRenderer>;
  componentStories(): PreparedStory<TRenderer>[];
  getStoryContext(story: PreparedStory<TRenderer>): StoryContextForLoaders<TRenderer>;
  loadStory(id: StoryId): Promise<PreparedStory<TRenderer>>;
}

interface DocsContextProps<TRenderer extends Renderer> {
  // Meta and story resolution
  referenceMeta: (metaExports: ModuleExports, attach: boolean) => void;
  resolveOf<TType extends ResolvedModuleExportType>(
    moduleExportOrType: ModuleExport | TType,
    validTypes?: TType[]
  ): ResolvedModuleExportFromType<TType, TRenderer>;
  
  // Story lookup and access
  storyIdByName: (storyName: StoryName) => StoryId;
  storyById: (id?: StoryId) => PreparedStory<TRenderer>;
  componentStories: () => PreparedStory<TRenderer>[];
  
  // Story context and rendering
  getStoryContext: (story: PreparedStory<TRenderer>) => StoryContextForLoaders<TRenderer>;
  loadStory: (id: StoryId) => Promise<PreparedStory<TRenderer>>;
  renderStoryToElement: (
    story: PreparedStory<TRenderer>,
    element: HTMLElement,
    callbacks: RenderContextCallbacks<TRenderer>,
    options: StoryRenderOptions
  ) => () => Promise<void>;
  
  // Communication and configuration
  channel: Channel;
  projectAnnotations: NormalizedProjectAnnotations<TRenderer>;
}

type DocsRenderFunction<TRenderer extends Renderer> = (
  docsContext: DocsContextProps<TRenderer>,
  docsParameters: Parameters,
  element: HTMLElement
) => Promise<void>;

interface RenderContextCallbacks<TRenderer extends Renderer> {
  showMain: () => void;
  showError: (error: { title: string; description: string }) => void;
  showException: (err: Error) => void;
}

interface StoryRenderOptions {
  autoplay?: boolean;
  forceInitialArgs?: boolean;
}

/**
 * Simulates a page load event by executing scripts in a container
 * @param $container - The container element to process scripts from
 */
function simulatePageLoad($container: any): void;

/**
 * Simulates a DOM content loaded event on the document
 */
function simulateDOMContentLoaded(): void;

/**
 * Composes a single story for use in testing environments
 * @param storyExport - The story export from a CSF file
 * @param metaExport - The meta export from the same CSF file  
 * @param projectAnnotations - Global project configuration
 * @returns Composed story function ready for testing
 */
function composeStory<TRenderer extends Renderer>(
  storyExport: StoryAnnotation<TRenderer>,
  metaExport: Meta<TRenderer>,
  projectAnnotations?: ProjectAnnotations<TRenderer>
): ComposedStory<TRenderer>;

/**
 * Composes all stories from a CSF module for testing
 * @param csfExports - All exports from a CSF file
 * @param projectAnnotations - Global project configuration
 * @returns Object with all composed stories keyed by export name
 */
function composeStories<TRenderer extends Renderer>(
  csfExports: ModuleExports,
  projectAnnotations?: ProjectAnnotations<TRenderer>
): ComposedStoryModule<TRenderer>;

/**
 * Sets global project annotations for story composition
 * @param projectAnnotations - Global configuration to apply to all composed stories
 */
function setProjectAnnotations<TRenderer extends Renderer>(
  projectAnnotations: ProjectAnnotations<TRenderer>
): void;

/**
 * Composes multiple configuration objects into project annotations
 * @deprecated Marked for removal in 7.0, used for builder-vite compatibility
 */
function composeConfigs<TRenderer extends Renderer>(
  moduleExportList: ModuleExports[]
): ProjectAnnotations<TRenderer>;

/**
 * Type alias for web-specific project annotations
 */
type WebProjectAnnotations = ProjectAnnotations;

/**
 * Composed story ready for testing with args, parameters, and play functions
 */
interface ComposedStory<TRenderer extends Renderer> extends StoryFn<TRenderer> {
  args: Args;
  parameters: Parameters;
  play?: (context: StoryContext<TRenderer>) => Promise<void> | void;
  storyName: string;
}

/**
 * Module containing all composed stories from a CSF file
 */
interface ComposedStoryModule<TRenderer extends Renderer> {
  [storyName: string]: ComposedStory<TRenderer>;
}

/**
 * Core story annotation with metadata
 */
interface StoryAnnotation<TRenderer extends Renderer> {
  args?: Partial<Args>;
  parameters?: Parameters;
  decorators?: DecoratorFunction<TRenderer>[];
  loaders?: LoaderFunction<TRenderer>[];
  play?: (context: StoryContext<TRenderer>) => Promise<void> | void;
  render?: StoryFn<TRenderer>;
  name?: string;
}

/**
 * Meta configuration for a CSF file
 */
interface Meta<TRenderer extends Renderer> {
  title?: string;
  component?: TRenderer['component'];
  subcomponents?: Record<string, TRenderer['component']>;
  args?: Partial<Args>;
  argTypes?: ArgTypes;
  parameters?: Parameters;
  decorators?: DecoratorFunction<TRenderer>[];
  loaders?: LoaderFunction<TRenderer>[];
  render?: StoryFn<TRenderer>;
  play?: (context: StoryContext<TRenderer>) => Promise<void> | void;
}

/**
 * Prepared story with all enhancements applied
 */
interface PreparedStory<TRenderer extends Renderer> {
  id: StoryId;
  name: StoryName;
  title: ComponentTitle;
  kind: ComponentTitle;
  story: StoryName;
  parameters: Parameters;
  initialArgs: Args;
  argTypes: ArgTypes;
  args: Args;
  component: TRenderer['component'];
  subcomponents: Record<string, TRenderer['component']>;
  tags: Tag[];
  globals: Globals;
  moduleExport: ModuleExport;
  originalStoryFn: StoryFn<TRenderer>;
  undecoratedStoryFn: LegacyStoryFn<TRenderer>;
  unboundStoryFn: LegacyStoryFn<TRenderer>;
  applyLoaders: (context: StoryContextForLoaders<TRenderer>) => Promise<StoryContext<TRenderer>>;
  playFunction?: (context: StoryContext<TRenderer>) => Promise<void> | void;
}

/**
 * Story context for loaders phase
 */
interface StoryContextForLoaders<TRenderer extends Renderer> {
  id: StoryId;
  name: StoryName;
  title: ComponentTitle;
  kind: ComponentTitle;
  story: StoryName;
  parameters: Parameters;
  initialArgs: Args;
  argTypes: ArgTypes;
  args: Args;
  component: TRenderer['component'];
  subcomponents: Record<string, TRenderer['component']>;
  tags: Tag[];
  globals: Globals;
  viewMode: ViewMode;
}

/**
 * Global log level configuration
 */
declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

// Always check if DocsContext has required attachments
try {
  const story = docsContext.storyById('example-story');
} catch (error) {
  console.error('Story not found or not loaded:', error.message);
}

// Ensure project annotations are set before composing stories
import { setProjectAnnotations } from "@storybook/preview-web";
setProjectAnnotations(globalConfig);

import { PreviewWeb } from "@storybook/preview-web";

const preview = new PreviewWeb();
// Preview is automatically set up as global __STORYBOOK_PREVIEW__

import { DocsContext } from "@storybook/preview-web";

// Note: DocsContext requires channel, store, renderStoryToElement, and csfFiles
// This is typically created internally by Storybook

import { simulatePageLoad, simulateDOMContentLoaded } from "@storybook/preview-web";

// In test setup
simulateDOMContentLoaded();
simulatePageLoad(document.body);

import { composeStory, composeStories } from "@storybook/preview-web";
import * as stories from "./Button.stories";

// Test individual story
const { Primary } = composeStories(stories);
test('renders primary button', () => {
  const button = Primary();
  expect(button).toBeTruthy();
});

// Or compose single story
const ComposedPrimary = composeStory(stories.Primary, stories.default);
test('renders composed story', () => {
  const result = ComposedPrimary({ label: 'Test' });
  expect(result).toBeTruthy();
});

{
  "main": "dist/entry.js",
  "module": "dist/entry.mjs", 
  "types": "dist/entry.d.ts",
  "exports": {
    ".": {
      "types": "./dist/entry.d.ts",
      "require": "./dist/entry.js",
      "import": "./dist/entry.mjs"
    }
  }
}