tessl/npm-storybook--core-common

Deprecated compatibility shim for Storybook's framework-agnostic API utilities

—

Pending

Overview

Eval results

Files

Configuration Management

Name: tessl/npm-storybook--core-common
Author: tessl

Core utilities for loading, validating, and processing Storybook configuration files. These functions provide the foundation for understanding and working with Storybook project structure.

Capabilities

Load Main Configuration

Loads and parses the main Storybook configuration file with error handling and caching support.

/**
 * Load and parse main Storybook configuration file
 * @param options - Configuration loading options
 * @returns Promise resolving to the loaded configuration
 */
function loadMainConfig(options: {
  configDir: string;
  noCache?: boolean;
}): Promise<StorybookConfigRaw>;

Usage Example:

import { loadMainConfig } from "@storybook/core-common";

// Load main config from default location
const config = await loadMainConfig({ 
  configDir: '.storybook' 
});

// Load without caching
const freshConfig = await loadMainConfig({ 
  configDir: '.storybook',
  noCache: true 
});

console.log(config.stories);
console.log(config.addons);

Get Storybook Information

Extracts comprehensive information about a Storybook project including framework, renderer, and configuration file paths.

/**
 * Get comprehensive Storybook project information
 * @param packageJson - Project package.json content
 * @param configDir - Storybook configuration directory path
 * @returns Promise resolving to complete project information
 */
function getStorybookInfo(
  packageJson: PackageJson,
  configDir?: string
): Promise<CoreCommon_StorybookInfo>;

interface CoreCommon_StorybookInfo {
  version: string;
  framework: string;
  frameworkPackage: string;
  renderer: string;
  rendererPackage: string;
  configDir?: string;
  mainConfig?: string;
  previewConfig?: string;
  managerConfig?: string;
}

Usage Example:

import { getStorybookInfo } from "@storybook/core-common";
import packageJson from "./package.json";

const info = await getStorybookInfo(packageJson, '.storybook');

console.log(`Framework: ${info.framework}`);
console.log(`Renderer: ${info.renderer}`);
console.log(`Config files found: ${info.mainConfig}, ${info.previewConfig}`);

Get Configuration Info

Gets configuration file paths and metadata without loading the actual configuration content.

/**
 * Get Storybook configuration file paths and metadata
 * @param packageJson - Project package.json content
 * @param configDir - Configuration directory path
 * @returns Configuration file information
 */
function getConfigInfo(
  packageJson: PackageJson,
  configDir?: string
): {
  configDir: string;
  mainConfig?: string;
  previewConfig?: string;
  managerConfig?: string;
};

Framework Detection

Extract and validate framework information from configuration.

/**
 * Extract framework name from options or presets
 * @param options - Storybook options containing presets
 * @returns Framework name string
 */
function getFrameworkName(options: Options): Promise<string>;

/**
 * Extract proper framework name from framework path or name
 * @param framework - Framework identifier
 * @returns Normalized framework name
 */
function extractProperFrameworkName(framework: string | { name: string }): string;

/**
 * Validate framework name and throw detailed error if invalid
 * @param frameworkName - Framework name to validate
 * @throws Error with detailed validation message
 */
function validateFrameworkName(frameworkName: string): void;

Renderer Detection

Extract renderer information from framework configuration.

/**
 * Get renderer name from core configuration
 * @param options - Storybook options
 * @returns Renderer name string
 */
function getRendererName(options: Options): Promise<string>;

/**
 * Derive renderer name from framework name
 * @param frameworkName - Framework identifier
 * @returns Corresponding renderer name
 */
function extractProperRendererNameFromFramework(frameworkName: string): string;

Configuration File Discovery

Find configuration files by pattern and extension.

/**
 * Find configuration file by prefix and directory
 * @param prefix - File name prefix (e.g., 'main', 'preview')
 * @param configDir - Directory to search in
 * @returns Found configuration file path or undefined
 */
function findConfigFile(prefix: string, configDir: string): string | undefined;

Configuration Validation

Validate configuration structure and content.

/**
 * Validate Storybook configuration
 * @param options - Configuration validation options
 * @throws Error if configuration is invalid
 */
function validateConfig(options: Options): void;

/**
 * Validate configuration file structure
 * @param configDir - Configuration directory to validate
 * @throws Error if file structure is invalid
 */
function validateConfigurationFiles(configDir: string): void;

Package Constants

Framework and package mapping constants for configuration detection.

/**
 * Mapping of renderer packages to renderer names
 */
declare const rendererPackages: Record<string, string>;

/**
 * Mapping of framework packages to supported frameworks
 */
declare const frameworkPackages: Record<string, string[]>;

/**
 * Array of supported builder package names
 */
declare const builderPackages: string[];

Supporting Types

interface StorybookConfigRaw {
  stories: StoriesEntry[];
  addons?: Preset[];
  framework?: Preset;
  core?: CoreConfig;
  typescript?: Partial<TypescriptOptions>;
  features?: Record<string, boolean>;
  staticDirs?: (DirectoryMapping | string)[];
  refs?: Record<string, { title: string; url: string }>;
  env?: Record<string, string>;
  previewAnnotations?: Entry[];
  docs?: DocsOptions;
}

interface PackageJson {
  name?: string;
  version?: string;
  dependencies?: Record<string, string>;
  devDependencies?: Record<string, string>;
  [key: string]: any;
}

interface Options extends LoadOptions, CLIOptions, BuilderOptions {
  presets: Presets;
  configDir: string;
  packageJson?: PackageJson;
}

Install with Tessl CLI

npx tessl i tessl/npm-storybook--core-common

docs

package-management.md