Installation

Willkommen in der Flow Dokumentation!

Installation der Flow React Component Library

Die Flow React Component Library kann mit einem Package Manager wie npm oder yarn installiert werden.

Zur leichteren Verwaltung der Abhängigkeiten werden alle Components innerhalb diese Packages bereitgestellt.

Styles importieren

Um die Components-Styles zu verwenden, musst du das Stylesheet importieren. Füge diese Zeile zum Einstiegspunkt deines Projektes hinzu.

Defaults für Components festlegen

Einige Components verhalten sich nach einem Standard, den du für deine gesamte Anwendung festlegen kannst, anstatt ihn an jeder Verwendung zu wiederholen. Dafür umschließt du deine Anwendung mit dem <ComponentDefaultsProvider />:

Jede einzelne Verwendung bleibt stärker als der Standard: Setzt eine List‍ das disableInitialSuspenseBoundary-Property an ihrer Datenquelle oder eine Form‍ das confirmModalCloseOnUnsavedChanges-Property, gilt dort dieser Wert. Verschachtelte Provider gelten jeweils für ihren Teilbaum und übernehmen die Werte, die sie nicht selbst nennen.

Diese Defaults stehen zur Verfügung:

Default	Bedeutung	Wert ohne Provider
`List.disableInitialSuspenseBoundary`	Die List rendert beim initialen Laden keine eigene Suspense-Boundary, sondern erscheint erst mit geladenen Daten.	`false`
`Form.confirmModalCloseOnUnsavedChanges`	Das Schließen eines Modals, das eine Form mit ungespeicherten Änderungen enthält, muss bestätigt werden.	`true`

Aktualisieren

Ein Befehl hebt alle Flow-Abhängigkeiten auf die Zielversion, installiert und führt den Codemod jeder Migration bis zu dieser Version aus:

Er ersetzt den Migrationsleitfaden nicht: die meisten Änderungen haben keinen Codemod. Was in deinem Bereich von Hand ansteht, listet der Befehl am Ende auf – vorab und ohne etwas zu verändern zeigt es list.

Welche Änderung ab welcher Version greift und wie Deprecation-Warnungen den Vorlauf bilden, steht unter Upgrades‍. Was Flow dir innerhalb einer Linie zusichert, steht unter Versionierung & Stabilität‍.

Mit KI-Agents arbeiten

Ein Coding-Agent liest von sich aus nur die Anweisungen deines Projekts. Diese Dokumentation und die Hinweise im Paket findet er nur, wenn sie dort genannt sind. Füge deshalb diesen Block in die AGENTS.md (oder CLAUDE.md) deines Projekts ein:

Die USAGE.md passt zur installierten Version, llms.txt beschreibt den aktuellen Stand der Dokumentation und verlinkt jede Seite als Markdown. Auf jeder Seite dieser Dokumentation führt außerdem „Markdowndatei öffnen“ zur Markdown-Fassung.

mStudio-Extensions mit Vue (Beta)

Eine mStudio-Extension kann statt in React auch in Vue geschrieben werden. Das Package @mittwald/flow-remote-vue-components ist das Vue-Gegenstück zu @mittwald/flow-remote-react-components: Die Extension rendert damit dieselben Flow Components im mStudio.

@mittwald/flow-react-components ist eine Laufzeit- und Typ-Abhängigkeit: Die Remote-Verbindung serialisiert Passwort-Policies über seinen Einstiegspunkt mittwald-password-tools-js, der react importiert, und die Prop-Typen der Components stammen aus seinen Deklarationen. Fehlt das Package oder react, schlägt der Build der Extension fehl, ebenso ohne @mittwald/ext-bridge, das RemoteRoot importiert. react-dom ist eine Peer-Dependency von @mittwald/flow-react-components. yarn installiert Peer-Dependencies nicht selbst, deshalb stehen alle in der Zeile. Alle Flow-Packages brauchen genau die Version von @mittwald/flow-remote-vue-components. Ohne Versionsangabe nehmen pnpm und yarn das latest-Tag der beiden anderen, und das ist eine andere Release-Linie.