Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
@storybook/csf
Advanced tools
Package description
The @storybook/csf (Component Story Format) package is a set of tools and utilities for defining component examples in Storybook. It provides a standardized format for writing stories and allows developers to take advantage of features like auto-generated documentation, controls for live editing of component props, and more.
Defining stories
This feature allows developers to define stories for their components. A story is a single state of a component, and with CSF, stories are written as ES6 modules that export a default object with component metadata and named exports for each story.
import { Meta, Story } from '@storybook/csf';
export default {
title: 'Button',
component: Button,
} as Meta;
const Template: Story<ButtonProps> = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Button',
};
Args
Args are the dynamic values that a story accepts. They are used to change the state of the component in the story. In the code sample, 'Secondary' is a story that uses the 'Template' but with different args to create a variation of the Button component.
export const Secondary = Template.bind({});
Secondary.args = {
label: 'Button',
};
Parameters
Parameters are Storybook's mechanism for providing static, named metadata about a story. In this example, the 'Primary' story is given a custom background parameter to change the background color in the Storybook UI.
Primary.parameters = {
backgrounds: {
values: [{ name: 'red', value: '#f00' }],
},
};
React Docgen is a CLI and toolbox to help extract information from React components, and generate documentation from it. It's similar to @storybook/csf in that it helps document components, but it does not provide a story format or integrate directly with Storybook.
Docz leverages MDX to allow developers to write documentation alongside their code. It is similar to @storybook/csf in that it provides a way to showcase components and their usage, but it uses a different approach, focusing on markdown documentation rather than a structured story format.
React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It's similar to @storybook/csf in that it allows you to develop and document components, but it uses a different format and has its own style guide interface.
Readme
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, WebComponents.dev, Components.studio, RedwoodJS, UXPin
Compatible with: Jest, Enzyme, Testing Library, Cypress, Playwright, Mocha, etc.
A minimal set of utility functions for dealing with Component Story Format (CSF).
yarn add @storybook/csf
See package source for function definitions and types:
storyNameFromExport(key)
- Enhance export name (key
) of the story. Implemented to have parity 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
Unknown package
We found that @storybook/csf demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.