@pareto-engineering/design-system 0.0.1-alpha.9 → 0.0.4-testing-id.0

package/dist/es/a/ContentCard/styles.scss

@@ -0,0 +1,78 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+
+$default-padding:var(--u);
+$default-card-background: var(--y);
+$default-content-width:minmax(350px, 500px);
+
+.#{bem.$base}.content-card {
+  background-color: $default-card-background;
+  border-radius: var(--theme-border-radius);
+
+  .#{bem.$base}.section {
+    column-gap: var(--u);
+    display: grid;
+  }
+
+  .layout-left {
+    grid-template-areas:
+      "content"
+      "illustration";
+  }
+
+  .layout-right {
+    grid-template-areas:
+      "content"
+      "illustration";
+
+    .illustration {
+      margin-bottom: 0;
+    }
+  }
+
+  .layout-center {
+    grid-template-areas:
+      "spacer"
+      "content"
+      "spacer2";
+  }
+
+  .content-after {
+    grid-template-areas:
+      "illustration"
+      "content";
+  }
+
+  .content {
+    grid-area: content;
+  }
+
+  .illustration {
+    grid-area: illustration;
+  }
+
+  .heading {
+    margin-bottom: 0;
+  }
+
+  @include mixins.media($from:$sm-md) {
+    .layout-left {
+      grid-template-areas: "content illustration";
+      grid-template-columns: $default-content-width 1fr;
+    }
+
+    .layout-right {
+      grid-template-areas: "illustration content";
+      grid-template-columns: 1fr $default-content-width;
+    }
+
+    .layout-center {
+      grid-template-areas: "spacer content spacer2";
+      grid-template-columns: 1fr minmax(450px, 650px) 1fr;
+    }
+  }
+}

package/dist/es/a/ContentTree/ContentTree.js

@@ -0,0 +1,64 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem';
+
+// Local Definitions
+import { Tree, useContentTree } from "./common";
+const baseClassName = styleNames.base;
+const componentClassName = 'content-tree';
+
+/**
+ * This is the component description.
+ */
+const ContentTree = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    target,
+    selectors
+    // ...otherProps
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const contentTree = useContentTree(target, selectors);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+    // {...otherProps}
+  }, /*#__PURE__*/React.createElement(Tree, {
+    tree: contentTree
+  }));
+};
+ContentTree.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 selectors to use to extract the navigation tree from the content.
+   */
+  selectors: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * The reference to the parent element.
+   */
+  target: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(String)
+  })])
+};
+ContentTree.defaultProps = {
+  selectors: ['h2', 'h3']
+};
+export default ContentTree;

package/dist/es/a/ContentTree/common/Tree/Tree.js

@@ -0,0 +1,95 @@
+/* @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';
+
+// Local Definitions
+
+import useFirstVisibleNode from "../useFirstVisibleNode";
+const baseClassName = styleNames.base;
+const componentClassName = 'tree';
+
+/**
+ * This is the component description.
+ */
+const Tree = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    tree,
+    displayDepth
+    // ...otherProps
+  } = _ref;
+  // 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 /*#__PURE__*/React.createElement("li", {
+        key: node.id
+      }, /*#__PURE__*/React.createElement("a", {
+        className: node.id,
+        href: node.id
+      }, node.text));
+    }
+    return /*#__PURE__*/React.createElement("li", {
+      key: node.id
+    }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
+      href: node.id,
+      className: node.id
+    }, node.text)), node.children.length > 0 && /*#__PURE__*/React.createElement("ul", null, node.children.map(child => getNestedTree(child, depth - 1))));
+  };
+  const ContentTree = useMemo(() => tree.map(node => getNestedTree(node, displayDepth)), [tree]);
+  return /*#__PURE__*/React.createElement("ul", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, ContentTree);
+};
+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
+};
+Tree.defaultProps = {
+  displayDepth: 4
+};
+export default Tree;

package/dist/es/a/ContentTree/common/Tree/index.js

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

package/dist/es/a/ContentTree/common/index.js

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

package/dist/es/a/ContentTree/common/useContentTree.js

@@ -0,0 +1,73 @@
+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/dist/es/a/ContentTree/common/useFirstVisibleNode.js

@@ -0,0 +1,54 @@
+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/dist/es/a/ContentTree/index.js

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

package/dist/es/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/dist/es/a/Conversation/Context.js

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default /*#__PURE__*/React.createContext({});

package/dist/es/a/Conversation/Conversation.js

@@ -0,0 +1,84 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem';
+
+// Local Definitions
+
+import { Message } from "./common";
+import ConversationContext from "./Context";
+const baseClassName = styleNames.base;
+const componentClassName = 'conversation';
+
+/**
+ * This is the component description.
+ */
+const Conversation = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    backgroundColor,
+    ourColor,
+    theirColor,
+    children,
+    hasTriangle
+    // ...otherProps
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement(ConversationContext.Provider, {
+    value: {
+      ourColor,
+      theirColor
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, hasTriangle && 'has-triangle', `y-${backgroundColor}`, 'u1'].filter(e => e).join(' '),
+    style: style
+  }, children));
+};
+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 component background color
+   */
+  backgroundColor: PropTypes.string,
+  /**
+   *  The children JSX
+   */
+  children: PropTypes.node,
+  /**
+   * whether to add triangle to bubble chats
+   */
+  hasTriangle: PropTypes.bool
+};
+Conversation.defaultProps = {
+  backgroundColor: 'background2',
+  ourColor: 'background1',
+  theirColor: 'background1',
+  hasTriangle: false
+};
+Conversation.Message = Message;
+export default Conversation;

package/dist/es/a/Conversation/common/Message/Message.js

@@ -0,0 +1,91 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem';
+
+// Local Definitions
+
+import useConversation from "../../useConversation";
+const baseClassName = styleNames.base;
+const componentClassName = 'message';
+
+/**
+ * This is the component description.
+ */
+const Message = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    message,
+    sender,
+    from,
+    attachment,
+    attachmentIcon,
+    attachmentColor
+    // ...otherProps
+  } = _ref;
+  const {
+    ourColor,
+    theirColor
+  } = useConversation();
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `x-${from === 'ours' ? ourColor : theirColor}`, from === 'ours' && 'ours', 'v1'].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styleNames.elementContent
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "sender v25 mb-v s-1"
+  }, sender, ":"), /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
+    className: `attachment y-${attachmentColor}`
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "f-icons"
+  }, attachmentIcon), /*#__PURE__*/React.createElement("p", {
+    className: "ml-v"
+  }, attachment))));
+};
+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.isRequired,
+  /**
+   * 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: 'main4'
+};
+export default Message;

package/dist/es/a/Conversation/common/Message/index.js

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

package/dist/es/a/Conversation/common/index.js

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

package/dist/es/a/Conversation/index.js

@@ -0,0 +1,4 @@
+/* @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";