@pareto-engineering/design-system 2.0.0-alpha.9 → 3.0.0-alpha.18

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

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

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

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

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

@@ -0,0 +1,33 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-margin: 1em;
+$default-padding: 1em;
+
+.#{bem.$base}.content-tree{
+
+    ul {
+        list-style: none;
+    }
+
+    .#{bem.$base}.tree {
+       position: sticky;
+       top: 0;
+       padding: 0;
+
+       .#{bem.$modifier-active} {
+         color: var(--main2);
+         transition: color 0.2s;
+       }
+
+       li:not(:last-child) {
+           margin-bottom: $default-margin;
+           ul {
+               padding-left: $default-padding;
+           }
+       }
+    }
+}
+
+
+

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

@@ -5,7 +5,7 @@ import { useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 
@@ -28,14 +28,13 @@ const Conversation = ({
   ourColor,
   theirColor,
   children,
+  hasTriangle,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
     import('./styles.scss')
   }, [])
 
-  // const messageColors = { ours: color, theirs: 'main2' }
-
   return (
     <ConversationContext.Provider
       value={{
@@ -49,6 +48,7 @@ const Conversation = ({
           baseClassName,
           componentClassName,
           userClassName,
+          hasTriangle && 'has-triangle',
           `y-${backgroundColor}`,
           'u1',
         ]
@@ -76,11 +76,13 @@ Conversation.propTypes = {
   /**
    * The React-written, css properties for this element.
    */
-  style     :PropTypes.objectOf(PropTypes.string),
+  style:PropTypes.objectOf(PropTypes.string),
+
   /**
    * The base color to our messages component
    */
-  ourColor  :PropTypes.string,
+  ourColor:PropTypes.string,
+
   /**
    * The base color to their messages component
    */
@@ -94,12 +96,18 @@ Conversation.propTypes = {
    *  The children JSX
    */
   children       :PropTypes.node,
+
+  /**
+   * whether to add triangle to bubble chats
+   */
+  hasTriangle:PropTypes.bool,
 }
 
 Conversation.defaultProps = {
-  backgroundColor:'background',
-  ourColor       :'main2',
-  theirColor     :'background2',
+  backgroundColor:'background2',
+  ourColor       :'background1',
+  theirColor     :'background1',
+  hasTriangle    :false,
 }
 
 Conversation.Message = Message

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

@@ -3,7 +3,7 @@ import * as React from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 
@@ -23,6 +23,9 @@ const Message = ({
   message,
   sender,
   from,
+  attachment,
+  attachmentIcon,
+  attachmentColor,
   // ...otherProps
 }) => {
   const { ourColor, theirColor } = useConversation()
@@ -36,6 +39,7 @@ const Message = ({
         userClassName,
         `x-${from === 'ours' ? ourColor : theirColor}`,
         from === 'ours' && 'ours',
+        'v1',
       ]
         .filter((e) => e)
         .join(' ')}
@@ -49,11 +53,19 @@ const Message = ({
         <p>
           {message}
         </p>
+        {attachment
+      && (
+      <div className={`attachment y-${attachmentColor}`}>
+        <span className="f-icons">{attachmentIcon}</span>
+        <p className="ml-v">
+          {attachment}
+        </p>
+      </div>
+      )}
       </div>
     </div>
   )
 }
-
 Message.propTypes = {
   /**
    * The HTML id for this element
@@ -65,26 +77,46 @@ Message.propTypes = {
    */
   className:PropTypes.string,
 
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
   /**
    * The message in the conversation
    */
   message:PropTypes.string.isRequired,
+
   /**
    * The sender of the message
    */
-  sender :PropTypes.string.isRequired,
+  sender:PropTypes.string.isRequired,
+
   /**
    * The owner of the message
    */
-  from   :PropTypes.oneOf(['ours', 'theirs']),
+  from:PropTypes.oneOf(['ours', 'theirs']),
+
   /**
-   * The React-written, css properties for this element.
+   * name of the attachment file
+   */
+  attachment:PropTypes.string,
+
+  /**
+   * source of the attachment icon
+   */
+  attachmentIcon:PropTypes.string,
+
+  /**
+   * background color of the attachment box
    */
-  style  :PropTypes.objectOf(PropTypes.string),
+  attachmentColor:PropTypes.string,
 }
 
 Message.defaultProps = {
-  from:'theirs',
+  from           :'theirs',
+  attachmentIcon :'A',
+  attachmentColor:'main4',
 }
 
 export default Message

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

@@ -1,54 +1,153 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
 
 $default-padding: var(--u);
 $default-conversation-background: var(--y);
-$default-message-max-width: calc(100% - #{$default-padding});
+$default-message-max-width: calc(100% - 4 * #{$default-padding});
 $default-message-min-width: 12em;
 $default-message-border: var(--theme-border);
+$triangle-border-size: 15px;
+$triangle-border-style: $triangle-border-size solid;
+$triangle-border-style-subtracted: ($triangle-border-size - 1px) solid;
+$triangle-border1: $triangle-border-style var(--paragraph);
+$triangle-border2: $triangle-border-style transparent;
+$triangle-border3: $triangle-border-style-subtracted var(--x);
+$triangle-border4: $triangle-border-style-subtracted transparent;
+$triangle-before-side:24px;
+$triangle-before-bottom:-30px;
+$triangle-after-bottom:-27px;
+$triangle-after-side:25px;
 
 .#{bem.$base}.conversation {
-    display: flex;
-    flex-direction: column;
-    background-color: $default-conversation-background;
-    padding: $default-padding;
-    border-radius: var(--theme-border-radius);
+  background-color: $default-conversation-background;
+  border-radius: var(--theme-border-radius);
+  display: flex;
+  flex-direction: column;
+  padding: $default-padding;
 
-    >:not(:last-child) {
-        margin-bottom: $default-padding;
-    }
+  >:not(:last-child) {
+    margin-bottom: $default-padding;
+  }
+
+  // >:nth-child(1) {
+  // animation-delay: 1s;
+  // }
+  // >:nth-child(2) {
+  // animation-delay: 3s;
+  // }
 
+  &.has-triangle {
+    padding-bottom: calc(#{$default-padding} * 2);
     .#{bem.$base}.message {
-        min-width: $default-message-min-width;
-        max-width: $default-message-max-width;
-        padding: $default-padding;
-        border-radius: var(--theme-border-radius);
-        background-color: var(--x);
-        align-self: flex-start;
-        border: $default-message-border;
-
-        .#{bem.$element-content} {
-            display: flex;
-            flex-direction: column;
-
-            >p {
-                color: var(--on-x);
-            }
-
-            .sender {
-                font-weight: 800;
-                margin-bottom: .5em;
-            }
+      ::before {
+        border-bottom: $triangle-border2;
+        border-left: $triangle-border2;
+        border-right: $triangle-border1;
+        border-top: $triangle-border1;
+        bottom: $triangle-before-bottom;
+        content: "";
+        height: 0;
+        position: absolute;
+        right: $triangle-before-side;
+        width: 0;
+      }
+
+      ::after {
+        border-bottom: $triangle-border4;
+        border-left: $triangle-border4;
+        border-right: $triangle-border3;
+        border-top: $triangle-border3;
+        bottom: $triangle-after-bottom;
+        content: "";
+        height: 0;
+        position: absolute;
+        right: $triangle-after-side;
+        width: 0;
+      }
+
+      &:not(.ours) {
+        ::before {
+          border-bottom: $triangle-border2;
+          border-left: $triangle-border1;
+          border-right: $triangle-border2;
+          border-top: $triangle-border1;
+          bottom: $triangle-before-bottom;
+          content: "";
+          height: 0;
+          left: $triangle-before-side;
+          position: absolute;
+          width: 0;
         }
-    }
 
-    .#{bem.$base}.ours {
-        align-self: flex-end;
+        ::after {
+          border-bottom: $triangle-border4;
+          border-left: $triangle-border3;
+          border-right: $triangle-border4;
+          border-top: $triangle-border3;
+          bottom: $triangle-after-bottom;
+          content: "";
+          height: 0;
+          left: $triangle-after-side;
+          position: absolute;
+          width: 0;
+        }
+      }
     }
+  }
 
-}
+  .#{bem.$base}.message {
+    align-self: flex-start;
+    background-color: var(--x);
+    //  animation: fadeIn 1s ease-in both;
+    border: $default-message-border;
+    border-radius: var(--theme-border-radius);
+    max-width: $default-message-max-width;
+    min-width: $default-message-min-width;
+    padding: $default-padding;
+    position: relative;
 
+    .#{bem.$element-content} {
+      display: flex;
+      flex-direction: column;
 
+      >p {
+        color: var(--on-x);
+      }
 
+      .sender {
+        font-weight: 800;
+        margin-bottom: .5em;
+      }
+
+      .attachment {
+        align-self: baseline;
+        background-color: var(--y);
+        display: flex;
+        flex-direction: row;
+        padding: .5em 1em;
+
+        > p {
+          margin-bottom: 0;
+        }
+
+        > img {
+          width: 40px;
+        }
+      }
+    }
+    &.#{bem.$base}.ours {
+      align-self: flex-end;
+    }
+
+
+    // mobile style
+    @include mixins.media($to:$sm-md) {
+      .message {
+        margin-top: 2em;
+      }
+    }
+  }
+}

package/src/ui/a/DotInfo/DotInfo.jsx

@@ -5,7 +5,7 @@ import { useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 

package/src/ui/a/Figure/Figure.jsx

@@ -5,7 +5,7 @@ import { useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 

package/src/ui/a/HamburgerButton/HamburgerButton.jsx

@@ -5,7 +5,7 @@ import { useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 

package/src/ui/a/IconList/IconList.jsx

@@ -5,7 +5,7 @@ import { useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 import { Item } from './common'
 

package/src/ui/a/IconList/common/Item/Item.jsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 

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

@@ -5,7 +5,7 @@
 $default-icon:"";
 $default-icon-width:2em;
 $default-icon-margin:.5em;
-$default-icon-font:var(--font-icons);
+$default-icon-font:icons;
 $default-icon-margin-top:.1em;//.2em;
 
 .#{bem.$base}.icon-list {

package/src/ui/a/{CustomerStat/CustomerStat.jsx → Label/Label.jsx}

@@ -5,25 +5,25 @@ import { useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 
 const baseClassName = styleNames.base
 
-const componentClassName = 'customer-stat'
+const componentClassName = 'label'
 
 /**
- * This is the component description
+ * This is the component description.
  */
-const CustomerStat = ({
+const Label = ({
   id,
   className:userClassName,
   style,
+  children,
   color,
-  description,
-  label,
-  // ...otherProps
+  isCompact,
+  isGhost,
 }) => {
   useLayoutEffect(() => {
     import('./styles.scss')
@@ -37,21 +37,21 @@ const CustomerStat = ({
         componentClassName,
         userClassName,
         `x-${color}`,
+        isCompact && styleNames.modifierCompact,
+        isGhost && styleNames.modifierGhost,
       ]
         .filter((e) => e)
         .join(' ')}
       style={style}
-      // {...otherProps}
     >
-      <p className="info top-description uc s-1 md-s0 v0 mb-v">{description}</p>
-      <p className="uc s0 md-s1 v0 mt-v">{label}</p>
+      {children}
     </div>
   )
 }
 
-CustomerStat.propTypes = {
+Label.propTypes = {
   /**
-   * The HTML id for this element.
+   * The HTML id for this element
    */
   id:PropTypes.string,
 
@@ -66,23 +66,28 @@ CustomerStat.propTypes = {
   style:PropTypes.objectOf(PropTypes.string),
 
   /**
-   * The count color
+   * Whether the button has the ghost style
    */
-  color:PropTypes.string,
+  isGhost:PropTypes.bool,
 
   /**
-   *  The company description
+   * Whether the button is compact
    */
-  description:PropTypes.string,
+  isCompact:PropTypes.bool,
+
+  /**
+   *  The default font color to display for the label
+   */
+  color:PropTypes.string,
 
   /**
-   * The company label
+   *  The children JSX
    */
-  label:PropTypes.string,
+  children:PropTypes.node,
 }
 
-CustomerStat.defaultProps = {
+Label.defaultProps = {
   color:'main1',
 }
 
-export default CustomerStat
+export default Label