feat: fix dozens

- simplifies most components
- insert proptypes and defines some shapes
- transforms all components into stateless and functional components
- wraps components with proppy to give them state management and more
- adds proppy and proppy react to the common fragment

Author: armand1m

packages/fragment-chat/app/Chat/index.js

@@ -1,30 +1,20 @@
-import React, { Component } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import './styles.scss'
-
-class Chat extends Component {
 
-  constructor(props) {
-    super(props)
-    this.state ={
-      isExpanded: false
-    }
-  }
+import Toggle from '../Toggle'
 
-  toggleExpansion() {
-    this.setState({ isExpanded: !this.state.isExpanded })
-  }
-
-  render() {
-    const classes = classNames({
-      chat: true,
-      expanded: this.state.isExpanded
-    })
-    return(
-      <div onClick={() => this.toggleExpansion() } className={classes}></div>
-    )
-  }
+import './styles.scss'
 
-}
+const Chat = () => (
+  <Toggle>
+    {({ on, toggle }) => (
+      <div
+        className={classNames('chat', { expanded: on })}
+        onClick={toggle}
+      />
+    )}
+  </Toggle>
+)
 
 export default Chat

packages/fragment-chat/app/Toggle/index.js

@@ -0,0 +1,27 @@
+import { Component } from 'react'
+import PropTypes from 'prop-types'
+
+class Toggle extends Component {
+    constructor(props) {
+        super(props)
+        this.state = { on: false }
+        this.toggle = this.toggle.bind(this)
+    }
+
+    toggle() {
+        this.setState(prevState => ({ on: !prevState.on }))
+    }
+
+    render() {
+        return this.props.children({
+            on: this.state.on,
+            toggle: this.toggle
+        })
+    }
+}
+
+Toggle.propTypes = {
+    children: PropTypes.func.isRequired
+}
+
+export default Toggle