React Spectrum jest specjalnie utworzonym zbiorem bibliotek i narzędzi. Ich celem jest pomoc w tworzeniu niezawodnego środowiska użytkownika.

Przede wszystkim w skład Spectrum wchodzą trzy biblioteki React:

• Aria – Biblioteka React Hooks, zapewnia dostępne prymitywy UI.
• Stately – Biblioteka React Hooks, pomaga zarządzać stanem między platformami oraz podstawową logikę systemu projektowania.
• Spectrum – implementacja Spectrum, systemu projektowania firmy Adobe.

Funkcje React Spectrum

W Adobe każdy z produktów spełnia wysokie standardy spójności UI, jego dostępności oraz międzynarodowości.

Adaptacja

Każdy komponent zaprojektowano z myślą o pracy z myszką, dotykiem oraz klawiaturą. Zbudowane zgodnie z zasadami projektowania responsywnego. Celem tego działania jest zapewnienie wygody korzystania i wrażeń bez względu na urządzenie z którego korzystamy.

Dostępność

Zgodnie z praktykami autorskimi WAI-ARIA realizuje się dostępność i zachowanie. Wszystkie komponenty przetestowano na wielu czytnikach ekranu i urządzeń.

Możliwość dostosowania

W bibliotekach React Spectrum można dostosować odpowiednio motywy, a także dopasować automatycznie każdy z komponentów do trybu ciemnego. Ponadto, korzystając z hooków Aria i Stately, buduje się własne komponenty z własną strukturą DOM, aby uzyskać jeszcze większe możliwości dostosowywania.

Międzynarodowość

Po wpakowaniu React Spectrum dostępna jest obsługa ponad 30 języków, także tych pisanych z prawej do lewej strony. Wśród dostępnych opcji jest również formatowanie daty oraz liczb.

Budowa React Spectrum

Każdy komponent podzielono na trzy części – stan, zachowanie oraz renderowany komponent. Jest to możliwe dzięki React Hooks, a po to by umożliwić ponowne wykorzystanie zachowania komponentów w systemach projektowych.

React Aria

React Aria wdraża zachowanie i dostępność. Oprócz funkcji adaptacyjnej, czyli obsługi nawigacji i czytnika ekranu przy pomocy klawiatury, zajmuje się także internacjonalizacją. Aria nie posiada logiki oraz stylistyki charakterystycznej dla systemu projektowania. Wprowadza obsługę zdarzeń, internacjonalizację, dostępność – to, co może być współużytkowane przez wiele systemów projektowych. Tworzenie w React Aria zaczyna się od wyższego poziomu, także nie buduje się wszystkiego od zera. Zapewnia to pełną kontrolę nad renderowaniem i stylizowaniem komponentów. Mają one już wbudowane zachowanie i dostępność, więc można szybciej tworzyć nowe komponenty.

React Stately

Przede wszystkim React Stately jest zbiorem punktów zaczepienia. Zapewniają one zarządzanie stanem oraz podstawową logiką dla każdego z komponentów. Tak jak Aria nie posiadają logiki i stylistyki charakterystycznej dla systemu. Hooki React Stately zapewniają zarządzanie stanem. Oprócz tego akceptują charakterystyczne rekwizyty z komponentu. Ze Stately korzysta się niezależnie we własnych komponentach. Inną opcją jest połączenie z hookami React Aria. W związku z tym otrzymujemy więcej informacji o interakcji i zachowaniu użytkownika z aplikacjami internetowymi.

React Spectrum

React Spectrum łączy wszystkie wcześniejsze elementy razem. Wprowadza stylistykę charakterystyczną dla Adobe.  Funkcje dostępności pozwala na obsługę motywów, zarówno trybu ciemnego, jak i czułego skalowania dla urządzeń dotykowych. Zaprojektowany właśnie z myślą o adaptacji – działa z użyciem myszy, klawiatury a także dotyku, na różnych urządzeniach (o dowolnym rozmiarze ekranu).

Poniżej znajduje się przykład utworzenia elementu wyboru z obsługą przekrojów oraz opcji złożonych.

<Picker label="Options">
  <Section title="Permission">
    <Item textValue="Read">
      <Book size="S" />
      <Text>Read</Text>
      <Text slot="description">Read Only</Text>
    </Item>
    <Item textValue="Write">
      <Draw size="S" />
      <Text>Write</Text>
      <Text slot="description">Read and Write Only</Text>
    </Item>
    <Item textValue="Admin">
      <BulkEditUsers size="S" />
      <Text>Admin</Text>
      <Text slot="description">Full access</Text>
    </Item>
  </Section>
</Picker>

Zakończenie

React Spectrum zawiera początkowy zestaw komponentów. Wraz z rozwojem, w nadchodzących miesiącach zostaną dodane inne. Twórcy uważają, że istnieje możliwość dzielenia się zachowaniem i logiką komponentów między systemami projektowymi i różnymi platformami. Dzięki temu może poprawić się ogólna jakość aplikacji, a także pozwoli oszczędzić wielu firmom zarówno czas jak i pieniądze.

Źródło: Adobe React Spectrum