refactor(treeview): categorize under Controls, rename Tree to TreeView

Author: WesSouza

src/Tree/Tree.spec.tsx renamed to src/TreeView/TreeView.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { renderWithTheme } from '../../test/utils';
-import { Tree } from './Tree';
+import { TreeView } from './TreeView';
 
 const categories = [
   {
@@ -59,13 +59,13 @@ const categories = [
   }
 ];
 
-describe('<Tree />', () => {
+describe('<TreeView />', () => {
   describe('prop: onNodeSelect', () => {
     it('should call onNodeSelect when uncontrolled', () => {
       const onNodeSelect = jest.fn((_, id) => id);
 
       const { getByText } = renderWithTheme(
-        <Tree tree={categories} onNodeSelect={onNodeSelect} />
+        <TreeView tree={categories} onNodeSelect={onNodeSelect} />
       );
 
       getByText('Beverages').click();
@@ -78,7 +78,11 @@ describe('<Tree />', () => {
       const onNodeSelect = jest.fn((_, id) => id);
 
       const { getByText } = renderWithTheme(
-        <Tree tree={categories} selected='dairy' onNodeSelect={onNodeSelect} />
+        <TreeView
+          tree={categories}
+          selected='dairy'
+          onNodeSelect={onNodeSelect}
+        />
       );
 
       getByText('Beverages').click();
@@ -93,7 +97,7 @@ describe('<Tree />', () => {
       const onNodeToggle = jest.fn((_, ids) => ids);
 
       const { getByText } = renderWithTheme(
-        <Tree tree={categories} onNodeToggle={onNodeToggle} />
+        <TreeView tree={categories} onNodeToggle={onNodeToggle} />
       );
 
       getByText('Beverages').click();
@@ -106,7 +110,7 @@ describe('<Tree />', () => {
       const onNodeToggle = jest.fn((_, ids) => ids);
 
       const { getByText } = renderWithTheme(
-        <Tree
+        <TreeView
           tree={categories}
           expanded={['dairy']}
           onNodeToggle={onNodeToggle}
@@ -129,7 +133,7 @@ describe('<Tree />', () => {
       const onNodeToggle = jest.fn((_, ids) => ids);
 
       const { getByText } = renderWithTheme(
-        <Tree
+        <TreeView
           disabled
           tree={categories}
           onNodeSelect={onNodeSelect}
@@ -151,7 +155,7 @@ describe('<Tree />', () => {
       );
 
       const { getByText } = renderWithTheme(
-        <Tree
+        <TreeView
           tree={modifiedTree}
           onNodeSelect={onNodeSelect}
           onNodeToggle={onNodeToggle}

src/Tree/Tree.stories.tsx renamed to src/TreeView/TreeView.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta } from '@storybook/react';
 import React, { useCallback, useState } from 'react';
-import { GroupBox, Tree, TreeLeaf } from 'react95';
+import { GroupBox, TreeLeaf, TreeView } from 'react95';
 import styled from 'styled-components';
 import { Button } from '../Button/Button';
 
@@ -23,10 +23,10 @@ const Panel = styled.div`
 `;
 
 export default {
-  title: 'Tree',
-  component: Tree,
+  title: 'Controls/TreeView',
+  component: TreeView,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-} as ComponentMeta<typeof Tree>;
+} as ComponentMeta<typeof TreeView>;
 
 const categories = [
   {
@@ -98,7 +98,7 @@ export function Basic() {
   return (
     <div style={{ maxWidth: '250px' }}>
       <GroupBox label='Catalog'>
-        <Tree tree={categories} />
+        <TreeView tree={categories} />
       </GroupBox>
     </div>
   );
@@ -125,7 +125,7 @@ export function Controlled() {
       </Panel>
 
       <GroupBox label='Catalog'>
-        <Tree
+        <TreeView
           tree={categories}
           onNodeSelect={(_, id) => setSelected(id)}
           onNodeToggle={(_, ids) => setExpanded(ids)}
@@ -145,7 +145,7 @@ export function Disabled() {
   return (
     <div style={{ maxWidth: '250px' }}>
       <GroupBox label='Catalog'>
-        <Tree tree={categories} disabled />
+        <TreeView tree={categories} disabled />
       </GroupBox>
     </div>
   );
@@ -168,7 +168,7 @@ export function DisabledTreeItems() {
   return (
     <div style={{ maxWidth: '250px' }}>
       <GroupBox label='Catalog'>
-        <Tree tree={modifiedTree} />
+        <TreeView tree={modifiedTree} />
       </GroupBox>
     </div>
   );

src/Tree/Tree.tsx renamed to src/TreeView/TreeView.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 
-import { StyledLabel, LabelText } from '../SwitchBase/SwitchBase';
 import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
+import { LabelText, StyledLabel } from '../common/SwitchBase';
 import { CommonStyledProps } from '../types';
 
 type TreeLeaf<T> = {
@@ -13,7 +13,7 @@ type TreeLeaf<T> = {
   label?: string;
 };
 
-type TreeProps<T> = {
+type TreeViewProps<T> = {
   className?: string;
   defaultExpanded?: T[];
   defaultSelected?: T;
@@ -66,7 +66,7 @@ const focusedElementStyles = css<{ $disabled: boolean }>`
       : `cursor: default;`}
 `;
 
-const TreeView = styled.ul<{ isRootLevel: boolean }>`
+const TreeWrapper = styled.ul<{ isRootLevel: boolean }>`
   position: relative;
   isolation: isolate;
 
@@ -293,15 +293,15 @@ function TreeBranch<T>({
   );
 
   return (
-    <TreeView
+    <TreeWrapper
       className={isRootLevel ? className : undefined}
       style={isRootLevel ? style : undefined}
       ref={isRootLevel ? innerRef : undefined}
       role={isRootLevel ? 'tree' : 'group'}
       isRootLevel={isRootLevel}
     >
       {tree.map(renderLeaf)}
-    </TreeView>
+    </TreeWrapper>
   );
 }
 
@@ -317,7 +317,7 @@ function TreeInner<T>(
     selected,
     style,
     tree = []
-  }: TreeProps<T>,
+  }: TreeViewProps<T>,
   ref: React.ForwardedRef<HTMLUListElement>
 ) {
   const [expandedInternal, setExpandedInternal] = useControlledOrUncontrolled({
@@ -381,9 +381,13 @@ function TreeInner<T>(
   );
 }
 
-const Tree = forwardRef(TreeInner) as <T>(
+const TreeView = forwardRef(TreeInner) as <T>(
   // eslint-disable-next-line no-use-before-define
-  props: TreeProps<T> & { ref?: React.ForwardedRef<HTMLUListElement> }
+  props: TreeViewProps<T> & { ref?: React.ForwardedRef<HTMLUListElement> }
 ) => ReturnType<typeof TreeInner>;
 
-export { Tree, TreeLeaf, TreeProps };
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+TreeView.displayProps = 'TreeView';
+
+export { TreeView, TreeViewProps, TreeLeaf };

src/index.ts

@@ -29,7 +29,7 @@ export * from './Tabs/Tabs';
 export * from './TextInput/TextInput';
 export * from './Toolbar/Toolbar';
 export * from './Tooltip/Tooltip';
-export * from './Tree/Tree';
+export * from './TreeView/TreeView';
 export * from './Window/Window';
 export * from './WindowContent/WindowContent';
 export * from './WindowHeader/WindowHeader';
@@ -46,3 +46,4 @@ export * from './legacy/NumberField';
 export * from './legacy/Panel';
 export * from './legacy/Progress';
 export * from './legacy/TextField';
+export * from './legacy/Tree';

src/legacy/Tree.tsx

@@ -0,0 +1,7 @@
+import { TreeView, TreeViewProps } from '../TreeView/TreeView';
+
+/** @deprecated Use `TreeViewProps` */
+export type TreeProps<T> = TreeViewProps<T>;
+
+/** @deprecated Use `TreeView` */
+export const Tree = TreeView;