@veracity/vui 2.0.6 → 2.2.0

package/src/tree/theme.ts

@@ -0,0 +1,76 @@
+import { Dict } from '../utils'
+
+function variantDefault(props: Dict) {
+  const item: Dict = {
+    activeBg: 'skyBlue.30',
+    hoverBg: 'skyBlue.20',
+    selectedBg: 'skyBlue.10',
+    px: 2
+  }
+
+  return { item }
+}
+
+const baseStyle = {}
+
+const defaultProps = {
+  size: 'md',
+  variant: 'default'
+}
+
+const parts = ['container', 'icon', 'item', 'text']
+
+const sizes = {
+  sm: {
+    icon: {
+      size: 'xs'
+    },
+    item: {
+      fontSize: 'md',
+      h: 32,
+      py: '3px'
+    }
+  },
+  md: {
+    icon: {
+      size: 'sm'
+    },
+    item: {
+      fontSize: 'md',
+      h: 40,
+      py: '5px'
+    }
+  },
+  lg: {
+    item: {
+      fontSize: 'md',
+      h: 48,
+      py: '7px'
+    },
+    icon: {
+      size: 'md'
+    }
+  },
+  xl: {
+    item: {
+      fontSize: 'lg',
+      h: 56,
+      py: '9px'
+    },
+    icon: {
+      scale: 2
+    }
+  }
+}
+
+const variants = {
+  default: variantDefault
+}
+
+export default {
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
+}

package/src/tree/tree.tsx

@@ -0,0 +1,121 @@
+import React, { Children, ReactElement, useEffect, useMemo } from 'react'
+
+import { styled, useStyleConfig, vui, VuiComponent } from '../core'
+import { cs, filterUndefined } from '../utils'
+import { TreeProvider } from './context'
+import { TreeItemId, TreeItemProps, TreeProps } from './tree.types'
+import TreeIcon from './treeIcon'
+import TreeItem from './treeItem'
+import TreeText from './treeText'
+import { useTreeState } from './useTreeState'
+
+export const TreeBase = styled.divBox`
+  display: flex;
+  height: auto;
+  align-content: flex-start;
+  flex-direction: column;
+`
+
+/** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */
+export const Tree = vui<'div', TreeProps>((props, ref) => {
+  const {
+    activeItemId,
+    children,
+    className,
+    iconCollapse = 'falMinus',
+    iconExpand = 'falPlus',
+    items,
+    onClickItem,
+    size,
+    variant,
+    ...rest
+  } = props
+  const styles = useStyleConfig('Tree', props)
+
+  const { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex } = useTreeState(activeItemId)
+
+  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])
+
+  const transformChildrenToItems = (children: any) => {
+    const t: TreeItemProps[] = []
+
+    if (children) {
+      ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TreeItemProps>, index: number) => {
+        if (child?.props?.text) {
+          let items: TreeItemProps[] = []
+
+          if (child.props.children) {
+            items = transformChildrenToItems(child.props.children) as unknown as TreeItemProps[]
+          }
+
+          t.push({
+            id: child.props.id,
+            text: child.props.text,
+            isActive: child.props.isActive,
+            items: child.props.items || items,
+            isCollapsed: child.props.isCollapsed,
+            disabled: child.props.disabled,
+            onClickTreeItem: onClickTreeItem
+          })
+        }
+      })
+    }
+
+    return t
+  }
+
+  useEffect(() => {
+    if (items) {
+      setItemsInternal(items as TreeItemProps[])
+      return
+    }
+
+    const t: TreeItemProps[] = []
+    if (children) {
+      const transformed = transformChildrenToItems(children) as unknown as TreeItemProps[]
+      t.push(...transformed)
+    }
+    setItemsInternal(t)
+    if (activeItemId !== undefined && t?.find((i: TreeItemProps) => i.id === activeItemId)) {
+      setActiveItemIndex(activeItemId)
+    }
+  }, [children, activeItemId])
+
+  const onClickTreeItem = (id: TreeItemId) => {
+    setActiveItemIndex(id)
+    if (onClickItem) {
+      onClickItem(id)
+    }
+  }
+
+  return (
+    <TreeProvider value={context}>
+      <TreeBase className={cs('vui-tree', className)} ref={ref} {...styles.container} {...rest}>
+        {itemsInternal?.map(({ id, isActive, ...props }, index: number) => {
+          return (
+            <TreeItem
+              activeItemIndex={activeItemIndex}
+              iconCollapse={iconCollapse}
+              iconExpand={iconExpand}
+              id={id}
+              isActive={activeItemIndex ? activeItemIndex === id : false}
+              key={id ?? index}
+              onClickTreeItem={onClickTreeItem}
+              {...props}
+            />
+          )
+        })}
+      </TreeBase>
+    </TreeProvider>
+  )
+}) as VuiComponent<'div', TreeProps> & {
+  Icon: typeof TreeIcon
+  Item: typeof TreeItem
+  Text: typeof TreeText
+}
+
+Tree.Icon = TreeIcon
+Tree.Item = TreeItem
+Tree.Text = TreeText
+
+export default Tree

