Dashforge: an application orchestrator for React

Dashforge is an application orchestrator designed for React that aims to address the challenge of application orchestration. This includes handling theming, forms, permissions, and visibility, which are often scattered throughout components. Dashforge attempts to make these concerns declarative, predictable, and reusable within a single module.

Dashforge uses react-hook-form as its core, on top of which it provides a stable contract - identical in both MUI and Tailwind editions. It achieves this through two main components: theming and forms.

Theming in Dashforge is token-first and built for both build-time and run-time. Components don't hard-code colors or spacing, instead consuming typed design tokens from a pure TypeScript package called @dashforge/tw-tokens. Tokens can travel on two rails - build-time (using a Tailwind preset) and run-time (as CSS variables). This system allows for dark mode changes and live theme updates without re-renders or rebuilds.

Forms in Dashforge are handled through declarative orchestration. This means instead of using a "Controller" for each field and multiple watch/useWatch/useEffect statements to react to values, Dashforge binds fields to the form by name. This leads to fewer re-renders and eliminates the need for Controllers at the call site.

Dashforge also supports reactions, which are expressions of logic that occur outside the render. For example, if one field depends on another, Dashforge allows you to declare this outside the render function. This reduces the amount of code inside the component's render and prevents race-conditions. These reactions attach through a prop to DashForm, simplifying the form's management and improving performance.

In summary, Dashforge is an application orchestrator for React that solves the problem of application orchestration by moving concerns like theming, forms, permissions, and visibility out of components and making them declarative, predictable, and reusable.