Komponenty | Skribly UI

Akcje

Wszystko, co użytkownik naciska, aby coś zrobić: przyciski i ich stany, linki wyglądające jak przyciski, kopiowanie, zamykanie, akcje grupowane i przełączane, podpowiedzi klawiszy i uchwyty do zmiany kolejności list. Budowane z celem WCAG 2.2 AA: widoczny fokus, cele co najmniej 24 px, klawiatura dla każdej akcji i stany wypowiedziane słowami, a nie samym kolorem.

Button

Agenci

Elementy widoku, w którym obok siebie działa kilku agentów programistycznych: panele ze stanem, drzewo przestrzeni roboczej, przegląd każdej sesji, pasek pod terminalem i kroki potoku. Stan sesji zawsze ma słowo i własny kształt znaku, więc kolor nigdy nie niesie go sam, a każda część układa się aż do ekranu 320 px. Budowane z celem WCAG 2.2 AA.

Asystent

Widżet asystenta, tylko interfejs: przycisk, okno dialogowe i dziennik rozmowy. Rozmawia z adapterem, który przekazuje strona, i sam nic nie wysyła.

AssistantWidget

Marka

Znaki Skribly i małe plakietki tożsamości wokół nich: logo, logotyp słowny, zestaw aplikacji, osoby, agenci, hosty git, trackery i strony. Plakietki używają liter na odcieniu tokenu koloru, więc są czytelne w każdym motywie i nigdy nie opierają się na samym kolorze.

Wykresy

Zwykłe wykresy SVG i liczby do raportów i pulpitów, budowane z celem WCAG 2.2 AA. Każdy wykres jest nazwaną figurą z napisanym podsumowaniem; klawisze strzałek przechodzą po punktach danych i odczytują każdy z nich; każda wartość jest też w tabeli za rozwijanym blokiem. Serie różnią się kolorem i wzorem linii, a znaczniki w trybie wymuszonych kolorów przełączają się na kolory systemowe. Wykresy rysują się w szerokości swojego pola, więc etykiety zachowują rozmiar przy każdym powiększeniu, a na wąskich ekranach jest ich mniej.

Kod

Części przestrzeni roboczej z kodem: zmienione pliki, pole commita z powodami, graf commitów i refy, pull request gałęzi, status pod edytorem, wyniki wyszukiwania w plikach oraz podgląd strony z paskiem adresu i rozmiarami urządzeń. Wiersze leżą w List i TreeView z grupy data, więc klawisze strzałek, wyszukiwanie po wpisaniu i zaznaczanie pochodzą z React Aria.

Treść

Tekst, który ludzie czytają: renderowany Markdown, pole do pisania z podglądem, kod z przyciskiem kopiowania, pojedyncze polecenia, wyjście programu i nieruchomy ekran terminala. Kod i wyjście przewijają się we własnym polu, więc strona nigdy nie przewija się na boki.

Rozmowa

Czaty z agentem i wątki komentarzy: dziennik wiadomości, dymki, kroki narzędzi, pole wiadomości z załącznikami oraz komentarze z formularzem Markdown. Każdy stan ma słowo i ikonę, a błędy, które blokują, są ogłaszane od razu.

Dane

Tabele, listy, drzewa i osie czasu do pokazywania rekordów. Każda kolekcja ma te same stany ładowania, braku danych i błędu, a każda interaktywna działa na React Aria, który zapewnia obsługę klawiatury, zaznaczanie i wsparcie czytników ekranu. Budowane z celem WCAG 2.2 AA.

Komunikaty i stany

Status, komunikaty i ładowanie. Sukces, informacja, ostrzeżenie i błąd mają jeden system: każdy ma ton, kształt ikony i słowo, więc kolor nigdy sam nie niesie znaczenia. Komunikaty, które przychodzą później, są odczytywane przez regiony na żywo typu polite, a błędy blokujące przez regiony typu assertive.

Formularze

Pola z jednym wyglądem i jednym systemem komunikatów: etykieta ze znakiem wymagane lub opcjonalne, tekst pomocy, status w tonie ok, info lub warn oraz błąd z ikoną. Każdy komunikat jest powiązany ze swoją kontrolką, błędy ustawiają aria-invalid, a po nieudanym wysłaniu podsumowanie linkuje do pól. Budowane z celem WCAG 2.2 AA, od 320 px.

