React: Konfiguracja storybooka

16.8.x

0:00Cześć. Jeśli przyjrzymy się strukturze naszego projektu i temu jak ten

0:04projekt wygląda, to możemy zauważyć na pewno jedno gołym okiem. Jest

0:08mnóstwo komponentów, które będziemy musieli stworzyć i nie bój się, wiele

0:12z tego kodu przygotuję sam tak, że będzie on możliwy do wykorzystania po prostu

0:16poprzez skopiowanie go z mojego repozytorium, które przygotuje do tego kursu. Nie

0:21ma sensu, żebyśmy każdy komponent po kolei tutaj wystylowali samodzielnie,

0:25wiele z tych rzeczy możesz zrobić po prostu na własną rękę, jako

0:29pracę domową, zachęcam cię do tego. Na pewno wiele rzeczy odkryjesz po drodze, natomiast to

0:33do czego zmierzam w tej chwili to to, że przydałoby się coś takiego

0:37co przypomina, nie wiem, poligon w którym można byłoby

0:42testować te wszystkie komponenty, które byłyby zawieszone w jakiejś takiej próżni

0:46i wyglądałyby one dokładnie tak jak mają wyglądać z aplikacji, natomiast

0:50nie wpływało by na nie nic z poza tych komponentów i na

0:54szczęście powstało takie narzędzie, nazywa się ono storybook, jest naprawdę doskonałe

0:58i zachęcam cię do używania go w każdym większym projekcie, w którym właśnie

1:02powstaje taki nazwijmy to design system. Teraz pokażę ci jak to

1:06wygląda. Storybook to jest po prostu taki, storybook

1:18to nic innego jak taka przeglądarka naszych komponentów, wszystko co możemy zrobić, storybook

1:26to po prostu taka przeglądarka naszych komponentów. Umożliwia ona przeglądanie wszystkich

1:31rzeczy, które stworzyliśmy i dla których stworzyliśmy specjalny plik story, który

1:35dodatkowo jeszcze odpowiednie musimy skonfigurować i umożliwia

1:39on na przykład właśnie zmienianie teł, zmienianie props'ów w czasie rzeczywistym za

1:44pomocą nops'ów tak zwanych i umożliwia naprawdę wiele,

1:48wiele rzeczy. Ostatnio wyszła właśnie piąta wersja tego storybook'a i nie ukrywam, że

1:52dla mnie to też jest nowość, bo ja wcześniej korzystałem z czwórki i parę rzeczy tutaj się

1:56naprawdę zmieniło, więc jestem super podekscytowany tym, że zaraz będzie możliwość,

2:00więc jestem super podekscytowany tym, że zaraz będziemy

2:04mieć możliwość zaimplementowania tego w naszym projekcie. Instalacja

2:09tego na szczęście jest naprawdę bardzo prosta, wystarczy że przejdziemy sobie teraz

2:13do naszego projektu i naszym projekcie wpiszemy npx storybook,

2:17storybook sam wykryje jaki

2:21rodzaj projektu ma obsługiwać, że jest to create-react-app. Dostosuję się

2:25do niego, stworzy całą konfigurację i my po prostu będziemy mogli zacząć

2:30z niego korzystać i to jest cała filozofia. Jak

2:34widzisz podczas instalacji storybook informuje nas o tym, że wykrył, że

2:38nasz projekt to create-react-app i dostosuje do niego wszystko, żeby miało

2:43ręce i nogi, żeby to po prostu działało i kiedy instalacja

2:47dobiegnie końca to możemy zauważyć, że w naszym projekcie porad pojawiło się kilka

2:51nowych rzeczy przede wszystkim ukryty folder, który mamy addons js

2:55i config js. Ten config js będzie dość ważny, ale do niego wrócimy za chwilkę. Pojawiło

3:00się również coś tak jak stories w folderze src i tutaj mamy przykładowe

3:04story właśnie, które zaraz sobie odpalimy jak zerkniemy do package json, to zauważymy,

3:09że pojawił się też nowy skrypt, który się nazywa storybook, więc teraz jeśli

