@edvisor/product-language 0.9.0 → 0.10.2

package/src/lib/components/tree-view/stories/tree-view.stories.mdx

@@ -0,0 +1,127 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { TreeView } from '../index'
+import { 
+  BasicTree,
+  TreeEvents,
+  PlayGroundTree,
+  TreeOpenCheckedNodes,
+  NodesWithMessage,
+  MultilevelTree
+} from './components'
+
+
+<Meta title="Components/TreeView" component={TreeView}/>
+
+# Tree View System
+
+For more details, check out the guidelines on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=729%3A7354&t=3Z4YOaL6SG9Km6ih-0)
+
+### Table of Contents
+1.  [How to use](#how-to-use)
+2.  [Playground](#playground)
+3.  [Default Opened and checked nodes](#default-opened-checked)
+4.  [With Help Message](#help-message)
+5.  [Multi level Tree](#multilevel-tree)
+6.  [Events](#events)
+7.  [Api](#api)
+
+
+<div id="how-to-use"/>
+
+## How to Use
+
+```tsx
+import { TreeView } from '@edvisor/product-language'
+
+<TreeView
+  nodes={nodes}
+  checkedList={checked}
+  onCheck={onCheck}
+/>
+
+```
+
+
+<div id="playground"></div>
+
+### Playground
+
+<PlayGroundTree/>
+
+
+<div id="default-opened-checked"></div>
+
+### Default Opened and checked nodes
+
+<TreeOpenCheckedNodes/>
+
+
+<div id="help-message"></div>
+
+### With Help Message
+
+<NodesWithMessage/>
+
+### Multi level Tree
+
+<div id="#multilevel-tree"></div>
+
+<MultilevelTree/>
+
+<div id="events"></div>
+
+### Events
+<TreeEvents/>
+
+
+<div id="api"></div>
+
+## API
+
+### `Tree`
+
+| Prop                | Type                                                                  | Description                                            |
+| ------------------- | --------------------------------------------------------------------- | ------------------------------------------------------ |
+| `checkedList`       | `string[]`                                                            | `List of checked items`                                |  
+| `expanded?`         | `string[]`                                                            | `List of parent nodes to be open as default`           |
+| [`nodes`](#inode)   | `INode[]`                                                             | `List of nodes to construct the tree`                  |
+| `className?`        | `string`                                                              | `Class to be attached to the Container`                |
+| `title?`            | `string`                                                              | `Title if the Tree`                                    |
+| `showChildCount?`   | `boolean`                                                             | `Show child count by on parent nodes (default false)`  |
+| `expandDisabled?`   | `boolean`                                                             | `Disable node expand (default false)`                  |
+| `useCardContainer?` | `boolean`                                                             | `Use a Card as Container (required to use title)`      |
+| `onCheck`           | `(checked: string[], node?:`[`ICheckNode`](#checkNode)) => `void`     | `Fires when a node check status change`                |
+| `onClick?`          | `(node?:` [`ICheckNode`](#checkNode)) => `void`                       | `Fires when the label is clicked`                      |
+| `onExpand?`         | `(expanded: string[], node?:` [`IExpandNode`](#expandNode)) => `void` | `Fires when a parent node is opend or closed`          |
+
+
+<div id="inode"></div>
+
+### `INode` 
+
+| Prop                    | Type         | Description                                   |
+| ----------------------- | ------------ | --------------------------------------------- |
+| `label`                 | `string`     | `Node Name`                                   |
+| `value`                 | `string`     | `Node value (must be unique)`                 |
+| `helpfulMessage?`       | `string`     | `Message to be displaied under the node name` |
+| `disabled?`             | `boolean`    | `disable the current node`                    |
+| `invalid?`              | `boolean`    | `set the node check box as invalid`           | 
+| [`children?`](#inode)   | `INode[]`    | `Array of child nodes`                        |
+
+
+<div id="checkNode"></div>
+
+### `ICheckNode` extends `INode`
+
+| Prop              | Type         | Description          |
+| ----------------- | ------------ | -------------------- |
+| `checked`         | `boolean`    |  `Node check state`  |
+
+
+<div id="expandNode"></div>
+
+### `IExpandNode` extends `INode`
+
+| Prop              | Type         | Description          |
+| ----------------- | ------------ | -------------------- |
+| `expanded`        | `boolean`   |  `Node expand state`  |

package/src/lib/components/tree-view/tree-view.test.tsx

@@ -0,0 +1,146 @@
+// eslint-disable-next-line no-restricted-syntax
+import { fireEvent, render, screen } from '@testing-library/react'
+import { TreeView } from './index'
+import { INode } from './types'
+
+describe('TreeView Tests', () => {
+
+    const countryNodes: INode[] = [
+      {
+        value: 'south_america',
+        label: 'South America',
+        children: [
+          {
+            value: 'brasil',
+            label: 'Brasil'
+          },
+          {
+            value: 'argentina',
+            label: 'Argentina'
+          },
+          {
+            value: 'uruguay',
+            label: 'Uruguay'
+          },
+          {
+            value: 'peru',
+            label: 'Peru'
+          },
+        ]
+      },
+      {
+        value: 'north_america',
+        label: 'North America',
+        children: [
+          {
+            value: 'canada',
+            label: 'Canada'
+          },
+          {
+            value: 'usa',
+            label: 'USA'
+          },
+          {
+            value: 'mexico',
+            label: 'Mexico'
+          }
+        ]
+      },
+    ]
+
+  it('should render the Tree', async () => {
+    const { container } = render(
+      <TreeView
+        checkedList={[]} 
+        onCheck={() => void(0)}
+        nodes={countryNodes}
+      />
+    )
+
+    const treeView = screen.getByRole('tree')
+    
+    expect(treeView).toBeInTheDocument()
+    expect(container.getElementsByTagName('li').length).toBe(2)
+    
+  })
+
+  it('Should expand the nodes on click', async () => {
+    const { container } = render(
+      <TreeView 
+        checkedList={[]}
+        onCheck={() => void(0)}
+        nodes={countryNodes}
+      />
+    )
+
+    const southAmericaNode = screen.getByText('South America')
+    expect(screen.queryByText('Brasil')).not.toBeInTheDocument()
+
+    fireEvent(southAmericaNode, new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),)
+
+    expect(screen.queryByText('Brasil')).toBeInTheDocument()
+    expect(container.getElementsByTagName('li').length).toBe(6)
+
+  })
+
+  it('Should check by default', async () => {
+    
+    const checked = ['south_america']
+    render(
+      <TreeView
+        checkedList={checked}
+        onCheck={() => void(0)} 
+        nodes={countryNodes}
+      />
+    )
+
+    const nodes = screen.getAllByRole('treeitem')
+    const checkBox = nodes[0].getElementsByTagName('input')[0]
+
+    expect(checkBox).toBeChecked()
+    
+  })
+
+  it('Should Rende the Tree with a Title', async () => {
+    render(
+      <TreeView 
+        nodes={countryNodes}
+        checkedList={[]}
+        onCheck={() => void(0)} 
+        title="Tree Node Selection"
+      />
+    )
+
+
+    const tree = screen.getByText('Tree Node Selection')
+    expect(tree).toBeInTheDocument()
+    
+  })
+
+  it('Should Return Checked values on Check', async () => {
+    const handleCheck = jest.fn()
+    
+    const { container } = render(
+      <TreeView 
+        nodes={countryNodes}
+        onCheck={handleCheck}
+        checkedList={[]}
+        title="Tree Node Selection"
+      />
+    )
+
+    const checkBox = container.getElementsByTagName('input')[1]
+
+    fireEvent(checkBox, new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),)
+
+    expect(handleCheck).toBeCalled()
+    expect(handleCheck).toBeCalledWith(['canada', 'usa', 'mexico'], {'checked': true, 'label': 'North America', 'value': 'north_america'})
+    
+  })
+})

package/src/lib/components/tree-view/tree-view.tsx

@@ -0,0 +1,168 @@
+import { defaultTo, FC, is, isDefined, isEmpty, maybeRender, Nothing, PropsWithChildren } from '@helpers'
+import { TreeNode } from './components/tree-node'
+import styled from 'styled-components'
+import { Margin, Padding } from '@foundations'
+import { ICheckNode, IExpandNode, INode, IFlattenNode, ITreeViewProps } from './types'
+import { useMemo, useState } from 'react'
+
+import { 
+  flattenNodes, 
+  deserializeList, 
+  getNode, 
+  toggleChecked, 
+  serializeList, 
+  toggleNode,
+  getNodeCheckState
+} from './helper'
+
+import { Card } from 'components/card'
+
+const ParentNode = styled.ol`
+  display: flex;  
+  flex-direction: column;
+  gap: 8px;
+  margin: ${Margin.none};
+  padding-left: ${Padding.none};
+  list-style-type: none;
+  & ol {
+    padding-left: ${Padding.l};
+  } 
+`
+
+const Container = styled.div<{useCardContainer: boolean}>`
+  display: block;
+  margin: ${Margin.none};
+  padding: ${({ useCardContainer }) => useCardContainer 
+    ? Padding.none 
+    : Padding.xs
+  };
+
+`
+
+export const TreeView: FC<PropsWithChildren<ITreeViewProps>> = (props) => {
+
+  const {
+    checkedList = [],
+    expanded = [],
+    title,
+    nodes,
+    className,
+    showChildCount = false,
+    useCardContainer = true,
+  } = props
+
+  const [expandedList, setExpandedList] = useState<string[]>(expanded)
+  const treeId = new Date().getTime().toString()
+
+  const  flattenNodeList: IFlattenNode[] = useMemo(() => {
+    const _nodeList:IFlattenNode[] = []
+    flattenNodes(_nodeList, nodes)
+
+    deserializeList(_nodeList, {
+      checked: checkedList,
+      expanded: expandedList,
+    })
+    
+    return _nodeList
+  }, [nodes]) 
+
+  const handleOnCheck = (nodeInfo: ICheckNode): void => {
+    const { onCheck } = props
+    
+    toggleChecked(flattenNodeList, nodeInfo, nodeInfo.checked)
+    if (isDefined(onCheck)) {
+      onCheck(serializeList(flattenNodeList, 'checked'), { ...nodeInfo }) 
+    }
+  }
+
+  const handleOnExpand = (nodeInfo: IExpandNode): void => {
+    const { onExpand } = props
+
+    toggleNode(flattenNodeList, nodeInfo.value, 'expanded', nodeInfo.expanded)
+    if (isDefined(onExpand)) {
+      onExpand(serializeList(flattenNodeList, 'expanded'), {...nodeInfo })
+    }
+    setExpandedList(serializeList(flattenNodeList, 'expanded'))
+  }
+
+  const onNodeClick = (nodeInfo: ICheckNode): void => {
+    const { onClick } = props
+    const node = getNode(flattenNodeList, nodeInfo.value)
+    if (isDefined(onClick)) {
+      onClick({ ...node, ...nodeInfo })  
+    }
+  }
+
+  const renderTreeNodes = (nodeList: INode[], parent?: INode): JSX.Element => {
+    const {
+      expandDisabled = false,
+    } = props
+
+    const treeNodes = nodeList.map((node: INode) => {
+      const flatNode = getNode(flattenNodeList, node.value)
+      
+      const children = is(flatNode?.isParent) 
+        ? renderTreeNodes(defaultTo(node.children, []), node) 
+        : <Nothing key={node.value}/>
+
+      if (isDefined(flatNode)) {
+        flatNode.checkState = getNodeCheckState(flattenNodeList, node)
+      }
+      
+      const parentExpanded = isDefined(parent) && isDefined(parent.value) 
+        ? getNode(flattenNodeList, parent.value)?.expanded 
+        : true
+
+      if (!is(parentExpanded)) {
+          return <Nothing key={node.value}/>
+      }
+      
+      return (
+        <TreeNode
+          key={node.value}
+          checkState={defaultTo(flatNode?.checkState, 0)}
+          disabled={is(flatNode?.disabled)}
+          expandDisabled={expandDisabled}
+          expanded={is(flatNode?.expanded)}
+          label={node.label}
+          isLeaf={is(flatNode?.isLeaf)}
+          isParent={is(flatNode?.isParent)}
+          treeId={treeId}
+          invalid={defaultTo(node.invalid, false)}
+          value={node.value}
+          showChildCount={showChildCount}
+          childCount={defaultTo(flatNode?.children?.length, 0)}
+          helpfulMessage={node.helpfulMessage}
+          onClick={onNodeClick}
+          onCheck={handleOnCheck}
+          onExpand={handleOnExpand}
+        >
+          { children }
+        </TreeNode>
+      )
+    })
+
+    return (
+      <ParentNode role="tree" className='tree-view'>
+        { treeNodes }
+      </ParentNode>
+    )
+  }
+
+  const renderTree = (): JSX.Element => {
+    return useCardContainer ? 
+    <Card heading={title}>
+      <Card.Section>
+        <Container className={className} id={treeId} useCardContainer>
+          { renderTreeNodes(nodes) }
+        </Container>
+      </Card.Section>
+    </Card>
+    : 
+    <Container className={className} id={treeId} useCardContainer={false}>
+      { renderTreeNodes(nodes) }
+    </Container>
+  }
+  
+  return maybeRender(!isEmpty(nodes), renderTree())
+}

package/src/lib/components/tree-view/types.tsx

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react'
+
+export interface INode {
+  label: string
+  value: string
+  helpfulMessage?: string
+  disabled?: boolean
+  invalid?: boolean
+  children?: INode[]
+}
+
+export interface IFlattenNode extends INode {
+  parent?: INode
+  isChild: boolean
+  isParent: boolean
+  isLeaf: boolean
+  treeDepth: number
+  index: number
+  checked: boolean
+  checkState: number
+  expanded: boolean
+}
+
+export interface ITreeViewProps {
+  checkedList: string[]
+  nodes: INode[]
+  expanded?: string[]
+  className?: string
+  title?: string
+  useCardContainer?: boolean
+  showChildCount?: boolean
+  expandDisabled?: boolean
+  onCheck: (checked: string[], node?: ICheckNode) => void;
+  onClick?: (node: ICheckNode) => void;
+  onExpand?: (expanded: string[], node?: IExpandNode) => void;
+}
+
+export interface ITreeNode {
+  checkState: number
+  disabled: boolean
+  expanded: boolean
+  isParent: boolean
+  isLeaf: boolean
+  expandDisabled: boolean
+  label: string
+  value: string
+  children: ReactNode
+  treeId: string
+  invalid: boolean
+  childCount: number
+  showChildCount: boolean
+  helpfulMessage?: string
+  onCheck: (node: ICheckNode) => void;
+  onClick: (node: ICheckNode) => void;
+  onExpand: (node: IExpandNode) => void;
+}
+
+export interface ICheckNode extends INode {
+  checked: boolean
+}
+
+export interface IExpandNode extends INode {
+  expanded: boolean
+}
+
+export enum CheckboxState {
+  UNCHECKED,
+  CHECKED,
+  INDETERMINATE,
+}

package/src/lib/components/typography/index.ts

@@ -0,0 +1 @@
+export * from './typography'