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).
Extract duplicated UI primitives into shared components
If identical presentational blocks appear in multiple files, move them into a shared component instead of duplicating markup and styling contracts.
Bad example
| 1 | const DetailRow = ({ label, value, valueColor = colors.grey900 }) => { |
| 2 | return ( |
| 3 | <li className={styles.detailRow}> |
| 4 | <Typography variant="i-b0-regular" color={colors.grey900}> |
| 5 | {label} |
| 6 | </Typography> |
| 7 | <Typography variant="i-b0-medium" color={valueColor} className={styles.detailValue}> |
| 8 | {value} |
| 9 | </Typography> |
| 10 | </li> |
| 11 | ); |
| 12 | }; |
| 13 |
|
| 14 | // Same DetailRow copied in another mobile drawer file |
Explanation (EN)
The same UI primitive is implemented in multiple places. That increases maintenance cost and makes style or behavior fixes easy to miss in one of the copies.
Objašnjenje (HR)
Isti UI primitive implementiran je na vise mjesta. To povecava trosak odrzavanja i olaksava da se style ili behavior fix propusti u jednoj od kopija.
Good example
| 1 | export const PortfolioMobileDetailRow = ({ |
| 2 | label, |
| 3 | value, |
| 4 | valueColor = colors.grey900, |
| 5 | rowClassName, |
| 6 | valueClassName, |
| 7 | }: Props) => { |
| 8 | return ( |
| 9 | <li className={rowClassName}> |
| 10 | <Typography variant="i-b0-regular" color={colors.grey900}> |
| 11 | {label} |
| 12 | </Typography> |
| 13 | <Typography variant="i-b0-medium" color={valueColor} className={valueClassName}> |
| 14 | {value} |
| 15 | </Typography> |
| 16 | </li> |
| 17 | ); |
| 18 | }; |
| 19 |
|
| 20 | // Reused by both PortfolioHoldingDetailsDrawer and InstrumentTransactionDetailsDrawerMobile |
Explanation (EN)
A shared presentational component removes duplication while still allowing each consumer to pass local class names or minor styling hooks.
Objašnjenje (HR)
Shared prezentacijska komponenta uklanja dupliciranje, a i dalje omogucuje da svaki potrosac proslijedi lokalne klase ili manje styling hookove.
Notes (EN)
This is especially useful for repeated row items, pills, action rows, badges, and small drawer/card primitives.
Bilješke (HR)
Ovo je posebno korisno za ponovljene row iteme, pillove, action rowove, badgeve i male drawer/card primitive.
Exceptions / Tradeoffs (EN)
Do not extract if the shared abstraction would be more complex than the duplication or if the duplicated blocks are already diverging in structure.
Iznimke / Tradeoffi (HR)
Nemoj izdvajati ako bi zajednicka apstrakcija bila slozenija od dupliciranja ili ako se duplicirani blokovi vec razilaze po strukturi.