Subtitle: Production-level component Development

Original address: medium.com/storybookjs…

Original author: medium.com/@shilman

Published: 12 August 2020-6 minutes to read

Storybook is the world’s most popular component factory, widely adopted by industry giants, startups, and open source projects. It organizes components and their states to structure UI development, testing, and documentation for each major view layer.

Version 6.0 retooled Storybook for professional front-end developers.

We looked at leading teams from companies like BBC, IBM, Cisco, and Shopify. These teams have successfully expanded the component library and pioneered their own best practices.

The new Storybook incorporates these best practices to benefit all teams. More importantly, we’ve removed templates and configurations to simplify your developer experience. It includes

  • 💎 Important point: Zero configuration Settings
  • 🧬 Args: Next generation dynamic story format
  • 🎛 Controls: Real-time editing component example
  • 🎛 Compilation: A collection of storybooks
  • 📚 Documentation: Complete the project overhaul

6.0 is almost fully backward compatible with 5.x.Migration Guide »

Progress to date

Storybook is the de facto standard for building UI components. It provides structured UI development and documentation for every major framework.

📈 Record adoption rate. Usage of Storybook continues to grow, recently exceeding 50,000 public warehouses and 7M NPM downloads per month. We see particularly high growth in the Vue, Angular, and Web component communities.

👩💻 thriving community. According to GitHub, Storybook is one of the top 10 fastest growing OSS projects in 2019. It recently passed 1,000 contributors and 50,000 stars.

🧪 platform innovation. We have successfully launched a number of core platform changes under the premise of ensuring user stability. It is worth noting that the component story format is a portable component instance standard. Storybook Docs powers countless product design systems, including our own.

Important: Zero configuration Settings

Zero configuration Settings are one of the most desirable features for advanced users. The leadership team that benefited from Storybook’s configurability also wanted us to “simplify” the setup because they wanted other teams within the company to use Storybook as well. This is because they want other teams within the company to use Storybook as well. Powerful zero configuration Settings make adoption of UI components easier.

Storybook’s new developer experience starts with installation

Storybook 6.0 is pre-configured with best practices. These functions were previously provided as add-ons. These basic add-ons have now been tweaked, documented, and released with Storybook. Also, TypeScript support is built in, so you don’t have to worry about it.

To learn more, read the article. 👉 Zero – config Storybook »

Args: A new generation of story formats

The second thing you’ll notice about 6.0 is an optional new story structure, Args, which is at the heart of the developer experience.

export const Basic = (args) = > <Button {. args} / >;
Basic.args = { label: 'hello' };
Copy the code

Serious Storybook users write hundreds or even thousands of stories. They want more ways to get a return on their investment, including portability, reuse, and value-added features.

Storybook Args is a fundamental change in storytelling. As a user, you can now declare your story’s input “args “and initial values. Storybook and its add-ons will dynamically modify the Args to implement actions such as automatically generating controls, automatically generating event logs, and even custom toolbars.

Args also has ergonomic benefits that allow you to.

  • 🗜 Reduce the size and complexity of stories.
  • 🚚 Reuse fixed data across stories
  • ♻️ recycle stories in more tools.

To learn more, read the article. 👉 Introduce Storybook Args »

Controls: Real-time editing without code

One of the first features to benefit from Storybook Args is Controls, a new plugin requested by countless developers that allows you to dynamically edit a component’s input without touching the code. Controls is an automatically generated UI for quick component experimentation.

If you’re familiar with Storybook, this might look similar to Knobs, which grew out of add-ons. But the resemblance is superficial. Because the controls are automatically generated, there is no extra code to write and no maintenance when you modify the API. Control code is also easier to port because it doesn’t rely on storybook-specific apis.

The Controls plugin is a win for professional developers: not only is it easier to explore new component states yourself, but your Storybook instantly makes it easier for non-technical team members to get feedback.

To learn more, read the article. 👉 Storybook control »

Compilation: Combining storybooks

One of the most exciting features in Storybook 6 is authoring: the ability to browse any Storybook component in your local Storybook.

This feature was requested by the IBM, Cisco and Chromatic teams who manage a lot of UI work where clustering distributed projects would be useful.

Composition also frees up new use cases. For example, it is now possible to develop React, Vue, and Angular cross-framework design systems in one integrated Storybook. It also makes it possible to browse design system documentation next to the application screen as you develop it in Storybook.

To learn more, read the article. 👉 Storybook »

Documentation: Overhaul

The final request — which Betterment and almost all the teams we spoke to raised — was to improve the documentation of Storybook itself. Even big-budget teams with deep Storybook expertise list this as one of their major pain points.

We listened to them and redesigned and wrote the documentation for Storybook from scratch.

Led by Learn Storybook editors Dominic Nguyen and Tom Coleman, it’s the beautifully written, comprehensive Storybook reference you’ve always wanted.

To learn more, visit the website. 👉 Storybook documentation »

There are hundreds more improvements

In addition to the major changes, we have evolved existing features and fixed hundreds of bugs. A few highlights include

  • Layout parameters: Built-in fill/full screen/center story.
  • Stylized story ordering: Specify the order of functions or chapters to facilitate sorting.
  • Dynamic source snippets: Render JSX with real-time control values in React.
  • Release notes: View the new content after the upgrade.
  • Yarn 2: supports next-generation package management.

Please see the comprehensive list. 👉 CHANGELOG. Md »

1 Minute Installation

To try these features out, upgrade your existing project to Storybook 6.0.

npx sb upgrade
Copy the code

In most cases, this is enough to get you running with the new version. But if you get stuck, we’ll help you out.

See the full walkthrough. 👉 Storybook 6 Migration Guide »

Or, for a brand new installation, boot Storybook into an existing application.

npx sb init
Copy the code

You’ll get a complete 6.0 configuration that includes everything described in this article and a beautiful new user onboarding experience.

To participate

Storybook 6.0 was brought by the following contributors.

@adamborowski @ajkl2533 @amannn @andre-brdoch @asudoh @atanasster @brandonseydel @cavanwagg @chrisj-skinner @christianwiedemann @cpgruber @daniel-ac-martin @domyen @eric-hc @fernandopasik @fjorgemota @frassinier @fred-el-jolo @gaetanmaisse @ghengeveld @graup @hipstersmoothie @hypnosphi @igor-dv @isaacplmann @john015 @johnalbin @jonspalmer @jorisw @kdnk @kevin940726 @kruthivijay31 @kylesuss @lifeiscontent @luke-j @marcobiedermann @markhuot @marklb @marklyck @matheo @matus12 @mbelsky @mdchristians @mkamranhamid @mrmckeb @nad182 @nanoblit @ndelangen @niedzielski @okovpashko @orpheusp @papistan @pyrolistical @rek @sarioglu @sean-codes @sekiya9311 @shilman @skovy @tmeasday @tomastomaslol @tooppaaa @vvanpo @wormwlrm @yannbf
Copy the code

The project is maintained by more than 1,000 open source contributors and guided by a steering committee of top maintainers. If you’re interested in contributing, check out the Storybook on GitHub, create a problem, or submit a pull request. Donate to Open Collective. Talk to us on Discord — there’s usually a maintainer online. Stay up to date with Storybook via Twitter and sign up for our official mailing list.

Translated through (www.DeepL.com/Translator) (free version)