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).
Group related component props into a namespaced props object
Instead of a flat list of prefixed props for one sub-element, expose a single grouped props object (e.g. HeaderProps).
Bad example
| 1 | interface CardProps { |
| 2 | /** flat list of header-related props keeps growing */ |
| 3 | headerTitle?: string; |
| 4 | headerButton?: ReactNode; |
| 5 | headerSize?: 'small' | 'medium' | 'large'; |
| 6 | headerAlign?: 'left' | 'center'; |
| 7 | // ...and more headerX props over time |
| 8 | } |
| 9 |
|
| 10 | <Card |
| 11 | headerTitle="Title" |
| 12 | headerButton={<Button />} |
| 13 | headerSize="medium" |
| 14 | headerAlign="center" |
| 15 | />; |
Explanation (EN)
Each new header concern adds another top-level prefixed prop. The flat surface grows without bound, related props are scattered, and you cannot forward them as a unit.
Objašnjenje (HR)
Svaka nova potreba vezana uz header dodaje još jedan prefiksirani prop na najvišoj razini. Plosnati popis raste bez granice, povezani propsi su razasuti i ne možeš ih proslijediti kao cjelinu.
Good example
| 1 | interface HeaderProps { |
| 2 | title?: string; |
| 3 | button?: ReactNode; |
| 4 | size?: 'small' | 'medium' | 'large'; |
| 5 | align?: 'left' | 'center'; |
| 6 | } |
| 7 |
|
| 8 | interface CardProps { |
| 9 | /** All header-related config in one place */ |
| 10 | HeaderProps?: HeaderProps; |
| 11 | } |
| 12 |
|
| 13 | <Card HeaderProps={{ title: 'Title', size: 'medium', align: 'center' }} />; |
| 14 |
|
| 15 | // Inside Card you can forward the whole object: |
| 16 | // <Header {...HeaderProps} /> |
Explanation (EN)
Grouping the related props under a single HeaderProps object keeps the public API discoverable and bounded, signals which props belong together, and lets the component forward the whole object with rest spread.
Objašnjenje (HR)
Grupiranje povezanih propsa pod jedan HeaderProps objekt drži javni API preglednim i ograničenim, jasno pokazuje koji propsi idu zajedno te omogućuje da komponenta proslijedi cijeli objekt rest spreadom.
Exceptions / Tradeoffs (EN)
For one or two simple, frequently-used props a flat prop can be clearer than nesting; group only once a coherent cluster of related props emerges.
Iznimke / Tradeoffi (HR)
Za jedan ili dva jednostavna, često korištena propsa plosnati prop može biti jasniji od ugnježđivanja; grupiraj tek kad se pojavi smislena skupina povezanih propsa.