Rules Hub
Coding Rules Library
Centralize component configuration
Move static visual parameters, magic numbers, and style constants into a dedicated configuration object to separate concerns and improve maintainability.
Bad example
| 1 | function Chart({ data }) { |
| 2 | return ( |
| 3 | <LineChart data={data}> |
| 4 | <XAxis |
| 5 | stroke="#667387" |
| 6 | tick={{ |
| 7 | fill: '#667387', |
| 8 | fontSize: 12, |
| 9 | fontWeight: 500, |
| 10 | }} |
| 11 | tickMargin={10} |
| 12 | /> |
| 13 | <Tooltip |
| 14 | contentStyle={{ |
| 15 | backgroundColor: 'white', |
| 16 | borderRadius: '8px' |
| 17 | }} |
| 18 | /> |
| 19 | </LineChart> |
| 20 | ); |
| 21 | } |
Explanation (EN)
Visual constants like colors, font sizes, and margins are hardcoded directly into the JSX. This makes the component code noisy and difficult to maintain if design tokens change.
Objašnjenje (HR)
Vizualne konstante poput boja, veličina fonta i margina su 'hardkodirane' izravno u JSX. To čini kod komponente nepreglednim i teškim za održavanje ako se promijene dizajnerska pravila.
Good example
| 1 | // config.ts |
| 2 | export const CHART_CONFIG = { |
| 3 | axis: { |
| 4 | stroke: '#667387', |
| 5 | tick: { |
| 6 | fill: '#667387', |
| 7 | fontSize: 12, |
| 8 | fontWeight: 500, |
| 9 | }, |
| 10 | margin: 10, |
| 11 | }, |
| 12 | tooltip: { |
| 13 | style: { |
| 14 | backgroundColor: 'white', |
| 15 | borderRadius: '8px', |
| 16 | }, |
| 17 | }, |
| 18 | } as const; |
| 19 |
|
| 20 | // Chart.tsx |
| 21 | import { CHART_CONFIG } from './config'; |
| 22 |
|
| 23 | function Chart({ data }) { |
| 24 | return ( |
| 25 | <LineChart data={data}> |
| 26 | <XAxis |
| 27 | stroke={CHART_CONFIG.axis.stroke} |
| 28 | tick={CHART_CONFIG.axis.tick} |
| 29 | tickMargin={CHART_CONFIG.axis.margin} |
| 30 | /> |
| 31 | <Tooltip contentStyle={CHART_CONFIG.tooltip.style} /> |
| 32 | </LineChart> |
| 33 | ); |
| 34 | } |
Explanation (EN)
Static values are moved to a separate configuration object. The component focuses on structure and logic, while the config file handles visual specifications, making global updates easier.
Objašnjenje (HR)
Statičke vrijednosti su premještene u zaseban konfiguracijski objekt. Komponenta se fokusira na strukturu i logiku, dok konfiguracijska datoteka upravlja vizualnim specifikacijama, što olakšava globalna ažuriranja.