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

package/src/stories/utils/relay/mockResolvers.js

@@ -0,0 +1,299 @@
+const customMockResolvers = {
+  String  :() => 'Test string',
+  UserNode:() => ({
+    id         :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+    firstName  :'Collins',
+    isSuperuser:false,
+  }),
+  TaskNode:() => ({
+    id    :'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlj',
+    title :'Task1',
+    status:{
+      id    :'VGFza1N0YXR1c05vZGU6OTczYmM4NTgtMzA0NC00NWNiLTg2MDQtYTRhM2JmNjFmZjEx',
+      status:'In Review',
+    },
+    requester:{
+      id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+      firstName:'Collins',
+    },
+    userTeam:{
+      id  :'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+      name:'Team 1',
+    },
+    manager:{
+      id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+      firstName:'manager',
+    },
+    createdAt  :'2021-09-23',
+    dueDate    :'2021-10-30',
+    requestDate:'2020-01-01',
+    description:'First task',
+  }),
+  TeamNode:() => ({
+    id          :'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+    name        :'Team 1',
+    credits     :20.12,
+    billingEmail:'team1@hellopareto.com',
+    hourlyRate  :20,
+    partner     :{
+      firstName:'Test1',
+      lastName :'assd',
+    },
+
+  }),
+  GroupNode:() => ({
+    id  :'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlk',
+    name:'admin',
+  }),
+  TaskNodeConnection:() => ({
+    pageInfo:{
+      hasNextPage    :true,
+      hasPreviousPage:true,
+    },
+    edges:[
+      {
+        node:{
+          id    :'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlj',
+          title :'Task1',
+          status:{
+            id    :'VGFza1N0YXR1c05vZGU6OTczYmM4NTgtMzA0NC00NWNiLTg2MDQtYTRhM2JmNjFmZjEx',
+            status:'In Review',
+          },
+          requester:{
+            id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+            firstName:'Collins',
+          },
+          userTeam:{
+            id  :'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+            name:'Team 1',
+          },
+          manager:{
+            id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+            firstName:'manager',
+          },
+          createdAt  :'2021-09-23',
+          dueDate    :'2021-10-30',
+          requestDate:'2020-01-01',
+          description:'First task',
+        },
+      },
+      {
+        node:{
+          id    :'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlj',
+          title :'Task2',
+          status:{
+            id    :'VGFza1N0YXR1c05vZGU6OTczYmM4NTgtMzA0NC00NWNiLTg2MDQtYTRhM2JmNjFmZjEx',
+            status:'In Review',
+          },
+          requester:{
+            id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+            firstName:'Collins',
+          },
+          userTeam:{
+            id  :'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+            name:'Team 2',
+          },
+          manager:{
+            id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+            firstName:'manager',
+          },
+          createdAt  :'2021-09-23',
+          dueDate    :'2021-10-30',
+          requestDate:'2020-01-01',
+          description:'Second task',
+        },
+      },
+    ],
+  }),
+  UserNodeConnection:(allArgs) => {
+    const { args :{ first, offset } } = allArgs
+
+    const edges = [
+      {
+        node:{
+          id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+          firstName:'Collins',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6MDEyN2E1NmItYjAxOS00NmQxLTg2NTEtYWEzOGIxZTUwNTA5',
+          firstName:'Amritha',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6YzcwYWIxMDItZWE2Yy00ZWNhLTk0M2ItOTA2OWQwN2RiMDQ0',
+          firstName:'Marsya',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6OTUyNjg1NWYtZTg3NC00ZTlkLWFlZTgtZDZjODc3NDNlNTRh',
+          firstName:'James',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6OTFmOTE4NTYtNjg0Yi00ODhhLWE0YzktZGU5ZDQ5YmJjM2Mz',
+          firstName:'Adrian',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6OTNkZGU3NGEtYTA2Yi00MDMzLWIwMDAtMTFkZDY0N2Y3OWE4',
+          firstName:'Melissa',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6MjgyYTk1MjctMDI4OS00MDlhLWFjNTktYWJkNTFkODAyMjFj',
+          firstName:'Beto',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6YmIxYzI5YmEtYTk0OS00M2I3LWIxMWEtZDQxMjM5ZWI0ZWI2',
+          firstName:'Romie',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6ZjZhNzBiZTgtY2FkMC00NzNjLWEyODUtNDdkMGVmYjQxYTRl',
+          firstName:'Miguel',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6Y2JlOGM4ZTYtY2Q2Zi00M2RlLWI4YmQtODU3YWRhZjYyMzVj',
+          firstName:'Phoebe',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6NDA5MWM1MDUtYjY1MC00M2Y1LTg3NTEtMDc1NTBkMzJhYTcy',
+          firstName:'Kim',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6ZjE0MGUxYTItM2I4My00NmY1LWIzMDQtYmFiOGZjMTc5ZmU4',
+          firstName:'Liz',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6ZGYyOGE5MDYtM2NhMS00NTVmLWIzZmUtNjY5YWFkZTNiZjRk',
+          firstName:'Deepanshu',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6MjBhMDBkYjgtZDExNi00YzAyLWEyOTUtYWM5MzIwMjUwMWU3',
+          firstName:'Jennica',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6MjczNDllYjMtYzNmYi00ZmVkLWE1N2YtNTFjZGJlODI0MWU2',
+          firstName:'Michelle',
+        },
+      },
+    ]
+
+    return ({
+      pageInfo:{
+        hasNextPage    :true,
+        hasPreviousPage:true,
+      },
+      edges:edges.slice(offset, offset + first),
+    })
+  },
+  WorkHoursNodeConnection:() => ({
+    pageInfo:{
+      hasNextPage    :true,
+      hasPreviousPage:true,
+    },
+    edges:[
+      {
+        node:{
+          id       :'V29ya0hvdXJzTm9kZTplYWJlYmEyNC0wNTlmLTQxMjEtODIzYi0yYmU2YzMxMmZlNzA=',
+          associate:{
+            firstName:'Des',
+            lastName :'assd',
+          },
+          timeSpent  :15,
+          log        :'asd',
+          paidOut    :false,
+          sentInvoice:true,
+          createdAt  :'2021-09-05T17:08:49.000-0430',
+          startedAt  :'2021-09-05T17:08:49.000-0430',
+        },
+      },
+      {
+        node:{
+          id       :'V29ya0hvdXJzTm9kZTplYmZiZTllZS04NWNkLTRhNDktYTZhMi0zNmNhMTU0M2EwMDU=',
+          associate:{
+            firstName:'Ella',
+            lastName :'asdasd',
+          },
+          timeSpent  :25,
+          log        :'aasdasdsd',
+          paidOut    :true,
+          sentInvoice:false,
+          createdAt  :'2021-09-15T17:08:49.000-0430',
+          startedAt  :'2021-09-15T17:08:49.000-0430',
+        },
+      },
+    ],
+  }),
+  TeamNodeConnection:() => ({
+    pageInfo:{
+      hasNextPage    :true,
+      hasPreviousPage:true,
+    },
+    edges:[
+      {
+        node:{
+          id          :'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+          name        :'Team 1',
+          credits     :20.12,
+          billingEmail:'team1@hellopareto.com',
+          hourlyRate  :20,
+          partner     :{
+            firstName:'Test1',
+            lastName :'assd',
+          },
+        },
+      },
+      {
+        node:{
+          id          :'VGVhbU5vZGU6MDA0N2U4MzktODY0Zi00N2U5LTg3ZjgtZGUwMmM2Yzg1YWJm',
+          name        :'Team 2',
+          credits     :20.12,
+          billingEmail:'team2@hellopareto.com',
+          hourlyRate  :20,
+          partner     :{
+            firstName:'Test2',
+            lastName :'assd',
+          },
+        },
+      },
+      {
+        node:{
+          id          :'VGVhbU5vZGU6MDExMmEyZmEtYzE0YS00MGRhLThiNWQtMDMzNTkyNDQ3ZDI2',
+          name        :'Team 3',
+          credits     :20.12,
+          billingEmail:'team3@hellopareto.com',
+          hourlyRate  :20,
+          partner     :{
+            firstName:'Test3',
+            lastName :'assd',
+          },
+        },
+      },
+    ],
+  }),
+}
+
+export default customMockResolvers

