@instructure/ui-tree-browser 11.0.1-snapshot-0 → 11.0.1-snapshot-2

package/src/TreeBrowser/README.md

@@ -7,348 +7,177 @@ to receive a normalized data structure, examples can be seen at https://github.c
 
 ### Size
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = {
-        size: 'medium'
-      }
-
-      this.sizes = ['small', 'medium', 'large']
-    }
-
-    handleSizeSelect = (e, size) => {
-      this.setState({ size })
-    }
-
-    render() {
-      return (
-        <>
-          <View display="block" margin="none none medium">
-            <RadioInputGroup
-              name="treeBrowserSize"
-              defaultValue="medium"
-              description={
-                <ScreenReaderContent>
-                  TreeBrowser size selector
-                </ScreenReaderContent>
-              }
-              variant="toggle"
-              onChange={this.handleSizeSelect}
-            >
-              {this.sizes.map((size) => (
-                <RadioInput key={size} label={size} value={size} />
-              ))}
-            </RadioInputGroup>
-          </View>
-
-          <TreeBrowser
-            size={this.state.size}
-            collections={{
-              1: {
-                id: 1,
-                name: 'Assignments',
-                collections: [2, 3],
-                items: [3],
-                descriptor: 'Class Assignments'
-              },
-              2: {
-                id: 2,
-                name: 'English Assignments',
-                collections: [4],
-                items: []
-              },
-              3: {
-                id: 3,
-                name: 'Math Assignments',
-                collections: [5],
-                items: [1, 2]
-              },
-              4: {
-                id: 4,
-                name: 'Reading Assignments',
-                collections: [],
-                items: [4]
-              },
-              5: { id: 5, name: 'Advanced Math Assignments', items: [5] }
-            }}
-            items={{
-              1: { id: 1, name: 'Addition Worksheet' },
-              2: { id: 2, name: 'Subtraction Worksheet' },
-              3: { id: 3, name: 'General Questions' },
-              4: { id: 4, name: 'Vogon Poetry' },
-              5: {
-                id: 5,
-                name: 'Bistromath',
-                descriptor: 'Explain the Bistromathic Drive'
-              }
-            }}
-            defaultExpanded={[1, 3]}
-            rootId={1}
-          />
-        </>
-      )
-    }
-  }
-
-  render(<Example />)
-  ```
-
-- ```js
-  const Example = () => {
-    const [size, setSize] = useState('medium')
-    const sizes = ['small', 'medium', 'large']
-
-    const handleSizeSelect = (e, size) => {
-      setSize(size)
-    }
-
-    return (
-      <>
-        <View display="block" margin="none none medium">
-          <RadioInputGroup
-            name="treeBrowserSize"
-            defaultValue="medium"
-            description={
-              <ScreenReaderContent>
-                TreeBrowser size selector
-              </ScreenReaderContent>
-            }
-            variant="toggle"
-            onChange={handleSizeSelect}
-          >
-            {sizes.map((size) => (
-              <RadioInput key={size} label={size} value={size} />
-            ))}
-          </RadioInputGroup>
-        </View>
-
-        <TreeBrowser
-          size={size}
-          collections={{
-            1: {
-              id: 1,
-              name: 'Assignments',
-              collections: [2, 3],
-              items: [3],
-              descriptor: 'Class Assignments'
-            },
-            2: {
-              id: 2,
-              name: 'English Assignments',
-              collections: [4],
-              items: []
-            },
-            3: {
-              id: 3,
-              name: 'Math Assignments',
-              collections: [5],
-              items: [1, 2]
-            },
-            4: {
-              id: 4,
-              name: 'Reading Assignments',
-              collections: [],
-              items: [4]
-            },
-            5: { id: 5, name: 'Advanced Math Assignments', items: [5] }
-          }}
-          items={{
-            1: { id: 1, name: 'Addition Worksheet' },
-            2: { id: 2, name: 'Subtraction Worksheet' },
-            3: { id: 3, name: 'General Questions' },
-            4: { id: 4, name: 'Vogon Poetry' },
-            5: {
-              id: 5,
-              name: 'Bistromath',
-              descriptor: 'Explain the Bistromathic Drive'
-            }
-          }}
-          defaultExpanded={[1, 3]}
-          rootId={1}
-        />
-      </>
-    )
-  }
-
-  render(<Example />)
-  ```
-
-### Managing State
-
-`<TreeBrowser />` can be fully controlled. The following example uses the `onCollectionToggle` callback function to set the state. It then uses the `expanded` prop to configure which collections are open or closed.
-
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = {
-        expanded: [2]
-      }
-    }
-
-    handleCollectionClick = (id, collection) => {
-      console.log(collection.id)
-    }
-
-    handleCollectionToggle = (collection) => {
-      this.setState((state) => {
-        const expanded = [...state.expanded]
-        const index = expanded.indexOf(collection.id)
-
-        if (!collection.expanded) {
-          expanded.splice(index, 1)
-        } else if (index < 0) {
-          expanded.push(collection.id)
-        }
-
-        return { expanded }
-      })
-    }
+```js
+---
+type: example
+---
+const Example = () => {
+  const [size, setSize] = useState('medium')
+  const sizes = ['small', 'medium', 'large']
 
-    render() {
-      return (
-        <TreeBrowser
-          variant="indent"
-          selectionType="single"
-          collections={{
-            1: { id: 1, name: 'Grade 1', collections: [2, 3, 6] },
-            2: {
-              id: 2,
-              name: 'Math Outcomes',
-              collections: [4],
-              items: [3, 4],
-              descriptor: '1 Group | 2 Outcomes'
-            },
-            3: {
-              id: 3,
-              name: 'Reading Outcome',
-              collections: [5],
-              items: [1, 2],
-              descriptor: '1 Group | 2 Outcomes'
-            },
-            4: {
-              id: 4,
-              name: 'Advanced Math',
-              items: [6],
-              descriptor: '1 Outcome'
-            },
-            5: {
-              id: 5,
-              name: 'Advanced Reading',
-              items: [5],
-              descriptor: '1 Group | 2 Outcomes'
-            },
-            6: {
-              id: 6,
-              name: 'Advanced Outcomes',
-              items: [5, 6],
-              descriptor: '2 Outcomes'
-            }
-          }}
-          items={{
-            1: { id: 1, name: 'Can read' },
-            2: { id: 2, name: 'Can write' },
-            3: { id: 3, name: 'Can add' },
-            4: { id: 4, name: 'Can subtract' },
-            5: { id: 5, name: 'Can read Shakespeare' },
-            6: { id: 6, name: 'Can do quantum physics' }
-          }}
-          showRootCollection={false}
-          rootId={1}
-          expanded={this.state.expanded}
-          onCollectionToggle={this.handleCollectionToggle}
-          onCollectionClick={this.handleCollectionClick}
-        />
-      )
-    }
+  const handleSizeSelect = (e, size) => {
+    setSize(size)
   }
 
-  render(<Example />)
-  ```
-
-- ```js
-  const Example = () => {
-    const [expanded, setExpanded] = useState([2])
-
-    const handleCollectionClick = (id, collection) => {
-      console.log(collection.id)
-    }
-
-    const handleCollectionToggle = (collection) => {
-      setExpanded((prevExpanded) => {
-        const newExpanded = [...prevExpanded]
-        const index = newExpanded.indexOf(collection.id)
-
-        if (!collection.expanded) {
-          newExpanded.splice(index, 1)
-        } else if (index < 0) {
-          newExpanded.push(collection.id)
-        }
-
-        return newExpanded
-      })
-    }
+  return (
+    <>
+      <View display="block" margin="none none medium">
+        <RadioInputGroup
+          name="treeBrowserSize"
+          defaultValue="medium"
+          description={
+            <ScreenReaderContent>
+              TreeBrowser size selector
+            </ScreenReaderContent>
+          }
+          variant="toggle"
+          onChange={handleSizeSelect}
+        >
+          {sizes.map((size) => (
+            <RadioInput key={size} label={size} value={size} />
+          ))}
+        </RadioInputGroup>
+      </View>
 
-    return (
       <TreeBrowser
-        variant="indent"
-        selectionType="single"
+        size={size}
         collections={{
-          1: { id: 1, name: 'Grade 1', collections: [2, 3, 6] },
+          1: {
+            id: 1,
+            name: 'Assignments',
+            collections: [2, 3],
+            items: [3],
+            descriptor: 'Class Assignments'
+          },
           2: {
             id: 2,
-            name: 'Math Outcomes',
+            name: 'English Assignments',
             collections: [4],
-            items: [3, 4],
-            descriptor: '1 Group | 2 Outcomes'
+            items: []
           },
           3: {
             id: 3,
-            name: 'Reading Outcome',
+            name: 'Math Assignments',
             collections: [5],
-            items: [1, 2],
-            descriptor: '1 Group | 2 Outcomes'
+            items: [1, 2]
           },
           4: {
             id: 4,
-            name: 'Advanced Math',
-            items: [6],
-            descriptor: '1 Outcome'
+            name: 'Reading Assignments',
+            collections: [],
+            items: [4]
           },
+          5: { id: 5, name: 'Advanced Math Assignments', items: [5] }
+        }}
+        items={{
+          1: { id: 1, name: 'Addition Worksheet' },
+          2: { id: 2, name: 'Subtraction Worksheet' },
+          3: { id: 3, name: 'General Questions' },
+          4: { id: 4, name: 'Vogon Poetry' },
           5: {
             id: 5,
-            name: 'Advanced Reading',
-            items: [5],
-            descriptor: '1 Group | 2 Outcomes'
-          },
-          6: {
-            id: 6,
-            name: 'Advanced Outcomes',
-            items: [5, 6],
-            descriptor: '2 Outcomes'
+            name: 'Bistromath',
+            descriptor: 'Explain the Bistromathic Drive'
           }
         }}
-        items={{
-          1: { id: 1, name: 'Can read' },
-          2: { id: 2, name: 'Can write' },
-          3: { id: 3, name: 'Can add' },
-          4: { id: 4, name: 'Can subtract' },
-          5: { id: 5, name: 'Can read Shakespeare' },
-          6: { id: 6, name: 'Can do quantum physics' }
-        }}
-        showRootCollection={false}
+        defaultExpanded={[1, 3]}
         rootId={1}
-        expanded={expanded}
-        onCollectionToggle={handleCollectionToggle}
-        onCollectionClick={handleCollectionClick}
       />
-    )
+    </>
+  )
+}
+
+render(<Example />)
+```
+
+### Managing State
+
+`<TreeBrowser />` can be fully controlled. The following example uses the `onCollectionToggle` callback function to set the state. It then uses the `expanded` prop to configure which collections are open or closed.
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const [expanded, setExpanded] = useState([2])
+
+  const handleCollectionClick = (id, collection) => {
+    console.log(collection.id)
+  }
+
+  const handleCollectionToggle = (collection) => {
+    setExpanded((prevExpanded) => {
+      const newExpanded = [...prevExpanded]
+      const index = newExpanded.indexOf(collection.id)
+
+      if (!collection.expanded) {
+        newExpanded.splice(index, 1)
+      } else if (index < 0) {
+        newExpanded.push(collection.id)
+      }
+
+      return newExpanded
+    })
   }
 
-  render(<Example />)
-  ```
+  return (
+    <TreeBrowser
+      variant="indent"
+      selectionType="single"
+      collections={{
+        1: { id: 1, name: 'Grade 1', collections: [2, 3, 6] },
+        2: {
+          id: 2,
+          name: 'Math Outcomes',
+          collections: [4],
+          items: [3, 4],
+          descriptor: '1 Group | 2 Outcomes'
+        },
+        3: {
+          id: 3,
+          name: 'Reading Outcome',
+          collections: [5],
+          items: [1, 2],
+          descriptor: '1 Group | 2 Outcomes'
+        },
+        4: {
+          id: 4,
+          name: 'Advanced Math',
+          items: [6],
+          descriptor: '1 Outcome'
+        },
+        5: {
+          id: 5,
+          name: 'Advanced Reading',
+          items: [5],
+          descriptor: '1 Group | 2 Outcomes'
+        },
+        6: {
+          id: 6,
+          name: 'Advanced Outcomes',
+          items: [5, 6],
+          descriptor: '2 Outcomes'
+        }
+      }}
+      items={{
+        1: { id: 1, name: 'Can read' },
+        2: { id: 2, name: 'Can write' },
+        3: { id: 3, name: 'Can add' },
+        4: { id: 4, name: 'Can subtract' },
+        5: { id: 5, name: 'Can read Shakespeare' },
+        6: { id: 6, name: 'Can do quantum physics' }
+      }}
+      showRootCollection={false}
+      rootId={1}
+      expanded={expanded}
+      onCollectionToggle={handleCollectionToggle}
+      onCollectionClick={handleCollectionClick}
+    />
+  )
+}
+
+render(<Example />)
+```
 
 ### Customizing Icons
 
@@ -499,533 +328,332 @@ type: example
 
 An example of a `<TreeBrowser />` with a custom item after each collection.
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = {
-        expanded: true,
-        hoveredLine: null
+```js
+---
+type: example
+---
+const Example = () => {
+  const [expanded, setExpanded] = useState(true)
+  const [hoveredLine, setHoveredLine] = useState(null)
+  const nodeRef = useRef(null)
+
+  const handleExpandToggle = useCallback((e, newExpandedState) => {
+    e.stopPropagation()
+    setExpanded(newExpandedState)
+    nodeRef.current?.focus()
+  }, [])
+
+  const handleKeyPress = useCallback(
+    (e, newExpandedState) => {
+      if (e.code === 'Space' || e.code === 'Enter') {
+        e.preventDefault()
+        handleExpandToggle(e, newExpandedState)
       }
-    }
+    },
+    [handleExpandToggle]
+  )
 