package/src/tree/tree.types.ts

@@ -0,0 +1,65 @@
+import { ReactNode, ReactText } from 'react'
+
+import { IconProp } from '../icon'
+import { LinkProps } from '../link'
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+import { PropsOf } from '../utils'
+
+export type TreeProps = SystemProps &
+  ThemingProps<'Tree'> & {
+    /** Currently selected item.  */
+    activeItemId?: TreeItemId
+    /** Socket defining the collapse icon on the left. */
+    iconCollapse?: IconProp
+    /** Socket defining the expand icon on the left. */
+    iconExpand?: IconProp
+    /** Socket displaying a tree of items. */
+    items?: PropsOf<'div', TreeItemProps>[] | JSX.Element
+    /** Socket defining the size of the tree. */
+    onClickItem?: (id: TreeItemId) => void
+  }
+
+export type TreeItemLinkProps = PropsOf<'a', LinkProps> | object
+
+export type TreeItemId = string | number
+
+export type TreeOnToggleEvent = {
+  id: TreeItemId
+  collapsed: boolean
+}
+
+export type TreeItemProps = SystemProps &
+  ThemingProps<'Tree'> & {
+    activeItemId?: TreeItemId
+    /** internal, not exposed */
+    activeItemIndex?: TreeItemId
+    /** Unique ID */
+    id: TreeItemId
+    /** Centers the content vertically and horizontally. @deprecated */
+    center?: boolean
+    /** Centers the content horizontally. @deprecated */
+    centerH?: boolean
+    /** Centers the content vertically. @deprecated */
+    centerV?: boolean
+    /** Socket defining the collapse icon on the left. */
+    iconCollapse?: IconProp
+    /** Socket defining the expand icon on the left. */
+    iconExpand?: IconProp
+    /** The children of this tree item. */
+    items?: PropsOf<'div', TreeItemProps>[]
+    children?: ReactNode
+    /** Collapsed state */
+    isCollapsed?: boolean
+    /** Displays item and its content in disabled state with appropriate styling. */
+    disabled?: boolean
+    /** Displays item in selected state with appropriate styling. */
+    isActive?: boolean
+    /** If provided, content is wrapper with a link and the props are provided to the element. */
+    linkProps?: TreeItemLinkProps
+    /** Socket displaying text within the item. */
+    text: ReactText | JSX.Element
+    /** Collapse change state */
+    onToggle?: (event: TreeOnToggleEvent) => void
+    onClickTreeItem?: (id: TreeItemId) => void
+  }

