CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-storybook--core-common

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

Pending
Overview
Eval results
Files

environment-cli.mddocs/

Environment & CLI Utilities

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

Capabilities

Environment Variable Processing

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"'
// }

Temporary File Management

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

CLI Parsing Utilities

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'

Logging Utilities

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')); // false

Storybook Configuration Extraction

Extract 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'

Advanced Usage Patterns

Environment-Aware Configuration

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

Build Process Management

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

CLI Integration

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

Supporting Types

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

docs

caching.md

configuration.md

environment-cli.md

index.md

package-management.md

presets.md

story-processing.md

text-processing.md

tile.json