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).
Reflect every new component prop in its stories and documentation
When adding a prop/attribute to a component, also expose it in the component's Storybook stories or equivalent docs so it stays discoverable and testable.
Bad example
| 1 | // Button.tsx — new prop added |
| 2 | export interface ButtonProps { |
| 3 | label: string; |
| 4 | loading?: boolean; // newly added |
| 5 | } |
| 6 |
|
| 7 | // Button.stories.ts — left untouched |
| 8 | export const Default: Story = { |
| 9 | args: { label: 'Save' }, |
| 10 | }; |
| 11 | // `loading` is invisible to anyone browsing the stories |
Explanation (EN)
A new `loading` prop is added to the component but never appears in any story. Consumers reading the docs cannot discover the prop, and there is no example exercising the new behaviour, so it silently drifts out of documentation.
Objašnjenje (HR)
Komponenti je dodan novi prop `loading`, ali se nikad ne pojavljuje ni u jednoj prici. Korisnici koji citaju dokumentaciju ne mogu otkriti prop, a ne postoji primjer koji vjezba novo ponasanje, pa se nezamjetno odvaja od dokumentacije.
Good example
| 1 | // Button.tsx |
| 2 | export interface ButtonProps { |
| 3 | label: string; |
| 4 | loading?: boolean; |
| 5 | } |
| 6 |
|
| 7 | // Button.stories.ts — story added/updated for the new prop |
| 8 | export const Default: Story = { |
| 9 | args: { label: 'Save', loading: false }, |
| 10 | }; |
| 11 |
|
| 12 | export const Loading: Story = { |
| 13 | args: { ...Default.args, loading: true }, |
| 14 | }; |
Explanation (EN)
The new prop is added to the baseline args and given a dedicated story. The prop is now discoverable in the docs and has a runnable example demonstrating it.
Objašnjenje (HR)
Novi prop je dodan u osnovne argumente i dobio je vlastitu pricu. Prop je sada vidljiv u dokumentaciji i ima primjer koji se moze pokrenuti i koji ga demonstrira.
Exceptions / Tradeoffs (EN)
Internal/private props not meant for consumers, or props that only make sense in combination already covered by an existing story, need not get a standalone story.
Iznimke / Tradeoffi (HR)
Interni/privatni propovi koji nisu namijenjeni korisnicima, ili propovi koji imaju smisla samo u kombinaciji vec pokrivenoj postojecom pricom, ne trebaju zasebnu pricu.