dough-calc/web/src/components/BreadForm.jsx

// web/src/components/BreadForm.jsx

function BreadForm({ onSubmit, loading }) {
  return (
    <form onSubmit={onSubmit} data-testid="bread-form">
      <fieldset>
        <legend>Les ingrédients de base</legend>

        <label htmlFor="total_flour">
          Farine totale (en grammes)
          <input
            type="number"
            id="total_flour"
            name="total_flour"
            defaultValue="500"
            min="1"
            step="0.1"
            required
          />
          <small>
            Indique la quantité totale de farine que tu veux dans ton pâton,
            en grammes. 500 (g) est la valeur par défaut.
          </small>
        </label>

        <label htmlFor="hydration">
          Hydratation (en % de la farine)
          <input
            type="number"
            id="hydration"
            name="hydration"
            defaultValue="60"
            min="50"
            max="100"
            step="1"
            required
          />
          <small>
            Indique le pourcentage d'eau par rapport à
            la farine. La valeur par défaut est de 60&nbsp;%, ce qui revient
            600&nbsp;g pour 1&nbsp;kg de farine, ou 300&thinsp;g pour 500&nbsp;g.
          </small>
        </label>

        <label htmlFor="salt">
          Sel (en % de la farine)
          <input
            type="number"
            id="salt"
            name="salt"
            defaultValue="1.6"
            min="0"
            max="2"
            step="0.1"
            required
          />
          <small>
            Indique la quantité de sel en pourcent de la farine. La valeur par
            défaut est 1.6&nbsp;%, ce qui revient à 16&nbsp;g de sel pour
            1&nbsp;kg de farine, ou 8&nbsp;g pour 500&nbsp;g.
          </small>
        </label>
      </fieldset>

      <fieldset>
        <legend>Le levain</legend>

        <label htmlFor="sourdough_percentage">
          Levain (en % de la farine)
          <input
            type="number"
            id="sourdough_percentage"
            name="sourdough_percentage"
            defaultValue="20"
            min="10"
            max="100"
            step="1"
            required
          />
          <small>
            Indique la quantité de levain en pourcent de la farine. La valeur
            par défaut est de 20&nbsp;%, ce qui revient à 200&nbsp;g pour
            1&nbsp;kg de farine, ou 100&nbsp;g pour 500&nbsp;g.
          </small>
        </label>

        <p>
          Pour calculer les quantités à ajouter au pâton pour respecter
          le taux d'hydratation voulu, il faut connaître les proportions de
          farine et d'eau du levain. C'est le rôle des champs suivant&thinsp;:
        </p>

        <label htmlFor="sourdough_flour_parts">
          Ratio farine
          <input
            type="number"
            id="sourdough_flour_parts"
            name="sourdough_flour_parts"
            defaultValue="1"
            min="0.1"
            step="0.1"
            required
          />
          <small>
            Indique une valeur par exemple de 1 ou de 100 qui servira de base
            à la comparaison avec la proportion d'eau (champ suivant). La
            valeur par défaut est de 1.
          </small>
        </label>

        <label htmlFor="sourdough_water_parts">
          Ratio eau
          <input
            type="number"
            id="sourdough_water_parts"
            name="sourdough_water_parts"
            defaultValue="1"
            min="0.1"
            step="0.1"
            required
          />
          <small>
            Indique la proportion d'eau du levain, par rapport à la quantité
            de farine. Un ratio de <code>1:1</code> signifie qu'il y a autant
            d'eau que de farine dans le levain. C'est la même chose qu'un ratio
            de <code>100:100</code>. C'est le cas où lors d'un rafraîchi, tu
            ajoutes autant de farine que d'eau.
          </small>
        </label>
      </fieldset>

      <button type="submit" disabled={loading} aria-busy={loading}>
        {loading ? "Calcul en cours..." : "Calculer"}
      </button>
    </form>
  );
}

export default BreadForm;