Storybook addon actions

Storybook Addon Actions can be used to display data received by event handlers in Storybook. Framework Support. Import the action function and use it to create actions handlers.

When creating action handlers, provide a name to make it easier to identify. Note: Make sure NOT to use reserved words as function names. If your story requires multiple actions, it may be convenient to use actions to create many at once:. If you wish to process action data before sending them over to the logger, you can do it with action decorators.

Each decorator function is passed an array of arguments, and should return a new arguments array to use. Arguments which are passed to the action call will have to be serialized while be "transferred" over the channel.

This is not very optimal and can cause lag when large objects are being logged, for this reason it is possible to configure a maximum depth. The action logger, by default, will log all actions fired during the lifetime of the story.

After a while this can make the storybook laggy. As a workaround, you can configure an upper limit to how many actions should be logged. To apply the configuration globally use the configureActions function in your preview. You can define action handles in a declarative way using withActions decorators.

Selector is optional. Action Logger addon for storybook. Last updated 17 days ago by shilman. Maintainers Today March 12, 4 min read Growing up, I enjoyed playing with Legos because they enable you to endlessly put together different combinations of creative toys using the same pieces. Imagine there exists a tool that helps you organize all these components — or bricks — in an isolated manner to enable you to build, share, and test them efficiently.

It makes building stunning UIs organized and efficient. Addons are plugins that help supercharge your Storybook with new custom advanced functionalities and workflows. These addons are contributed by the core maintainers official addons and by the developer community community addons.

Knobs allow you to dynamically edit props through the Storybook interface. You can even process the data before sending it to the logger incase you need to do some cleanup before. Taffy enables a dynamic draggable re-sizer and responsive views is able to set media queries to help test your components.

The a11y addon checks your components against common accessibility rules. This helps developers understand which of these rules their components respect and which ones they violate. Storybook Docs transform your Storybook stories into world-class component documentation. DocsPage is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into clean, readable pages. You can also use it to write pure documentation pages and embed them inside your Storybook alongside your stories.

This addon allows you to navigate through different versions of your components via a versions panel, in case you have a setup that produces a different static Storybook build for each of your versions. Formik addon Now, just in case you happen to use the well known Formik to build your forms without tears in React, this Storybook addon wraps your Formik fields and tracks their state in a panel to provide you with a nice experience.

With the different style addons in Storybook, you are able to present your components in various ways. Theme playground Theme playground provides a panel where the theme values predefined in the components can be tweaked easily.

The playroom enables you to play along with all of your components while testing them against popular screen breakpoints. Using this addon, you can start designing combinations of components using each story source as a starting point. You can also use the vertical rhythm addon each time your high-fidelity designs have very sensitive specs. Tip: There also exists a Design token addon that enables you to automatically generate design token documentation from your stylesheets.

React carbon design system has included in their Storybook a good collection of addons. You can use it to check out most of the aforementioned addons. Storybook already offers a great approach to frontend development, and addons only increase its power. Addons are a great addition to Storybook and its vision of giving developers a better experience. LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser.

Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong.This is the third post in a series about create-react-app. At this point, storybook detects the type of app, notices that it was bootstraped by create-react-appand then proceeds to install its necessary dependencies.

Once storybook has finished, we can open up VS Code and check out what has changed. You can notice a hidden folder called. The addons. We will look at how those are used in another file. Next, we have the config. This is where we tell storybook where to find our story definitions, in this case they are in the. At the top, we import several items from storybook and our related addons.

We have stories for two main components listed in this file, Welcome and Button. Both of these are samples that came from the storybook repo to get you started. The linkTo addon can redirect to other components such as the Button listed here and the action addon lets you log actions of a component to a custom panel in our case Button clicks will be logged. Back in our terminal we can type npm run to see all the scripts we have available, and as I mentioned earlier there is a storybook entry. So, to kick off a developer server we will execute npm run storybook.

This will use webpack to build your react app and then start a web server on port And now, you can open up a browser to navigate the style guide. The welcome page has some summary information with helpful information to get started.

Also, as we saw before, when we click on the Button… we will see the event logged in the panel below as a result of the action addon. Here we have another story for Button that shows using emojis instead of text. We will start by importing App from the App compoennt. Before we move on we will give title a default value in case one is not passed to the component.

At this point, the stories are pretty static, but there are ways you can make your stories much more interactive. If that interests you, please let me know on Twitter at elijahmanor.

We will cancel our dev server and type npm run build-storybook in the terminal. This will build a version of the style guide to a folder called storybook-static. In our case running npx serve storybook-static will suffice.

And now we can navigate to localhost to see our static style guide. And sure enough, it works just great!

storybook addon actions

Thanks for reading this third post in the create-react-app series. If you enjoyed this post, please consider sharing it with others via the following Twitter or Reddit buttons. As always, you can reach out to me on Twitter at elijahmanor. Thanks and have a blessed day!July 25, 5 min read Every developer wants to build software that works.

Storybook lets you view and interact with your components in an isolated manner. Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment.

In this post, we will find out how Storybook can help us create UI components and improve our component testing. It displays the number of cups of coffee to be served. A story is a function that contains the single state of one component and renders that component to the screen for testing purposes.

How React Storybook can simplify component testing

Storybook offers different techniques for testing UI components. Components need to undergo tests for a variety of reasons some of which are:. Structural testing involves the testing of a component based on the knowledge of its internal implementation. Storybook implements structural testing through storyshots — an add-on that works by comparing snapshots of code.

To install storyshots run:. To test a component we run npm test. Every time you run a test, a snapshot is automatically generated and compared with snapshots generated from previous tests.

