@pareto-engineering/design-system 5.3.0 → 5.4.0

package/dist/es/a/Charts/PieChart/styles.scss

@@ -1,136 +0,0 @@
-@use "@pareto-engineering/bem";
-
-$default-margin: 1rem;
-$default-padding: 1rem;
-$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
-$soft-box-shadow: 0 .25rem 1rem var(--soft-shadow);
-$default-text-font-size: calc(var(--s-1) * 1rem);
-$default-legend-dot-width: .75rem;
-$default-legend-dot-height: .75rem;
-$default-legend-dot-margin-right: .3125rem;
-
-.#{bem.$base} {
-  &.pie-chart {
-    background-color: var(--background-far);
-    border-radius: var(--theme-default-border-radius);
-    box-shadow: $default-box-shadow;
-    margin: $default-margin 0;
-    padding: $default-padding;
-
-    .custom-legend {
-      .item {
-        padding-top: 0;
-      }
-
-      .title .dot {
-        height: $default-legend-dot-height;
-        width: $default-legend-dot-width;
-      }
-
-      .title .text {
-        font-size: calc($default-text-font-size * 1.5);
-      }
-
-      .sub-title-percentage-container {
-        align-items: center;
-        display: flex;
-        gap: .8rem;
-        margin-left: .5rem;
-        width: fit-content;
-      }
-
-      .sub-title-percentage-container .sub-title {
-        font-size: calc($default-text-font-size * 1.25);
-      }
-
-      .sub-title-percentage-container .percentage-title {
-        font-size: calc($default-text-font-size * 1);
-      }
-    }
-
-    .custom-tooltip-content {
-      box-shadow: $soft-box-shadow;
-
-      p {
-        color: var(--hard-paragraph);
-        font-size: calc($default-text-font-size * .8);
-        font-weight: 600;
-        margin: 0;
-      }
-
-      .pie-chart-label {
-        align-items: center;
-        display: flex;
-        gap: 1.25rem;
-        justify-content: flex-start;
-
-        .status {
-          align-items: center;
-          display: flex;
-          gap: .1rem;
-        }
-
-        .label {
-          color: var(--hard-paragraph);
-          font-size: calc($default-text-font-size * 1);
-          font-weight: 600;
-          text-transform: capitalize;
-        }
-
-        .dot {
-          border-radius: 50%;
-          display: inline-block;
-          height: $default-legend-dot-height;
-          margin-right: $default-legend-dot-margin-right;
-          width: $default-legend-dot-width;
-        }
-
-        .value {
-          color: var(--hard-paragraph);
-          font-size: calc($default-text-font-size * 1);
-          font-weight: 600;
-          text-transform: capitalize;
-        }
-
-        .percentage-title {
-          color: var(--soft-paragraph);
-          font-size: calc($default-text-font-size * 1);
-          font-weight: 300;
-          text-transform: capitalize;
-        }
-      }
-    }
-
-    .chart-header {
-      align-items: center;
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: $default-margin;
-
-      h3 {
-        color: var(--subtitle);
-        margin: calc($default-margin / 5);
-        text-align: left;
-      }
-    }
-
-    .chart-content {
-      align-items: flex-start;
-      display: flex;
-    }
-
-    .recharts-wrapper {
-      .recharts-surface {
-        .recharts-text {
-          fill: var(--soft-paragraph);
-          font-size: calc($default-text-font-size * .75);
-        }
-
-        .recharts-text.recharts-label {
-          fill: var(--paragraph);
-          font-size: $default-text-font-size;
-        }
-      }
-    }
-  }
-}

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

@@ -1,3 +0,0 @@
-export { AreaChart } from "./AreaChart";
-export { BarChart } from "./BarChart";
-export { PieChart } from "./PieChart";

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

@@ -1,66 +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 "./styles.scss";
-
-// Local Definitions
-import { Tree, useContentTree } from "./common";
-const baseClassName = styleNames.base;
-const componentClassName = 'content-tree';
-
-/**
- * This is the component description.
- */
-const ContentTree = ({
-  id,
-  className: userClassName,
-  style,
-  target,
-  selectors,
-  color
-  // ...otherProps
-}) => {
-  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, {
-    color: color,
-    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.node
-  })]),
-  /**
-   * The color for the tree.
-   */
-  color: PropTypes.string
-};
-ContentTree.defaultProps = {
-  selectors: ['h2', 'h3']
-};
-export default ContentTree;

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

@@ -1,101 +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 "../../../..";
-
-// 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 /*#__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 ContentTree.length ? /*#__PURE__*/React.createElement(Card, {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, color && `x-${color}`].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement(Card.Section, null, /*#__PURE__*/React.createElement("ul", null, ContentTree))) : 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/dist/es/a/ContentTree/common/Tree/index.js

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

package/dist/es/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/dist/es/a/ContentTree/common/useContentTree.js

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

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

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

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

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

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

@@ -1,73 +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 "../..";
-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
-}) => /*#__PURE__*/React.createElement(ConversationContext.Provider, {
-  value: {
-    ourColor,
-    theirColor
-  }
-}, /*#__PURE__*/React.createElement(Card, {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName, `y-${backgroundColor}`].filter(e => e).join(' '),
-  style: style
-}, /*#__PURE__*/React.createElement(Card.Section, null, 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 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/dist/es/a/Conversation/common/Message/Message.js

@@ -1,93 +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 /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${from === 'ours' ? ourColor : theirColor}`, from].filter(e => e).join(' '),
-    style: style
-  }, sender && /*#__PURE__*/React.createElement("p", {
-    className: "sender"
-  }, sender, ":"), /*#__PURE__*/React.createElement("div", {
-    className: "message-content"
-  }, customMessage || /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
-    className: `attachment y-${attachmentColor}`
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, attachmentIcon), /*#__PURE__*/React.createElement("p", null, 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,
-  /**
-   * 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/dist/es/a/Conversation/common/Message/index.js

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

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

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

package/dist/es/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";