3:13wpiszemy npm start storybook, to

3:22wyskoczy nam jak zwykle jakiś błąd. Zerknijmy o co tym razem chodzi. O ESlinta,

3:27który jest w złej wersji, więc to co muszę zrobić to usunąć package json

3:31log, node modules i zainstalować

3:36wszystko na nowo przez npm install. Wydarzyło się

3:40tak pewnie dlatego, że storybook zainstalował swoją dependencje, która nadpisała dependencje React'a

3:45i przez to takie problemy. Zaraz zobaczymy czy usunięcie package json log

3:50i node modules coś poprawiło, pamiętaj jednak, żeby nie usunąć package

3:54json, ponieważ jest to bardzo ważny plik jego nie ruszamy, okej

3:59paczki zainstalowane podejście drugie npm start npm rems

4:05storybook, okej. Nasz

4:14storybook został zbudowany. Widzimy tutaj button,

4:19który nie jest naszym button'em, to jest taki button zaimportowany z demo storybook'a i mamy

4:23komponent welcome i teraz sprawdźmy, jak to wszystko działa. Mamy

4:28tutaj folder stories, w którym mamy index js i to jest właśnie to

4:32demo, które przed chwilą ci pokazałem. Tutaj są właśnie te button'y, jest tu

4:37Welcome. Mamy jakiś błąd ze ESlint'a, którym na razie się nie przejmujemy,

4:41za chwilkę to sobie do tego dojdziemy, natomiast to w jaki sposób ja chciałbym

4:45skonstruować, to jest struktura plików związanych ze storybook'iem, jest nieco

4:49inna niż ta domyślna konfiguracja nam oferuje, ponieważ tutaj

4:53w configu mamy, że z folderu src importujemy indeks, więc

4:57tylko ten jeden plik, a ja chciałbym, żeby w folderze component's każdy

5:02komponent miał swój plik story, więc tutaj na przykład byłoby button

5:06stories js i tak dalej, więc będzie to nieco bardziej wygodne,

5:10a też te importy, powinny być dużo bardziej zautomatyzowane, a nie tak,

5:14że importujemy tylko jeden plik na tak zwaną pałę wpisany, więc

5:19sprawdźmy sobie teraz konfigurację storybook'iem

5:23i tutaj nawet w konfiguracji właśnie w dokumentacji mamy

5:27taki fragment kodu, który pozwala nam na to, że podajemy

5:31po prostu wyrażenie regularne i na podstawie tego łapiemy

5:35sobie wszystkie pliki, które mają końcówkę js, a w naszym

5:39przypadku będzie stories js, więc teraz odpalimy sobie te

5:43konfigurację, okej i tutaj niedopatrzenie z mojej

5:47strony, front faktycznie mam jest skonfigurowany tak, że mówimy mu słuchaj, znajdź wszystkie pliki,

5:52które mają końcówkę kropka stories, kropka js, więc tutaj

5:56wszystko się zgadza, natomiast w tym miejscu nie chcemy, żeby to było wyłącznie

6:00w folderze stories. Teraz on nam rzuca błędem, ponieważ mówi, że nie może znaleźć takiego

6:04pliku, który się tak kończy. Jak tutaj ten index zmienimy na index kropka

6:09stories kropka js, to on znowu się zbuduje z powrotem, mały

6:14test. Czy on łapie to, jednak nadal mamy problem, ale

6:18on wynika z tego, że stories jest zakopane w src

6:22jeszcze, a my w pliku konfiguracyjnym tego nie uwzględniliśmy, więc tutaj musi być src

6:27stories, okej. Teraz się zbudowało, natomiast

6:31my chcemy, tak jak już mówiłem, żeby to było po prostu w folderach

6:35z komponentami, więc teraz wejdziemy sobie tutaj i wpiszemy

6:40src components i w

6:46ten sposób storybook będzie szukał plików w folderze components, które

6:51się kończą na stories js, więc teraz w następnej lekcji dodamy

6:55sobie pierwsze story, które będzie zawierać nasz button.