fma-ds

Settings Form

A long edit form in sections, saved as a whole (account, company, preferences).

originalMITexperimentalChangelogRegistry JSON

Overview

  • `SettingsForm`: a react-aria Form that only shows state the app owns, so react-hook-form or any other form state fits: isDirty (enables Save and Discard), isPending (spinner on Save, aria-busy) and onReset (adds a Discard button that should restore the saved values).
  • `SettingsSection`: groups fields under a title and description (a labelled group) stacked above them, leaving the width to the fields next to an app sidebar. The fields fall into a two-column grid when there's room (container query); col-span-full takes the whole row.
  • `SettingsFormFooter`: a save bar stuck to the bottom of the viewport with a polite status line (no changes / unsaved / saving), optional children before the buttons, Discard and Save.

Warning before leaving with unsaved changes stays in the app, since it depends on the router; use confirm-dialog.

Built-in text is in English; translate it with i18n.labels.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/settings-form

    Files land in components/fma-ds/settings-form/settings-form.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
cn@^0.5.0react-aria-components@^1.22.1