writing-react-native-storybook-stories

Create and edit React Native Storybook stories using Component Story Format (CSF). Use when writing .stories.tsx files, adding stories to React Native components, configuring Storybook addons (controls, actions, backgrounds, notes), setting up argTypes, decorators, parameters, or working with portable stories for testing. Applies to any task involving @storybook/react-native story authoring.

1. 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.

2. 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ć.

3. 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.

4. 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.

5. Dodaj dekoratory i parametry do obiektu meta lub do poszczególnych historii, aby skonfigurować dodatki Storybook takie jak backgrounds, actions czy notes.

6. 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'}.