Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Name overlay components after their actual UI behavior
Overlay component names should match what they render: Popover, Drawer, Dialog, or a neutral Panel when needed.
Bad example
| 1 | const PortfolioSettingsModal = ({ open, anchorEl }: Props) => { |
| 2 | return ( |
| 3 | <Popper open={open} anchorEl={anchorEl}> |
| 4 | <div>...</div> |
| 5 | </Popper> |
| 6 | ); |
| 7 | }; |
Explanation (EN)
The name says Modal, but the component behaves like a popover. That misleads readers about interaction, accessibility, and stacking behavior.
Objašnjenje (HR)
Naziv govori Modal, ali se komponenta ponasa kao popover. To citaoca dovodi u zabludu oko interakcije, pristupacnosti i layering ponasanja.
Good example
| 1 | const PortfolioSettingsPopover = ({ open, anchorEl }: Props) => { |
| 2 | return ( |
| 3 | <Popper open={open} anchorEl={anchorEl}> |
| 4 | <div>...</div> |
| 5 | </Popper> |
| 6 | ); |
| 7 | }; |
Explanation (EN)
The name matches the actual overlay pattern, so readers know what behavior to expect before opening the file.
Objašnjenje (HR)
Naziv odgovara stvarnom overlay obrascu pa je odmah jasno koje se ponasanje moze ocekivati prije otvaranja datoteke.
Exceptions / Tradeoffs (EN)
A neutral name like Panel is acceptable when the component intentionally abstracts over multiple overlay types across breakpoints.
Iznimke / Tradeoffi (HR)
Neutralan naziv poput Panel je prihvatljiv kada komponenta namjerno apstrahira vise overlay tipova kroz razlicite breakpointe.