package/src/stories/utils/testData.js

@@ -0,0 +1,63 @@
+export const fruits = [
+  'Apple',
+  'Apricot',
+  'Avocado',
+  'Banana',
+  'Bilberry',
+  'Blackberry',
+  'Blackcurrant',
+  'Blueberry',
+  'Currant',
+  'Cherry',
+  'Cherimoya',
+  'Clementine',
+  'Date',
+  'Damson',
+  'Durian',
+  'Eggplant',
+  'Elderberry',
+  'Feijoa',
+  'Gooseberry',
+  'Grape',
+  'Grapefruit',
+  'Guava',
+  'Huckleberry',
+  'Jackfruit',
+  'Jambul',
+  'Kiwi fruit',
+  'Kumquat',
+  'Legume',
+  'Lemon',
+  'Lime',
+  'Lychee',
+  'Mango',
+  'Mangostine',
+  'Melon',
+  'Cantaloupe',
+  'Honeydew melon',
+  'Rock melon',
+  'Nectarine',
+  'Orange',
+  'Peach',
+  'Pear',
+  'Williams pear or Bartlett pear',
+  'Pitaya',
+  'Physalis',
+  'Plum/prune (dried plum)',
+  'Pineapple',
+  'Pomegranate',
+  'Raisin',
+  'Raspberry',
+  'Western raspberry (blackcap)',
+  'Rambutan',
+  'Redcurrant',
+  'Salal berry',
+  'Satsuma',
+  'Star fruit',
+  'Strawberry',
+  'Tangerine',
+  'Tomato',
+  'Ugli fruit',
+  'Watermelon',
+  'Ziziphus mauritiana',
+]

