Storybook
minuta czytania
Kamil Nahotko
24 lut 2022
Storybook to narzędzie, które pozwala na tworzenie i testowanie komponentów aplikacji w izolacji od reszty aplikacji. Dzięki niemu, developerzy mogą tworzyć, testować i prezentować komponenty w prosty sposób, co pozwala na szybsze i łatwiejsze tworzenie aplikacji.
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.
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',
};
Powiązane artykuły
Jam Stack – przełom czy dobrze znana technologia?
17 lut 2022
Jam Stack to technologia, która polega na budowaniu aplikacji internetowych za pomocą statycznie generowanych stron, które są hostowane na serwerach CDN. Jest coraz bardziej popularny wśród programistów, ponieważ oferuje wiele korzyści, takich jak szybkość, niskie koszty utrzymania i bezpieczeństwo.
Tomasz Kozon
#front-end

WebWave, polski system CMS
1 lut 2022
WebWave to nowoczesny edytor stron internetowych, który umożliwia tworzenie i edycję stron bez konieczności posiadania zaawansowanej wiedzy technicznej. Dzięki intuicyjnemu interfejsowi oraz bogatej bibliotece gotowych szablonów, każdy może stworzyć profesjonalną stronę internetową bez potrzeby korzystania z pomocy specjalisty.
Tomasz Kozon
#fullstack
Jak wykorzystać pliki cookies do poprawy jakości działania strony internetowej?
16 mar 2023
W erze cyfrowej, gdzie użytkownicy oczekują szybkich, spersonalizowanych i bezproblemowych doświadczeń online, coraz więcej właścicieli stron internetowych poszukuje skutecznych sposobów na poprawę jakości swoich witryn. Jednym z narzędzi, które może przyczynić się do osiągnięcia tego celu, są pliki cookie.
Tomasz Kozon
Reklamowanie się w Gmailu za pomocą Gmail Sponsored Promotion.
15 mar 2023
Reklama w internecie to obecnie niezbędny element strategii marketingowych dla firm każdej wielkości i branży. Jednym z kanałów reklamowych, które zdobywają coraz większą popularność, jest Gmail Sponsored Promotion. To narzędzie pozwala na wyświetlanie reklam w skrzynce odbiorczej użytkowników Gmaila w sposób nieinwazyjny i dopasowany do profilu odbiorcy.
Tomasz Kozon
Jakie są różnice między atrybutami nofollow i dofollow?
14 mar 2023
W świecie SEO atrybuty nofollow i dofollow są pojęciami, z którymi każdy właściciel strony internetowej powinien się zapoznać. Oba atrybuty stanowią ważny element optymalizacji strony internetowej, wpływając na jej pozycję w wynikach wyszukiwania. Atrybut nofollow i dofollow oznaczają dwa różne podejścia do linkowania, a ich właściwe stosowanie może przynieść korzyści dla witryny internetowej w postaci zwiększenia ruchu i poprawy reputacji w oczach algorytmów wyszukiwarek.
Tomasz Kozon
Definition of Done w metodologii Agile - jak wykorzystać ten koncept w praktyce
14 mar 2023
W dzisiejszym dynamicznym świecie zarządzania projektami IT, metodologia Agile zyskuje coraz większą popularność jako elastyczne i efektywne podejście do wytwarzania oprogramowania. Wśród kluczowych konceptów Agile, Definition of Done (DoD) pełni istotną rolę w utrzymaniu wysokiej jakości produktów oraz sprawnym monitorowaniu postępów projektu.
Tomasz Kozon
Geotargetowanie w strategii marketingowej: Jak może przyczynić się do wzrostu sprzedaży i świadomości marki
14 mar 2023
W erze cyfryzacji i rosnącej konkurencji na rynku, przedsiębiorstwa poszukują coraz bardziej efektywnych i innowacyjnych strategii marketingowych. Geotargetowanie, czyli wykorzystanie danych geolokalizacyjnych w celu dostarczania spersonalizowanych treści i reklam, stało się jednym z kluczowych narzędzi w budowaniu skutecznych kampanii.
Tomasz Kozon
Zobacz wszystkie artykuły