@pareto-engineering/design-system 5.3.0 → 5.4.0

package/dist/cjs/utils/hooks/useDynamicPosition.js

@@ -1,91 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _throttle = _interopRequireDefault(require("lodash/throttle"));
-var _useWindowSize = _interopRequireDefault(require("./useWindowSize"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const verticalPositions = ['top', 'bottom'];
-const horizontalPositions = ['left', 'right'];
-const findCompatiblePositions = (primary, secondaryArray) => {
-  if (verticalPositions.includes(primary)) {
-    return secondaryArray.filter(secondary => horizontalPositions.includes(secondary));
-  }
-  if (horizontalPositions.includes(primary)) {
-    return secondaryArray.filter(secondary => verticalPositions.includes(secondary));
-  }
-  return [];
-};
-const useDynamicPosition = _ref => {
-  let {
-    elementRef,
-    parentRef,
-    preferredPrimaryOrder,
-    preferredSecondaryOrder,
-    // offsetYPx,
-    offsetXPx,
-    throttleMs = 200
-  } = _ref;
-  const isClient = typeof window === 'object';
-  const {
-    height: currentHeight,
-    width: currentWidth
-  } = (0, _useWindowSize.default)();
-  const [primaryPosition, setPrimaryPosition] = (0, _react.useState)(preferredPrimaryOrder[0]);
-  const compatibleSecondaryPositions = (0, _react.useMemo)(() => findCompatiblePositions(primaryPosition, preferredSecondaryOrder), [primaryPosition, preferredSecondaryOrder]);
-  const [secondaryPosition, setSecondaryPosition] = (0, _react.useState)(compatibleSecondaryPositions[0]);
-  const handle = (0, _react.useCallback)((0, _throttle.default)(() => {
-    const parentNode = parentRef?.current;
-    const elementNode = elementRef?.current;
-    const {
-      top: parentTop,
-      bottom: parentBottom,
-      right: parentRight,
-      left: parentLeft
-    } = parentNode?.getBoundingClientRect() || {};
-    const {
-      width: elementWidth,
-      height: elementHeight
-    } = elementNode?.getBoundingClientRect() || {};
-    const availablePositions = {
-      top: parentTop >= elementHeight,
-      bottom: currentHeight - parentBottom >= elementHeight,
-      right: parentRight >= elementWidth,
-      left: currentWidth - parentLeft >= elementWidth
-    };
-    for (let i = 0; i < preferredPrimaryOrder.length; i += 1) {
-      const position = preferredPrimaryOrder[i];
-      if (availablePositions[position]) {
-        setPrimaryPosition(position);
-        break;
-      }
-    }
-    for (let i = 0; i < compatibleSecondaryPositions.length; i += 1) {
-      const position = compatibleSecondaryPositions[i];
-      if (availablePositions[position]) {
-        setSecondaryPosition(position);
-        break;
-      }
-    }
-  }, throttleMs), [elementRef, offsetXPx, throttleMs]);
-  (0, _react.useEffect)(() => {
-    if (!isClient) {
-      return false;
-    }
-    handle();
-    window.addEventListener('scroll', handle);
-    window.addEventListener('resize', handle);
-    return () => {
-      window.removeEventListener('scroll', handle);
-      window.removeEventListener('resize', handle);
-    };
-  }, [handle]);
-  return {
-    primaryPosition,
-    secondaryPosition
-  };
-};
-var _default = exports.default = useDynamicPosition;

package/dist/cjs/utils/hooks/useOutsideClick.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-const useOutsideClick = (ref, callback) => {
-  // const ref = useRef(null)
-
-  (0, _react.useEffect)(() => {
-    const handleClickOutside = event => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        callback();
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('touchstart', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
-    };
-  }, [callback]);
-};
-var _default = exports.default = useOutsideClick;

package/dist/cjs/utils/hooks/useWindowSize.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const useWindowSize = function () {
-  let debounceMs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 700;
-  const isClient = typeof window === 'object';
-  const getSize = () => ({
-    width: isClient ? window.innerWidth : undefined,
-    height: isClient ? window.innerHeight : undefined
-  });
-  const [windowSize, setWindowSize] = (0, _react.useState)(getSize);
-  const handle = (0, _react.useCallback)((0, _debounce.default)(() => {
-    setWindowSize(getSize());
-  }, debounceMs));
-  (0, _react.useEffect)(() => {
-    if (!isClient) {
-      return false;
-    }
-    window.addEventListener('resize', handle);
-    return () => window.removeEventListener('resize', handle);
-  }, [getSize, handle, isClient]);
-  return windowSize;
-};
-var _default = exports.default = useWindowSize;

package/dist/cjs/utils/index.js

@@ -1,62 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "DATE_FORMATS", {
-  enumerable: true,
-  get: function () {
-    return _formatting.DATE_FORMATS;
-  }
-});
-Object.defineProperty(exports, "applyCharacterLimit", {
-  enumerable: true,
-  get: function () {
-    return _applyCharacterLimit.applyCharacterLimit;
-  }
-});
-Object.defineProperty(exports, "formatDate", {
-  enumerable: true,
-  get: function () {
-    return _formatting.formatDate;
-  }
-});
-Object.defineProperty(exports, "formatTime", {
-  enumerable: true,
-  get: function () {
-    return _formatting.formatTime;
-  }
-});
-Object.defineProperty(exports, "parseDate", {
-  enumerable: true,
-  get: function () {
-    return _formatting.parseDate;
-  }
-});
-Object.defineProperty(exports, "snakeCaseToTitleCase", {
-  enumerable: true,
-  get: function () {
-    return _formatting.snakeCaseToTitleCase;
-  }
-});
-Object.defineProperty(exports, "useDynamicPosition", {
-  enumerable: true,
-  get: function () {
-    return _hooks.useDynamicPosition;
-  }
-});
-Object.defineProperty(exports, "useOutsideClick", {
-  enumerable: true,
-  get: function () {
-    return _hooks.useOutsideClick;
-  }
-});
-Object.defineProperty(exports, "useWindowSize", {
-  enumerable: true,
-  get: function () {
-    return _hooks.useWindowSize;
-  }
-});
-var _hooks = require("./hooks");
-var _formatting = require("./formatting");
-var _applyCharacterLimit = require("./applyCharacterLimit");

package/dist/es/a/AnimatedBlobs/AnimatedBlobs.js

@@ -1,77 +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
-
-const baseClassName = styleNames.base;
-const componentClassName = 'animated-blobs';
-
-/**
- * This is the component description.
- */
-const AnimatedBlobs = ({
-  id,
-  className: userClassName,
-  color,
-  style,
-  height,
-  width,
-  opacity
-  // ...otherProps
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-  style: {
-    ...style,
-    '--blob-color': `var(--${color})`,
-    '--height': height,
-    '--opacity': opacity,
-    '--width': width
-  }
-}, /*#__PURE__*/React.createElement("div", {
-  className: "shape-blob"
-}), /*#__PURE__*/React.createElement("div", {
-  className: "shape-blob one"
-}), /*#__PURE__*/React.createElement("div", {
-  className: "shape-blob two"
-}));
-AnimatedBlobs.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 color of the blobs
-   */
-  color: PropTypes.string,
-  /**
-   * The height of the blobs
-   */
-  height: PropTypes.string,
-  /**
-   * The width of the blobs
-   */
-  width: PropTypes.string,
-  /**
-   * The opacity of the blobs
-   */
-  opacity: PropTypes.string
-};
-AnimatedBlobs.defaultProps = {
-  color: 'background-mesh',
-  height: '200px',
-  width: '200px',
-  opacity: '0.7'
-};
-export default AnimatedBlobs;

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

