mirror of
https://github.com/grafana/grafana.git
synced 2025-02-13 00:55:47 -06:00
94893788aa
* Create STYLEGUIDE.md * Update STYLEGUIDE.md Added a placeholder for image guidelines, someone needs to add specificity Added Capitalization section Expanded Word usage * Update STYLEGUIDE.md Edited panel definition * Update STYLEGUIDE.md Applied Brenda and Marcus's edits * Moved style guide to style_guides folder and renamed, added README to the style_guides folder, other minor edits * Update doc-style-guide.md * Style updates Changed a couple doc names for consistency, updated file naming conventions and README links * Corrected file names Changed file names back to original, clarified file naming convention in documentation-style-guide
93 lines
2.2 KiB
Markdown
93 lines
2.2 KiB
Markdown
# Frontend Style Guide
|
|
|
|
Generally we follow the Airbnb [React Style Guide](https://github.com/airbnb/javascript/tree/master/react).
|
|
|
|
## Table of Contents
|
|
|
|
- [Frontend Style Guide](#frontend-style-guide)
|
|
- [Table of Contents](#table-of-contents)
|
|
- [Basic rules](#basic-rules)
|
|
- [Organization](#organization)
|
|
- [Props](#props)
|
|
- [State mangement](#state-mangement)
|
|
|
|
## Basic rules
|
|
|
|
- Try to keep files small and focused.
|
|
- 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 small component do not need their own folder
|
|
- Place test next to their component file (same 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 and handlers with an "on" prefix.
|
|
|
|
```tsx
|
|
// good
|
|
onChange = () => {
|
|
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<MyComponent onChange={this.onChange} />
|
|
);
|
|
}
|
|
|
|
// bad
|
|
handleChange = () => {
|
|
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<MyComponent changed={this.handleChange} />
|
|
);
|
|
}
|
|
```
|
|
|
|
- React Component definitions
|
|
|
|
```jsx
|
|
// good
|
|
export class YourClass extends PureComponent<{},{}> { ... }
|
|
|
|
// bad
|
|
export class YourClass extends PureComponent { ... }
|
|
```
|
|
|
|
- React Component constructor
|
|
|
|
```typescript
|
|
// good
|
|
constructor(props:Props) {...}
|
|
|
|
// bad
|
|
constructor(props) {...}
|
|
```
|
|
|
|
- React Component defaultProps
|
|
|
|
```typescript
|
|
// good
|
|
static defaultProps: Partial<Props> = { ... }
|
|
|
|
// bad
|
|
static defaultProps = { ... }
|
|
```
|
|
|
|
## State mangement
|
|
|
|
- Don't mutate state in reducers or thunks.
|
|
- Use helpers `actionCreatorFactory` and `reducerFactory` instead of traditional `switch statement` reducers in Redux. See [Redux framework](https://github.com/grafana/grafana/tree/master/style_guides/redux.md) for more details.
|
|
- Use `reducerTester` to test reducers. See [Redux framework](https://github.com/grafana/grafana/tree/master/style_guides/redux.md) for more details.
|
|
- Use state selectors to access state instead of accessing state directly. |