Media

Pliki i obrazy: siatka biblioteki i jej kafelki, przesyłanie, okno wyboru, uporządkowane pole obrazów do formularzy, kadrowanie i punkt ostrości oraz pola presetu obrazu. Budowane z celem WCAG 2.2 AA: każdy kafelek, ramka i znacznik ma ścieżkę dla klawiatury i czytnika ekranu, stany są wypowiedziane słowami ze znakiem, a każdy układ działa od 320 px.

Sposoby przechodzenia między widokami, stronami i filtrami: karty, karty-linki, wybory segmentowe, paski kart, które można zamknąć, ścieżki nawigacji, paginacja, chipy filtrów i kontrolki języka. Budowane z celem WCAG 2.2 AA, od szerokości 320 px.

Onboarding

Pomoc w pierwszych minutach: przewodnik, który wskazuje elementy interfejsu, karta pierwszych kroków oparta na prawdziwych danych oraz listy kontrolne z drogą do naprawy każdej pozycji. Postęp jest zawsze podany słowami, a nie tylko pokazany.

Operacje

Uruchamianie i opieka nad narzędziami wokół kodu: kontenery i pliki compose, alerty, ustalenia audytu z wynikiem, wtyczki i reguły z przełącznikami, katalog umiejętności, kroki instalacji i logowania, motywy edytora i połączone konta. Wiersze leżą w List z grupy data, więc klawisze strzałek, wyszukiwanie po wpisaniu i zaznaczanie pochodzą z React Aria.

Nakładki

Warstwy nad stroną: okna dialogowe, potwierdzenia, okna podręczne, menu i podpowiedzi. Każda przejmuje albo zwraca fokus, zamyka się klawiszem Escape, zachowuje widoczną ramkę w trybie wymuszonych kolorów i mieści się na ekranie 320 px, gdzie Modal staje się dolnym arkuszem.

Strony

Całe ekrany do logowania, resetowania hasła i zgłaszania błędu. Układają się od 320 px, każdy komunikat mają jako ton, ikonę i słowo, a budowane są z celem WCAG 2.2 AA.

Wyszukiwanie

Znajdowanie rzeczy: wyszukiwarka w górnym pasku z pogrupowanymi wynikami i klawiszem /, paleta poleceń, szybkie otwieranie plików, wiersze i grupy wyników, opcje wyszukiwania oraz wyróżnianie trafień. Budowane z celem WCAG 2.2 AA, od szerokości 320 px.

Powłoka

Rama wokół każdego ekranu Skribly: układ webowy z ciemnym panelem bocznym i górnym paskiem, układ desktopowy z paskiem tytułu, paskiem aktywności, paskiem stanu i dokiem oraz podzielone panele. Mierzy własną szerokość, więc układa się tak samo w wąskim oknie, przy powiększeniu 400% i w podglądzie, a jej arkusze trzymają fokus na małych ekranach.

Powierzchnie

Pudełka, z których składa się ekran: karty, kafelki ze statystykami, baner powitalny, sekcje ustawień, lista rzeczy wymagających uwagi, separatory i kafelki do wyboru. Każdy układa się od 320 px i zachowuje krawędzie w trybie wysokiego kontrastu systemu Windows.

Motyw i dostępność

Motyw dzienny, nocny i wysokiego kontrastu z ustawieniami czytelnika w aplikacjach Skribly: rozmiar tekstu, ograniczony ruch, wyraźna obwódka fokusa i podkreślone linki. Do tego drobne elementy potrzebne na każdej stronie: link pomijający, ukryte etykiety i ogłoszenia na żywo. Budowane z celem WCAG 2.2 AA.

Tracker

Zgłoszenia i tablica Skribly Tracker oraz zadania, które Agent pobiera z dowolnego trackera. Status, priorytet i typ łączą kształt znaku ze słowem, więc nic nie opiera się na kolorze; listy układają się od 320 px; tablica przenosi karty wskaźnikiem, klawiaturą, czytnikiem ekranu i menu jednego dotknięcia oraz mówi, co się stało, przez regiony na żywo. Budowane z celem WCAG 2.2 AA.

Każdy komponent, na żywo