Component Story Format (CSF) utilities
npm install @componentdriven/csf
It uses the production code shipped to users, making it the most accurate representation of a component example. What's more, stories are expressed in the view layer you use to build your app.
``js`
export default { title: 'atoms/Button' };
export const text = () => ;
export const emoji = () => ;
💎 Simple. Writing component "stories" is as easy as exporting ES6 functions using a clean, widely-used format.
🚚 Non-proprietary. CSF doesn't require any vendor-specific libraries. Component stories are easily consumed anywhere ES6 modules live, including your favourite testing tools like Jest and Cypress.
☝️ Declarative. The declarative syntax is isomorphic to higher-level formats like MDX, enabling clean, verifiable transformations.
🔥 Optimized. Component stories don't need any libraries other than your components. And because they're ES6 modules, they're even tree-shakeable!
Tools: Storybook, UXPin & WebComponents.dev
Compatible with: Jest, Enzyme, Testing Library, Cypress, Mocha, etc.
A minimal set of utility functions for dealing with Component Story Format (CSF).
`sh`
yarn add @componentdriven/csf
See package source for function definitions and types:
- storyNameFromExport(key) - Enhance export name (key) of the story. Currently implemented with startCase.
- isExportStory(key, { includeStories, excludeStories }) - Does a named export match CSF inclusion/exclusion options?
- parseKind(kind, { rootSeparator, groupSeparator }) - Parse out the component/kind name from a path, using the given separator config.
- sanitize(string) - Remove punctuation and illegal characters from a story ID.
- toId(kind, name) - Generate a storybook ID from a component/kind and story name.
If you have any suggestions, please open an issue or a PR.
All contributions are welcome!
`sh``
yarn test