Zespół pracujący nad zbiorem wydał właśnie Storybook 6.0. Wśród nowości znajduje się konfiguracja zerowa, obsługa wizualizacji kilku książek w tym samym oknie eksploratora oraz edycję komponentów na żywo.

Storybook jest katalogiem historii stosowanym przez gigantów branżowych czy projekty open source. Historia jest prostą funkcją renderującą komponent przy użyciu zestawu argumentów – właściwości , dane wejściowe, miejsca itp.). Korzystają z niego zespoły takie jak Airbnb, Slack, Lyft, IBM czy Shopify. Dla każdej warstwy widoku organizuje małe funkcje JavaScript, by ustrukturyzować rozwój interfejsu użytkownika, testowanie oraz dokumentację.

Konfiguracja zerowa w Storybook 6.0

Celem twórców przy tworzeniu tej funkcji była szybka konfiguracja, ale jednocześnie zachowując solidne opcje dla zaawansowanych zespołów. Konfiguracja zerowa znacznie ułatwia wdrażanie składników interfejsu użytkownika.

We wcześniejszych wersjach najlepsze funkcje istniały w formie dodatków. Teraz są one dostarczane bezpośrednio ze Storybook 6.0.

Args – opowieści nowej generacji

Nową opcją jest konstrukt fabularny Args. Jest on usprawnieniem w pisaniu historii.

export const Basic = (args) => <Button {... args} />; 
Basic.args = {label: 'cześć'};

Użytkownicy dostają możliwość deklarowania danych wejściowych do argumentów swoich historii. Args posiada kilka zalet ergonomicznych:

• Zmniejszanie rozmiaru i złożoności historii
• Przetwarzanie historii przy użyciu szerszej gamy narzędzi
• Ponowne wykorzystanie danych urządzeń w różnych historiach

Controls – edycja na żywo bez kodu

Nowym dodatkiem w Storybook 6.0 jest Controls, pozwalający na dynamiczną edycję danych wejściowych komponentu bez ruszania kodu.

Controls jest automatycznie generowanym interfejsem użytkownika do szybkiego eksperymentowania z komponentami. Sam interfejs zawiera także graficzne elementy sterujące generowane na podstawie opisu komponentu.

Composition

Opcja Composition daje możliwość przeglądania komponentów dowolnego Storybook wewnątrz lokalnego Storybooku.

• Połącz wiele książek w jeden
• Szybsze środowisko programistyczne dla dużych książek Storybook i monorepos
• Przeglądaj komponenty z różnych frameworków obok siebie

Jest to opcja zamówiona przez zespoły IBM, Chromatic oraz Cisco. Oprócz tego dostępne są nowe przypadki użycia – m.in. można opracować system projektowania międzyfirmowego w React, Vue czt Angular w jednym Storybooku.

Podsumowanie Storybook 6.0

Przede wszystkim Storybook jest standardem tworzenia komponentów interfejsu użytkownika. Storybook jest jednym z 10 najszybciej rozwijających się projektów OSS w 2019 roku według GitHub. Dostarczone ustawienia wstępne pozwalają programistom na używanie Storybook z React, Vue, Angular, Web Components a także z Ember. Storybook 6.0 jest dostępny na licencji open source MIT. Wydano także podręcznik migracji do nowej wersji.

Źródła: InfoQ, Storybook Medium