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).
Prefer configuration maps for tabular UI variants
When table headers or similarly repetitive UI only differ by labels, alignment, or classes per tab, define a tab-to-config map instead of repeating markup branches.
Bad example
| 1 | if (activeTab === 'cashBalance') { |
| 2 | return <div><span>DATO</span><span>TYPE</span><span>AMOUNT</span></div>; |
| 3 | } |
| 4 |
|
| 5 | if (activeTab === 'dividends') { |
| 6 | return <div><span>NAVN</span><span>TICKER</span><span>DATO</span><span>AMOUNT</span></div>; |
| 7 | } |
| 8 |
|
| 9 | return <div><span>NAVN</span><span>DATO</span><span>TYPE</span><span>ANTALL</span></div>; |
Explanation (EN)
The component is really rendering data-driven column definitions, but the implementation duplicates markup for each tab variant.
Objašnjenje (HR)
Komponenta zapravo renderira data-driven definicije stupaca, ali implementacija duplicira markup za svaki tab variant.
Good example
| 1 | const columnDefinitionsByTab = { |
| 2 | stockTrades: [ |
| 3 | { key: 'name', label: 'NAVN' }, |
| 4 | { key: 'date', label: 'DATO', align: 'right' } |
| 5 | ], |
| 6 | cashBalance: [ |
| 7 | { key: 'date', label: 'DATO' }, |
| 8 | { key: 'amount', label: 'AMOUNT', align: 'right' } |
| 9 | ] |
| 10 | } as const; |
| 11 |
|
| 12 | return ( |
| 13 | <div> |
| 14 | {columnDefinitionsByTab[activeTab].map(column => ( |
| 15 | <HeaderCell key={column.key} align={column.align} label={column.label} /> |
| 16 | ))} |
| 17 | </div> |
| 18 | ); |
Explanation (EN)
The component becomes easier to scan and extend because the differences are expressed as data rather than repeated branches.
Objašnjenje (HR)
Komponenta je laksa za citati i prosirivati jer su razlike izrazene kroz podatke, a ne kroz ponovljene grane.
Notes (EN)
This rule fits best for headers, filters, and small variant-based layouts. Use stable keys in the config instead of array indexes.
Bilješke (HR)
Ovo pravilo najbolje odgovara za headere, filtere i male layout varijante. Koristi stabilne keyeve u configu umjesto array indexa.
Exceptions / Tradeoffs (EN)
Do not force config maps when each branch has substantially different structure or behavior; in those cases separate components or explicit branches may be clearer.
Iznimke / Tradeoffi (HR)
Nemoj forsirati config mapove kada svaka grana ima bitno drukciju strukturu ili ponasanje; tada su zasebne komponente ili eksplicitne grane cesto jasnije.