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

Changelog

Source

8.2.0

Hold onto your hats! Storybook 8.2 has dropped, packed with a treasure trove of new features and bug fixes:

🪝 New test hook beforeAll
🕹️ Enhanced play function
📦 Portable stories that let you use your stories in other testing tools
🎁 Consolidated dependency to bring you better performance in a smaller package
✨ Brand new onboarding experience to get you up to speed quicker
💯 Hundreds more improvements

<details> <summary>List of all updates</summary>

Addon Controls: Fix saving on Windows - #28485, thanks @ghengeveld!
Addon Interactions: Use unique keys when rendering array nodes in panel - #28423, thanks @yannbf!
Addon Onboarding: Add icons for dev/test/doc to the splash screen - #28389, thanks @ghengeveld!
Addon Onboarding: New design and flow based on Save from Controls - #28327, thanks @ghengeveld!
Addon Onboarding: Trigger onboarding during init for Vue and Angular projects - #28482, thanks @ghengeveld!
Addon-A11y: Fix property default assignment - #27224, thanks @valentinpalkovic!
Angular: Allow format configuration of custom source preview - #28305, thanks @64BitAsura!
Angular: Allow outputPath object syntax - #28144, thanks @valentinpalkovic!
Angular: Cleanup types - #27189, thanks @valentinpalkovic!
Angular: Fix enableProdMode setting - #28415, thanks @valentinpalkovic!
Angular: Fix wrong detection of standalone components - #27353, thanks @dario-baumberger!
Angular: Introduce preserveSymlink builder option - #28145, thanks @valentinpalkovic!
Angular: Update outputPath default value in angular-cli-webpack.js - #28418, thanks @valentinpalkovic!
Babel: Ensure story files not transpiled earlier than ES2017 - #28469, thanks @kasperpeulen!
Blocks: Fix reference to storybook core - #28422, thanks @yannbf!
Blocks: Prebundle tocbot - #28318, thanks @shilman!
Build: Change require/import order, so that import has higher prio if both are specified - #27730, thanks @kasperpeulen!
Build: Ignore ts stories in cra/default-js sandbox - #28354, thanks @valentinpalkovic!
CLI: Add --no-dev option to init - #26918, thanks @fastfrwrd!
CLI: Add optional --dev and --no-dev options to storybook init CLI - #26918, thanks @fastfrwrd!
CLI: Add support for Nuxt to project init - #26884, thanks @tobiasdiez!
CLI: Fix CLI always asking all automigrations - #28238, thanks @ndelangen!
CLI: Improve error message when fetching CLI version - #28289, thanks @yannbf!
CLI: Include @storybook/addon-svelte-csf when initializing new projects - #27070, thanks @benmccann!
CLI: Prebundle get-npm-tarball-url and @ndelangen/get-tarball - #28481, thanks @ndelangen!
Config: Apply JavaScript-only story glob extensions for JavaScript projects - #28338, thanks @valentinpalkovic!
Controls: Fix date picker control validation and assignment - #26695, thanks @leeovictor!
Controls: Fix grouped Radio controls to have the same name - #23374, thanks @srapilly!
Controls: Throttling makes Color control lagging - #22615, thanks @gitstart!
Core: Add context as a property of the context (self-referencing) - #28353, thanks @kasperpeulen!
Core: Add support for beforeAll hook - #28255, thanks @ghengeveld!
Core: Fix startup hang caused by watchStorySpecifiers - #27016, thanks @heyimalex!
Core: Make sure StorybookError message shows up in browser console and interactions panel - #28464, thanks @kasperpeulen!
Core: Migrate from pkg-dir to fd-package-json - #28270, thanks @43081j!
Core: Refactor phases to run in order loading -> rendering -> playing - #28431, thanks @kasperpeulen!
Core: Remove more .stories.mdx handling - #25973, thanks @JReinhold!
Core: Remove util dependency - #28191, thanks @43081j!
CPC: Add CJS for core/components - #28440, thanks @ndelangen!
CPC: Core Package Consolidation - #27039, thanks @ndelangen!
CSF: Automatically extract componentPath - #24396, thanks @shilman!
CSF: Rename preview.js globals to initialGlobals - #27517, thanks @shilman!
Dependencies: Allow esbuild version 0.21.x - #28245, thanks @edoardocavazza!
Dependency: bump markdown-to-jsx to v7.4.5 - #26694, thanks @xyy94813!
Dependency: Bump Express.js - #26680, thanks @valentinpalkovic!
Dependency: Remove node-fetch - #28160, thanks @yk-kd!
Dependency: Upgrade webpack-virtual-modules to 0.6.0 - #27102, thanks @fyodorovandrei!
Deps: Migrate from read-pkg-up to fd-package-json - #28272, thanks @43081j!
Docs-tools: Replace doctrine with jsdoc-type-pratt-parser - #26305, thanks @43081j!
Docs: Filter mount stories from Stories block, error when referenced in MDX - #28434, thanks @kasperpeulen!
Docs: Fix Typeset Doc block fontSizes type - #26475, thanks @noranda!
Index: Fix MDX to override project-level autodocs - #28461, thanks @shilman!
Indexer: Improve locating stories with specials chars in path - #22110, thanks @jankoritak!
Next: Set default targets for next babel config - #28443, thanks @kasperpeulen!
Next.js: Set env.bugfixes in SWC so destructuring is never transpiled - #28363, thanks @kasperpeulen!
React: Export ButtonProps and HeaderProps in CLI templates - #28487, thanks @valentinpalkovic!
SWC: Set default targets for swc that align with our esbuild targets - #28435, thanks @kasperpeulen!
Telemetry: Stop prompting about crash reports in CI - #28433, thanks @yannbf!
Test: Add args to mount in react, svelte, and vue renderers - #28385, thanks @kasperpeulen!
Test: Add mount property to the story context - #28383, thanks @kasperpeulen!
Test: Enhance the context with canvas when the test package is used - #28368, thanks @kasperpeulen!
Test: Improve MountMustBeDestructuredError error message - #28468, thanks @kasperpeulen!
Test: Reactive spies preserve the this instance - #28445, thanks @kasperpeulen!
Types: Fix type implementation for CompatibleString - #27180, thanks @sni-J!
Vite: Fix asset warning by externalizing sb-common-assets font - #27110, thanks @valentinpalkovic!
Vue3: Enable new hydration mismatch compile time flag - #27192, thanks @Cherry!
Webpack5/Vite: Fix sourcemaps - #27171, thanks @valentinpalkovic!

</details>

The README file is missing

Keywords

storybook

FAQs

What is @storybook/csf-tools?

Is @storybook/csf-tools popular?

Is @storybook/csf-tools well maintained?

Package last updated on 10 Jul 2024

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.

Install