From f251345b6804d3dad328fa60008e81d94323db16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Mon, 18 Mar 2019 07:55:44 +0100
Subject: [PATCH] docs: moved examples to frontend.md

---
 style_guides/frontend-review-checklist.md | 34 ------------
 style_guides/frontend.md                  | 65 ++++++++++++++++-------
 2 files changed, 46 insertions(+), 53 deletions(-)

diff --git a/style_guides/frontend-review-checklist.md b/style_guides/frontend-review-checklist.md
index 39c1dea8ee4..139c963b42d 100644
--- a/style_guides/frontend-review-checklist.md
+++ b/style_guides/frontend-review-checklist.md
@@ -31,37 +31,3 @@
 - [ ] The pull request uses helpers `actionCreatorFactory` and `reducerFactory` instead of traditional `switch statement` reducers in Redux.
 - [ ] The pull request uses `reducerTester` to test reducers.
 - [ ] The pull request does not contain code that access reducers state slice directly, instead the code uses state selectors to access state.
-
-## Common bad practices
-
-### 1. Missing Props/State type
-
-- 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 = { ... }
-  ```
diff --git a/style_guides/frontend.md b/style_guides/frontend.md
index caef4f711ef..18069183e66 100644
--- a/style_guides/frontend.md
+++ b/style_guides/frontend.md
@@ -1,36 +1,36 @@
 # Frontend Style Guide
 
-Generally we follow the Airbnb  [React Style Guide](https://github.com/airbnb/javascript/tree/master/react).
+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)
+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.
+- 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?
+- 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.
+- Name callback props & handlers with a "on" prefix.
 
 ```tsx
 // good
@@ -56,5 +56,32 @@ render() {
 }
 ```
 
+- 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 = { ... }
+```