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

package/dist/es/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js

@@ -0,0 +1,71 @@
+/**
+ * @flow
+ */
+
+/* eslint-disable */
+'use strict';
+/*::
+import type { ConcreteRequest } from 'relay-runtime';
+export type QueryLoaderHelloQueryVariables = {||};
+export type QueryLoaderHelloQueryResponse = {|
+  +hello: ?string
+|};
+export type QueryLoaderHelloQuery = {|
+  variables: QueryLoaderHelloQueryVariables,
+  response: QueryLoaderHelloQueryResponse,
+|};
+*/
+
+/*
+query QueryLoaderHelloQuery {
+  hello
+}
+*/
+
+const node
+/*: ConcreteRequest*/
+= function () {
+  var v0 = [{
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "hello",
+    "storageKey": null
+  }];
+  return {
+    "fragment": {
+      "argumentDefinitions": [],
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "QueryLoaderHelloQuery",
+      "selections": v0
+      /*: any*/
+      ,
+      "type": "Query",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": [],
+      "kind": "Operation",
+      "name": "QueryLoaderHelloQuery",
+      "selections": v0
+      /*: any*/
+
+    },
+    "params": {
+      "cacheID": "463f9ee8a82dd6ec8dedeb28649cce74",
+      "id": null,
+      "metadata": {},
+      "name": "QueryLoaderHelloQuery",
+      "operationKind": "query",
+      "text": "query QueryLoaderHelloQuery {\n  hello\n}\n"
+    }
+  };
+}(); // prettier-ignore
+
+
+node
+/*: any*/
+.hash = 'b92d001ab0208bd484a99f77c274d5ef';
+module.exports = node;

package/dist/es/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.js