@@ -1 +0,0 @@
-export { default as AnimatedBlobs } from "./AnimatedBlobs";

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

@@ -1,87 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-@keyframes transform {
-  0%,
-  100% {
-    border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%;
-  }
-
-  20% {
-    border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%;
-  }
-
-  40% {
-    border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%;
-  }
-
-  60% {
-    border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%;
-  }
-
-  80% {
-    border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%;
-  }
-}
-@keyframes movement_one {
-  0%,
-  100% {
-    transform: none;
-  }
-
-  50% {
-    transform: translate(50%, 20%) rotateY(10deg) scale(1.2);
-  }
-}
-@keyframes movement_two {
-  0%,
-  500% {
-    transform: none;
-  }
-
-  50% {
-    transform: translate(50%, 20%) rotate(-200deg) scale(1.2);
-  }
-}
-
-.#{bem.$base}.animated-blobs {
-  height: 100%;
-  left: 0;
-  top: 0;
-  width: 100%;
-
-  > .shape-blob {
-    animation:
-      transform 20s ease-in-out infinite both alternate,
-      movement_one 40s ease-in-out infinite both;
-    background: var(--blob-color);
-    border-radius: 30% 50% 20% 40%;
-    height: var(--height);
-    left: 70%;
-    opacity: var(--opacity);
-    position: absolute;
-    top: 50%;
-    width: var(--width);
-  }
-
-  > .shape-blob.one {
-    animation: transform 30s ease-in-out infinite both alternate,
-      movement_two 60s ease-in-out infinite both;
-    height: calc(var(--height) * 2.5);
-    left: -200px;
-    top: -150px;
-    transform: rotate(-180deg);
-    width: calc(var(--width) * 2.5);
-  }
-
-  > .shape-blob.two {
-    animation: transform 30s ease-in-out infinite both alternate,
-      movement_two 60s ease-in-out infinite both;
-    height: calc(var(--height) * 1.75);
-    left: 500px;
-    top: -150px;
-    transform: rotate(-180deg);
-    width: calc(var(--width) * 1.75);
-  }
-}

package/dist/es/a/AnimatedGradient/AnimatedGradient.js

@@ -1,49 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-import { useApp } from "./..";
-import { Gradient } from "./webGIRenderer";
-import "./styles.scss";
-
-// Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'animated-gradient';
-
-/**
- * This is the component description.
- */
-const AnimatedGradient = ({
-  className: userClassName
-  // ...otherProps
-}) => {
-  const {
-    userTheme
-  } = useApp();
-  const isClient = typeof window !== 'undefined';
-  useEffect(() => {
-    // Only initialize the Gradient if we're in the browser
-    if (isClient) {
-      const gradient = new Gradient();
-      gradient.initGradient('#gradient-canvas');
-    }
-  }, [userTheme]);
-  return /*#__PURE__*/React.createElement("canvas", {
-    id: "gradient-canvas",
-    "data-transition-in": true,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
-    // {...otherProps}
-  });
-};
-AnimatedGradient.propTypes = {
-  /**
-  * The HTML class names for this element
-  */
-  className: PropTypes.string
-};
-AnimatedGradient.defaultProps = {
-  // primaryColor:'heading',
-};
-export default AnimatedGradient;

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

@@ -1 +0,0 @@
-export { default as AnimatedGradient } from "./AnimatedGradient";

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

@@ -1,15 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-.#{bem.$base}.animated-gradient {
-  --gradient-color-1: var(--hard-background-mesh);
-  --gradient-color-2: var(--soft-background-mesh);
-  --gradient-color-3: var(--background-mesh);
-  --gradient-color-4: var(--soft-background-mesh);
-  background-color: var(--background-mesh);
-  height: 100%;
-  left: 0;
-  top: 0;
-  width: 100%;
-}