What is @storybook/addon-essentials?
The @storybook/addon-essentials package is a collection of essential Storybook addons that are recommended for all Storybook users. It includes a set of addons that provide a wide range of functionality, such as controls for live-editing props, actions for logging interactions, viewport customization for responsive design testing, backgrounds to alter the canvas background, toolbars to add global toolbars, and more. It simplifies the setup process by including these addons by default.
What are @storybook/addon-essentials's main functionalities?
Controls
Controls allow you to interact with your component's arguments dynamically, without needing to code. It's like a playground for your components.
"addons": ["@storybook/addon-essentials"]
Actions
Actions help you to display data received by event handlers in Storybook's UI. It's useful for debugging events.
"addons": ["@storybook/addon-essentials"]
Viewport
Viewport lets you adjust the size of the iframe to check how your stories look on different screen sizes.
"addons": ["@storybook/addon-essentials"]
Backgrounds
Backgrounds can be used to change the background color or image behind your stories. This is useful for visualizing components on different backgrounds.
"addons": ["@storybook/addon-essentials"]
Toolbars & globals
Toolbars and globals allow you to add your own toolbar items and use them to control global types and values in your stories.
"addons": ["@storybook/addon-essentials"]
Other packages similar to @storybook/addon-essentials
@storybook/addon-knobs
This package allows you to add knobs to your stories in Storybook. Similar to Controls, knobs let you edit props dynamically using a UI. However, @storybook/addon-essentials' Controls are the successor to Knobs and are recommended for new development.
@storybook/addon-actions
This package is included in @storybook/addon-essentials and can be used standalone. It allows you to log interactions and events that happen in the UI components being developed.
@storybook/addon-viewport
Also part of @storybook/addon-essentials, this standalone addon allows you to view your components in different sizes and layouts in Storybook, simulating how they would look on different devices.
@storybook/addon-backgrounds
This is another addon that is part of the essentials package. It lets you define a set of backgrounds that can be applied to the Storybook canvas, allowing you to test components in different environments.
@storybook/addon-toolbars
This addon is included in the essentials package and provides the ability to create custom toolbars in Storybook. It's useful for creating global context changes for your components.