Storybook

Storybook to warsztat komponentów Orbit: każdy komponent z resources/js/Components jest pokazany w izolacji, pogrupowany według warstw atomic design (Atoms, Molecules, Organisms), z paskiem narzędzi do przełączania motywu (ciemny/jasny) i koloru akcentu. Stories są jednocześnie testami Vitest.

Przewodniki, w kolejności, w jakiej faktycznie będą potrzebne

1. Napisz storyStorybookNapisz storyKażdy komponent dostaje obok siebie plik <Name>.stories.tsx. — dodaj X.stories.tsx obok komponentu, z wariantami i interakcją.
2. Mockowanie Inertia, tras i sieciStorybookMockowanie Inertia, tras i sieciStories działają bez backendu. @inertiajs/react i axios są podmienione na .storybook/mocks/inertia.tsx i .storybook/mocks/axios.ts (alias Vite w Storybooku… — daj story propsy strony, błędy formularza i odpowiedzi API bez backendu.
3. Motyw, akcent i kontener DockeraStorybookMotyw, akcent i kontener DockeraPasek ma dwa globale, zadeklarowane w .storybook/preview.tsx: — jak działa pasek narzędzi i jak uruchomić Storybook (make storybook).
4. Stories jako testy VitestStorybookStories jako testy VitestStories są testowane przez portable stories Storybooka: composeStories stosuje preview (dekoratory, providery, globale), a story.run() renderuje story i ur… — jak każde story jest renderowane i sprawdzane przez npm run test:stories oraz jak jest trzymane poza progiem pokrycia.

Architektura w jednym akapicie

Konfiguracja leży w .storybook/: main.ts (wzorce plików stories, addony), vite.config.ts (osobna konfiguracja Vite, która podmienia @inertiajs/react i axios na mocki z .storybook/mocks/), preview.tsx (globalny CSS, przełączniki, dekorator withOrbitApp) oraz docs.tsx (kontener dokumentacji zależny od motywu). Dekorator owija każde story w prawdziwe providery aplikacji (motyw, akcent, alerty, modale, skróty, komendy), więc komponenty zachowują się jak w aplikacji. Wspólne dane przykładowe to resources/js/stories/fixtures.ts, typowane względem własnych typów aplikacji.