DESOSA 2022

Storybook

Storybook

Storybook is a development environment for UI components. Storybook eases front-end development by allowing fast prototyping through a quick and interactive process of developing front-end components and testing in isolation. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

Storybook can be used in combination normal HTML but also with other popular web building frameworks such as React, Vue and Angular. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile. Storybook has an active developer community with at the time of writing over 100 open pull requests and almost 8000 closed pull requests.

Find out more at https://storybook.js.org.

Project Site | Project Source

Authors

Frank Bredius

MSc Student Computer Science following Information Architecture Track.

Luca Cras

MSc Student Computer Science, with a special interest in AI, Machine Learning and Data Science.

Jan-Mark Dannenberg

Double Master Student Data Science & Management of Technology.

Pepijn Klop

MSc Student Computer Science, with a special interest in AI and Software Architecture.

Storybook - Scalability

Scalability for Storybook In this post, we will discuss the notion of scalability concerning the StoryBook project. As scalability is an aspect where software architecture plays a particularly important role, this had to be analyzed in our series of posts about the project. Scalability challenges Fortunately for the Storybook project, most known scalability challenges do not apply to it. Examples of these challenges are database scaling and insufficient caching 1. Storybook is used locally on the machine of the developer, where each developer has his own copy of Storybook as a node module dependency.
Storybook
March 28, 2022

Storybook - Quality and Evolution

Storybook is the addition to your web front-end project, which allows you to easily build reusable UI components. In the previous essays12, we have already discussed some of the key qualities of Storybook that makes it the convenient, unmissable, and easy to use tool it is today. We will re-visit some of the key qualities and see to what extent they are currently satisfied by the system. Qualities & processes First of all, the main key quality of Storybook is of course reusability.
Storybook
March 21, 2022

Storybook - Architecture

In our second essay about Storybook, we will focus on the way Storybook works under the hood, and how the large software project is structured to ensure maintainability, testing, and performance. We will take a look at some overarching motifs, and then we will keep zooming in onto the different views (Container, Component, etc.) that are specified in the C4 model1. Finally, we will look at how this all relates to Storybook achieving their key quality attributes as outlined in our first essay2.
Storybook
March 14, 2022

Storybook - Product Vision

If you are anything like us, you will have come across the urge to be able to focus on developing your UI components by building and testing them in an isolated environment. This is exactly what Storybook1 allows us to do! In this essay, we will describe what Storybook aims to do and the vision that they have laid out. In addition, we will present a short product analysis of Storybook.
Storybook
March 4, 2022

Contributions

#17225 [Bugfix] Fix date control width in addons panel #17780

storybookjs/storybook

I changed the width ratio between the date-input and time-input in the addons panel. Instead of an even division of 1 to 1, I changed it to 4 to 3 using flex-grow, since the date in the date-input needs more space. This solves the issue where the date in the date-input was not fully visible, as can be seen in #17225.

See the screenshots for how it looks now, in the issue ticket there is a screenshot on how it looked before.

open
Open PR

Add title prefix support for stories with custom titles

https://github.com/storybookjs/storybook

When using the auto title functionality of CSF 3.0, a user can choose to add prefixes to the generated title. An issue was opened to allow for this same functionality with custom titles. This PR implements this functionality, both for the legacy and v7 version of the story store.

In Review
Open PR

Addon-docs/Vue: Add tests for sourceDecorator vnodeToString

storybookjs/storybook

This PR adds tests for the sourceDecorator of Vue vnodeToString.

merged
Open PR

Date control tests

storybookjs/storybook

This PR adds date control tests.

merged
Open PR

Docs: Add Preact code snippet for Whats a Story

storybookjs/storybook

I added a Preact code snipped for the Get Started -> What’s a Story page in the Docs.

merged
Open PR

Docs: Add remaining Preact code snippets for Get-Started section

storybookjs/storybook

Addition of more Preact code snippets for the remaining parts of the Get Started section in the Docs.

merged
Open PR

Docs: Fix Spelling in Importing Stories in Tests documentation

storybookjs/storybook

When I was reading through the documentation of Storybook I encountered a mistake in spelling in the docs for testing. I fixed this mistake and created my very first own pull request. I checked the guidelines for contributions and the codes of conduct to make sure the pull request was submitted correctly. The maintainers were really friendly and merged my pull request the same day I submitted it.

merged
Open PR

Fix documentation typos and grammatical errors

storybookjs/storybook

This PR fixes typos and grammatical errors in the documentation.

In review
Open PR

Fix mobile fullscreen UI. Fixes

storybookjs/storybook

This PR adds functionality for fullscreen usage to the mobile UI.

pending review
Open PR

Remove mock directories from Jest test coverage

storybookjs/storybook

This PR removes the mock directories from Jest test coverage.

merged
Open PR

Stop add-on Draggable from overlapping the vertical scrollbar when stories overflow

https://github.com/storybookjs/storybook

Fix the draggable overlaying the vertical scrollbar when stories overflow at the bottom, making the story un-scrollable.

Approved
Open PR

Update documentation for auto-title generation. Fixes

storybookjs/storybook

This PR updates the documentation for auto generating story titles based on folder structure.

merged
Open PR