@pareto-engineering/design-system 5.3.0 → 5.4.0

package/src/ui/a/ContentTree/common/Tree/Tree.jsx

@@ -1,150 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { useState, useEffect, useMemo } from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import { Card } from 'ui'
-
-// Local Definitions
-
-import useFirstVisibleNode from '../useFirstVisibleNode'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'tree'
-
-/**
- * This is the component description.
- */
-const Tree = ({
-  id,
-  className:userClassName,
-  style,
-  tree,
-  displayDepth,
-  color,
-  // ...otherProps
-}) => {
-  // The nodeIds to be used to get the first visible node
-  const [nodeIds, setNodeIds] = useState([])
-
-  // current visible nodeId
-  const visibleNodeId = useFirstVisibleNode(nodeIds)
-
-  useEffect(() => {
-    const node = document.getElementsByClassName(visibleNodeId)[0]
-    node?.classList.add(styleNames.modifierActive)
-
-    return () => {
-      node?.classList.remove(styleNames.modifierActive)
-    }
-  }, [visibleNodeId])
-
-  // Generate the tree structure from the content tree data depending on the display depth
-  const getNestedTree = (node, depth) => {
-    setNodeIds((prev) => [...prev, node.id])
-    if (depth <= 1) {
-      return (
-        <li key={node.id}>
-          <a
-            className={node.id}
-            href={node.id}
-          >
-            {node.text}
-          </a>
-        </li>
-      )
-    }
-    return (
-      <li key={node.id}>
-        <p>
-          <a
-            href={node.id}
-            className={node.id}
-          >
-            {node.text}
-          </a>
-        </p>
-        {node.children.length > 0 && (
-        <ul>
-          {node.children.map((child) => getNestedTree(child, depth - 1))}
-        </ul>
-        )}
-      </li>
-    )
-  }
-
-  const ContentTree = useMemo(
-    () => tree.map((node) => getNestedTree(node, displayDepth)),
-    [tree],
-  )
-
-  return ContentTree.length ? (
-    <Card
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        color && `x-${color}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      <Card.Section>
-        <ul>
-          {ContentTree}
-        </ul>
-      </Card.Section>
-    </Card>
-  ) : null
-}
-Tree.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id:PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className:PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style:PropTypes.objectOf(PropTypes.string),
-
-  /**
-   * The tree to render.
-   */
-  tree:PropTypes.arrayOf(PropTypes.shape({
-    text    :PropTypes.string,
-    id      :PropTypes.string,
-    children:PropTypes.arrayOf(PropTypes.shape({
-      text:PropTypes.string, id:PropTypes.string,
-    })),
-  })),
-
-  /**
-   * The levels of the tree to display.
-   */
-  displayDepth:PropTypes.number,
-
-  /**
-   * The color of the tree.
-   */
-  color:PropTypes.string,
-}
-
-Tree.defaultProps = {
-  color       :'interactive',
-  displayDepth:4,
-}
-
-export default Tree

package/src/ui/a/ContentTree/common/Tree/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-export { default as Tree } from './Tree'

package/src/ui/a/ContentTree/common/index.js

@@ -1,3 +0,0 @@
-export { default as useContentTree } from './useContentTree'
-export { default as useFirstVisibleNode } from './useFirstVisibleNode'
-export { Tree } from './Tree'

package/src/ui/a/ContentTree/common/useContentTree.js

@@ -1,83 +0,0 @@
-import { useState, useEffect, useCallback } from 'react'
-
-const useContentTree = (target, selectors) => {
-  const [contentTree, setContentTree] = useState([])
-
-  const getNodes = useCallback((parentTag) => {
-    const nodeList = parentTag.querySelectorAll(selectors.join(', '))
-    const nodes = []
-
-    nodeList.forEach((nodeNode) => {
-      const { id, innerText, tagName } = nodeNode
-
-      nodes.push({
-        id   :`#${id}`,
-        text :innerText,
-        level:selectors.indexOf(tagName.toLowerCase()),
-      })
-    })
-
-    return nodes
-  }, [selectors])
-
-  const buildTree = useCallback((nodes) => {
-    // Track the nodes we've seen so far in the same level
-    const currentSameLevelNodes = []
-    // Track nodes of the next level which will be children of the current node
-    let nextLevelNodes = []
-    // Track the current node level
-    let lastLevel = -1
-
-    // If the nodes are empty, return an empty tree
-    if (nodes.length === 0) {
-      return []
-    }
-
-    const buildSubTree = () => {
-      if (nextLevelNodes.length > 0) {
-        currentSameLevelNodes[currentSameLevelNodes.length - 1].children.push(
-          ...buildTree(nextLevelNodes),
-        )
-      }
-    }
-
-    nodes.forEach((node) => {
-      // If the node is of a greater level, we need to build the sub tree
-      if (lastLevel !== -1 && lastLevel < node.level) {
-        nextLevelNodes.push(node)
-        return
-      }
-
-      // build a subtree
-      buildSubTree()
-
-      // reset the next level nodes
-      lastLevel = node.level
-      // add the current node to the current level nodes
-      currentSameLevelNodes.push({
-        id      :node.id,
-        text    :node.text,
-        children:[],
-      })
-      // reset the next level nodes after building the subtree
-      nextLevelNodes = []
-    })
-
-    // build subtree
-    buildSubTree()
-
-    return currentSameLevelNodes
-  }, [])
-
-  useEffect(() => {
-    if (target.current) {
-      const nodes = getNodes(target.current)
-      const tree = buildTree(nodes)
-      setContentTree(tree)
-    }
-  }, [target.current])
-
-  return contentTree
-}
-
-export default useContentTree

