# pandaUI

> pandaUI ist die React-Komponentenbibliothek des sipgate [Design Systems](https://www.sipgatedesign.com). Mit ihr bauen wir die [Webapps](https://app.sipgate.com/) von [sipgate](https://www.sipgate.de) – vom Button bis zur kompletten View. Hier findest du alle standardisierten, wiederverwendbaren Interface-Komponenten mit Live-Beispielen, Code-Dokumentation und Hinweisen, wie du sie am besten benutzt.

## Introduction

- [About](/introduction/about.md): pandaUI ist die React-Komponentenbibliothek des sipgate Design Systems.
- [Browser Support](/introduction/browser-support.md): Hier findest du eine Übersicht über die Browser, die wir unterstützen.
- [Core Concept](/introduction/core-concept.md): Die pandaUI besteht aus unterschiedlichen Arten von Elementen die ineinander greifen.

## Foundation

- [Grids](/foundation/grids.md): Ein Grid besteht aus unsichtbaren Linien, an denen Elemente ausgerichtet werden.
- [Typography](/foundation/typography.md): Die Px Grotesk ist die Hausschrift von sipgate und wird durchgängig in pandaUI und App-Web verwendet.
- [Breakpoints](/foundation/breakpoints.md): Falls wir für unterschiedliche Größen andere Styles brauchen, dann benutzen wir dafür folgende Breakpoints:
- [Icons](/foundation/icons.md): Unser internes Icon-Set heißt NeoIcons und basiert auf dem Griddy Icon-Set von Filip Greš.
- [Icons / Library](/foundation/icons/library.md): Im Folgenden kannst du alle NeoIcons in den drei Varianten line, solid und duotone und allen verfügbaren Größen anschauen.
- [Tokens](/foundation/tokens.md): Design Tokens sind wie Nicknamen und die single source of truth für spezifische Designentscheidung.
- [Tokens / Naming Convention](/foundation/tokens/naming-convention.md): Leider ist es in der Realität nicht möglich, so prägnante Tokens wie background-success sinnvoll zu verwenden.

## Components

- [Components](/components.md): Alle Basis-Komponenten von pandaUI auf einen Blick – von AiMarker bis Toggle.
- [AiMarker](/components/ai-marker.md): kennzeichnet Inhalte, die von einer AI erzeugt oder beeinflusst wurden
- [Alert](/components/alert.md): zum Hervorheben einer wichtigen Information mit passenden Aktionen
- [Avatar](/components/avatar.md): zur Identifikation und Unterscheidung von Benutzer:innen und Kontakten
- [AvatarStack](/components/avatar-stack.md): zur platzsparenden Darstellung mehrerer Benutzer:innen als Avatar-Gruppe
- [Banner](/components/banner.md): für persistente Inline-Meldungen und Content-Hinweise im Seitenfluss
- [Button](/components/button.md): zum Auslösen von Aktionen, nicht zur Navigation
- [Checkbox](/components/checkbox.md): zum Treffen einer Auswahl oder Beantworten einer Ja/Nein-Abfrage
- [Combobox](/components/combobox.md): zur schnellen Texteingabe mit passenden Vorschlägen
- [ContextMenu](/components/context-menu.md): für zusätzliche Aktionen zu einem Element hinter einem More-Icon
- [DataGridPremium](/components/data-grid-premium.md): für komplexe Tabellen mit umfangreichen Daten-Features
- [Dropdown](/components/dropdown.md): zum direkten Ändern der Ansicht, etwa Sortierung oder Filterung
- [EmptyState](/components/empty-state.md): für leere Seiten oder Bereiche, mit Bild, Text und Aktion
- [FileUpload](/components/file-upload.md): zum Auswählen von Dateien für einen anschließenden Upload
- [Input](/components/input.md): Ein Input ist ein Formularfeld, mit dem Nutzer:innen einen kurzen Text eingeben können.
- [Links](/components/links.md): zur Navigation innerhalb des App-Webs
- [OAuthButton](/components/oauth-button.md): zur Anmeldung über externe OAuth-Provider wie Apple, Google oder Microsoft
- [Radio](/components/radio.md): zur Auswahl genau einer aus mehreren sich ausschließenden Optionen
- [Search](/components/search.md): zum Filtern angezeigter Daten und schnellen Finden relevanter Ergebnisse
- [Select](/components/select.md): zur Auswahl aus vielen Optionen in einem Formular
- [State](/components/state.md): zur Anzeige des Zustands einer Entität
- [StateIcon](/components/state-icon.md): für das kompakte Zustands-Icon einer Entität
- [Table](/components/table.md): In Tabellen werden Daten übersichtlich organisiert und angezeigt.
- [Tabs](/components/tabs.md): zum Gliedern zusammengehöriger Inhalte in scannbare Abschnitte
- [TabSwitch](/components/tab-switch.md): zum Wechseln zwischen genau zwei verwandten Inhalten
- [TextArea](/components/text-area.md): Eine Textarea ist ein Formularfeld, mit dem Nutzer:innen einen längeren, mehrzeiligen Fließtext eingeben können.
- [Toast](/components/toast.md): Der Toast zeigt Nutzer:innen kurzes, nicht-blockierendes Feedback am unteren rechten Rand des App-Webs.
- [Toggle](/components/toggle.md): zum sofortigen Ein- und Ausschalten einer Einstellung ohne Bestätigung
- [Tooltip](/components/tooltip.md): Der Tooltip zeigt auf Anfrage eine kurze Zusatzhilfe zu einem Label, einer Überschrift oder einem Wert.

## Views

- [DetailView](/views/detail-view.md): zum Einsehen und Bearbeiten der Einstellungen einer Entität
- [ListView](/views/list-view.md): zum Überblick gleichartiger Datensätze mit Navigation oder Aktionen je Zeile
- [SubNavView](/views/sub-nav-view.md): zur Darstellung einer ausgewählten Entität mit Unterseiten-Navigation

## View-Components

- [How to Build a View](/view-components/how-to-build-a-view.md): Unsere Views ListView, SubNavView und DetailView bieten eine einfache Lösung, um sowohl Übersichts- als auch Detailseiten out of the box zu erstellen.
- [Inline Editing vs Dialog](/view-components/inline-editing-vs-dialog.md): Diese Guideline hilft bei der Entscheidung, ob eine Einstellung direkt in der Zeile (Inline Editing) oder über einen separaten Dialog bearbeitet werden sollte.
- [ListHeader](/view-components/list-header.md): für die beschriftete, optional sortierbare Kopfzeile einer Listentabelle
- [ListItem](/view-components/list-item.md): zur Darstellung eines Datensatzes als Zeile in einer Liste
- [SaveBar](/view-components/save-bar.md): zum Speichern oder Verwerfen ungespeicherter Inline-Änderungen in einer View
- [Section](/view-components/section.md): Die Section ist ein View-Level-Baustein zur Strukturierung von Inhalten in der DetailView (siehe auch dort den Abschnitt Section).
- [SectionEntry](/view-components/section-entry.md): Ein SectionEntry stellt eine einzelne Einstellung innerhalb einer Section dar.
- [SectionPlaceholder](/view-components/section-placeholder.md): Wird in einer Section verwendet, wenn der Inhalt noch nicht angezeigt werden kann, weil er z. B. erst nach dem Anlegen einer Entität verfügbar ist.
- [ViewHeader](/view-components/view-header.md): für den Kopfbereich einer View mit Titel, Anzahl und Aktionen

## Utilities

- [DisabledContext](/utilities/disabled-context.md): Mit dem Disabled Context ist es möglich, ein Disabled State durch einen Komponentenbaum weiterzureichen ohne die Prop an jeder Komponente setzen zu müssen.
- [Headlines](/utilities/headlines.md): Damit wir Überschriften immer semantisch korrekt ausweisen, bietet der Panda die Headline- und HeadingBoundary-Komponenten.
- [UseEscapeLayer](/utilities/use-escape-layer.md): Mit dieser Hook meldet ihr ein Element, das sich per Escape schließen lässt (Liste, Dropdown, Popover, Dialog), als Escape-Ebene an.
- [UseResizeObserver](/utilities/use-resize-observer.md): Mit dieser Hook könnt ihr die Größe eines Elements bewachen, um bei Änderung euren Code auszuführen.