Storybook is an open-source tool for building UI components and pages in isolation. It allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.
Storybook 6.5 was recently released and it comes with exciting features highlighted in this article.
Support for the Latest Popular Javascript Libraries and Frameworks
Support for Angular and React Out of the Box
Storybook 6.5 supports React 18 and Angular 14 out of the box.
When you run your React project for the first time, it will auto-detect the React version and use the new root API if it detects it on React 18.
Check out #17215.
Figma Plugin
With Storybook 6.5, you can easily compare design specs and different implementations with the help of the Figma plugin’s Storybook Connect which embeds stories into the Figma workspace.
This plugin allows developers to interact with the Figma design using a link created by the Figma plugin between the stories and designs. Check out more here.
Interaction Testing
Storybook Interaction Testing allows developers to write tests for your application in the story file itself. The tests execute in the browser, and you can get a GUI to visualize and debug them. Under the hood, it is powered by Jest, Playwright, and a testing library, giving you the familiarity of testing the application.
Webpack 5 Lazy Compilation
Lazy Compilation is a feature that only calls the content of a page when it is needed, and delays every other content until a route to the content is called.
Storybook 6.5 only compiles the core runtime, and builds stories as you visit them. This enables the developer to quickly spin-up stories, and rebuild larger Storybooks.
Learn more about Storybook Lazy Compilation
Other features
Storybook support for Vite Builder has been improved with instant rebuild of stories, and have officially been brought into Storybook's core.
There were also improvements to accessibility features for Storybook and UI design features for stories.
Wrap Up
Storybook 6.5 offers a number of features and out of the box support for both React and Angular, making this release among the most exciting for this open source UI tool:
Figma’s Storybook Connect embeds stories into the Figma workspace. Write tests for your application in the story file itself with Storybook Interaction Testing.
Webpack 5 Lazy Compilation calls the content of a page when it is needed, and delays every other content until a route to the content is called.
If you get a chance to try out Storybook yourself, please let us know by tweeting us at @ThisDotMedia!