package/src/ui/a/ContentTree/common/useFirstVisibleNode.js

@@ -1,59 +0,0 @@
-import {
-  useState, useEffect, useMemo, useCallback,
-} from 'react'
-import debounce from 'lodash/debounce'
-
-const useFirstVisibleNode = (nodeIds, config) => {
-  const [visibleNodeId, setVisibleNodeId] = useState(null)
-
-  const { debounceMs = 25 } = config || {}
-
-  // get headlines nodes - Should only be recalculated when the ids change
-  const nodes = useMemo(() => {
-    if (nodeIds?.length > 0) {
-      return Array.from(document.querySelectorAll(nodeIds.join(',')))
-    }
-    return []
-  }, [nodeIds])
-
-  const getVisibleNodeId = useCallback(debounce(() => {
-    // Get the top postion of each headline node relative to the viewport
-    const topOffsets = nodes.map((node) => node.getBoundingClientRect().top)
-
-    // Get the node closer to zero (the top of the viewport)
-    // We have the default offset as Infinity so it's always greater that the first node Y position
-    const visibleNode = topOffsets.reduce(
-      (prev, currentOffset, currentIndex) => {
-        const node = Math.abs(currentOffset - 0) < Math.abs(prev.offset - 0)
-          ? { node: nodes[currentIndex], offset: currentOffset }
-          : prev
-
-        return node
-      }, { node: nodes[0], offset: Infinity },
-    )
-
-    // Set the visible node id
-    setVisibleNodeId(`#${visibleNode?.node?.id}`)
-  }, debounceMs), [nodes])
-
-  // Recalculate the visible node id when the page is scrolled
-  useEffect(() => {
-    window.addEventListener('scroll', getVisibleNodeId)
-
-    return () => {
-      window.removeEventListener('scroll', getVisibleNodeId)
-    }
-  }, [getVisibleNodeId])
-
-  // Recalculate the visible node id when the page is resized
-  useEffect(() => {
-    window.addEventListener('resize', getVisibleNodeId)
-    return () => {
-      window.removeEventListener('resize', getVisibleNodeId)
-    }
-  }, [getVisibleNodeId])
-
-  return visibleNodeId
-}
-
-export default useFirstVisibleNode

