22.02.26

Knowledge

Design System Factory Pattern (Ninox)

Widget-Presets direkt aus einer Funktion ziehen

Widget-Presets direkt aus einer Funktion ziehen

Die Idee

Was wäre, wenn ihr eine einzige Funktion hättet, die euer komplettes Design System enthält – Farben, Typografie und fertige Widget-Konfigurationen? Und ihr diese Presets direkt an die Widget-Funktionen übergeben könntet?


So sieht das aus:


Ein Aufruf. Fertig. Keine 10+ Properties mehr pro Button. Die Defaults kommen aus dem Design System, die dynamischen Werte (Title, Actions, ID) gebt ihr mit.



Wie funktioniert das?

Die Funktion nimmt einen data-Parameter entgegen und baut die dynamischen Werte direkt in die Presets ein:


Der Trick: Kein Spread-Operator nötig

In Ninox gibt es kein {...defaults, ...overrides} wie in JavaScript. Das war bisher das Hindernis für solche Patterns.

Die Lösung: Die Funktion selbst ist die Factory. Sie nimmt eure dynamischen Werte entgegen und baut das fertige Config-Objekt zusammen. Lokale Variablen (let primaryBase := ...) sorgen dafür, dass die Presets die gleichen Farben wie das colors-Objekt verwenden – Single Source of Truth.


Anwendungsbeispiele

Primary Button:

Secondary Button:

Badge:


Was bringt das?

  • Konsistenz – Alle Buttons/Badges sehen automatisch gleich aus, überall

  • Weniger Code – Statt 10+ Properties pro Widget nur noch die dynamischen Werte

  • Single Source of Truth – Farbe ändern? Nur an einer Stelle

  • Pro Kunde konfigurierbar – Jeder Kunde/jedes Projekt bekommt seine eigene Design-System-Funktion

  • Sofort nutzbar – Keine Widget-Änderung nötig, funktioniert mit der aktuellen Version


Erweiterungspotenzial

Das Pattern lässt sich beliebig ausbauen:

  • Weitere Varianten: buttonDanger, buttonGhost, badgeSuccess, badgeWarning

  • Mehr Widget-Typen: text, textHeading, icon, input, select

  • Responsive Presets: Unterschiedliche Sizes je nach isMobile

  • Mehrere Design Systems: designSystemLight(), designSystemDark()


Status: Experiment

Wir haben das Pattern getestet und es funktioniert direkt – ohne Anpassungen an den Widgets. Das ist aktuell ein Experiment und wir sind gespannt auf euer Feedback:

  • Nutzt ihr bereits ein ähnliches Pattern?

  • Welche Widget-Presets wären für euch am nützlichsten?

  • Seht ihr Probleme oder Verbesserungsmöglichkeiten?


Schreibt uns eure Gedanken in unserem Discord Channel!