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).
Keep UI component files small and focused
Aim to keep TSX component files under ~300 lines by extracting subcomponents and hooks when they grow.
Bad example
| 1 | export function CompanyProfilePage() { |
| 2 | // 400+ lines of UI, data formatting, handlers, and layout |
| 3 | // ... |
| 4 | // This component does everything: layout, formatting, and complex logic |
| 5 | return ( |
| 6 | <section> |
| 7 | {/* lots of sections, tables, cards, and forms */} |
| 8 | </section> |
| 9 | ); |
| 10 | } |
Explanation (EN)
Large component files are hard to scan and review. They hide responsibilities and make reuse difficult.
Objašnjenje (HR)
Velike komponente je tesko citati i reviewati. Skrivaju odgovornosti i otezavaju ponovno koristenje.
Good example
| 1 | function CompanySummary(props: CompanySummaryProps) { |
| 2 | return <section>{/* summary UI */}</section>; |
| 3 | } |
| 4 |
|
| 5 | function CompanyMetrics(props: CompanyMetricsProps) { |
| 6 | return <section>{/* metrics UI */}</section>; |
| 7 | } |
| 8 |
|
| 9 | export function CompanyProfilePage() { |
| 10 | return ( |
| 11 | <section> |
| 12 | <CompanySummary /> |
| 13 | <CompanyMetrics /> |
| 14 | {/* other focused sections */} |
| 15 | </section> |
| 16 | ); |
| 17 | } |
Explanation (EN)
Extracting focused subcomponents keeps each file smaller and improves readability and reuse.
Objašnjenje (HR)
Izdvajanje fokusiranih podkomponenti smanjuje velicinu filea i poboljsava citljivost i ponovno koristenje.
Exceptions / Tradeoffs (EN)
Large entity/type/model files, generated code, or config files can exceed this. If a component must remain large (tight coupling), document why and add section comments.
Iznimke / Tradeoffi (HR)
Veliki entity/type/model fileovi, generirani kod ili config fileovi mogu ovo preci. Ako komponenta mora ostati velika (tijesno vezana logika), dokumentiraj razlog i dodaj sekcijske komentare.