@edvisor/product-language 0.10.2 → 0.10.4

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

@@ -1,127 +0,0 @@
-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

@@ -1,146 +0,0 @@
-// 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

@@ -1,168 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

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