chore(Tree): rename to HierarchicalTree

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### BREAKING CHANGES
 - Fix `firstFocusableSelector` in `FocusTrapZone` and `AutoFocusZone` @sophieH29 ([#1732](https://github.com/stardust-ui/react/pull/1732))
+- Rename `Tree` to `HierarchicalTree` @silviuavram ([#1752](https://github.com/stardust-ui/react/pull/1752))
 
 ### Fixes
 - Require `name` prop in `Icon` component @lucivpav ([#1723](https://github.com/stardust-ui/react/pull/1723))

build/gulp/tasks/test-circulars/config.ts

@@ -3,7 +3,10 @@ import config from '../../../../config'
 const reactPackageDist = (filePath: string) => config.paths.packageDist('react', 'es', filePath)
 
 export const cyclesToSkip = [
-  [reactPackageDist('components/Tree/Tree.js'), reactPackageDist('components/Tree/TreeItem.js')],
+  [
+    reactPackageDist('components/HierarchicalTree/HierarchicalTree.js'),
+    reactPackageDist('components/HierarchicalTree/HierarchicalTreeItem.js'),
+  ],
   [reactPackageDist('components/Menu/Menu.js'), reactPackageDist('components/Menu/MenuItem.js')],
   [
     reactPackageDist('components/Button/Button.js'),

docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.tsx

@@ -1,7 +1,7 @@
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { Icon, Tree } from '@stardust-ui/react'
+import { Icon, HierarchicalTree } from '@stardust-ui/react'
 
 import { examplePathToHash } from 'docs/src/utils'
 
@@ -103,6 +103,6 @@ export default class ComponentSidebarSection extends React.PureComponent<any, an
       </Component>
     )
 
-    return <Tree items={items} renderItemTitle={titleRenderer} />
+    return <HierarchicalTree items={items} renderItemTitle={titleRenderer} />
   }
 }

docs/src/components/ComponentPlayground/ComponentPlayground.tsx

@@ -19,14 +19,14 @@ const unsupportedComponents = [
   'Flex',
   'Form',
   'Grid',
+  'HierarchicalTree',
   'ItemLayout',
   'Layout',
   'List',
   'Portal',
   'Provider',
   'RadioGroup',
   'Toolbar',
-  'Tree',
 ]
 
 const ComponentPlayground: React.FunctionComponent<ComponentPlaygroundProps> = props => {

docs/src/components/DocsLayout.tsx

@@ -96,7 +96,7 @@ class DocsLayout extends React.Component<any, any> {
           theme={mergeThemes(themes.teamsDark, {
             // adjust Teams' theme to Semantic UI's font size scheme
             componentVariables: {
-              TreeItem: {
+              HierarchicalTreeItem: {
                 padding: `${pxToRem(7)} ${pxToRem(16)}`,
                 textDecoration: 'none',
                 fontSize: pxToRem(12),
@@ -109,13 +109,13 @@ class DocsLayout extends React.Component<any, any> {
               },
             },
             componentStyles: {
-              TreeItem: {
+              HierarchicalTreeItem: {
                 root: ({ variables: v, props: p }) => ({
                   ...(!p.items && treeItemStyle),
                   ...(p.items && treeSectionStyle),
                 }),
               },
-              TreeTitle: {
+              HierarchicalTreeTitle: {
                 root: {
                   display: 'block',
                   width: '100%',

docs/src/components/Sidebar/Sidebar.tsx

@@ -1,15 +1,15 @@
 import {
   Icon,
-  Tree,
+  HierarchicalTree,
   Segment,
   Text,
   ICSSInJSStyle,
-  TreeItemProps,
-  TreeProps,
+  HierarchicalTreeItemProps,
+  HierarchicalTreeProps,
   Input,
   Flex,
   Box,
-  TreeTitleProps,
+  HierarchicalTreeTitleProps,
 } from '@stardust-ui/react'
 import { ShorthandValue } from '../../../../packages/react/src/types'
 import Logo from 'docs/src/components/Logo/Logo'
@@ -51,7 +51,7 @@ class Sidebar extends React.Component<any, any> {
   }
 
   findActiveCategoryIndex = (at: string, sections: ShorthandValue<any>[]): number => {
-    return _.findIndex(sections, (section: ShorthandValue<TreeItemProps>) => {
+    return _.findIndex(sections, (section: ShorthandValue<HierarchicalTreeItemProps>) => {
       return _.find((section as any).items, item => item.title.to === at)
     })
   }
@@ -65,7 +65,7 @@ class Sidebar extends React.Component<any, any> {
     if (!hasModifier && isAZ && bodyHasFocus) this.searchInputRef.current.focus()
   }
 
-  handleItemClick = (e: React.SyntheticEvent, data: TreeItemProps) => {
+  handleItemClick = (e: React.SyntheticEvent, data: HierarchicalTreeItemProps) => {
     const { query } = this.state
 
     if (query) {
@@ -76,7 +76,7 @@ class Sidebar extends React.Component<any, any> {
     }
   }
 
-  treeActiveIndexChanged = (e: React.SyntheticEvent, props: TreeProps) => {
+  treeActiveIndexChanged = (e: React.SyntheticEvent, props: HierarchicalTreeProps) => {
     this.setState({ activeCategoryIndex: props.activeIndex })
   }
 
@@ -120,7 +120,7 @@ class Sidebar extends React.Component<any, any> {
     }
   }
 
-  getTreeItems(): TreeProps['items'] {
+  getTreeItems(): HierarchicalTreeProps['items'] {
     return [
       {
         key: 'concepts',
@@ -246,7 +246,7 @@ class Sidebar extends React.Component<any, any> {
     this.setState({ query: data.value })
   }
 
-  getSectionsWithoutSearchFilter = (): TreeItemProps[] => {
+  getSectionsWithoutSearchFilter = (): HierarchicalTreeItemProps[] => {
     const treeItemsByType = _.map(constants.typeOrder, nextType => {
       const items = _.chain([...componentMenu, ...behaviorMenu])
         .filter(({ type }) => type === nextType)
@@ -379,23 +379,24 @@ class Sidebar extends React.Component<any, any> {
     const regexQuery = new RegExp(`^${escapedQuery}`, 'i')
     const allSectionsWithPossibleEmptySections = _.map(
       allSectionsWithoutSearchFilter,
-      (section: TreeItemProps) => {
+      (section: HierarchicalTreeItemProps) => {
         return {
           ...section,
-          items: _.filter(section.items as TreeItemProps[], item =>
-            regexQuery.test((item.title as TreeTitleProps).content as string),
+          items: _.filter(section.items as HierarchicalTreeItemProps[], item =>
+            regexQuery.test((item.title as HierarchicalTreeTitleProps).content as string),
           ),
         }
       },
     )
 
     let allSections = _.filter(
       allSectionsWithPossibleEmptySections,
-      (section: TreeItemProps) => Array.isArray(section.items) && section.items.length > 0,
+      (section: HierarchicalTreeItemProps) =>
+        Array.isArray(section.items) && section.items.length > 0,
     )
 
     if (this.state.query !== '') {
-      allSections = _.map(allSections, (section: TreeItemProps) => {
+      allSections = _.map(allSections, (section: HierarchicalTreeItemProps) => {
         return { ...section, open: true }
       })
     }
@@ -467,7 +468,7 @@ class Sidebar extends React.Component<any, any> {
             inputRef={this.searchInputRef}
           />
         </Flex>
-        <Tree
+        <HierarchicalTree
           items={allSections}
           renderItemTitle={titleRenderer}
           activeIndex={this.state.activeCategoryIndex}

docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx → docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeExample.shorthand.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Tree } from '@stardust-ui/react'
+import { HierarchicalTree } from '@stardust-ui/react'
 
 const items = [
   {
@@ -70,6 +70,6 @@ const items = [
   },
 ]
 
-const TreeExampleShorthand = () => <Tree items={items} />
+const TreeExampleShorthand = () => <HierarchicalTree items={items} />
 
 export default TreeExampleShorthand

docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx → docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeExclusiveExample.shorthand.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Icon, Tree } from '@stardust-ui/react'
+import { Icon, HierarchicalTree } from '@stardust-ui/react'
 
 const items = [
   {
@@ -47,6 +47,8 @@ const titleRenderer = (Component, { content, open, hasSubtree, ...restProps }) =
   </Component>
 )
 
-const TreeExclusiveExample = () => <Tree items={items} renderItemTitle={titleRenderer} exclusive />
+const TreeExclusiveExample = () => (
+  <HierarchicalTree items={items} renderItemTitle={titleRenderer} exclusive />
+)
 
 export default TreeExclusiveExample

docs/src/examples/components/Tree/Types/TreeTitleCustomizationExample.shorthand.tsx → docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeTitleCustomizationExample.shorthand.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Icon, Tree } from '@stardust-ui/react'
+import { Icon, HierarchicalTree } from '@stardust-ui/react'
 
 const items = [
   {
@@ -37,6 +37,8 @@ const titleRenderer = (Component, { content, open, hasSubtree, ...restProps }) =
   </Component>
 )
 
-const TreeTitleCustomizationExample = () => <Tree items={items} renderItemTitle={titleRenderer} />
+const TreeTitleCustomizationExample = () => (
+  <HierarchicalTree items={items} renderItemTitle={titleRenderer} />
+)
 
 export default TreeTitleCustomizationExample

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

@@ -7,17 +7,17 @@ const Types = () => (
     <ComponentExample
       title="Default"
       description="A default Tree."
-      examplePath="components/Tree/Types/TreeExample"
+      examplePath="components/HierarchicalTree/Types/HierarchicalTreeExample"
     />
     <ComponentExample
       title="Custom Title"
       description="A Tree with customized title rendering."
-      examplePath="components/Tree/Types/TreeTitleCustomizationExample"
+      examplePath="components/HierarchicalTree/Types/HierarchicalTreeTitleCustomizationExample"
     />
     <ComponentExample
       title="Exclusive"
       description="A Tree with only one subtree open at a time."
-      examplePath="components/Tree/Types/TreeExclusiveExample"
+      examplePath="components/HierarchicalTree/Types/HierarchicalTreeExclusiveExample"
     />
   </ExampleSection>
 )

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

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

e2e/tests/tree-example.tsx → e2e/tests/hierarchicalTree-example.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { Tree, TreeItem, TreeTitle } from '@stardust-ui/react'
+import * as React from 'react'
+import { HierarchicalTree, HierarchicalTreeItem, HierarchicalTreeTitle } from '@stardust-ui/react'
 
 const items = [
   {
@@ -71,11 +71,11 @@ const items = [
 ]
 
 export const selectors = {
-  treeClass: Tree.className,
-  treeItemClass: TreeItem.className,
-  treeTitleClass: TreeTitle.className,
+  treeClass: HierarchicalTree.className,
+  treeItemClass: HierarchicalTreeItem.className,
+  treeTitleClass: HierarchicalTreeTitle.className,
 }
 
-const TreeExample = () => <Tree items={items} />
+const TreeExample = () => <HierarchicalTree items={items} />
 
 export default TreeExample

e2e/tests/tree-test.ts → e2e/tests/hierarchicalTree-test.ts

@@ -1,10 +1,10 @@
-import { selectors } from './tree-example'
+import { selectors } from './hierarchicalTree-example'
 
 const tree = `.${selectors.treeClass}`
 const treeItem = index => `.${selectors.treeItemClass}:nth-child(${index})`
 const treeTitle = index => `.${selectors.treeTitleClass}:nth-child(${index})`
 
-describe('Tree', () => {
+describe('HierarchialTree', () => {
   describe('Focus behavior', () => {
     beforeEach(async () => {
       await e2e.gotoTestCase(__filename, tree)