feat(Tree): add Component

CHANGELOG.md

@@ -17,6 +17,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Features
+- Add `Tree` Component @priyankar205 ([#479]
+(https://github.com/stardust-ui/react/pull/479))
+
 <!--------------------------------[ v0.13.0 ]------------------------------- -->
 ## [v0.13.0](https://github.com/stardust-ui/react/tree/v0.13.0) (2018-11-27)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.12.1...v0.13.0)

docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { Tree } from '@stardust-ui/react'
+
+const items = [
+  {
+    key: '1',
+    title: 'one',
+    items: [
+      {
+        key: '1',
+        title: 'one one',
+        items: [
+          {
+            key: '1',
+            title: 'one one one',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    key: '2',
+    title: ' two',
+    items: [
+      {
+        key: '1',
+        title: 'two one',
+      },
+    ],
+  },
+]
+
+const TreeExampleShorthand = () => <Tree items={items} />
+
+export default TreeExampleShorthand

docs/src/examples/components/Tree/Types/TreeTitleCustomizationExample.shorthand.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { Icon, Tree } from '@stardust-ui/react'
+
+const items = [
+  {
+    key: '1',
+    title: 'one',
+    items: [
+      {
+        key: '2',
+        title: 'one one',
+        items: [
+          {
+            key: '3',
+            title: 'one one one',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    key: '4',
+    title: 'two',
+    items: [
+      {
+        key: '5',
+        title: 'two one',
+      },
+    ],
+  },
+]
+
+const titleRenderer = (Component, { content, open, hasSubtree, ...rest }) => (
+  <Component open={open} hasSubtree={hasSubtree} {...rest}>
+    {hasSubtree && <Icon name={open ? 'arrow down' : 'arrow right'} />}
+    <span>{content}</span>
+  </Component>
+)
+
+const TreeTitleCustomizationExample = () => <Tree items={items} renderItemTitle={titleRenderer} />
+
+export default TreeTitleCustomizationExample

docs/src/examples/components/Tree/Types/index.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Default"
+      description="A default Tree."
+      examplePath="components/Tree/Types/TreeExample"
+    />
+    <ComponentExample
+      title="Custom Title"
+      description="A Tree with customized title rendering."
+      examplePath="components/Tree/Types/TreeTitleCustomizationExample"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/Tree/index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import Types from './Types'
+
+const TreeExamples = () => (
+  <div>
+    <Types />
+  </div>
+)
+
+export default TreeExamples

src/components/Tree/Tree.tsx

@@ -0,0 +1,80 @@
+import * as _ from 'lodash'
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+
+import TreeItem from './TreeItem'
+import { UIComponent, childrenExist } from '../../lib'
+import { ShorthandValue, ShorthandRenderFunction } from '../../../types/utils'
+import { Accessibility } from '../../lib/accessibility/types'
+import { defaultBehavior } from '../../lib/accessibility'
+import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes'
+import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces'
+import * as customPropTypes from '../../lib/customPropTypes'
+
+export interface TreeProps extends UIComponentProps<any, any>, ChildrenComponentProps {
+  /**
+   * Accessibility behavior if overridden by the user.
+   * @default defaultBehavior
+   */
+  accessibility?: Accessibility
+
+  /** Shorthand array of props for Tree. */
+  items: ShorthandValue[]
+
+  /**
+   * A custom render function for the title slot.
+   *
+   * @param {React.ReactType} Component - The computed component for this slot.
+   * @param {object} props - The computed props for this slot.
+   * @param {ReactNode|ReactNodeArray} children - The computed children for this slot.
+   */
+  renderItemTitle?: ShorthandRenderFunction
+}
+
+/**
+ * Allows users to display data organised in tree-hierarchy.
+ */
+class Tree extends UIComponent<TreeProps> {
+  static create: Function
+
+  static className = 'ui-tree'
+
+  static displayName = 'Tree'
+
+  static propTypes = {
+    ...commonUIComponentPropTypes,
+    ...childrenComponentPropTypes,
+    accessibility: PropTypes.func,
+    items: customPropTypes.collectionShorthand,
+    renderItemTitle: PropTypes.func,
+  }
+
+  public static defaultProps = {
+    as: 'ul',
+    accessibility: defaultBehavior,
+  }
+
+  renderContent() {
+    const { items, renderItemTitle } = this.props
+
+    return _.map(items, item =>
+      TreeItem.create(item, {
+        defaultProps: {
+          renderItemTitle,
+        },
+      }),
+    )
+  }
+
+  renderComponent({ ElementType, classes, accessibility, rest, styles, variables }) {
+    const { children } = this.props
+
+    return (
+      <ElementType className={classes.root} {...accessibility.attributes.root} {...rest}>
+        {childrenExist(children) ? children : this.renderContent()}
+      </ElementType>
+    )
+  }
+}
+
+export default Tree

src/components/Tree/TreeItem.tsx

@@ -0,0 +1,130 @@
+import * as _ from 'lodash'
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+
+import Tree from './Tree'
+import TreeTitle from './TreeTitle'
+import { defaultBehavior } from '../../lib/accessibility'
+import { Accessibility } from '../../lib/accessibility/types'
+
+import {
+  AutoControlledComponent,
+  childrenExist,
+  customPropTypes,
+  createShorthandFactory,
+} from '../../lib'
+import { ShorthandRenderFunction, ShorthandValue } from 'utils'
+import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes'
+import {
+  UIComponentProps,
+  ChildrenComponentProps,
+  ContentComponentProps,
+} from '../../lib/commonPropInterfaces'
+
+export interface TreeItemProps
+  extends UIComponentProps<any, any>,
+    ChildrenComponentProps,
+    ContentComponentProps {
+  /**
+   * Accessibility behavior if overridden by the user.
+   * @default defaultBehavior
+   */
+  accessibility?: Accessibility
+
+  /** Initial open value. */
+  defaultOpen?: boolean
+
+  /** Array of props for sub tree. */
+  items?: ShorthandValue[]
+
+  /** Whether or not the subtree of the item is in the open state. */
+  open?: boolean
+
+  /**
+   * A custom render iterator for rendering each Accordion panel title.
+   * The default component, props, and children are available for each panel title.
+   *
+   * @param {React.ReactType} Component - The computed component for this slot.
+   * @param {object} props - The computed props for this slot.
+   * @param {ReactNode|ReactNodeArray} children - The computed children for this slot.
+   */
+  renderItemTitle?: ShorthandRenderFunction
+
+  /** Properties for TreeTitle. */
+  title?: ShorthandValue
+}
+
+export interface TreeItemState {
+  open?: boolean
+}
+
+class TreeItem extends AutoControlledComponent<TreeItemProps, TreeItemState> {
+  static create: Function
+
+  static className = 'ui-tree__item'
+
+  static displayName = 'TreeItem'
+
+  static autoControlledProps = ['open']
+
+  static propTypes = {
+    ...commonUIComponentPropTypes,
+    ...childrenComponentPropTypes,
+    accessibility: PropTypes.func,
+    defaultOpen: PropTypes.bool,
+    items: customPropTypes.collectionShorthand,
+    open: PropTypes.bool,
+    renderItemTitle: PropTypes.func,
+    title: customPropTypes.itemShorthand,
+  }
+
+  public static defaultProps = {
+    as: 'li',
+    accessibility: defaultBehavior,
+  }
+
+  handleTitleOverrides = predefinedProps => ({
+    onClick: (e, titleProps) => {
+      e.preventDefault()
+      this.trySetState({
+        open: !this.state.open,
+      })
+      _.invoke(predefinedProps, 'onClick', e, titleProps)
+    },
+  })
+
+  renderContent() {
+    const { items, title, renderItemTitle } = this.props
+    const { open } = this.state
+
+    const hasSubtree = !!(items && items.length)
+
+    return (
+      <>
+        {TreeTitle.create(title, {
+          defaultProps: {
+            open,
+            hasSubtree,
+          },
+          render: renderItemTitle,
+          overrideProps: this.handleTitleOverrides,
+        })}
+        {hasSubtree && open && <Tree items={items} renderItemTitle={renderItemTitle} />}
+      </>
+    )
+  }
+
+  renderComponent({ ElementType, accessibility, classes, rest, styles, variables }) {
+    const { children } = this.props
+
+    return (
+      <ElementType className={classes.root} {...accessibility.attributes.root} {...rest}>
+        {childrenExist(children) ? children : this.renderContent()}
+      </ElementType>
+    )
+  }
+}
+
+TreeItem.create = createShorthandFactory(TreeItem, 'title')
+
+export default TreeItem