package/src/ui/a/ContentTree/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-export { default as ContentTree } from './ContentTree'

package/src/ui/a/ContentTree/styles.scss

@@ -1,56 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-/* stylelint-disable selector-max-compound-selectors -- exception */
-
-@use "@pareto-engineering/bem";
-
-$default-dot-size: .5em;
-$default-margin: 1em;
-$default-padding: 1em;
-
-.#{bem.$base}.content-tree {
-  > .#{bem.$base}.tree {
-    position: sticky;
-    top: var(--theme-default-header-height-offset);
-
-    ul {
-      list-style: none;
-      padding: 0;
-
-      &:first-child > li > p {
-        margin-top: 0;
-      }
-
-      &:last-child > li > p {
-        margin-bottom: 0;
-      }
-
-      > li > p > a {
-        color: var(--paragraph);
-        text-decoration: none;
-      }
-    }
-
-    .#{bem.$modifier-active} {
-      font-weight: 700;
-
-      &::before {
-        background: var(--x);
-        border-radius: 50%;
-        content: "";
-        display: inline-block;
-        height: $default-dot-size;
-        margin-right: $default-margin;
-        text-align: center;
-        width: $default-dot-size;
-      }
-    }
-
-    li:not(:last-child) {
-      margin-bottom: $default-margin;
-
-      ul {
-        padding-left: $default-padding;
-      }
-    }
-  }
-}

package/src/ui/a/Conversation/Context.js

@@ -1,3 +0,0 @@
-import * as React from 'react'
-
-export default React.createContext({})

package/src/ui/a/Conversation/Conversation.jsx

@@ -1,105 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import { Card } from 'ui'
-
-import './styles.scss'
-
-// Local Definitions
-
-import { Message } from './common'
-
-import ConversationContext from './Context'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'conversation'
-
-/**
- * This is the component description.
- */
-const Conversation = ({
-  id,
-  className:userClassName,
-  style,
-  ourColor,
-  theirColor,
-  children,
-  backgroundColor,
-  // ...otherProps
-}) => (
-  <ConversationContext.Provider
-    value={{
-      ourColor,
-      theirColor,
-    }}
-  >
-    <Card
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `y-${backgroundColor}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      <Card.Section>
-        {children}
-      </Card.Section>
-    </Card>
-  </ConversationContext.Provider>
-)
-
-Conversation.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id:PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className:PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style:PropTypes.objectOf(PropTypes.string),
-
-  /**
-   * The base color to our messages component
-   */
-  ourColor:PropTypes.string,
-
-  /**
-   * The base color to their messages component
-   */
-  theirColor:PropTypes.string,
-
-  /**
-   *  The children JSX
-   */
-  children:PropTypes.node,
-
-  /**
-   * The background color
-   */
-  backgroundColor:PropTypes.string,
-}
-
-Conversation.defaultProps = {
-  ourColor       :'main',
-  theirColor     :'main2',
-  backgroundColor:'background-near',
-}
-
-Conversation.Message = Message
-
-export default Conversation

package/src/ui/a/Conversation/common/Message/Message.jsx

@@ -1,129 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-// Local Definitions
-
-import useConversation from '../../useConversation'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'message'
-
-/**
- * This is the component description.
- */
-const Message = ({
-  id,
-  className:userClassName,
-  style,
-  message,
-  customMessage,
-  sender,
-  from,
-  attachment,
-  attachmentIcon,
-  attachmentColor,
-  // ...otherProps
-}) => {
-  const { ourColor, theirColor } = useConversation()
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${from === 'ours' ? ourColor : theirColor}`,
-        from,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      {sender && (
-        <p className="sender">
-          {sender}
-          :
-        </p>
-      )}
-      <div className="message-content">
-        {
-          customMessage || <p>{ message }</p>
-        }
-        {attachment
-      && (
-      <div className={`attachment y-${attachmentColor}`}>
-        <span className="icon">{attachmentIcon}</span>
-        <p>
-          {attachment}
-        </p>
-      </div>
-      )}
-      </div>
-    </div>
-  )
-}
-Message.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id:PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className:PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style:PropTypes.objectOf(PropTypes.string),
-
-  /**
-   * The message in the conversation
-   */
-  message:PropTypes.string,
-
-  /**
-   * The custom message if it uses more complex html
-   */
-  customMessage:PropTypes.node,
-
-  /**
-   * The sender of the message
-   */
-  sender:PropTypes.string.isRequired,
-
-  /**
-   * The owner of the message
-   */
-  from:PropTypes.oneOf(['ours', 'theirs']),
-
-  /**
-   * name of the attachment file
-   */
-  attachment:PropTypes.string,
-
-  /**
-   * source of the attachment icon
-   */
-  attachmentIcon:PropTypes.string,
-
-  /**
-   * background color of the attachment box
-   */
-  attachmentColor:PropTypes.string,
-}
-
-Message.defaultProps = {
-  from           :'theirs',
-  attachmentIcon :'A',
-  attachmentColor:'interactive',
-}
-
-export default Message

