With Storybook 7.0, the development team has released the first major version in over two years. The open-source front-end tool for developing and testing UI components and creating documentation can now use the zero-configuration approach with the build tool Vite, the React framework Next.js and the UI framework SvelteKit, which is based on Svelte . It also offers a revised user interface.
Extended support for Vite, Next.js and SvelteKit
The new version introduces zero configuration support for Vite, Next.js and SvelteKit. Vite is now available as a pre-bundled application for faster start-up and build times. Pre-bundling using esbuild – which is used in Vite anyway – eliminates the need to install Webpack.
Storybook users can choose between two built-in options for bundling component code, because it is possible to use Webpack 5 in addition to Vite. A detailed blog entry, which already offered an outlook last autumn, describes the innovations regarding Vite.
The organizers will judge on June 21 and 22, 2023 dpunkt.verlag, heise Developer and iX the enterprise JavaScript conference enterJS in Darmstadt. JavaScript and TypeScript language innovations, new and established tools and frameworks – including React, SvelteKit and Astro – as well as accessibility and software architecture will be discussed in more than 35 lectures.
All-day workshops are available both on-site and online.
Excerpt from the program:
Changes for Next.js include automatic router mocking by Storybook and built-in support for management tools such as next/font and next/image. SvelteKit now automatically configures framework-specific settings, including how to handle $app/stores.
More space in the user interface
In order to offer more space for the development of components, Storybook users will find an enlarged screen area in the new release. The sidebar has a changed menu and over 200 custom icons have received a visual makeover. This should serve both a sharper display and faster loading times. An automatic Dark Mode is also newly available.
Storybook 7.0 in Light Mode and Dark Mode.
(Bild: Storybook)
Other innovations include a major overhaul of the Storybook Docs add-on for creating documentation, which has learned to deal with the Markdown superset MDX 2. Docs can be attached directly to components in Storybook 7, and automatically generated documentation pages for a component can be attached using autodocsActivate tag.
UI development with Pages and Stories
Launched in 2016, Storybook now has over three million weekly downloads on npm. It is designed to create UI components and Pages – which the development team says are basically components with additional data requirements – in isolation. The eponymous story captures the rendered state of a UI component.
In addition to the above, Storybook can be used with other tools and frameworks, including React, Angular, Web Components and Qwik. Storybook can also be used with the mobile operating systems Android and iOS as well as the cross-platform framework Flutter.
All highlights in the new release are presented in a blog entry. Developers can consult a migration guide when migrating from version 6.x.
(May)
