docs(ui-text-area,ui-tree-browser): functional examples are added to TextArea, TreeBrowser

packages/__docs__/globals.js

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { forwardRef, useContext, useEffect, useMemo, useState, useRef } from 'react'
+import React, { forwardRef, useCallback, useContext, useEffect, useMemo, useState, useRef } from 'react'
 import ReactDOM from 'react-dom'
 
 import { LoremIpsum } from 'lorem-ipsum'
@@ -82,6 +82,7 @@ const globals = {
   placeholderImage,
   React,
   ReactDOM,
+  useCallback,
   useContext,
   useEffect,
   useMemo,

packages/ui-text-area/src/TextArea/README.md

@@ -81,29 +81,43 @@ type: example
 
 A 'controlled' TextArea:
 
-```js
----
-type: example
----
+- ```js
+  class Example extends React.Component {
+    state = { description: 'Hello World' }
+
+    handleChange = (e) => this.setState({ description: e.target.value })
+
+    render() {
+      return (
+        <TextArea
+          label="Description"
+          value={this.state.description}
+          onChange={this.handleChange}
+        />
+      )
+    }
+  }
+
+  render(<Example />)
+  ```
 
-class Example extends React.Component {
-  state = { description: 'Hello World' };
+- ```js
+  const Example = () => {
+    const [description, setDescription] = useState('Hello World')
 
-  handleChange = (e) => this.setState({ description: e.target.value});
+    const handleChange = (e) => setDescription(e.target.value)
 
-  render () {
     return (
       <TextArea
         label="Description"
-        value={this.state.description}
-        onChange={this.handleChange}
+        value={description}
+        onChange={handleChange}
       />
     )
   }
-}
 
-render(<Example/>)
-```
+  render(<Example />)
+  ```
 
 ### Guidelines