Storybook Glossary Flashcards
(17 cards)
Components
These are individual design elements (like a button) or groups of design elements (a card with an avatar) that are created to standardize design across a team. These components form the building blocks of web applications.
Stories
Stories are states of components. For example, a button may have a hover state and a disabled state. There also may be stories that represent different themes of a particular component. Essentially, stories can be seen as variations of components.
Component Driven Development (CDD)
This is the idea of using individual components to build larger components. For example, if you have a button, a text box, and a header, these can be combined to make a simple form. The form would be a higher level component built of smaller components. When development is done in a way that components form the building blocks of an entire application, this is called component driven development.
Atomic Components
These are the base level components - for example, a button. Atomic components can be combined to create larger components, so that development because quicker, easier, and standardized over time.
Storybook Docs
A popular Storybook addon, @storybook/addon-docs that autogenerates documentation for your components or allows you to write stories for your components in MDX. Sometimes this can also refer to Storybook’s own documentation, although we should refer to that as Storybook Documentation.
Addons
These are additional tools that a user can add to their Storybook (similar to how you can purchase apps in the app store to make your iPhone even better). These add-ons can help with a variety of things. They are not mandatory for users to download to use Storybook. One of the most common add-ons is the a11y accessibility add-on, which helps teams monitor and track the
accessibility of their components.
https://storybook.js.org/docs/react/addons/introduction
Controls
A popular storybook addon @storybook/addon-controls that allows you to dynamically edit component properties through a user interface in Storybook. Controls is the successor to the Knobs addon, which is deprecated but still popular. Controls can also refer to the UI components within the addon that allow you to edit the component (text input, toggle, select, etc.).
Knobs
A popular storybook addon @storybook/addon-knobs that allows you to dynamically edit component properties through a user interface in Storybook. Knobs is deprecated and has been replaced by Controls, but remains popular. Knobs can also refer to the UI components within the addon that allow you to edit the component (text input, toggle, select, etc.).
Preview vs. Manager vs. Channel
The preview is the Canvas area of Storybook’s UI where the user’s stories are displayed. The manager is all the UI around it (sidebar, toolbar, addons panel). The distinction is important because the preview code is isolated from the manager code and this can cause confusion. The only way for the two sides to communicate is across something called the channel, which is sort of like a network connection for sending messages back and forth.
Main.js configuration
main.js is the name of the primary file used to configure Storybook, typically located in the .storybook folder. There are also manager.js and preview.js to configure the Manager and Preview respectively.
Component story format (CSF)
CSF is the a portable format for writing stories in JavaScript (or TypeScript). Each story is a small snippet of code that typically creates a component (or composition of components) with a set of inputs, and potentially a play function that simulates user interactions with the story.
MDX
MDX is an alternative to CSF that allows users to intermix stories, markdown text, and potentially other media.
Composition
Composition is Storybook’s way to combine multiple Storybooks into one. This is typically used for writing stories across different frameworks, such as a set of components implemented in React, Vue, and Angular. It can also be used for an app’s Storybook that uses a component library that also has a Storybook.
Wrapper component
A component that wraps another component, typically to provide auxiliary information like theming information.
Component explorer
A component explorer is the general term for tools like Storybook that display a collection of components and their key states. Other explorers include Styleguidist, React Cosmos, Docz, and various homegrown solutions that are specific to the libraries they document.
Args
Args are dynamic inputs to a story. They are the mechanism behind Controls, and also the way by which we can share stories that have been edited with controls (because the updated args are saved in the URL).
Essentials
A storybook addon that comes pre-installed with Storybook and packages up a bunch of popular addons for a great out-of-box experience.
