writing-react-native-storybook-stories
Twórz historie komponentów React Native w Storybook z pełną kontrolą nad właściwościami i dodatkami.
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność do pisania i edycji historii komponentów React Native przy użyciu Component Story Format (CSF) i @storybook/react-native. Wspiera tworzenie plików .stories.tsx, konfigurację dodatków Storybook (controls, actions, backgrounds, notes), definiowanie argTypes, dekoratorów, parametrów oraz przenośnych historii do testowania. Idealna dla każdego zadania związanego z autoryzacją historii w React Native Storybook.
Jak używać
Utwórz plik historii obok komponentu React Native, nadając mu nazwę ComponentName.stories.tsx. Plik powinien zawierać domyślny eksport obiektu meta oraz nazwane eksporty dla poszczególnych historii.
Zaimportuj typy Meta i StoryObj z @storybook/react-native, a także Twój komponent. Skonfiguruj obiekt meta z właściwością component wskazującą na komponent, którym chcesz się zajmować.
Zdefiniuj poszczególne historie jako nazwane eksporty w formacie UpperCamelCase, na przykład Basic, Primary czy Secondary. Każda historia powinna być typowana jako StoryObj i zawierać właściwość args z wartościami właściwości komponentu.
Aby dodać kontrolki dla właściwości, skonfiguruj argTypes w obiekcie meta. Dla zaawansowanych scenariuszy użyj właściwości render do zdefiniowania niestandardowej funkcji renderowania, na przykład opakowując komponent w ScrollView.
Dodaj dekoratory i parametry do obiektu meta lub do poszczególnych historii, aby skonfigurować dodatki Storybook takie jak backgrounds, actions czy notes.
Jeśli potrzebujesz współdzielić właściwości między historiami, zdefiniuj je w jednej historii, a następnie rozszerz je w innych przy użyciu spread operatora, na przykład {...Primary.args, variant: 'secondary'}.