or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

caching.mdconfiguration.mdenvironment-cli.mdindex.mdpackage-management.mdpresets.mdstory-processing.mdtext-processing.md
tile.json

tessl/npm-storybook--core-common

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/core-common@8.6.x

To install, run

npx @tessl/cli install tessl/npm-storybook--core-common@8.6.0

index.mddocs/

@storybook/core-common

@storybook/core-common is a deprecated compatibility shim package that provides framework-agnostic API utilities for Storybook. It serves as a bridge for legacy code that relied on the @storybook/core-common package name while the underlying implementation has been consolidated into the main Storybook package. All functionality is re-exported from storybook/internal/common.

Package Information

  • Package Name: @storybook/core-common
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install @storybook/core-common
  • Peer Dependencies: storybook ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0

Core Imports

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

For CommonJS:

const { loadMainConfig, getStorybookInfo, cache } = require("@storybook/core-common");

Import specific utilities:

import { 
  normalizeStories, 
  FileSystemCache, 
  createFileSystemCache 
} from "@storybook/core-common";

Basic Usage

import { 
  loadMainConfig, 
  getStorybookInfo, 
  normalizeStories,
  cache 
} from "@storybook/core-common";

// Load Storybook configuration
const mainConfig = await loadMainConfig({ 
  configDir: '.storybook' 
});

// Get project information
const projectInfo = await getStorybookInfo(
  packageJson, 
  '.storybook'
);

// Normalize story entries
const stories = normalizeStories([
  './src/**/*.stories.@(js|jsx|ts|tsx)'
], { configDir: '.storybook' });

// Use file system cache
const cachedData = await cache.get('my-key');
await cache.set('my-key', { some: 'data' });

Architecture

@storybook/core-common is organized around several key functional areas:

  • Configuration Management: Loading, validating, and processing Storybook configurations
  • Preset System: Managing preset configurations and addon resolution
  • File System Caching: High-performance caching with TTL and namespace support
  • Story Processing: Normalizing story entries and generating story metadata
  • Environment Handling: Processing environment variables and CLI options
  • Package Management: Interfacing with npm/yarn/pnpm for dependency operations
  • Utility Functions: Path handling, template generation, logging, and development workflow support

Capabilities

Configuration Management

Core utilities for loading, validating, and processing Storybook configuration files. Essential for any tool that needs to understand Storybook project structure.

function loadMainConfig(options: { 
  configDir: string; 
  noCache?: boolean; 
}): Promise<StorybookConfigRaw>;

function getStorybookInfo(
  packageJson: PackageJson, 
  configDir?: string
): Promise<CoreCommon_StorybookInfo>;

function validateFrameworkName(frameworkName: string): void;

Configuration Management

Preset System

Powerful preset loading and application system for managing Storybook addons and framework configurations. Supports both functional and declarative preset definitions.

function getPresets(
  presets: PresetConfig[], 
  storybookOptions: InterPresetOptions
): Promise<Presets>;

function loadAllPresets(options: {
  corePresets: PresetConfig[];
  overridePresets: PresetConfig[];
  isCritical?: boolean;
}): Promise<Presets>;

interface Presets {
  apply<T>(extension: string, config?: T, args?: unknown): Promise<T>;
}

Preset System

File System Caching

High-performance file system caching with namespace support, TTL, and both sync/async operations. Built for development workflow optimization.

class FileSystemCache {
  constructor(options?: {
    ns?: string;
    prefix?: string; 
    hash_alg?: string;
    basePath?: string;
    ttl?: number;
  });
  
  get<T>(key: string): Promise<T | undefined>;
  getSync<T>(key: string): T | undefined;
  set<T>(key: string, value: T): Promise<void>;
  setSync<T>(key: string, value: T): void;
}

function createFileSystemCache(options?: object): FileSystemCache;

declare const cache: FileSystemCache;

File System Caching

Story Processing

Story entry normalization and metadata generation for Storybook's story indexing system. Handles glob patterns, directory mapping, and story ID generation.

function normalizeStories(
  entries: StoriesEntry[], 
  options: NormalizeOptions
): NormalizedStoriesEntry[];

function getStoryId(
  data: StoryIdData, 
  options: GetStoryIdOptions
): string;

function getStoryTitle(options: {
  specifier: { title?: string; component?: string };
  filepath: string;
  normalizedPath: string;
}): string;

Story Processing

Environment & CLI Utilities

Environment variable processing, temporary file management, and CLI utility functions for Storybook development tools.

function loadEnvs(options?: { production?: boolean }): Record<string, string>;

function temporaryDirectory(options?: { prefix?: string }): Promise<string>;

function temporaryFile(options?: { 
  name?: string; 
  extension?: string; 
}): Promise<string>;

function parseList(str: string): string[];

Environment & CLI Utilities

Package Management

JavaScript package manager abstraction layer supporting npm, yarn, and pnpm. Provides unified interface for dependency management operations.

abstract class JsPackageManager {
  abstract getInstallArgs(): string[];
  abstract getRunCommand(): string;
  abstract getRunArgs(): string[];
  abstract getAddArgs(installAsDevDependencies: boolean): string[];
  abstract type: 'npm' | 'yarn1' | 'yarn2' | 'pnpm';
}

class JsPackageManagerFactory {
  static getPackageManager(options?: { 
    force?: 'npm' | 'yarn1' | 'yarn2' | 'pnpm' 
  }): JsPackageManager;
}

Package Management

Text Processing & Formatting

Template interpolation, code formatting, and logging utilities for development tools and code generation.

function interpolate(template: string, bindings: Record<string, any>): string;

function formatFileContent(filePath: string, content: string): Promise<string>;

function commandLog(message: string): {
  success: (message: string) => void;
  error: (message: string) => void;
};

Text Processing & Formatting

Core Types

interface StorybookConfig {
  stories: PresetValue<StoriesEntry[]>;
  addons?: Preset[];
  framework?: Preset;
  core?: PresetValue<CoreConfig>;
  typescript?: PresetValue<TypescriptOptions>;
  features?: PresetValue<Record<string, boolean>>;
}

interface Options extends LoadOptions, CLIOptions, BuilderOptions {
  presets: Presets;
  build?: TestBuildConfig;
}

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

type PresetConfig = string | {
  name: string;
  options?: unknown;
};

interface StoriesEntry {
  directory: string;
  files: string;
  titlePrefix?: string;
}

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