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

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var useWindowSize = function useWindowSize() {
+  var debounceMs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 700;
+  var isClient = typeof window === 'object';
+  var getSize = () => ({
+    width: isClient ? window.innerWidth : undefined,
+    height: isClient ? window.innerHeight : undefined
+  });
+  var [windowSize, setWindowSize] = (0, _react.useState)(getSize);
+  var 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 = useWindowSize;
+exports.default = _default;

package/dist/cjs/utils/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useDynamicPosition", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useDynamicPosition;
+  }
+});
+Object.defineProperty(exports, "useWindowSize", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useWindowSize;
+  }
+});
+var _hooks = require("./hooks");

package/dist/es/a/Alert/Alert.js

@@ -0,0 +1,112 @@
+/* @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 "../../b";
+import styleNames from '@pareto-engineering/bem';
+
+// Local Definitions
+
+// Detect some change
+
+const baseClassName = styleNames.base;
+const componentClassName = 'alert';
+
+/**
+ * This is the component description.
+ */
+const Alert = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    type,
+    withCloseIcon,
+    primaryPosition,
+    secondaryPosition,
+    autoCloseMs,
+    width
+    // ...otherProps
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const [hideAlert, setHideAlert] = useState(false);
+  const handleCloseAlert = () => setHideAlert(true);
+  useEffect(() => {
+    if (autoCloseMs) {
+      setTimeout(() => {
+        setHideAlert(true);
+      }, autoCloseMs);
+    }
+  }, [autoCloseMs]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `x-${type}`, hideAlert && 'hide', primaryPosition, secondaryPosition].filter(e => e).join(' '),
+    style: {
+      ...style,
+      '--width': width
+    }
+    // {...otherProps}
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "bar"
+  }), withCloseIcon && /*#__PURE__*/React.createElement("div", {
+    className: "close"
+  }, /*#__PURE__*/React.createElement(Button, {
+    isSimple: true,
+    color: "heading",
+    onClick: handleCloseAlert
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "f-icons"
+  }, "Y"))), /*#__PURE__*/React.createElement("div", {
+    className: "content"
+  }, children));
+};
+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/dist/es/a/Alert/index.js

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

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

@@ -0,0 +1,98 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect, useCallback } from 'react';
+import CountUp from 'react-countup';
+import VisibilitySensor from 'react-visibility-sensor';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem';
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'animated-counter';
+
+/**
+ * This is the component description
+ */
+const AnimatedCounter = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    color,
+    number,
+    before,
+    after,
+    delay
+    // ...otherProps
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const countDecimals = useCallback(value => {
+    if (value % 1 !== 0) return value.toString().split('.')[1].length;
+    return 0;
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+    style: style
+    // {...otherProps}
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "count s3"
+  }, before && /*#__PURE__*/React.createElement("span", null, before), /*#__PURE__*/React.createElement(CountUp, {
+    end: number,
+    delay: delay,
+    decimals: countDecimals(number),
+    redraw: true
+  }, _ref2 => {
+    let {
+      countUpRef,
+      start
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(VisibilitySensor, {
+      onChange: start,
+      delayedCall: true
+    }, /*#__PURE__*/React.createElement("span", {
+      ref: countUpRef
+    }));
+  }), after && /*#__PURE__*/React.createElement("span", null, after)));
+};
+AnimatedCounter.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 count color
+   */
+  color: PropTypes.string,
+  /**
+   *  The review count value
+   */
+  number: PropTypes.number,
+  /**
+   *  The unit before the number
+   */
+  before: PropTypes.string,
+  /**
+   *  The unit after the number
+   */
+  after: PropTypes.string,
+  /**
+   *  react counter delay
+   */
+  delay: PropTypes.number
+};
+AnimatedCounter.defaultProps = {
+  color: 'main1'
+};
+export default AnimatedCounter;

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

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

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

@@ -0,0 +1,16 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+//@use "@aztlan/stylebook/src/mixins";
+//@use "@aztlan/stylebook/src/globals" as *;
+
+.#{bem.$base}.animated-counter {
+  display: flex;
+  justify-content: center;
+
+  .count {
+    color: var(--x);
+  }
+}
+
+

package/dist/es/a/AppContext/ContextProvider.js

