React: Storybook knobs

16.8.x

0:00Cześć, w poprzedniej lekcji udało nam się poprawnie skonfigurować storybook'a w taki

0:04sposób, że mamy dobrze zaimportowane fonty i mamy swoje

0:08pierwsze dwa story'sy swoje dwa pierwsze przykłady dla

0:12tego komponentu button, a teraz pora przejść trochę dalej i pokazać

0:16bardziej zaawansowane rzeczy i teraz opowiem ci o mops'ach czy też knobs'ach,

0:20które są takimi dodatkowymi opcjami, dodatkowymi props'ami,

0:24które w trakcie przeglądania storybook'a możemy zmieniać. Jest bardzo fajne,

0:29bardzo wygodne narzędzie, które pozwala nam na to, że możemy podglądać

0:33sobie jak zachowują się nasze komponenty podczas jakieś interakcji, podczas zmieniania

0:37ich stanu, więc teraz zrobimy najpierw rzecz,

0:41która pozwoli nam skonfigurować te mobs'y, skompilujemy

0:46sobie taki import, do pliku addons js jest w konfiguracji

0:50naszego storybook'a, a tutaj po prostu deklarujemy, że będziemy korzystać z nops'ów

0:54i w tej chwili nops'y już są gotowe do działania teraz przejdźmy sobie naszego

0:59komponentu, do naszego stories i zobaczymy, co my tutaj mamy, widzę

1:04że mamy nadal ten błąd ESlinta, który nam podkreśla, że nie

1:08możemy tak importować, proponuję żeby zrobić to w ten sposób, bo

1:12robiłem mały research na ten temat i generalnie ciężko się pozbyć tego błędu,

1:16więc po prostu wyłączymy sobie tę

1:21regułę w naszym ESlint'cie. Nie

1:26zrobi nam to za dużej krzywdy, a na potrzeby projektu będzie to na pewno dużo

1:30łatwiejsze niż jakieś tam dodatkowe konfiguracje i tak dalej już się

1:34dosyć z tym męczyliśmy z tym ESlintem, okej teraz postaram się

1:38dodać jakiegoś nops'a, żeby zobaczyć jak to działa w praktyce, więc przejdźmy

1:42sobie teraz do dokumentacji i tutaj mamy coś takiego do

1:47zaimportowania, że importujemy najpierw dekorator with knobs, który komunikuję

1:51storybook'owi słuchaj, będziemy korzystać z nops'ów, a później pobieramy sobie

1:55jeden z typów, który możemy wykorzystać i tych typów jest naprawdę wiele, tutaj

1:59mamy w dokumentacji, są one wyszczególnione, to może być zwykły tekst to może być boolean, to

2:03może być numer ale ja chciałbym wykorzystać coś bardziej zaawansowanego, a mianowicie

2:08select, select pozwala nam na to, że możemy z jakiejś grupy

2:12opcję wybrać sobie tę, która interesuje nas w danym momencie, więc

2:17teraz skopiuję sobie ten kod. Dodałem

2:26tutaj od ciebie with knobs, którą muszę dodać jako dekorator do na mojego story i możemy

2:30to zrobić w taki sposób, tutaj dodajmy

2:35od decorator with mops i teraz

2:40popatrzmy co mi tutaj wkleiliśmy, przede wszystkim color i my

2:44tutaj zrobimy coś takiego. Jeśli przyjrzymy się naszym design'om, to

2:48mamy tutaj trzy rodzaje kolorów i to właśnie chciałbym zrobić chciałbym zrobić w

2:52taki sposób, że button może być żółty niebieski albo zielony tutaj

2:58mamy wartości tych kolorów, teraz je sobie skopiujemy. Okej,

3:02skoro nasze opcję już są przygotowane, to teraz możemy to value podać

3:07tutaj właśnie do naszego button'a jako props'a. Działa to w taki

3:11sposób, podajemy tutaj kolor i value i w

