or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

config-management.mdcsf-processing.mdindex.mdstory-enhancement.mdtesting-integration.md
tile.json

tessl/npm-storybook--csf-tools

Parse and manipulate CSF and Storybook config files

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

To install, run

npx @tessl/cli install tessl/npm-storybook--csf-tools@8.6.0

index.mddocs/

Storybook CSF Tools

Storybook CSF Tools is an experimental library that provides programmatic tools to read, analyze, transform, and write Component Story Format (CSF) files using Babel AST parsing. The package enables developers to programmatically manipulate Storybook story files and configuration files for automation, transformation, and testing workflows.

Package Information

  • Package Name: @storybook/csf-tools
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @storybook/csf-tools
  • Status: Deprecated (redirects to internal Storybook module)

Core Imports

import { 
  CsfFile, 
  ConfigFile, 
  loadCsf, 
  readCsf, 
  writeCsf,
  getStorySortParameter,
  enrichCsf,
  babelParse
} from "@storybook/csf-tools";

For CommonJS:

const { 
  CsfFile, 
  ConfigFile, 
  loadCsf, 
  readCsf, 
  writeCsf 
} = require("@storybook/csf-tools");

Basic Usage

import { loadCsf, formatCsf } from "@storybook/csf-tools";

// Parse CSF file from code
const csfCode = `
  export default { title: 'Example/Button' };
  export const Primary = { args: { primary: true } };
`;

const csfFile = loadCsf(csfCode, {
  fileName: 'Button.stories.ts',
  makeTitle: (userTitle) => userTitle || 'Default'
}).parse();

// Access parsed metadata and stories
console.log(csfFile.meta.title); // 'Example/Button'
console.log(csfFile.stories); // Array of parsed stories

// Generate code from CSF file
const outputCode = formatCsf(csfFile);

Architecture

Storybook CSF Tools is built around several key components:

  • CsfFile Class: Core parser for Component Story Format files with full AST manipulation
  • ConfigFile Class: Parser for Storybook configuration files (.storybook/main.js, etc.)
  • Babel Integration: Uses Babel for AST parsing, traversal, and code generation
  • Type System: Full TypeScript support with comprehensive type definitions
  • File I/O Utilities: Functions for reading/writing files with proper encoding
  • Enhancement System: Tools to enrich CSF files with metadata and source information

Capabilities

CSF File Processing

Core functionality for parsing, analyzing, and manipulating Component Story Format files. Essential for automated story generation and transformation workflows.

function loadCsf(code: string, options: CsfOptions): CsfFile;
function readCsf(fileName: string, options: CsfOptions): Promise<CsfFile>;
function writeCsf(csf: CsfFile, fileName?: string): Promise<void>;

CSF File Processing

Configuration Management

Parse and manipulate Storybook configuration files including main.js, preview.js, and other config files with support for both ESM and CommonJS formats.

function loadConfig(code: string, fileName?: string): ConfigFile;
function readConfig(fileName: string): Promise<ConfigFile>;
function writeConfig(config: ConfigFile, fileName?: string): Promise<void>;

Configuration Management

Story Enhancement

Add metadata, source code information, and descriptions to CSF files for documentation and development tooling integration.

function enrichCsf(
  csf: CsfFile, 
  csfSource: CsfFile, 
  options?: EnrichCsfOptions
): void;

interface EnrichCsfOptions {
  disableSource?: boolean;
  disableDescription?: boolean;
}

Story Enhancement

Testing Integration

Transform CSF files for integration with testing frameworks, particularly Vitest, enabling automated testing of Storybook stories.

function vitestTransform(options: VitestTransformOptions): Promise<string>;

interface VitestTransformOptions {
  code: string;
  fileName: string;
  configDir: string;
  stories: StoriesEntry[];
  tagsFilter: TagsFilter;
  previewLevelTags?: Tag[];
}

Testing Integration

Types

interface CsfOptions {
  fileName?: string;
  makeTitle: (userTitle: string) => string;
  transformInlineMeta?: boolean;
}

interface StaticMeta {
  id?: string;
  title?: string;
  component?: string;
  includeStories?: string[] | RegExp;
  excludeStories?: string[] | RegExp;
  tags?: Tag[];
}

interface StaticStory {
  id: string;
  name?: string;
  localName?: string;
  parameters?: any;
  tags?: Tag[];
  __stats: IndexInputStats;
}

interface PrintResultType {
  code: string;
  map?: any;
  toString(): string;
}

type Tag = string;

interface IndexInputStats {
  loaders?: boolean;
  play?: boolean;
  render?: boolean;
  storyFn?: boolean;
  mount?: boolean;
  beforeEach?: boolean;
  moduleMock?: boolean;
  globals?: boolean;
  factory?: boolean;
  tags?: boolean;
}