@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-beta.17 (December 30, 2022)

Bug Fixes

• Svelte: Do not warn about .svelte files in storyStoreV7 #20442
• Core: Fix import paths on Windows #20430
• UI: Set min-height relative to the viewport and the zoom level. #20352

Maintenance

• Docs: Use stories-mdx and autodocs tags instead of standalone: false in index #20424
• Docs: Use 'stories-mdx' tag to indicate story defined in MDX file #20417
• Preact-Vite: Minor readme and dependency cleanups #20432

Build

• Tech: ESLint allow devDependencies imports in prebundled packages #20440
• Fix yarn task command on Windows machines #20431