docs: moved examples to frontend.md

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 = { ... }
-  ```

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 = { ... }
+```