json-render-react

Skill json-render-react to renderer, który zamienia JSON-owe schematy w gotowe komponenty React. Definiujesz katalog swoich komponentów ze schematami walidacji (Zod), a następnie renderujesz je bezpośrednio z JSON-owych specyfikacji. Przydatny do budowania interfejsów z JSON-u, tworzenia katalogów komponentów lub renderowania specyfikacji generowanych przez AI. Całość jest typowana — komponenty mają bezpieczne propsy zdefiniowane w schemacie.

1. Zainstaluj pakiet @json-render/react oraz @json-render/core i zod jako zależności projektu React. 2. Utwórz katalog komponentów za pomocą defineCatalog, gdzie dla każdego komponentu podasz schemat propsów (z.object) i opis. Na przykład Button z labelą i wariantem, Card z tytułem. 3. Zdefiniuj implementacje komponentów za pomocą defineRegistry, przekazując katalog i obiekty z rzeczywistymi komponentami React — każdy otrzyma props i children. 4. W komponencie App lub głównym pliku importuj Renderer i przekaż mu spec (JSON-ową strukturę) oraz registry. Renderer automatycznie zmapuje typ z JSON-u na odpowiedni komponent z katalogu. 5. Struktura JSON powinna zawierać root z type (nazwa komponentu), props (wartości dla schematu) i children (zagnieżdżone komponenty). 6. Renderuj komponent App z JSON-ową specyfikacją — Renderer obsłuży resztę, walidując propsy względem schematów.