3:16naszym button'ie musimy jeszcze oczywiście dostosować to do tego, żeby on rozumiał

3:20co my tutaj podajemy, więc tutaj w background color otworzymy

3:26sobie funkcję strzałkową wyciągniemy sobie kolor i powiem,

3:31że jeśli kolor istnieje to ma go dać, a jeśli nie to

3:35podamy tutaj ten domyślny kolor żółty i teraz

3:42jeśli wszystko dobrze zrobiłem to po odpaleniu

3:46storybook'a będziemy mogli zobaczyć te opcję i zmienić kolor naszego button'a. Okej

3:51mam tutaj błąd, okazuje się, że mops'y nie są automatycznie zainstalowane

3:56razem ze storybook'iem, że musimy je zainstalować ręcznie, więc te skopiuje

4:00sobie po prostu nazwę tej paczki i zainstaluję

4:05ją tak

4:09żeby storybook mógł z niej korzystać, okej i

4:15po odpaleniu storybook'a widzimy tutaj, że dodana została nowa zakładka, która się nazywa knobs

4:20i tutaj mamy faktycznie nasze trzy opcje, ha

4:26i nic nam się nie zmienia, jak nam się

4:30ten story przyeładuje to tutaj dostajemy link z jakąś podpowiedzią, zaraz

4:34zobaczymy czy ja czegoś nie zepsułem, dynamiczne

4:39dodawanie. Okej, już widzę jaki jest problem. Bo

4:44moje zmienne zostały dodane poza story, czyli poza tą funkcją,

4:48więc za każdym razem jak coś tutaj zmieniam, to tak naprawdę nic się

4:52nie zmienia, bo jest to po prostu statyczne. To nie jest dodawane dynamicznie, więc wszystkie

4:56te rzeczy muszę po prostu przenieść do funkcji, która

5:00zwraca ten button, więc tutaj w tym miejscu zrobimy

5:04coś takiego, a na samym dole zwrócimy

5:08naszego button'a. Jeszcze tylko jedno małe drobne usprawnienie,

5:13bo tutaj primary podaliśmy jako hsl, a tutaj jeszcze jest

5:17jako heksadecymalny kod, więc tutaj też to odmienimy,

5:21od razu ten szary też

5:25podmienimy. Jestem

5:32wielkim fanem używania kolorów jako hsl, są one dużo bardziej

5:36czytelne niż kody heksadecymalne czy jakiekolwiek inne od

5:41razu widzimy jaki jest kolor na danym stopniu i jakie jest jego nasycenie

5:45jaka jest jego jasność, więc jest to naprawdę świetny sposób na zarządzanie

5:49kolorami. Zresztą te kolory zrobimy jako zmienne globalne, ale

5:54tym się zajmiemy w bardziej zaawansowanej części związane jeszcze ze style-components,

5:58teraz sprawdźmy czy te kolory faktycznie się ładują, po dodaniu tych

6:02zmiennych do funkcji w naszym story, otwworzymy

6:07sobie storybook'a, wejdziemy do nops'ów i teraz uwaga chwila prawdy

6:11i faktycznie nasz

6:16button się zmienia, props'y są dodawane dynamicznie przez knops'y,

6:20także to tyle w tej lekcji, chciałem ci pokazać, że

6:24jest to naprawdę fajny narzędzie do dynamicznego zarządzania props'ami w naszych komponentach. Także

6:29możemy z nimi wchodzić w interakcje, zmieniać ich wygląd, zmienić ich zachowanie, jest

6:33to naprawdę fajne, polecam ci przeczytać sobie dokumentację mops'ów. Jest

6:37tych opcji tutaj naprawdę dużo, my wybraliśmy akurat jedną z takich bardziej zaawansowanych,

6:42ale fajne jest to, że tutaj te przykłady są naprawdę fajnie pisane i można

6:46z nich po prostu korzystać, kopiując je do swojego kodu i dopasowując do własnych

6:50potrzeb.