fma-ds

Plan Builder

Build what the user is about to buy by choosing quantities, with the price in real time: a custom plan with several resources, or a quantity of one item (extra notes, credits).

originalMITexperimentalChangelogRegistry JSON

Overview

  • `PlanBuilder`: lays out the resources and its summary (an OrderSummary: a sticky card on large screens, a bar fixed to the bottom on smaller ones). isCalculating turns every PlanPrice (a price formatted by the app) into a skeleton while the app recalculates.
  • `PlanResource`: a card with icon, title, description and a controlled Slider named by label (value/onChange, minValue/maxValue/step, marks, formatValue, limit for stock or quota left, isDisabled). A hint under the slider says why it stops or is disabled, and an optional included accordion lists what comes with it.
  • `PlanResourceAddon`: an add-on as a child of the resource — a switch with label and description.

The price, debouncing, limits and notices stay in the app.

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/plan-builder

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

Dependencies

npm
cn@^0.5.0