mirror of
https://github.com/grafana/grafana.git
synced 2025-02-14 17:43:35 -06:00
63 lines
1.4 KiB
Markdown
63 lines
1.4 KiB
Markdown
# Frontend Style Guide
|
|
|
|
Generally we follow the Airbnb [React Style Guide](https://github.com/airbnb/javascript/tree/master/react).
|
|
|
|
## Table of Contents
|
|
|
|
1. [Basic Rules](#basic-rules)
|
|
1. [File & Component Organization](#Organization)
|
|
1. [Naming](#naming)
|
|
1. [Declaration](#declaration)
|
|
1. [Props](#props)
|
|
1. [Refs](#refs)
|
|
1. [Methods](#methods)
|
|
1. [Ordering](#ordering)
|
|
|
|
## Basic rules
|
|
|
|
* Try to keep files small and focused and break large components up into sub components.
|
|
|
|
## Organization
|
|
|
|
* Components and types that needs to be used by external plugins needs to go into @grafana/ui
|
|
* Components should get their own folder under features/xxx/components
|
|
* Sub components can live in that component folders, so not small component needs their own folder
|
|
* Place test next to their component file (same dir)
|
|
* Mocks in __mocks__ dir
|
|
* Test utils in __tests__ dir
|
|
* Component sass should live in the same folder as component code
|
|
* State logic & domain models should live in features/xxx/state
|
|
* Containers (pages) can live in feature root features/xxx
|
|
* up for debate?
|
|
|
|
## Props
|
|
|
|
* Name callback props & handlers with a "on" prefix.
|
|
|
|
```tsx
|
|
// good
|
|
onChange = () => {
|
|
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<MyComponent onChange={this.onChange} />
|
|
);
|
|
}
|
|
|
|
// bad
|
|
handleChange = () => {
|
|
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<MyComponent changed={this.handleChange} />
|
|
);
|
|
}
|
|
```
|
|
|
|
|
|
|