grafana/style_guides/frontend.md

Frontend Style Guide

Generally we follow the Airbnb React Style Guide.

Table of Contents

1. Basic Rules
2. File & Component Organization
3. Naming
4. Declaration
5. Props
6. Refs
7. Methods
8. 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 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 & handlers with a "on" prefix.

// good
onChange = () => {

};

render() {
  return (
    <MyComponent onChange={this.onChange} />
  );
}

// bad
handleChange = () => {

};

render() {
  return (
    <MyComponent changed={this.handleChange} />
  );
}

• React Component definitions

// good
export class YourClass extends PureComponent<{},{}> { ... }

// bad
export class YourClass extends PureComponent { ... }

• React Component constructor

// good
constructor(props:Props) {...}

// bad
constructor(props) {...}

• React Component defaultProps

// good
static defaultProps: Partial<Props> = { ... }

// bad
static defaultProps = { ... }