Deprecated compatibility shim for Storybook's framework-agnostic API utilities
—
Environment variable processing, temporary file management, and CLI utility functions for Storybook development tools and build processes.
Load and process Storybook-specific environment variables with proper formatting and validation.
/**
* Load and process STORYBOOK_* environment variables
* @param options - Environment loading options
* @returns Object with processed environment variables
*/
function loadEnvs(options?: {
production?: boolean;
}): Record<string, string>;
/**
* Convert environment object to stringified values for webpack DefinePlugin
* @param raw - Raw environment variable object
* @returns Object with stringified values
*/
function stringifyEnvs(raw: Record<string, any>): Record<string, string>;
/**
* Convert environment object to process.env.KEY format strings
* @param raw - Raw environment variable object
* @returns Object with process.env prefixed keys
*/
function stringifyProcessEnvs(raw: Record<string, any>): Record<string, string>;Usage Examples:
import { loadEnvs, stringifyEnvs } from "@storybook/core-common";
// Load Storybook environment variables
const envVars = loadEnvs({ production: false });
console.log(envVars);
// {
// STORYBOOK_API_URL: 'https://api.example.com',
// STORYBOOK_THEME: 'dark',
// NODE_ENV: 'development'
// }
// Prepare for webpack DefinePlugin
const webpackEnv = stringifyEnvs(envVars);
console.log(webpackEnv);
// {
// STORYBOOK_API_URL: '"https://api.example.com"',
// STORYBOOK_THEME: '"dark"',
// NODE_ENV: '"development"'
// }Create and manage temporary files and directories for build processes and development workflows.
/**
* Create temporary directory with optional prefix
* @param options - Directory creation options
* @returns Promise resolving to temporary directory path
*/
function temporaryDirectory(options?: {
prefix?: string;
}): Promise<string>;
/**
* Create temporary file with optional name and extension
* @param options - File creation options
* @returns Promise resolving to temporary file path
*/
function temporaryFile(options?: {
name?: string;
extension?: string;
}): Promise<string>;
interface FileOptions {
name?: string;
extension?: string;
}Usage Examples:
import { temporaryDirectory, temporaryFile } from "@storybook/core-common";
// Create temporary directory for build artifacts
const tempDir = await temporaryDirectory({ prefix: 'storybook-build-' });
console.log(tempDir); // '/tmp/storybook-build-abc123'
// Create temporary config file
const tempConfig = await temporaryFile({
name: 'webpack.config',
extension: '.js'
});
console.log(tempConfig); // '/tmp/webpack.config.abc123.js'
// Use for build processes
const buildDir = await temporaryDirectory({ prefix: 'sb-output-' });
await runBuildProcess({ outputDir: buildDir });Parse and process command-line arguments and configuration strings.
/**
* Parse comma-separated string into array of trimmed strings
* @param str - Comma-separated string
* @returns Array of parsed strings
*/
function parseList(str: string): string[];
/**
* Get normalized Storybook version from package manager
* @param packageManager - Package manager instance
* @returns Promise resolving to coerced version string
*/
function getCoercedStorybookVersion(packageManager: any): Promise<string>;
/**
* Load environment variables into program configuration
* @param program - CLI program instance
* @param configEnv - Environment configuration
* @returns Updated program configuration
*/
function getEnvConfig(program: any, configEnv: any): any;Usage Examples:
import { parseList, getCoercedStorybookVersion } from "@storybook/core-common";
// Parse comma-separated addons list
const addons = parseList('@storybook/addon-docs, @storybook/addon-controls, custom-addon');
console.log(addons); // ['@storybook/addon-docs', '@storybook/addon-controls', 'custom-addon']
// Parse CLI flags
const frameworks = parseList('react,vue,angular');
console.log(frameworks); // ['react', 'vue', 'angular']
// Get Storybook version
const version = await getCoercedStorybookVersion(packageManager);
console.log(version); // '8.6.14'Create managed log streams and check package classifications.
/**
* Create managed log file stream with move/remove capabilities
* @param logFileName - Optional log file name
* @returns Log stream with management methods
*/
function createLogStream(logFileName?: string): {
stream: NodeJS.WritableStream;
moveLogFile: (targetPath: string) => Promise<void>;
removeLogFile: () => Promise<void>;
};
/**
* Check if package is a Storybook core package
* @param pkg - Package name to check
* @returns True if package is a Storybook core package
*/
function isCorePackage(pkg: string): boolean;Usage Examples:
import { createLogStream, isCorePackage } from "@storybook/core-common";
// Create managed log stream
const logStream = createLogStream('storybook-build.log');
// Write to log
logStream.stream.write('Starting build process...\n');
logStream.stream.write(`Build completed at ${new Date()}\n`);
// Move log file to final location
await logStream.moveLogFile('./logs/build-final.log');
// Check if packages are core Storybook packages
console.log(isCorePackage('@storybook/react')); // true
console.log(isCorePackage('@storybook/addon-docs')); // true
console.log(isCorePackage('lodash')); // falseExtract Storybook CLI configuration from npm scripts.
/**
* Extract Storybook CLI flags from npm script configuration
* @param script - npm script content
* @param shortName - Short flag name (e.g., 'p')
* @param longName - Long flag name (e.g., 'port')
* @returns Extracted configuration value or undefined
*/
function getStorybookConfiguration(
script: string,
shortName: string,
longName: string
): string | undefined;Usage Example:
import { getStorybookConfiguration } from "@storybook/core-common";
// Extract port from npm script
const script = 'storybook dev -p 6006 --quiet';
const port = getStorybookConfiguration(script, 'p', 'port');
console.log(port); // '6006'
// Extract other flags
const quietFlag = getStorybookConfiguration(script, '', 'quiet');
console.log(quietFlag); // 'true'import { loadEnvs, stringifyEnvs } from "@storybook/core-common";
function createEnvironmentConfig(isProduction: boolean) {
// Load environment variables
const envVars = loadEnvs({ production: isProduction });
// Add build-specific variables
const buildEnv = {
...envVars,
STORYBOOK_BUILD_TIME: new Date().toISOString(),
STORYBOOK_BUILD_MODE: isProduction ? 'production' : 'development'
};
// Prepare for webpack
return stringifyEnvs(buildEnv);
}
// Usage in webpack config
const definePluginEnv = createEnvironmentConfig(process.env.NODE_ENV === 'production');import {
temporaryDirectory,
temporaryFile,
createLogStream
} from "@storybook/core-common";
async function managedBuildProcess(buildOptions: any) {
// Create temporary workspace
const workDir = await temporaryDirectory({ prefix: 'storybook-build-' });
// Create build log
const logStream = createLogStream('build.log');
try {
// Create temporary config
const configFile = await temporaryFile({
name: 'build.config',
extension: '.json'
});
// Write config
await fs.writeFile(configFile, JSON.stringify(buildOptions, null, 2));
// Run build process
logStream.stream.write('Starting build...\n');
const result = await runBuild({
workDir,
configFile,
logStream: logStream.stream
});
// Move log to final location
await logStream.moveLogFile('./logs/build-success.log');
return result;
} catch (error) {
logStream.stream.write(`Build failed: ${error.message}\n`);
await logStream.moveLogFile('./logs/build-error.log');
throw error;
}
}import { parseList, getEnvConfig } from "@storybook/core-common";
import { program } from 'commander';
// Set up CLI with environment integration
program
.option('--addons <addons>', 'Comma-separated list of addons')
.option('--port <port>', 'Development server port')
.action((options) => {
// Parse addon list
if (options.addons) {
options.addons = parseList(options.addons);
}
// Load environment configuration
const envConfig = getEnvConfig(program, process.env);
// Merge configurations
const finalConfig = { ...envConfig, ...options };
console.log('Final configuration:', finalConfig);
});interface EnvironmentOptions {
/** Whether to load production-specific environment variables */
production?: boolean;
}
interface TempDirectoryOptions {
/** Prefix for temporary directory name */
prefix?: string;
}
interface TempFileOptions {
/** Specific file name (without extension) */
name?: string;
/** File extension (with or without leading dot) */
extension?: string;
}
interface LogStream {
/** Writable stream for log output */
stream: NodeJS.WritableStream;
/** Move log file to target path */
moveLogFile: (targetPath: string) => Promise<void>;
/** Remove log file */
removeLogFile: () => Promise<void>;
}Install with Tessl CLI
npx tessl i tessl/npm-storybook--core-common