Components design — app/frontend/src/components

This document describes the component design we chose for app/frontend/src/components, guided by the Atomic Design methodology (see Atomic Design). We focused on Atoms and Molecules for our structure.

Design mapping

• Atoms: Small, single-purpose UI elements with minimal configuration. Examples: Button, Icon, Label, Input. Atoms live in src/components/atoms/ and expose a small, well-documented prop surface.
• Molecules: Simple combinations of atoms that form a distinct piece of UI. Examples: SearchField (Input + Button), FormRow (Label + Input + Hint). Molecules live in src/components/molecules/ and encapsulate composition and small internal layout.

See also

• Atoms details: Atoms
• Molecules details: Molecules

References

• Atomic Design — Brad Frost: https://atomicdesign.bradfrost.com/table-of-contents/