package/src/ui/a/Conversation/common/Message/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-export { default as Message } from './Message'

package/src/ui/a/Conversation/common/index.js

@@ -1 +0,0 @@
-export { Message } from './Message'

package/src/ui/a/Conversation/index.js

@@ -1,4 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-export { default as Conversation } from './Conversation'
-export { default as ConversationContext } from './Context'
-export { default as useConversation } from './useConversation'

package/src/ui/a/Conversation/styles.scss

@@ -1,86 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-/* stylelint-disable selector-max-compound-selectors -- Required here  */
-/* stylelint-disable max-nesting-depth -- Required here  */
-/* stylelint-disable selector-max-universal -- Required here  */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-$default-border-radius: var(--theme-default-border-radius);
-$default-padding: var(--gap);
-$default-message-max-width: calc(100% - 4 * #{$default-padding});
-$default-message-border: 1px solid var(--hard-background-cards);
-
-.#{bem.$base}.conversation {
-  background: var(--y);
-
-  > .#{bem.$base}.section {
-    display: flex;
-    flex-direction: column;
-
-    > .#{bem.$base}.message + .#{bem.$base}.message {
-      padding-top: $default-padding;
-    }
-
-    > .#{bem.$base}.message.ours + .#{bem.$base}.message.ours,
-    > .#{bem.$base}.message.theirs + .#{bem.$base}.message.theirs {
-      padding-top: calc($default-padding / 2);
-    }
-
-    > .#{bem.$base}.message {
-      align-self: flex-start;
-      max-width: $default-message-max-width;
-      position: relative;
-
-      > .sender {
-        margin: 0;
-        padding: 0 var(--gap);
-      }
-
-      > .message-content {
-        background-color: var(--x);
-        border: $default-message-border;
-        border-radius: $default-border-radius;
-        display: flex;
-        flex-direction: column;
-        padding: 0 $default-padding;
-
-        > p {
-          color: var(--on-x);
-        }
-
-        > ul {
-          padding: 0 var(--gap);
-          text-align: left;
-
-          > li {
-            color: var(--on-x);
-          }
-        }
-
-        > * {
-          &:not(:last-child) {
-            margin-bottom: 0;
-          }
-        }
-
-        > .attachment {
-          align-items: center;
-          align-self: flex-end;
-          display: flex;
-          flex-direction: row;
-          gap: calc($default-padding / 2);
-        }
-      }
-
-      &.#{bem.$base}.theirs {
-        align-self: flex-end;
-
-        > .sender {
-          text-align: end;
-        }
-      }
-    }
-  }
-}

package/src/ui/a/Conversation/useConversation.js

@@ -1,4 +0,0 @@
-import { useContext } from 'react'
-import Context from './Context'
-
-export default () => useContext(Context)