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 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.

// good
onChange = () => {

};

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

// bad
handleChange = () => {

};

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