@@ -0,0 +1,31 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { usePreloadedQuery } from 'react-relay';
+/**
+ * This is the component description.
+ */
+
+const PreloadedTestData = ({
+  query,
+  queryReference // ...otherProps
+
+}) => {
+  const data = usePreloadedQuery(query, queryReference);
+  return /*#__PURE__*/React.createElement("pre", null, JSON.stringify(data, null, 2));
+};
+
+PreloadedTestData.propTypes = {
+  /**
+   * The query to be used to query the test data
+   */
+  query: PropTypes.objectOf(PropTypes.PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
+
+  /**
+   *  The query reference to be used to access the preloaded data
+   */
+  queryReference: PropTypes.objectOf(PropTypes.PropTypes.oneOfType([PropTypes.string, PropTypes.object]))
+};
+PreloadedTestData.defaultProps = {// someProp:false
+};
+export default PreloadedTestData;

package/dist/es/test/QueryLoader/common/PreloadedTestData/index.js

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

package/dist/es/test/QueryLoader/common/index.js

@@ -0,0 +1 @@
+export { PreloadedTestData } from "./PreloadedTestData";

package/dist/es/test/QueryLoader/index.js

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

package/dist/es/test/index.js

@@ -0,0 +1 @@
+export { QueryLoader } from "./QueryLoader";

package/dist/es/utils/hooks/index.js

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

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

@@ -0,0 +1,93 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import throttle from 'lodash/throttle';
+import useWindowSize from "./useWindowSize";
+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 = ({
+  elementRef,
+  parentRef,
+  preferredPrimaryOrder,
+  preferredSecondaryOrder,
+  // offsetYPx,
+  offsetXPx,
+  throttleMs = 200
+}) => {
+  const isClient = typeof window === 'object';
+  const {
+    height: currentHeight,
+    width: currentWidth
+  } = useWindowSize();
+  const [primaryPosition, setPrimaryPosition] = useState(preferredPrimaryOrder[0]);
+  const compatibleSecondaryPositions = useMemo(() => findCompatiblePositions(primaryPosition, preferredSecondaryOrder), [primaryPosition, preferredSecondaryOrder]);
+  const [secondaryPosition, setSecondaryPosition] = useState(compatibleSecondaryPositions[0]);
+  const handle = useCallback(throttle(() => {
+    const parentNode = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
+    const elementNode = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
+    const {
+      top: parentTop,
+      bottom: parentBottom,
+      right: parentRight,
+      left: parentLeft
+    } = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.getBoundingClientRect()) || {};
+    const {
+      width: elementWidth,
+      height: elementHeight
+    } = (elementNode === null || elementNode === void 0 ? void 0 : 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]);
+  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
+  };
+};
+
+export default useDynamicPosition;

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

@@ -0,0 +1,27 @@
+import { useCallback, useState, useEffect } from 'react';
+import debounce from 'lodash/debounce';
+
+const useWindowSize = (debounceMs = 700) => {
+  const isClient = typeof window === 'object';
+
+  const getSize = () => ({
+    width: isClient ? window.innerWidth : undefined,
+    height: isClient ? window.innerHeight : undefined
+  });
+
+  const [windowSize, setWindowSize] = useState(getSize);
+  const handle = useCallback(debounce(() => {
+    setWindowSize(getSize());
+  }, debounceMs));
+  useEffect(() => {
+    if (!isClient) {
+      return false;
+    }
+
+    window.addEventListener('resize', handle);
+    return () => window.removeEventListener('resize', handle);
+  }, [getSize, handle, isClient]);
+  return windowSize;
+};
+
+export default useWindowSize;

package/dist/es/utils/index.js

@@ -0,0 +1 @@
+export { useWindowSize, useDynamicPosition } from "./hooks";

package/dist/es/utils/relay/EnvironmentProvider.js

@@ -0,0 +1,11 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { RelayEnvironmentProvider } from 'react-relay/hooks';
+import environment from "./environment";
+
+const RelayEnvProvider = props => /*#__PURE__*/React.createElement(RelayEnvironmentProvider, _extends({
+  environment: environment
+}, props));
+
+export default RelayEnvProvider;

package/dist/es/utils/relay/environment.js

@@ -0,0 +1,3 @@
+import { createMockEnvironment } from 'relay-test-utils';
+const environment = createMockEnvironment();
+export default environment;

package/dist/es/utils/relay/index.js

@@ -0,0 +1,4 @@
+export { default as RelayEnvironmentProvider } from "./EnvironmentProvider";
+export { default as environment } from "./environment";
+export { default as mockResolvers } from "./mockResolvers";
+export { default as mockRelayOperation } from "./mockRelayOperation";

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

@@ -0,0 +1,9 @@
+import { MockPayloadGenerator } from 'relay-test-utils';
+import relayEnvironment from "./environment";
+import mockResolvers from "./mockResolvers";
+
+function mockRelayOperation(overrideMockResolvers = null) {
+  relayEnvironment.mock.queueOperationResolver(operation => MockPayloadGenerator.generate(operation, overrideMockResolvers || mockResolvers));
+}
+
+export default mockRelayOperation;

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

@@ -0,0 +1,275 @@
+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',
+    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 => {
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.7",
+  "version": "2.0.0-alpha.71",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -33,7 +33,11 @@
     "link:assets": "npm link @pareto-engineering/assets",
     "link:bem": "npm link @pareto-engineering/bem",
     "link:styles": "npm link @pareto-engineering/styles",
-    "link:all": "npm run link:bem && npm run link:styles && npm run link:assets"
+    "link:all": "npm run link:bem && npm run link:styles && npm run link:assets",
+    "relay": "relay-compiler",
+    "fetch-schema:dev": "node scripts/fetchSchema.js",
+    "fetch-schema:prod": "node scripts/fetchSchema.js -- --ref production",
+    "fetch-schema": "npm run fetch-schema:prod"
   },
   "keywords": [],
   "author": "",
@@ -52,6 +56,7 @@
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-relay": "^13.2.0",
     "chromatic": "^5.9.2",
     "copyfiles": "^2.4.1",
     "css-mqpacker": "^7.0.0",
@@ -59,11 +64,13 @@
     "eslint": "^7.30.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-import-resolver-babel-module": "^5.3.1",
+    "eslint-plugin-graphql": "^4.0.0",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "faker": "^5.5.3",
+    "graphql": "^15.8.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.0.6",
     "jsonlint": "^1.6.3",
@@ -72,6 +79,8 @@
     "postcss-cli": "^8.3.1",
     "postcss-preset-env": "^6.7.0",
     "postcss-scss": "^4.0.0",
+    "relay-compiler": "^11.0.2",
+    "relay-config": "^11.0.2",
     "sass": "^1.35.1",
     "sass-loader": "=10.1.1",
     "storybook-addon-themes": "^6.1.0",
@@ -79,19 +88,24 @@
     "stylelint-config-palantir": "^5.1.0"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^2.0.0-alpha.3",
+    "@pareto-engineering/assets": "^2.0.0-alpha.24",
     "@pareto-engineering/bem": "^0.1.5",
-    "@pareto-engineering/styles": "^2.0.0-alpha.4",
+    "@pareto-engineering/styles": "^2.0.0-alpha.8",
     "date-fns": "^2.22.1",
+    "downshift": "^6.1.7",
     "formik": "^2.2.9",
     "hamburgers": "^1.1.3",
+    "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-countup": "^4.4.0",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
+    "react-relay": "^11.0.2",
     "react-router-dom": "^5.2.0",
     "react-visibility-sensor": "^5.1.1",
+    "relay-runtime": "^11.0.2",
+    "relay-test-utils": "^11.0.2",
     "swiper": "^6.7.5",
     "typed.js": "^2.0.12"
   },

package/relay.config.js

@@ -0,0 +1,12 @@
+const { resolve } = require('path')
+
+// If you're reading this file for the first time, please read this toroughly https://mrtnzlml.com/docs/relay
+
+module.exports = {
+  src     :resolve(__dirname, './src'),
+  schema  :resolve(__dirname, './schema.graphql'),
+  exclude :['**/node_modules/**', '**/__mocks__/**', '**/__generated__/**'],
+  watchman:true,
+  verbose :true,
+  // language:typescript
+}