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

package/dist/cjs/utils/relay/mockRelayOperation.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _relayTestUtils = require("relay-test-utils");
+
+var _environment = _interopRequireDefault(require("./environment"));
+
+var _mockResolvers = _interopRequireDefault(require("./mockResolvers"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function mockRelayOperation() {
+  var overrideMockResolvers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
+  _environment.default.mock.queueOperationResolver(operation => _relayTestUtils.MockPayloadGenerator.generate(operation, overrideMockResolvers || _mockResolvers.default));
+}
+
+var _default = mockRelayOperation;
+exports.default = _default;

package/dist/cjs/utils/relay/mockResolvers.js

@@ -0,0 +1,282 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var 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',
+    updatedAt: '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 => {
+    var {
+      args: {
+        first,
+        offset
+      }
+    } = allArgs;
+    var 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'
+        }
+      }
+    }]
+  })
+};
+var _default = customMockResolvers;
+exports.default = _default;

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

@@ -0,0 +1,118 @@
+/* @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
+
+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 /*#__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/{c/SiteFooter/common/Section → a/Alert}/index.js

@@ -1,2 +1,2 @@
 /* @pareto-engineering/generator-front 1.0.12 */
-export { default as Section } from "./Section";
+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/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 = ({
+  children,
+  initialTheme,
+  config,
+  initialState // ...otherProps
+
+}) => {
+  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/AppContext/useTheme.js

@@ -0,0 +1,34 @@
+import { useCallback, useState, useEffect } from 'react';
+export default ((initialTheme, storageKey = '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)
+
+      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)
+      } else {
+        setUserTheme(window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');
+        storage.removeItem(storageKey); // console.warn('theme reset')
+      }
+    } else {
+      setUserTheme('light');
+    }
+  }, [preferredTheme, isClient]);
+  const isTheme = useCallback(theme => userTheme === theme || undefined, [userTheme]);
+  return {
+    userTheme,
+    preferredTheme,
+    setPreferredTheme,
+    isTheme
+  };
+});

package/dist/es/{c/SiteFooter/SiteFooter.js → a/BackgroundGradient/BackgroundGradient.js}

@@ -2,34 +2,34 @@
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem';
-import { Section } from "./common"; // Local Definitions
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
 
 const baseClassName = styleNames.base;
-const componentClassName = 'site-footer';
+const componentClassName = 'background-gradient';
 /**
  * This is the component description.
  */
 
-const SiteFooter = ({
+const BackgroundGradient = ({
   id,
   className: userClassName,
   style,
-  children // ...otherProps
+  height // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
-  return /*#__PURE__*/React.createElement("footer", {
+  return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, children);
+    style: { ...style,
+      '--gradient-height': height
+    }
+  });
 };
 
-SiteFooter.propTypes = {
+BackgroundGradient.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -46,11 +46,10 @@ SiteFooter.propTypes = {
   style: PropTypes.objectOf(PropTypes.string),
 
   /**
-   *  The children JSX
+   * The height of the shape.
    */
-  children: PropTypes.node
+  height: PropTypes.string
 };
-SiteFooter.defaultProps = {// someProp:false
+BackgroundGradient.defaultProps = {// someProp: false,
 };
-SiteFooter.Section = Section;
-export default SiteFooter;
+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";