Zadanie 1: Generator komponentów

Stwórz "generator komponentów", który pozwoli użytkownikowi wybrać komponent, oraz wyświetli wybrany komponent na ekranie oraz kod, który można skopiować do schowka i wkleić do edytora. Będzie to podobne zachowanie, jak w Storybooku, gdzie wizualnie mamy zaprezentowany komponent, ale też możemy skopiować kod komponentu do schowka.

Instrukcje:

1. Wykorzystaj element "select" z HTML, za pomocą którego będzie można wybrać konkretny komponent. Będzie to Button, Text, Header.
2. Możesz dodać kilka dodatkowych komponentów, aby było więcej opcji wyboru
3. W przypadku wybrania komponentu Text, wyświetl na ekranie pole input z możliwością przekazania propsów do komponentu. Po wprowadzeniu propsów komponent powinien na ekranie się przerenderować tzn. powinniśmy otrzymać nową wersję komponentu ze wprowadzonymi propsami.
4. W zależności od Twojego rozwiązania możesz skorzystać ze stanu, refów lub obu rozwiązań jednocześnie.

‍

Zadanie 2: Form wizard

Przygotuj komponent, który będzie składał się z kilku kroków. Na samym końcu wyświetlimy dane, które zebraliśmy w trakcie wypełniania dwóch poprzednich kroków.

Instrukcje:

1. W pierwszym kroku wyświetl formularz z polami do uzupełnienia imienia i nazwiska.
2. W drugim kroku wyświetl formularz z wyborem daty urodzenia oraz polem do wpisania hobby.
3. W trzecim kroku wyświetlimy podsumowanie.
4. Napisz funkcjonalność do przechodzenia pomiędzy krokami formularza. To znaczy, że z pierwszego kroku możemy przejść do kroku drugiego, z kroku drugiego do kroku trzeciego, jak również wrócić do kroku pierwszego. W kroku trzecim będziemy mieli możliwość powrotu do kroku drugiego oraz zatwierdzenie danych.
5. Zatwierdzenie danych to na razie przycisk po kliknięciu, w który wszystkie dane pojawią się na konsoli przeglądarki.

‍

Zadanie 3: Historia zmian

Przygotuj mechanizm zapisywania historii zmian dla konkretnego pola formularza.

Instrukcje:

1. W tym zadaniu możesz skorzystać z któregoś z pól stworzonych wcześniej np. imię.
2. Dla tego wybranego pola będziemy chcieli zapisywać historię zmian. Zapis takiej historii powinien się odbywać, gdy użytkownik "wyjdzie" z pola tekstowego.
3. Wartości z pola zapiszemy do tablicy w session/local storage
4. Na ekranie wyświetl wszystkie zapisane wartości łącznie z datą i dokładnym czasem (data, godzina, minuta, sekunda)
5. Podczas dodawania wartości do historii możesz sparsować taki obiekt za pomocą Zod
6. Podczas odczytywania wartości z historii możesz sparsować dane za pomocą Zod, aby upewnić się, czy możemy jest wstawić do interfejsu

‍

Zadanie 4: Dynamiczny formularz

Przygotuj formularz, który będzie miał możliwość dodawania dynamicznych pól. To znaczy, że formularz ma zdefiniowanych kilka pól (możemy wciąż bazować na imieniu i nazwisku), ale możemy też stworzyć kilka dodatkowych. Będą to pola z zainteresowaniami użytkownika.

Instrukcje:

1. Stwórz formularz korzystając z React Hook Form, który będzie zawierał pola imię i nazwisko
2. Stwórz możliwość dodania zainteresowań użytkownika, ale w taki sposób, że będziemy mogli kliknąć w przycisk "add" aby pokazać na ekranie nowe pole typu input oraz "remove" aby takie pole usunąć z ekranu
3. Po wysłaniu formularza wyświetl dane na konsoli przeglądarki.

‍

Powodzenia!

