Storybook

Podczas pisania aplikacji ogromne znaczenie ma projektowanie oraz testowanie komponentów aplikacji. Niestety przeglądanie komponentów osobno może być trudne, lecz z pomocą przychodzi nam Storybook, dzięki niemu jesteśmy w stanie testować złożone działania i upewnić się, że napisane przez nas komponenty zawsze działają zgodnie z oczekiwaniami.

Czym jest Storybook?

Storybook jest narzędziem do tworzenia komponentów interfejsu aplikacji. Umożliwia przeglądanie komponentów, przeglądanie różnych stanów każdego komponentu oraz testowanie komponentów. Storybook sprawia, że tworzenie komponentów jest szybsze i łatwiejsze dzięki izolacji komponentów. Jesteśmy w stanie stworzyć całe interfejsy użytkownika bez konieczności poruszania się po aplikacji, a także pomaga w dokumentowaniu komponentów do ponownego użycia, a także daje możliwość testowania je wizualnie, aby zapobiec błędom. Storybook świetnie spisuje się wraz z biblioteką React, lecz także wspiera on takie technologie jak: Vue, Angular, Web Components, Ember, Svelte, Preact.

Czy szukasz wykonawcy Storybook ?

Sprawdź case studies

Pierwsze kroki

Po instalacji Storybooka, możemy stworzyć swoje pierwsze story. Story to funkcja, która opisuje sposób renderowania danego komponentu i jest zapisana w formacie Component Story Format (CSF), a pliki kończą się na .stories.js lub .stories.ts. Poniższy kod przedstawia stworzenie story, który będzie przechowywać komponent z przyciskiem.

import React from 'react';
import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const Primary = () => <Button primary>Button</Button>;

Powyższe Story można ulepszyć o dodatkową koncepcję “args”, która pozwala na dynamicznym zmienianiu argumentów komponentu, czyli będziemy wstanie naszemu przyciskowi np. zmienić dynamicznie kolor, rozmiar, tekst.

import React from 'react';
import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
   primary: true,
   label: 'Button',
};

Dlaczego warto używać Storybooka?

Storybook to narzędzie, które znacząco ułatwia pracę nad komponentami interfejsu użytkownika, szczególnie w projektach, gdzie modularność i wielokrotne wykorzystanie elementów są kluczowe. Jednym z głównych powodów, dla których warto używać Storybooka, jest możliwość tworzenia i testowania komponentów w izolacji, niezależnie od reszty aplikacji. Dzięki temu deweloperzy mogą skupić się na wyglądzie i funkcjonalności pojedynczego komponentu, bez konieczności uruchamiania całej aplikacji. To nie tylko przyspiesza proces developmentu, ale również redukuje ryzyko wprowadzenia błędów do istniejącego kodu.

Storybook wspiera szybki feedback dzięki swojej interaktywnej naturze. Deweloperzy mogą natychmiast zobaczyć zmiany w kodzie komponentu w dedykowanym środowisku Storybooka. Ponadto, dzięki wizualnemu przeglądowi wszystkich komponentów w jednym miejscu, łatwiej jest zachować spójność w projekcie, co jest kluczowe w dużych aplikacjach, gdzie nad kodem pracuje wielu programistów. Storybook ułatwia również współpracę z designerami i product managerami, którzy mogą zobaczyć i przetestować komponenty na bieżąco, zgłaszając uwagi i sugestie, co prowadzi do szybszego iterowania nad projektem.

Kolejną zaletą korzystania z Storybooka jest łatwość tworzenia dokumentacji komponentów. W miarę jak komponenty są tworzone i testowane, Storybook automatycznie generuje dokumentację, która może być używana przez innych członków zespołu. To ułatwia onboardowanie nowych deweloperów oraz zwiększa zrozumienie struktury i użycia komponentów w projekcie. Dodatkowo, dzięki licznym dostępnym dodatkom, takim jak integracja z narzędziami do testowania dostępności, deweloperzy mogą zapewnić, że ich komponenty są nie tylko funkcjonalne, ale również zgodne z najlepszymi praktykami dostępności.