package/src/ui/a/AnimatedCounter/AnimatedCounter.jsx

@@ -9,7 +9,7 @@ import VisibilitySensor from 'react-visibility-sensor'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 

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

@@ -1,8 +1,8 @@
 /* @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 *;
 
 .#{bem.$base}.animated-counter {
   display: flex;

package/src/ui/a/{SiteContext → AppContext}/ContextProvider.jsx

@@ -24,7 +24,7 @@ const reducer = (state, action) => {
   }
 }
 
-const SiteContextProvider = ({
+const AppContextProvider = ({
   children,
   initialTheme,
   config,
@@ -48,7 +48,7 @@ const SiteContextProvider = ({
   )
 }
 
-SiteContextProvider.propTypes = {
+AppContextProvider.propTypes = {
   /**
    *  The children JSX
    */
@@ -60,10 +60,10 @@ SiteContextProvider.propTypes = {
   initialTheme:PropTypes.string,
 
   /**
-   * A dictionnary containing settings and preferences to be used site-wide
+   * A dictionnary containing settings and preferences to be used application-wide
    */
   config:PropTypes.shape({
-    SITE:PropTypes.shape({
+    APP:PropTypes.shape({
       NAME         :PropTypes.string.isRequired,
       CANONICAL    :PropTypes.string.isRequired,
       SUPPORT_EMAIL:PropTypes.string,
@@ -74,16 +74,17 @@ SiteContextProvider.propTypes = {
       INSTAGRAM:PropTypes.string,
       YOUTUBE  :PropTypes.string,
     }),
+    CONSTANTS:PropTypes.shape({}),
   }).isRequired,
 
   /**
-   * Site context initial state
+   * Application context initial state
    */
   initialState:PropTypes.objectOf(PropTypes.string),
 }
 
-SiteContextProvider.defaultProps = {
+AppContextProvider.defaultProps = {
   initialState:{},
 }
 
-export default SiteContextProvider
+export default AppContextProvider

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

@@ -0,0 +1,5 @@
+/* @pareto-engineering/generator-front 0.2.3 */
+export { default as AppContext } from './Context'
+export { default as AppContextProvider } from './ContextProvider'
+export { default as useApp } from './useApp'
+export { default as useTheme } from './useTheme'

package/src/ui/{b/Metrics/Metrics.jsx → a/ContentTree/ContentTree.jsx}

@@ -3,32 +3,34 @@ import * as React from 'react'
 
 import { useLayoutEffect } from 'react'
 
-import { AnimatedCounter } from 'ui'
-
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
+import { Tree, useContentTree } from './common'
 
 const baseClassName = styleNames.base
 
-const componentClassName = 'metrics'
+const componentClassName = 'content-tree'
 
 /**
  * This is the component description.
  */
-const Metrics = ({
+const ContentTree = ({
   id,
   className:userClassName,
   style,
-  items,
+  target,
+  selectors,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
     import('./styles.scss')
   }, [])
 
+  const contentTree = useContentTree(target, selectors)
+
   return (
     <div
       id={id}
@@ -44,26 +46,12 @@ const Metrics = ({
       style={style}
       // {...otherProps}
     >
-      {items.map((counter) => (
-        <div className="metric">
-          <div className={`circle y-${counter.circleColor}`}>
-            <AnimatedCounter
-              color={counter.color}
-              delay={counter.delay}
-              number={counter.number}
-              before={counter.before}
-              after={counter.after}
-            />
-            <p className="description-md sm-h xs-h md-s1">{counter.description}</p>
-          </div>
-          <p className="description-sm md-h lg-h sm-s-2">{counter.description}</p>
-        </div>
-      ))}
+      <Tree tree={contentTree} />
     </div>
   )
 }
 
-Metrics.propTypes = {
+ContentTree.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -80,14 +68,21 @@ Metrics.propTypes = {
   style:PropTypes.objectOf(PropTypes.string),
 
   /**
-   * The array of details
+   * The selectors to use to extract the navigation tree from the content.
+   */
+  selectors:PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * The reference to the parent element.
    */
-  items:PropTypes.node,
+  target:PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
 }
 
-/*
-Metrics.defaultProps = {
+ContentTree.defaultProps = {
+  selectors:['h2', 'h3'],
 }
-*/
 
-export default Metrics
+export default ContentTree

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

@@ -0,0 +1,138 @@
+/* @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'
+
+// 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,
+  // ...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 (
+    <ul
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      {ContentTree}
+    </ul>
+  )
+}
+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/src/ui/a/ContentTree/common/Tree/index.js

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

package/src/ui/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'