@storybook/csf-tools

What is @storybook/csf-tools?

The @storybook/csf-tools package is a set of utilities for working with Component Story Format (CSF) files in Storybook. CSF is a format for writing stories in plain JavaScript and TypeScript. The tools provided by this package help with tasks such as transforming, analyzing, and generating CSF files programmatically.

What are @storybook/csf-tools's main functionalities?

Transform CSF files

This feature allows you to transform CSF files by parsing and modifying their content. The code sample demonstrates how to parse a CSF file into an abstract syntax tree (AST) that can be manipulated.

import { transformCsf } from '@storybook/csf-tools';

const code = `export default { title: 'Button' };
export const Primary = () => <button>Click me</button>`;
const result = transformCsf(code).parse();

Analyze CSF files

This feature provides the ability to analyze CSF files to extract information such as story names and properties. The code sample shows how to perform an analysis on a CSF file.

import { analyzeCsf } from '@storybook/csf-tools';

const code = `export default { title: 'Button' };
export const Primary = () => <button>Click me</button>`;
const analysis = analyzeCsf(code);

Generate CSF files

This feature enables the generation of CSF files from a template or data structure. The code sample illustrates how to generate a CSF file with a given title and an array of stories.

import { generateCsf } from '@storybook/csf-tools';

const stories = [{ name: 'Primary', code: '<button>Click me</button>' }];
const csf = generateCsf({ title: 'Button' }, stories);

Other packages similar to @storybook/csf-tools

storybook-addon-specifications

This package allows you to write tests next to your Storybook stories. It provides a similar concept of enhancing the Storybook experience but focuses on integrating tests rather than manipulating CSF files.

react-docgen-typescript-loader

This package is a webpack loader to generate docgen information from TypeScript React components. While it does not directly manipulate CSF files, it enhances the Storybook documentation experience, similar to how @storybook/csf-tools enhances the story writing experience.

storybook-addon-jsx

This addon for Storybook allows you to view the JSX of the story. It provides a different layer of functionality by displaying the code that generates the story, whereas @storybook/csf-tools is more about creating and transforming the story files themselves.

README

Storybook CSF Tools

An experimental library to read, analyze, transform, and write CSF programmatically.

• Read - Parse a CSF file with Babel
• Analyze - Extract its metadata & stories based on the Babel AST
• Write - Write the AST back to a file

It can can parse MDX into CSF.

Coming soon:

• Transform - Update the AST to add/remove/modify stories & metadata (TODO)

Changelog

7.0.0-alpha.0 (June 7, 2022)

Breaking Changes

• Build chain upgrades: TS4, Webpack5, modern ESM, TSUP (#18205)
• Create frameworks & rename renderers (#18201)
• Core-webpack: Factor out webpack dependencies (#18114)
• Core: Remove start-/build-storybook from all frameworks (#17899)

Features

• Core: Add pluggable indexers (#18355)
• CLI: Add dev/build commands (#17898)
• CLI: Add support for angular/cli v14 (#18334)

Bug Fixes

• Vue/Vue3: Fix decorators in StoryStoreV7 (#18375)
• Preview: Default select to viewMode story (#18370)

Maintenance

• Core: Split webpack presets out of frameworks (#18018)
• Core: Renderer refactor (#17982)
• Core: Allow builders to be set in presets (#18182)
• Core: Minimize webpack deps (#18024)
• Core: Make renderers presets (#18004)
• Examples: Simplify sb usage in package.json scripts (#18065)

For older versions of the changelog, see CHANGELOG.v6.md, CHANGELOG.v1-5.md