-    renderInput = () => {
-      const { expanded } = this.state
-      if (expanded) {
-        return (
-          <InstUISettingsProvider
-            theme={
-              this.state.hoveredLine === 'renderAfter'
-                ? {
-                    componentOverrides: {
-                      View: {
-                        focusColorInfo: 'white'
-                      },
-                      TextInput: {
-                        focusOutlineColor: 'white'
-                      }
+  const renderInput = () => {
+    if (expanded) {
+      return (
+        <InstUISettingsProvider
+          theme={
+            hoveredLine === 'renderAfter'
+              ? {
+                  componentOverrides: {
+                    View: {
+                      focusColorInfo: 'white'
+                    },
+                    TextInput: {
+                      focusOutlineColor: 'white'
                     }
                   }
-                : undefined
-            }
+                }
+              : undefined
+          }
+        >
+          <View
+            as="div"
+            padding="xx-small"
+            onFocus={(e) => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
+            onMouseEnter={() => setHoveredLine('renderAfter')}
+            onMouseLeave={() => setHoveredLine(null)}
           >
-            <View
-              as="div"
-              padding="xx-small"
-              onFocus={(e) => e.stopPropagation()}
-              onClick={(e) => e.stopPropagation()}
-              onMouseEnter={() => this.setState({ hoveredLine: 'renderAfter' })}
-              onMouseLeave={() => this.setState({ hoveredLine: 'null' })}
+            <TextInput
+              placeholder="Enter new group name"
+              display="inline-block"
+              width="12rem"
+              renderLabel=""
+              onKeyDown={(e) => e.stopPropagation()}
+            />
+            <IconButton
+              screenReaderLabel="Cancel"
+              onClick={(e) => handleExpandToggle(e, false)}
+              onKeyDown={(e) => handleKeyPress(e, false)}
+              margin="0 0 0 small"
             >
-              <TextInput
-                placeholder="Enter new group name"
-                display="inline-block"
-                width="12rem"
-                renderLabel=""
-                onKeyDown={(e) => {
-                  e.stopPropagation()
-                }}
-              />
-              <IconButton
-                screenReaderLabel="Cancel"
-                onClick={(e) => this.setExpand(e, !expanded)}
-                onKeyDown={(e) => {
-                  if (e.code === 'Space' || e.code === 'Enter') {
-                    e.preventDefault()
-                    this.setExpand(e, !expanded)
-                  }
-                }}
-                margin="0 0 0 small"
-              >
-                <IconXSolid />
-              </IconButton>
-              <IconButton
-                screenReaderLabel="Add new group"
-                onClick={(e) => this.setExpand(e, !expanded)}
-                onKeyDown={(e) => {
-                  if (e.code === 'Space' || e.code === 'Enter') {
-                    e.preventDefault()
-                    this.setExpand(e, !expanded)
-                  }
-                }}
-                margin="0 0 0 small"
-              >
-                <IconCheckSolid />
-              </IconButton>
-            </View>
-          </InstUISettingsProvider>
-        )
-      }
-
-      return <View as="div">Create New Group</View>
-    }
-
-    setExpand = (e, expanded) => {
-      e.stopPropagation()
-      this.setState({ expanded })
-      this._node.focus()
-    }
-
-    renderNode = () => {
-      const { expanded } = this.state
-      return (
-        <TreeBrowser.Node
-          containerRef={(el) => (this._node = el)}
-          onClick={(e) => this.setExpand(e, !expanded)}
-          onKeyDown={(e) => {
-            if (e.code === 'Space' || e.code === 'Enter') {
-              e.preventDefault()
-              this.setExpand(e, !expanded)
-            }
-          }}
-          itemIcon={this.state.expanded ? '' : <IconPlusLine />}
-          size="large"
-        >
-          {this.renderInput()}
-        </TreeBrowser.Node>
+              <IconXSolid />
+            </IconButton>
+            <IconButton
+              screenReaderLabel="Add new group"
+              onClick={(e) => handleExpandToggle(e, false)}
+              onKeyDown={(e) => handleKeyPress(e, false)}
+              margin="0 0 0 small"
+            >
+              <IconCheckSolid />
+            </IconButton>
+          </View>
+        </InstUISettingsProvider>
       )
     }
 
-    render() {
-      return (
-        <TreeBrowser
-          selectionType="single"
-          size="large"
-          defaultExpanded={[1, 2]}
-          collections={{
-            1: {
-              id: 1,
-              name: 'Grade 1',
-              collections: [2]
-            },
-            2: {
-              id: 2,
-              name: 'Math Outcomes',
-              collections: [],
-              items: [1, 2],
-              descriptor: '1 Group | 2 Outcomes',
-              renderAfterItems: this.renderNode()
-            }
-          }}
-          items={{
-            1: { id: 1, name: 'Can add' },
-            2: { id: 2, name: 'Can subtract' }
-          }}
-          showRootCollection={true}
-          rootId={1}
-        />
-      )
-    }
+    return <View as="div">Create New Group</View>
   }
 
-  render(<Example />)
-  ```
-
-- ```js
-  const Example = () => {
-    const [expanded, setExpanded] = useState(true)
-    const [hoveredLine, setHoveredLine] = useState(null)
-    const nodeRef = useRef(null)
-
-    const handleExpandToggle = useCallback((e, newExpandedState) => {
-      e.stopPropagation()
-      setExpanded(newExpandedState)
-      nodeRef.current?.focus()
-    }, [])
-
-    const handleKeyPress = useCallback(
-      (e, newExpandedState) => {
-        if (e.code === 'Space' || e.code === 'Enter') {
-          e.preventDefault()
-          handleExpandToggle(e, newExpandedState)
+  const renderNode = () => (
+    <TreeBrowser.Node
+      containerRef={(el) => (nodeRef.current = el)}
+      onClick={(e) => handleExpandToggle(e, !expanded)}
+      onKeyDown={(e) => handleKeyPress(e, !expanded)}
+      itemIcon={expanded ? '' : <IconPlusLine />}
+      size="large"
+    >
+      {renderInput()}
+    </TreeBrowser.Node>
+  )
+
+  return (
+    <TreeBrowser
+      selectionType="single"
+      size="large"
+      defaultExpanded={[1, 2]}
+      collections={{
+        1: {
+          id: 1,
+          name: 'Grade 1',
+          collections: [2]
+        },
+        2: {
+          id: 2,
+          name: 'Math Outcomes',
+          collections: [],
+          items: [1, 2],
+          descriptor: '1 Group | 2 Outcomes',
+          renderAfterItems: renderNode()
         }
-      },
-      [handleExpandToggle]
-    )
+      }}
+      items={{
+        1: { id: 1, name: 'Can add' },
+        2: { id: 2, name: 'Can subtract' }
+      }}
+      showRootCollection={true}
+      rootId={1}
+    />
+  )
+}
+
+render(<Example />)
+```
 
-    const renderInput = () => {
-      if (expanded) {
-        return (
-          <InstUISettingsProvider
-            theme={
-              hoveredLine === 'renderAfter'
-                ? {
-                    componentOverrides: {
-                      View: {
-                        focusColorInfo: 'white'
-                      },
-                      TextInput: {
-                        focusOutlineColor: 'white'
-                      }
-                    }
-                  }
-                : undefined
-            }
-          >
-            <View
-              as="div"
-              padding="xx-small"
-              onFocus={(e) => e.stopPropagation()}
-              onClick={(e) => e.stopPropagation()}
-              onMouseEnter={() => setHoveredLine('renderAfter')}
-              onMouseLeave={() => setHoveredLine(null)}
-            >
-              <TextInput
-                placeholder="Enter new group name"
-                display="inline-block"
-                width="12rem"
-                renderLabel=""
-                onKeyDown={(e) => e.stopPropagation()}
-              />
-              <IconButton
-                screenReaderLabel="Cancel"
-                onClick={(e) => handleExpandToggle(e, false)}
-                onKeyDown={(e) => handleKeyPress(e, false)}
-                margin="0 0 0 small"
-              >
-                <IconXSolid />
-              </IconButton>
-              <IconButton
-                screenReaderLabel="Add new group"
-                onClick={(e) => handleExpandToggle(e, false)}
-                onKeyDown={(e) => handleKeyPress(e, false)}
-                margin="0 0 0 small"
-              >
-                <IconCheckSolid />
-              </IconButton>
-            </View>
-          </InstUISettingsProvider>
-        )
-      }
+### Change the order of appearance of items and collections
 
-      return <View as="div">Create New Group</View>
-    }
+By default, the order of collections and items depend on the order of `collections` and `items` array. We can override it by providing a `sortOrder` comparison function.
 
-    const renderNode = () => (
-      <TreeBrowser.Node
-        containerRef={(el) => (nodeRef.current = el)}
-        onClick={(e) => handleExpandToggle(e, !expanded)}
-        onKeyDown={(e) => handleKeyPress(e, !expanded)}
-        itemIcon={expanded ? '' : <IconPlusLine />}
-        size="large"
-      >
-        {renderInput()}
-      </TreeBrowser.Node>
-    )
+---
+
+**NOTE**
+
+This works with all collections and items of the TreeBrowser.
+
+---
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const [size, setSize] = useState('medium')
+  const [sorted, setSorted] = useState(false)
+
+  const toggleSort = () => {
+    setSorted(!sorted)
+  }
+
+  return (
+    <>
+      <View display="block" margin="none none medium">
+        <FormFieldGroup description="Turn on/off sorting">
+          <Checkbox checked={sorted} label="Sort" onChange={toggleSort} />
+        </FormFieldGroup>
+      </View>
 
-    return (
       <TreeBrowser
-        selectionType="single"
-        size="large"
-        defaultExpanded={[1, 2]}
+        size={size}
         collections={{
           1: {
             id: 1,
-            name: 'Grade 1',
-            collections: [2]
+            name: 'Assignments',
+            collections: [3, 2],
+            items: [3],
+            descriptor: 'Class Assignments'
           },
           2: {
             id: 2,
-            name: 'Math Outcomes',
+            name: 'English Assignments',
+            collections: [4],
+            items: []
+          },
+          3: {
+            id: 3,
+            name: 'Math Assignments',
+            collections: [5],
+            items: [2, 1]
+          },
+          4: {
+            id: 4,
+            name: 'Reading Assignments',
             collections: [],
-            items: [1, 2],
-            descriptor: '1 Group | 2 Outcomes',
-            renderAfterItems: renderNode()
-          }
+            items: [4]
+          },
+          5: { id: 5, name: 'Advanced Math Assignments', items: [5] }
         }}
         items={{
-          1: { id: 1, name: 'Can add' },
-          2: { id: 2, name: 'Can subtract' }
+          1: { id: 1, name: 'Addition Worksheet' },
+          2: { id: 2, name: 'Subtraction Worksheet' },
+          3: { id: 3, name: 'General Questions' },
+          4: { id: 4, name: 'Vogon Poetry' },
+          5: {
+            id: 5,
+            name: 'Bistromath',
+            descriptor: 'Explain the Bistromathic Drive'
+          }
         }}
-        showRootCollection={true}
+        defaultExpanded={[1, 3]}
         rootId={1}
+        sortOrder={sorted ? (a, b) => a.name.localeCompare(b.name) : () => 0}
       />
-    )
-  }
-
-  render(<Example />)
-  ```
+    </>
+  )
+}
 
-### Change the order of appearance of items and collections
+render(<Example />)
+```
 
-By default, the order of collections and items depend on the order of `collections` and `items` array. We can override it by providing a `sortOrder` comparison function.
+There is another way to sort the children of one collection. By adding the `compareFunc` as the comparison function to the collection's properties. This will be effective only within the collection's scope. For more convenience, we support a prop called `type` to specify whether the collection's children is either an item or a subcollection (this is only make sense in `compareFunc`)
 
+```js
+---
+type: example
 ---
+const Example = () => {
+  const [size, setSize] = useState('medium')
+
+  return (
+    <TreeBrowser
+      size={size}
+      collections={{
+        1: {
+          id: 1,
+          name: 'Assignments',
+          collections: [3, 2],
+          items: [3],
+          descriptor: 'Class Assignments',
+          // Sort the direct children of "Assignment" by their name in alphabetical order
+          compareFunc: (a, b) => a.name.localeCompare(b.name)
+        },
+        2: {
+          id: 2,
+          name: 'English Assignments',
+          collections: [4],
+          items: []
+        },
+        3: {
+          id: 3,
+          name: 'Math Assignments',
+          collections: [5],
+          items: [2, 1],
+          //  The items appear before subcollections
+          compareFunc: (a, b) => {
+            if (a.type === 'item' && b.type === 'collection') {
+              return -1
+            }
+            if (a.type === 'collection' && b.type === 'item') {
+              return 1
+            }
+            return 0
+          }
+        },
+        4: {
+          id: 4,
+          name: 'Reading Assignments',
+          collections: [],
+          items: [4]
+        },
+        5: { id: 5, name: 'Advanced Math Assignments', items: [5] }
+      }}
+      items={{
+        1: { id: 1, name: 'Addition Worksheet' },
+        2: { id: 2, name: 'Subtraction Worksheet' },
+        3: { id: 3, name: 'General Questions' },
+        4: { id: 4, name: 'Vogon Poetry' },
+        5: {
+          id: 5,
+          name: 'Bistromath',
+          descriptor: 'Explain the Bistromathic Drive'
+        }
+      }}
+      defaultExpanded={[1, 3]}
+      rootId={1}
+    />
+  )
+}
+
+render(<Example />)
+```
 
-**NOTE**
+### showRootCollection
 
-This works with all collections and items of the TreeBrowser.
+The `showRootCollection` prop sets whether the root collection (specified in `rootId` prop) is displayed or to begin with its immediate sub-collections and items instead. It defaults to `true`.
 
+```js
 ---
+type: example
+---
+const Example = () => {
+  const [showRootCollection, setShowRootCollection] = useState(true)
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = {
-        size: 'medium',
-        sorted: false
-      }
-    }
-    toggleSort = (event) => {
-      this.setState({ sorted: !this.state.sorted })
-    }
-    render() {
-      return (
-        <>
-          <View display="block" margin="none none medium">
-            <FormFieldGroup description="Turn on/off sorting">
-              <Checkbox
-                checked={this.state.sorted}
-                label="Sort"
-                onChange={this.toggleSort}
-              />
-            </FormFieldGroup>
-          </View>
-
-          <TreeBrowser
-            size={this.state.size}
-            collections={{
-              1: {
-                id: 1,
-                name: 'Assignments',
-                collections: [3, 2],
-                items: [3],
-                descriptor: 'Class Assignments'
-              },
-              2: {
-                id: 2,
-                name: 'English Assignments',
-                collections: [4],
-                items: []
-              },
-              3: {
-                id: 3,
-                name: 'Math Assignments',
-                collections: [5],
-                items: [2, 1]
-              },
-              4: {
-                id: 4,
-                name: 'Reading Assignments',
-                collections: [],
-                items: [4]
-              },
-              5: { id: 5, name: 'Advanced Math Assignments', items: [5] }
-            }}
-            items={{
-              1: { id: 1, name: 'Addition Worksheet' },
-              2: { id: 2, name: 'Subtraction Worksheet' },
-              3: { id: 3, name: 'General Questions' },
-              4: { id: 4, name: 'Vogon Poetry' },
-              5: {
-                id: 5,
-                name: 'Bistromath',
-                descriptor: 'Explain the Bistromathic Drive'
-              }
-            }}
-            defaultExpanded={[1, 3]}
-            rootId={1}
-            sortOrder={
-              this.state.sorted
-                ? (a, b) => {
-                    return a.name.localeCompare(b.name)
-                  }
-                : (a, b) => {
-                    return 0
-                  }
-            }
-          />
-        </>
-      )
-    }
+  const handleSwitch = () => {
+    setShowRootCollection(!showRootCollection)
   }
 
-  render(<Example />)
-  ```
-
-- ```js
-  const Example = () => {
-    const [size, setSize] = useState('medium')
-    const [sorted, setSorted] = useState(false)
-
-    const toggleSort = () => {
-      setSorted(!sorted)
-    }
-
+  const renderNode = () => {
     return (
-      <>
-        <View display="block" margin="none none medium">
-          <FormFieldGroup description="Turn on/off sorting">
-            <Checkbox checked={sorted} label="Sort" onChange={toggleSort} />
-          </FormFieldGroup>
-        </View>
-
-        <TreeBrowser
-          size={size}
-          collections={{
-            1: {
-              id: 1,
-              name: 'Assignments',
-              collections: [3, 2],
-              items: [3],
-              descriptor: 'Class Assignments'
-            },
-            2: {
-              id: 2,
-              name: 'English Assignments',
-              collections: [4],
-              items: []
-            },
-            3: {
-              id: 3,
-              name: 'Math Assignments',
-              collections: [5],
-              items: [2, 1]
-            },
-            4: {
-              id: 4,
-              name: 'Reading Assignments',
-              collections: [],
-              items: [4]
-            },
-            5: { id: 5, name: 'Advanced Math Assignments', items: [5] }
-          }}
-          items={{
-            1: { id: 1, name: 'Addition Worksheet' },
-            2: { id: 2, name: 'Subtraction Worksheet' },
-            3: { id: 3, name: 'General Questions' },
-            4: { id: 4, name: 'Vogon Poetry' },
-            5: {
-              id: 5,
-              name: 'Bistromath',
-              descriptor: 'Explain the Bistromathic Drive'
-            }
-          }}
-          defaultExpanded={[1, 3]}
-          rootId={1}
-          sortOrder={sorted ? (a, b) => a.name.localeCompare(b.name) : () => 0}
-        />
-      </>
+      <TreeBrowser.Node itemIcon={<IconPlusLine />}>More</TreeBrowser.Node>
     )
   }
 
-  render(<Example />)
-  ```
-
-There is another way to sort the children of one collection. By adding the `compareFunc` as the comparison function to the collection's properties. This will be effective only within the collection's scope. For more convenience, we support a prop called `type` to specify whether the collection's children is either an item or a subcollection (this is only make sense in `compareFunc`)
-
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = {
-        size: 'medium'
-      }
-    }
-    render() {
-      return (
-        <TreeBrowser
-          size={this.state.size}
-          collections={{
-            1: {
-              id: 1,
-              name: 'Assignments',
-              collections: [3, 2],
-              items: [3],
-              descriptor: 'Class Assignments',
-              // Sort the direct children of "Assignment" by their name in alphabetical order
-              compareFunc: (a, b) => {
-                return a.name.localeCompare(b.name)
-              }
-            },
-            2: {
-              id: 2,
-              name: 'English Assignments',
-              collections: [4],
-              items: []
-            },
-            3: {
-              id: 3,
-              name: 'Math Assignments',
-              collections: [5],
-              items: [2, 1],
-              //  The items appear before subcollections
-              compareFunc: (a, b) => {
-                if (a.type === 'item' && b.type === 'collection') {
-                  return -1
-                }
-                if (a.type === 'collection' && b.type === 'item') {
-                  return 1
-                }
-                return 0
-              }
-            },
-            4: {
-              id: 4,
-              name: 'Reading Assignments',
-              collections: [],
-              items: [4]
-            },
-            5: { id: 5, name: 'Advanced Math Assignments', items: [5] }
-          }}
-          items={{
-            1: { id: 1, name: 'Addition Worksheet' },
-            2: { id: 2, name: 'Subtraction Worksheet' },
-            3: { id: 3, name: 'General Questions' },
-            4: { id: 4, name: 'Vogon Poetry' },
-            5: {
-              id: 5,
-              name: 'Bistromath',
-              descriptor: 'Explain the Bistromathic Drive'
-            }
-          }}
-          defaultExpanded={[1, 3]}
-          rootId={1}
+  return (
+    <>
+      <View display="block" margin="none none medium">
+        <Checkbox
+          label="showRootCollection"
+          variant="toggle"
+          size="medium"
+          checked={showRootCollection}
+          onChange={handleSwitch}
         />
-      )
-    }
-  }
-
-  render(<Example />)
-  ```
-
-- ```js
-  const Example = () => {
-    const [size, setSize] = useState('medium')
+      </View>
 
-    return (
       <TreeBrowser
-        size={size}
         collections={{
           1: {
             id: 1,
             name: 'Assignments',
-            collections: [3, 2],
-            items: [3],
+            collections: [2, 3],
+            items: [3, 5],
             descriptor: 'Class Assignments',
-            // Sort the direct children of "Assignment" by their name in alphabetical order
-            compareFunc: (a, b) => a.name.localeCompare(b.name)
+            renderAfterItems: renderNode()
           },
           2: {
             id: 2,
@@ -1037,17 +665,7 @@ There is another way to sort the children of one collection. By adding the `comp
             id: 3,
             name: 'Math Assignments',
             collections: [5],
-            items: [2, 1],
-            //  The items appear before subcollections
-            compareFunc: (a, b) => {
-              if (a.type === 'item' && b.type === 'collection') {
-                return -1
-              }
-              if (a.type === 'collection' && b.type === 'item') {
-                return 1
-              }
-              return 0
-            }
+            items: [1, 2]
           },
           4: {
             id: 4,
@@ -1070,179 +688,14 @@ There is another way to sort the children of one collection. By adding the `comp
         }}
         defaultExpanded={[1, 3]}
         rootId={1}
+        showRootCollection={showRootCollection}
       />
-    )
-  }
-
-  render(<Example />)
-  ```
+    </>
+  )
+}
 
-### showRootCollection
-
-The `showRootCollection` prop sets whether the root collection (specified in `rootId` prop) is displayed or to begin with its immediate sub-collections and items instead. It defaults to `true`.
-
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = {
-        showRootCollection: true
-      }
-    }
-
-    handleSwitch = () => {
-      this.setState({ showRootCollection: !this.state.showRootCollection })
-    }
-
-    renderNode = () => {
-      return (
-        <TreeBrowser.Node itemIcon={<IconPlusLine />}>More</TreeBrowser.Node>
-      )
-    }
-
-    render() {
-      return (
-        <>
-          <View display="block" margin="none none medium">
-            <Checkbox
-              label="showRootCollection"
-              variant="toggle"
-              size="medium"
-              checked={this.state.showRootCollection}
-              onChange={this.handleSwitch}
-            />
-          </View>
-
-          <TreeBrowser
-            collections={{
-              1: {
-                id: 1,
-                name: 'Assignments',
-                collections: [2, 3],
-                items: [3, 5],
-                descriptor: 'Class Assignments',
-                renderAfterItems: this.renderNode()
-              },
-              2: {
-                id: 2,
-                name: 'English Assignments',
-                collections: [4],
-                items: []
-              },
-              3: {
-                id: 3,
-                name: 'Math Assignments',
-                collections: [5],
-                items: [1, 2]
-              },
-              4: {
-                id: 4,
-                name: 'Reading Assignments',
-                collections: [],
-                items: [4]
-              },
-              5: { id: 5, name: 'Advanced Math Assignments', items: [5] }
-            }}
-            items={{
-              1: { id: 1, name: 'Addition Worksheet' },
-              2: { id: 2, name: 'Subtraction Worksheet' },
-              3: { id: 3, name: 'General Questions' },
-              4: { id: 4, name: 'Vogon Poetry' },
-              5: {
-                id: 5,
-                name: 'Bistromath',
-                descriptor: 'Explain the Bistromathic Drive'
-              }
-            }}
-            defaultExpanded={[1, 3]}
-            rootId={1}
-            showRootCollection={this.state.showRootCollection}
-          />
-        </>
-      )
-    }
-  }
-
-  render(<Example />)
-  ```
-
-- ```js
-  const Example = () => {
-    const [showRootCollection, setShowRootCollection] = useState(true)
-
-    const handleSwitch = () => {
-      setShowRootCollection(!showRootCollection)
-    }
-
-    const renderNode = () => {
-      return (
-        <TreeBrowser.Node itemIcon={<IconPlusLine />}>More</TreeBrowser.Node>
-      )
-    }
-
-    return (
-      <>
-        <View display="block" margin="none none medium">
-          <Checkbox
-            label="showRootCollection"
-            variant="toggle"
-            size="medium"
-            checked={showRootCollection}
-            onChange={handleSwitch}
-          />
-        </View>
-
-        <TreeBrowser
-          collections={{
-            1: {
-              id: 1,
-              name: 'Assignments',
-              collections: [2, 3],
-              items: [3, 5],
-              descriptor: 'Class Assignments',
-              renderAfterItems: renderNode()
-            },
-            2: {
-              id: 2,
-              name: 'English Assignments',
-              collections: [4],
-              items: []
-            },
-            3: {
-              id: 3,
-              name: 'Math Assignments',
-              collections: [5],
-              items: [1, 2]
-            },
-            4: {
-              id: 4,
-              name: 'Reading Assignments',
-              collections: [],
-              items: [4]
-            },
-            5: { id: 5, name: 'Advanced Math Assignments', items: [5] }
-          }}
-          items={{
-            1: { id: 1, name: 'Addition Worksheet' },
-            2: { id: 2, name: 'Subtraction Worksheet' },
-            3: { id: 3, name: 'General Questions' },
-            4: { id: 4, name: 'Vogon Poetry' },
-            5: {
-              id: 5,
-              name: 'Bistromath',
-              descriptor: 'Explain the Bistromathic Drive'
-            }
-          }}
-          defaultExpanded={[1, 3]}
-          rootId={1}
-          showRootCollection={showRootCollection}
-        />
-      </>
-    )
-  }
-
-  render(<Example />)
-  ```
+render(<Example />)
+```
 
 ### Guidelines