Rules Hub
Coding Rules Library
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP2universalStack: react
reactmock-datainterfacesmaintainability
Shape placeholder UI to match the real data contract
When stubbing with mock data, export the real item interface and default the prop to the mock, so wiring real data later needs no refactor.
PR: frontpage-web · org-mining-hist-2026-06Created: Jun 18, 2026
Bad example
Old codetsx
| 1 | const ListingElement = () => { |
| 2 | const mockData = [{ pageViews: 24300, style: 'item1', title: '...' }]; |
| 3 | return ...; |
| 4 | }; |
Explanation (EN)
Objašnjenje (HR)
Good example
New codetsx
| 1 | export interface IListingItem { pageViews: number; title: string; } |
| 2 | const ListingElement: FC<{ items: IListingItem[] }> = ({ items = mockData }) => { ... }; |
Explanation (EN)
Objašnjenje (HR)