@storybook/csf-tools
Advanced tools
An experimental library to read, analyze, transform, and write CSF programmatically.
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.
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);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.
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.
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.
An experimental library to read, analyze, transform, and write CSF programmatically.
It can can parse MDX into CSF.
Coming soon:
7.0.0-alpha.35 (October 5, 2022)
within & args updating in decorators #19207FAQs
Parse and manipulate CSF and Storybook config files
The npm package @storybook/csf-tools receives a total of 3,886,968 weekly downloads. As such, @storybook/csf-tools popularity was classified as popular.
We found that @storybook/csf-tools demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.