Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@componentdriven/csf
Advanced tools
Components have risen to dominate the UI landscape. There are new component-oriented tools for development, testing, design, and prototyping. These tools engage in the creation and consumption of components and component examples (a.k.a. stories). But each tool has its own proprietary format because a simple, platform-agnostic way to express component examples doesn't yet exist.
A story is a code snippet that renders an example of a component in a specific state. Think about it like a "user story".
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.
The Component Story Format is an open standard for component examples based on JavaScript ES6 modules. This enables interoperation between development, testing, and design tools.
export default { title: 'atoms/Button' };
export const text = () => <Button>Hello</Button>;
export const emoji = () => <Button>😀😎👍💯</Button>;
💎 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).
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!
yarn test
FAQs
Component Story Format (CSF) utilities
We found that @componentdriven/csf demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.