Zadanie 1: Generator komponentów

Stwórz "generator komponentów", który pozwoli użytkownikowi wybrać komponent, oraz wyświetli wybrany komponent na ekranie oraz kod, który można skopiować do schowka i wkleić do edytora. Będzie to podobne zachowanie, jak w Storybooku, gdzie wizualnie mamy zaprezentowany komponent, ale też możemy skopiować kod komponentu do schowka.

Instrukcje:

1. Wykorzystaj element "select" z HTML, za pomocą którego będzie można wybrać konkretny komponent. Będzie to Button, Text, Header.
2. Możesz dodać kilka dodatkowych komponentów, aby było więcej opcji wyboru
3. W przypadku wybrania komponentu Text, wyświetl na ekranie pole input z możliwością przekazania propsów do komponentu. Po wprowadzeniu propsów komponent powinien na ekranie się przerenderować tzn. powinniśmy otrzymać nową wersję komponentu ze wprowadzonymi propsami.
4. W zależności od Twojego rozwiązania możesz skorzystać ze stanu, refów lub obu rozwiązań jednocześnie.

‍

Zadanie 2: Form wizard

Przygotuj komponent, który będzie składał się z kilku kroków. Na samym końcu wyświetlimy dane, które zebraliśmy w trakcie wypełniania dwóch poprzednich kroków.

Instrukcje:

1. W pierwszym kroku wyświetl formularz z polami do uzupełnienia imienia i nazwiska.
2. W drugim kroku wyświetl formularz z wyborem daty urodzenia oraz polem do wpisania hobby.
3. W trzecim kroku wyświetlimy podsumowanie.
4. Napisz funkcjonalność do przechodzenia pomiędzy krokami formularza. To znaczy, że z pierwszego kroku możemy przejść do kroku drugiego, z kroku drugiego do kroku trzeciego, jak również wrócić do kroku pierwszego. W kroku trzecim będziemy mieli możliwość powrotu do kroku drugiego oraz zatwierdzenie danych.
5. Zatwierdzenie danych to na razie przycisk po kliknięciu, w który wszystkie dane pojawią się na konsoli przeglądarki.

‍

Zadanie 3: Historia zmian

Przygotuj mechanizm zapisywania historii zmian dla konkretnego pola formularza.

Instrukcje:

1. W tym zadaniu możesz skorzystać z któregoś z pól stworzonych wcześniej np. imię.
2. Dla tego wybranego pola będziemy chcieli zapisywać historię zmian. Zapis takiej historii powinien się odbywać, gdy użytkownik "wyjdzie" z pola tekstowego.
3. Wartości z pola zapiszemy do tablicy w session/local storage
4. Na ekranie wyświetl wszystkie zapisane wartości łącznie z datą i dokładnym czasem (data, godzina, minuta, sekunda)
5. Podczas dodawania wartości do historii możesz sparsować taki obiekt za pomocą Zod
6. Podczas odczytywania wartości z historii możesz sparsować dane za pomocą Zod, aby upewnić się, czy możemy jest wstawić do interfejsu

‍

Zadanie 4: Dynamiczny formularz

Przygotuj formularz, który będzie miał możliwość dodawania dynamicznych pól. To znaczy, że formularz ma zdefiniowanych kilka pól (możemy wciąż bazować na imieniu i nazwisku), ale możemy też stworzyć kilka dodatkowych. Będą to pola z zainteresowaniami użytkownika.

Instrukcje:

1. Stwórz formularz korzystając z React Hook Form, który będzie zawierał pola imię i nazwisko
2. Stwórz możliwość dodania zainteresowań użytkownika, ale w taki sposób, że będziemy mogli kliknąć w przycisk "add" aby pokazać na ekranie nowe pole typu input oraz "remove" aby takie pole usunąć z ekranu
3. Po wysłaniu formularza wyświetl dane na konsoli przeglądarki.

‍

Powodzenia!