@pareto-engineering/design-system 2.0.0-alpha.7 → 2.0.0-alpha.70

package/src/ui/a/Alert/Alert.jsx

@@ -0,0 +1,144 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState, useEffect, useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import { Button } from 'ui/b'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'alert'
+
+/**
+ * This is the component description.
+ */
+const Alert = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  type,
+  withCloseIcon,
+  primaryPosition,
+  secondaryPosition,
+  autoCloseMs,
+  width,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [hideAlert, setHideAlert] = useState(false)
+
+  const handleCloseAlert = () => setHideAlert(true)
+
+  useEffect(() => {
+    if (autoCloseMs) {
+      setTimeout(() => {
+        setHideAlert(true)
+      }, autoCloseMs)
+    }
+  }, [autoCloseMs])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        `x-${type}`,
+        hideAlert && 'hide',
+        primaryPosition,
+        secondaryPosition,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={{
+        ...style,
+        '--width':width,
+      }}
+      // {...otherProps}
+    >
+      <div className="bar" />
+      {withCloseIcon && (
+      <div className="close">
+        <Button isSimple color="heading" onClick={handleCloseAlert}>
+          <span className="f-icons">Y</span>
+        </Button>
+      </div>
+      )}
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+Alert.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 children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   *  Whether the alert should have a close Icon
+   */
+  withCloseIcon:PropTypes.bool,
+
+  /**
+   *  The primary position of the alert
+   */
+  primaryPosition:PropTypes.oneOf(['top', 'bottom', 'center']),
+
+  /**
+   *  The secondary position of the alert
+   */
+  secondaryPosition:PropTypes.oneOf(['left', 'right']),
+
+  /**
+   *  The number milisseconds to wait for before closing the alert
+   */
+  autoCloseMs:PropTypes.number,
+
+  /**
+   *  The type of the alert
+   */
+  type:PropTypes.oneOf(['success', 'warning', 'error']),
+
+  /**
+   *  The width of the alert
+   */
+  width:PropTypes.number,
+}
+
+Alert.defaultProps = {
+  withCloseIcon  :true,
+  primaryPosition:'top',
+}
+
+export default Alert

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

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

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

@@ -0,0 +1,74 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-padding: 1em;
+$default-bar-height: .3em;
+$default-alert-desktop-width: var(--width, 30em);
+
+.#{bem.$base}.alert {
+    border: var(--theme-border);
+    padding-bottom: $default-padding * 1.5;
+    width: 100%;
+    position: absolute;
+    z-index: 1;
+
+    &.center {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    &.top {
+        top: 0;
+    }
+
+    &.bottom {
+        bottom: 0;
+    }
+
+    &.right {
+        right: 0;
+    }
+
+    &.left {
+        left: 0;
+    }
+
+    &.hide {
+        display: none;
+    }
+
+    >.bar {
+        background-color: var(--x);
+        height: $default-bar-height;
+    }
+
+    >.close {
+        display: flex;
+        justify-content: flex-end;
+
+        span {
+            padding: $default-padding / 2;
+            font-size: calc(var(--s-2) * 1em);
+        }
+    }
+
+    .bar+.content {
+        padding-top: $default-padding * 1.5;
+    }
+
+    >.content {
+        padding-inline: $default-padding;
+
+        .icon {
+            color: var(--x)
+        }
+    }
+
+    // Desktop styles
+    @include mixins.media($from: $sm-md) {
+        width: $default-alert-desktop-width;
+    }
+}

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/a/BackgroundGradient/BackgroundGradient.jsx

@@ -0,0 +1,76 @@
+/* @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
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'background-gradient'
+
+/**
+ * This is the component description.
+ */
+const BackgroundGradient = ({
+  id,
+  className:userClassName,
+  style,
+  height,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={{
+        ...style,
+        '--gradient-height':height,
+      }}
+    />
+  )
+}
+
+BackgroundGradient.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 height of the shape.
+   */
+  height:PropTypes.string,
+}
+
+BackgroundGradient.defaultProps = {
+  // someProp: false,
+}
+
+export default BackgroundGradient

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

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

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

@@ -0,0 +1,16 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.background-gradient{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: var(--gradient-height);
+    background-image: linear-gradient(var(--background1), var(--y) 25%, var(--light-y) 75%, var(--background1));
+    opacity: .4;
+    z-index: -1;
+}
+
+
+

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

@@ -0,0 +1,88 @@
+/* @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 = ({
+  id,
+  className:userClassName,
+  style,
+  target,
+  selectors,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const contentTree = useContentTree(target, selectors)
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      <Tree tree={contentTree} />
+    </div>
+  )
+}
+
+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(Element) }),
+  ]),
+}
+
+ContentTree.defaultProps = {
+  selectors:['h2', 'h3'],
+}
+
+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'
+
+// 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'

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