package/src/tree/treeIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { useStyleConfig, vui } from '../core'
+import Icon, { IconProps } from '../icon'
+import { cs } from '../utils'
+import { useTreeContext } from './context'
+
+/** Displays an icon on the side of the TreeItem. */
+export const TreeIcon = vui<'svg', IconProps>((props, ref) => {
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Tree', useTreeContext())
+
+  return <Icon className={cs('vui-treeIcon', className)} ref={ref} size="xs" {...styles.icon} {...rest} />
+})
+
+export default TreeIcon

package/src/tree/treeItem.tsx

@@ -0,0 +1,177 @@
+import React, { useEffect, useState } from 'react'
+
+import { Box } from '../box'
+import { styled, useStyleConfig, vui } from '../core'
+import { cs, isArray, isReactText } from '../utils'
+import { useTreeContext } from './context'
+import { TreeItemProps } from './tree.types'
+import TreeIcon from './treeIcon'
+import TreeText from './treeText'
+
+export const TreeItemBase = styled.divBox`
+  display: flex;
+  flex-direction: column;
+  line-height: normal;
+  outline: none;
+  align-content: flex-start;
+  align-items: flex-start;
+  overflow: visible;
+  height: auto;
+
+  & [aria-disabled='true'] {
+    cursor: not-allowed;
+    user-select: none;
+  }
+`
+
+/**
+ * Displays a tree item with text and optional icons. Can be shown as selected.
+ */
+export const TreeItem = vui<'div', TreeItemProps>((props, ref) => {
+  const mergedProps = { ...useTreeContext(), ...props }
+
+  const {
+    activeItemId,
+    activeItemIndex,
+    children,
+    center,
+    centerH,
+    centerV = true,
+    className,
+    iconCollapse = 'falMinus',
+    isCollapsed,
+    disabled,
+    iconExpand = 'falPlus',
+    id,
+    items,
+    isActive,
+    isTruncated,
+    key,
+    onClickTreeItem,
+    onToggle,
+    text,
+    ...rest
+  } = mergedProps
+  const styles = useStyleConfig('Tree', useTreeContext())
+  const { activeBg, h, hoverBg, p, px, py, selectedBg, ...itemStyles } = styles.item
+
+  const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)
+
+  useEffect(() => {
+    setIsCollapsedInternal(!!isCollapsed)
+  }, [isCollapsed])
+
+  const toggle = (e: Event) => {
+    if (!disabled) {
+      onToggle?.({ id, collapsed: !collapsedInternal })
+      setIsCollapsedInternal(!collapsedInternal)
+    }
+
+    const target = e.target as HTMLDivElement
+    const active = target?.closest('.vui-tree')?.getElementsByClassName('vui-treeItem-active')[0] as HTMLDivElement
+    active ? (active.style.backgroundColor = 'transparent') : null
+
+    onClickTreeItem?.(id)
+
+    // Avoids triggering parent's onClick
+    e.stopPropagation()
+  }
+
+  const interactiveProps = !disabled
+    ? {
+        cursor: 'pointer',
+        focusVisibleRing: 2,
+        hoverBg: 'transparent',
+        activeBg: 'transparent',
+        userSelect: 'none'
+      }
+    : {}
+
+  const hoverTreeItem = (e: Event, type: string) => {
+    const target = e.target as HTMLDivElement
+
+    if (target.classList.contains('vui-treeItem-permanent')) {
+      target.style.backgroundColor = type === 'over' ? '#e2f1ff' : 'transparent'
+      e.stopPropagation()
+    } else {
+      e.preventDefault()
+      const permanent = target
+        .closest('.vui-treeItem')
+        ?.getElementsByClassName('vui-treeItem-permanent')[0] as HTMLDivElement
+
+      const collapsible = target
+        .closest('.vui-treeItem')
+        ?.getElementsByClassName('vui-treeItem-collapsible')[0] as HTMLDivElement
+
+      const active = target.closest('.vui-treeItem')?.getElementsByClassName('vui-treeItem-active')[0] as HTMLDivElement
+
+      permanent ? (permanent.style.backgroundColor = type === 'over' ? '#e2f1ff' : 'transparent') : null
+      collapsible ? (collapsible.style.backgroundColor = 'transparent') : null
+      active ? (active.style.backgroundColor = 'hsl(139, 100%, 90%)') : null
+    }
+  }
+
+  const isCollapsable = (isArray(children) && children.length > 0) || (isArray(items) && items.length > 0)
+  const isActiveInternal = (!activeItemIndex && isActive) || activeItemIndex === id
+
+  return (
+    <TreeItemBase
+      alignItems="start"
+      className={cs('vui-treeItem', className)}
+      h={collapsedInternal ? h : isCollapsable ? 'auto' : h}
+      id={id}
+      m={0}
+      onClick={!disabled ? (e: Event) => toggle(e) : undefined}
+      onMouseOut={!disabled ? (e: Event) => hoverTreeItem(e, 'out') : undefined}
+      onMouseOver={!disabled ? (e: Event) => hoverTreeItem(e, 'over') : undefined}
+      p={0}
+      ref={ref}
+      w={1}
+      {...itemStyles}
+      {...interactiveProps}
+      {...rest}
+      hoverBg="transparent"
+    >
+      <Box flexDirection="column" hoverBg="transparent" m={0} pl={2} pr={0} py={py} w={1}>
+        <Box
+          alignItems="center"
+          bg={isActiveInternal ? 'hsl(139, 100%, 90%)' : 'transparent'}
+          className={isActiveInternal ? 'vui-treeItem-active' : 'vui-treeItem-permanent'}
+          flexDirection="row"
+          hoverBg="transparent"
+          m={0}
+          p={0}
+          w={1}
+        >
+          {items && items?.length > 0 && (
+            <>{collapsedInternal ? <TreeIcon mr={1} name={iconExpand} /> : <TreeIcon mr={1} name={iconCollapse} />}</>
+          )}
+          {items?.length === 0 && <TreeIcon mr={1} name="cusDotFullAlt" />}
+          {isReactText(text) ? <TreeText {...{ isTruncated, text }} /> : text}
+        </Box>
+
+        {isCollapsable && !collapsedInternal && (
+          <Box className="vui-treeItem-collapsible" flexDirection="column" hoverBg="transparent" m={0} p={0} w={1}>
+            {children ??
+              (isArray<TreeItemProps>(items)
+                ? items.map(({ key, ...props }, index) => {
+                    return (
+                      <TreeItem
+                        activeItemIndex={activeItemIndex}
+                        iconCollapse={iconCollapse}
+                        iconExpand={iconExpand}
+                        key={key ?? index}
+                        onClickTreeItem={onClickTreeItem}
+                        {...props}
+                      />
+                    )
+                  })
+                : items)}
+          </Box>
+        )}
+      </Box>
+    </TreeItemBase>
+  )
+})
+
+export default TreeItem

package/src/tree/treeText.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { useStyleConfig, vui } from '../core'
+import T, { TProps } from '../t'
+import { cs, ellipsisOverflow } from '../utils'
+import { useTreeContext } from './context'
+
+/** Displays text within the TreeItem. */
+export const TreeText = vui<'span', TProps>((props, ref) => {
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Tree', useTreeContext())
+
+  return (
+    <T
+      className={cs('vui-treeText', className)}
+      fontSize="inherit"
+      py={styles.item.py}
+      ref={ref}
+      {...ellipsisOverflow}
+      {...styles.text}
+      {...rest}
+    />
+  )
+})
+
+export default TreeText

package/src/tree/useTreeState.ts

@@ -0,0 +1,10 @@
+import { useState } from 'react'
+
+import { TreeItemId, TreeItemProps } from './tree.types'
+
+export const useTreeState = (activeItemId?: TreeItemId) => {
+  const [itemsInternal, setItemsInternal] = useState<TreeItemProps[]>([])
+  const [activeItemIndex, setActiveItemIndex] = useState<TreeItemId>(activeItemId ?? '')
+
+  return { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex }
+}