If storyshots spots any differences, the test will fail. Below is a snapshot generated on testing for the first time:. Change line 16 of CoffeeButton. Automated visual testing involves automatically verifying that our UI visually appears as intended.

This is useful in cross-browser testing as it can detect lapses that escaped the observations of developers. Storybook tests UI visually via an add-on called storyshot-puppeteer. Same as storyshotsthis add-on works by comparing screenshots — only this time it takes screenshots of the browser and not code.

storybook addon actions

To install storyshot-puppeteer run:. We can do this by editing the initStoryshots function we created when carrying our structural testing. Should we change any UI property in our component, our tests will fail and puppeteer will return the difference in the form of snapshots. In line 3 of CoffeeButton. In the diffing above, the original image is on the left, the modified image is on the right and the difference between both of them is in the middle.

Storybook 5.3 released with MDX, auto generated docs, major framework support & design integrations

With Interaction testing, Storybook lets you display tests and their results alongside your stories in the DOM. It does this via an addon — react-storybook-specifications. To install this addon, run:. In our config.Storybook Addon Actions can be used to display data received by event handlers in Storybook. Framework Support. Import the action function and use it to create actions handlers. When creating action handlers, provide a name to make it easier to identify. Note: Make sure NOT to use reserved words as function names.

If your story requires multiple actions, it may be convenient to use actions to create many at once:. If you wish to process action data before sending them over to the logger, you can do it with action decorators.

Each decorator function is passed an array of arguments, and should return a new arguments array to use. Arguments which are passed to the action call will have to be serialized while be "transferred" over the channel.

This is not very optimal and can cause lag when large objects are being logged, for this reason it is possible to configure a maximum depth.

The action logger, by default, will log all actions fired during the lifetime of the story. After a while this can make the storybook laggy. As a workaround, you can configure an upper limit to how many actions should be logged.

To apply the configuration globally use the configureActions function in your preview. You can define action handles in a declarative way using withActions decorators. Selector is optional. Git github. Need private packages and team management tools? Keywords storybook. Version 5. License MIT. Unpacked Size Total Files Homepage github. Repository Git github. Last publish a day ago. Try on RunKit. Report a vulnerability.Storybook provides a great environment for experimenting with UI components in isolation and through a variety of different configurations.

In this article, I'll show you how to get started with Storybook, highlight a few add-ons, and showcase a Storybook built for KendoReact. I've been working with Storybook for the past few months. I've found it to be an excellent environment to test UI components in an isolated manner. But, what exactly is Storybook? From Learn Storybook :. Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment.

It's understandable why you would choose a tool like Storybook when working with components — especially if you're building components yourself. Assume a typical web application built with a number of components:. In an application like this, many components work together. In some cases, there's some underlying data that's shared by these components. In other cases, there are messages being passed between them. The application represents a concert symphony with components playing different roles.

In a scenario where you're building an application like this, it can be difficult to work with components in isolation. Perhaps you're interested in seeing how a component might work with invalid data? Or, you'd like to see how components work with difficult cultures? It's often difficult to pull out these components after the fact. Let's assume you wish to examine a calendar component you have integrated in your application:. How would you go about doing this? Even more, is there an environment that's available that allows you to explore these and other areas of interest that may arise in your examination?Task is the core component in our app.

storybook addon actions

As we start to build Taskwe first write our test states that correspond to the different types of tasks sketched above. Then we use Storybook to build the component in isolation using mocked data.

There are two basic levels of organization in Storybook: the component and its child stories. Think of each story as a permutation of a component. You can have as many stories per component as you need.

To tell Storybook about the component we are documenting, we create a default export that contains:. To define our stories, we export a function for each of our test states to generate a story. The story is a function that returns a rendered element i.

Another nice thing about bundling the actions into actionsData is that you can export that variable and use the actions in stories for components that reuse this component, as we'll see later. When creating a story we use a base task taskData to build out the shape of the task the component expects. This is typically modelled from what the true data looks like.

Again, export -ing this shape will enable us to reuse it in later stories, as we'll see. We'll need to make a couple of changes to the Storybook configuration so it notices not only our recently created stories, but also allows us to use the CSS file that was changed in the previous chapter. Start by changing your Storybook configuration file.

Storybook Addon Actions

After completing the change above, inside the. Now we have Storybook setup, styles imported, and test cases built out, we can quickly start the work of implementing the HTML of the component to match the design.

The component is still basic at the moment. First write the code that achieves the design without going into too much detail:. Not only is it self documenting, it also helps catch problems early. The next step is to build out the remaining Taskbox components one by one in a similar fashion. As you can see, getting started building components in isolation is easy and fast.

Storybook gave us a great way to visually test our application during construction.

storybook addon actions

However, it is a completely manual process at this stage, and someone has to go to the effort of clicking through each test state and ensuring it renders well and without errors or warnings.

With the Storyshots addon a snapshot test is created for each of the stories. Use it by adding the following development dependencies:. We now have a snapshot test for each of our Task stories. React - English. Build a simple component Build a simple component in isolation. Task Task is the core component in our app. Component Story Story Story To tell Storybook about the component we are documenting, we create a default export that contains: component -- the component itself, title -- how to refer to the component in the sidebar of the Storybook app, excludeStories -- exports in the story file that should not be rendered as stories by Storybook.

Actions help you verify interactions when building UI components in isolation. Oftentimes you won't have access to the functions and state you have in context of the app.

Use action to stub them in. An alternative way to achieve the same purpose is to use a JavaScript type system like TypeScript to create a type for the component properties. Make sure your components render data that doesn't change, so that your snapshot tests won't fail each time.


comments

Leave a Reply

Your email address will not be published. Required fields are marked *