@@ -0,0 +1,78 @@
+/* @pareto-engineering/generator-front 0.2.3 */
+import * as React from 'react';
+import { useReducer } from 'react';
+import PropTypes from 'prop-types';
+import useTheme from "./useTheme";
+
+// Package-level Imports
+import Context from "./Context";
+
+// Component-level imports
+
+// Helper Definitions
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'UPDATE_STATE':
+      return {
+        ...state,
+        ...action.payload
+      };
+    default:
+      return state;
+  }
+};
+const AppContextProvider = _ref => {
+  let {
+    children,
+    initialTheme,
+    config,
+    initialState
+    // ...otherProps
+  } = _ref;
+  const theme = useTheme(initialTheme);
+  const [state, dispatch] = useReducer(reducer, initialState);
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: {
+      state,
+      dispatch,
+      ...config,
+      ...theme
+    }
+  }, children);
+};
+AppContextProvider.propTypes = {
+  /**
+   *  The children JSX
+   */
+  children: PropTypes.node,
+  /**
+   * The initial theme for the website. If undefined, fallbacks on system preference.
+   */
+  initialTheme: PropTypes.string,
+  /**
+   * A dictionnary containing settings and preferences to be used application-wide
+   */
+  config: PropTypes.shape({
+    APP: PropTypes.shape({
+      NAME: PropTypes.string.isRequired,
+      CANONICAL: PropTypes.string.isRequired,
+      SUPPORT_EMAIL: PropTypes.string,
+      TITLE_SUFFIX: PropTypes.string
+    }),
+    SOCIAL: PropTypes.shape({
+      FACEBOOK: PropTypes.string,
+      INSTAGRAM: PropTypes.string,
+      YOUTUBE: PropTypes.string
+    }),
+    CONSTANTS: PropTypes.shape({})
+  }).isRequired,
+  /**
+   * Application context initial state
+   */
+  initialState: PropTypes.objectOf(PropTypes.string)
+};
+AppContextProvider.defaultProps = {
+  initialState: {}
+};
+export default AppContextProvider;

package/dist/es/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/dist/es/a/{SiteContext → AppContext}/useTheme.js

@@ -1,32 +1,36 @@
-import { useState, useEffect } from 'react';
-export default ((initialTheme, storageKey = 'theme') => {
+import { useCallback, useState, useEffect } from 'react';
+export default (function (initialTheme) {
+  let storageKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'theme';
   const isClient = typeof window === 'object';
   const [preferredTheme, setPreferredTheme] = useState(initialTheme);
   const [userTheme, setUserTheme] = useState();
   useEffect(() => {
     const storage = window.localStorage;
-
     if (isClient) {
-      const storedTheme = window.localStorage.getItem(storageKey); // console.log(storedTheme, storedTheme != userTheme)
-
+      const storedTheme = window.localStorage.getItem(storageKey);
+      // console.log(storedTheme, storedTheme != userTheme)
       if (storedTheme && storedTheme !== userTheme) {
         // console.warn('Theme load')
         setPreferredTheme(storedTheme);
         setUserTheme(storedTheme);
       } else if (preferredTheme && preferredTheme.length && preferredTheme !== 'system') {
         setUserTheme(preferredTheme);
-        storage.setItem(storageKey, preferredTheme); // console.warn('theme change', preferredTheme)
+        storage.setItem(storageKey, preferredTheme);
+        // console.warn('theme change', preferredTheme)
       } else {
         setUserTheme(window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');
-        storage.removeItem(storageKey); // console.warn('theme reset')
+        storage.removeItem(storageKey);
+        // console.warn('theme reset')
       }
     } else {
       setUserTheme('light');
     }
   }, [preferredTheme, isClient]);
+  const isTheme = useCallback(theme => userTheme === theme || undefined, [userTheme]);
   return {
     userTheme,
     preferredTheme,
-    setPreferredTheme
+    setPreferredTheme,
+    isTheme
   };
 });

package/dist/es/a/BackgroundGradient/BackgroundGradient.js

@@ -0,0 +1,56 @@
+/* @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 = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    height
+    // ...otherProps
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("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/dist/es/a/BackgroundGradient/index.js

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

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

@@ -0,0 +1,61 @@
+/* @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 { Section } from "./common";
+const baseClassName = styleNames.base;
+const componentClassName = 'content-card';
+
+/**
+ * This is the component description.
+ */
+const ContentCard = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    color,
+    children
+    // messages,
+    // ...otherProps
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`, 'u1'].filter(e => e).join(' '),
+    style: style
+  }, children);
+};
+ContentCard.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),
+  /**
+  * Base color
+  */
+  color: PropTypes.string,
+  /**
+   * The children jsx
+   */
+  children: PropTypes.node
+};
+ContentCard.defaultProps = {
+  color: 'background2'
+};
+ContentCard.Section = Section;
+export default ContentCard;

package/dist/es/a/ContentCard/common/Section/Section.js

@@ -0,0 +1,59 @@
+/* @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
+
+const baseClassName = styleNames.base;
+const componentClassName = 'section';
+
+/**
+ * This is the component description.
+ */
+const Section = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    layout,
+    contentAfter
+    // ...otherProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, layout === 'left' && 'layout-left', layout === 'right' && 'layout-right', layout === 'center' && 'layout-center', contentAfter && 'content-after'].filter(e => e).join(' '),
+    style: style
+  }, children);
+};
+Section.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,
+  /**
+   * The main content position
+   */
+  layout: PropTypes.oneOf(['left', 'right', 'center']),
+  /**
+   * Whether content should appear before or after illustration
+   */
+  contentAfter: PropTypes.bool
+};
+Section.defaultProps = {
+  contentAfter: false
+};
+export default Section;