@amp-labs/react 1.0.0 → 1.0.2

package/build/src/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './AmpersandProvider';
 export * from './Configure';
+export * from './Connect/ConnectProvider';

package/build/src/components/index.js

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./AmpersandProvider"), exports);
 __exportStar(require("./Configure"), exports);
+__exportStar(require("./Connect/ConnectProvider"), exports);

package/build/src/context/{ApiKeyContext.d.ts → ApiKeyProvider.d.ts}

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 export declare const ApiKeyContext: import("react").Context<string | null>;
 export declare const ApiKeyProvider: import("react").Provider<string | null>;
+export declare const useApiKey: () => string;

package/build/src/context/ApiKeyProvider.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useApiKey = exports.ApiKeyProvider = exports.ApiKeyContext = void 0;
+const react_1 = require("react");
+exports.ApiKeyContext = (0, react_1.createContext)(null);
+exports.ApiKeyProvider = exports.ApiKeyContext.Provider;
+const useApiKey = () => {
+    const apiKey = (0, react_1.useContext)(exports.ApiKeyContext);
+    if (apiKey === null) {
+        throw new Error('useApiKey must be used within an ApiKeyProvider');
+    }
+    return apiKey;
+};
+exports.useApiKey = useApiKey;

package/build/src/context/ConnectionsContext.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { Connection } from '../services/api';
 interface ConnectionsContextValue {
     connections: Connection[] | null;
@@ -6,11 +6,12 @@ interface ConnectionsContextValue {
     setConnections: React.Dispatch<React.SetStateAction<Connection[] | null>>;
     setSelectedConnection: React.Dispatch<React.SetStateAction<Connection | null>>;
 }
-export declare const ConnectionsContext: React.Context<ConnectionsContextValue>;
+export declare const ConnectionsContext: import("react").Context<ConnectionsContextValue>;
 export declare const useConnections: () => ConnectionsContextValue;
 type ConnectionsProviderProps = {
-    projectId: string;
+    provider?: string;
+    groupRef: string;
     children?: React.ReactNode;
 };
-export declare function ConnectionsProvider({ projectId, children, }: ConnectionsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConnectionsProvider({ provider, groupRef, children, }: ConnectionsProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/src/context/ConnectionsContext.js

@@ -6,9 +6,10 @@ const react_1 = require("react");
 const LoadingIcon_1 = require("../assets/LoadingIcon");
 const ErrorTextBox_1 = require("../components/Configure/ErrorTextBox");
 const api_1 = require("../services/api");
-const ApiKeyContext_1 = require("./ApiKeyContext");
+const ApiKeyProvider_1 = require("./ApiKeyProvider");
 const ErrorContextProvider_1 = require("./ErrorContextProvider");
 const InstallIntegrationContext_1 = require("./InstallIntegrationContext");
+const ProjectContext_1 = require("./ProjectContext");
 exports.ConnectionsContext = (0, react_1.createContext)({
     connections: null,
     selectedConnection: null,
@@ -18,18 +19,25 @@ exports.ConnectionsContext = (0, react_1.createContext)({
 const useConnections = () => {
     const context = (0, react_1.useContext)(exports.ConnectionsContext);
     if (!context) {
-        throw new Error('useConnections must be used within a ConnectionsListProvider');
+        throw new Error('useConnections must be used within a ConnectionsProvider');
     }
     return context;
 };
 exports.useConnections = useConnections;
-function ConnectionsProvider({ projectId, children, }) {
-    const { groupRef, provider } = (0, InstallIntegrationContext_1.useInstallIntegrationProps)();
+function ConnectionsProvider({ provider, groupRef, children, }) {
+    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
+    const { projectId } = (0, ProjectContext_1.useProject)();
     const [connections, setConnections] = (0, react_1.useState)(null);
     const [selectedConnection, setSelectedConnection] = (0, react_1.useState)(null);
-    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
     const [isLoading, setLoadingState] = (0, react_1.useState)(true);
     const { setError, isError } = (0, ErrorContextProvider_1.useErrorState)();
+    const { provider: providerFromProps } = (0, InstallIntegrationContext_1.useInstallIntegrationProps)();
+    if (!projectId) {
+        throw new Error('ConnectionsProvider must be used within AmpersandProvider');
+    }
+    if (!provider && !providerFromProps) {
+        throw new Error('ConnectionsProvider must be given a provider prop or be used within InstallIntegrationProvider');
+    }
     (0, react_1.useEffect)(() => {
         (0, api_1.api)().listConnections({ projectId, groupRef, provider }, {
             headers: {

package/build/src/context/InstallIntegrationContext.d.ts

@@ -10,6 +10,7 @@ interface InstallIntegrationContextValue {
     groupName?: string;
     installation?: Installation;
     setInstallation: (installationObj: Installation) => void;
+    resetInstallations: () => void;
 }
 export declare function useInstallIntegrationProps(): InstallIntegrationContextValue;
 interface InstallIntegrationProviderProps {

package/build/src/context/InstallIntegrationContext.js

@@ -7,7 +7,7 @@ const LoadingIcon_1 = require("../assets/LoadingIcon");
 const ErrorTextBox_1 = require("../components/Configure/ErrorTextBox");
 const api_1 = require("../services/api");
 const utils_1 = require("../utils");
-const ApiKeyContext_1 = require("./ApiKeyContext");
+const ApiKeyProvider_1 = require("./ApiKeyProvider");
 const ErrorContextProvider_1 = require("./ErrorContextProvider");
 const IntegrationListContext_1 = require("./IntegrationListContext");
 const ProjectContext_1 = require("./ProjectContext");
@@ -22,6 +22,7 @@ const InstallIntegrationContext = (0, react_1.createContext)({
     groupName: '',
     installation: undefined,
     setInstallation: () => { },
+    resetInstallations: () => { },
 });
 // Create a custom hook to access the props
 function useInstallIntegrationProps() {
@@ -34,14 +35,14 @@ function useInstallIntegrationProps() {
 exports.useInstallIntegrationProps = useInstallIntegrationProps;
 // Wrap your parent component with the context provider
 function InstallIntegrationProvider({ children, integration, consumerRef, consumerName, groupRef, groupName, }) {
+    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
     const { projectId } = (0, ProjectContext_1.useProject)();
-    const [installations, setInstallations] = (0, react_1.useState)([]);
-    const installation = (installations === null || installations === void 0 ? void 0 : installations[0]) || null; // there should only be one installation for mvp
-    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
     const { integrations } = (0, IntegrationListContext_1.useIntegrationList)();
-    const integrationObj = (0, react_1.useMemo)(() => (0, utils_1.findIntegrationFromList)(integration, integrations || []), [integration, integrations]);
+    const [installations, setInstallations] = (0, react_1.useState)([]);
     const [isLoading, setLoadingState] = (0, react_1.useState)(true);
     const { setError, isError } = (0, ErrorContextProvider_1.useErrorState)();
+    const installation = (installations === null || installations === void 0 ? void 0 : installations[0]) || null; // there should only be one installation for mvp
+    const integrationObj = (0, react_1.useMemo)(() => (0, utils_1.findIntegrationFromList)(integration, integrations || []), [integration, integrations]);
     (0, react_1.useEffect)(() => {
         if (integrationObj === null && (integrations === null || integrations === void 0 ? void 0 : integrations.length)) {
             console.error(`Integration "${integration}" not found in integration list`);
@@ -52,9 +53,7 @@ function InstallIntegrationProvider({ children, integration, consumerRef, consum
     const setInstallation = (0, react_1.useCallback)((installationObj) => {
         setInstallations([installationObj]);
     }, [setInstallations]);
-    const integrationErrorKey = (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id) || '';
-    // check if integration has been installed in AmpersandProvider
-    (0, react_1.useEffect)(() => {
+    const resetInstallations = (0, react_1.useCallback)(() => {
         if (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id) {
             // check if installation exists on selected integration
             (0, api_1.api)().listInstallations({ projectId, integrationId: integrationObj.id, groupRef }, {
@@ -72,7 +71,12 @@ function InstallIntegrationProvider({ children, integration, consumerRef, consum
                 console.error('Error retrieving installation information: ', err);
             });
         }
-    }, [projectId, integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id, apiKey, groupRef, setError]);
+    }, [integrationObj, projectId, apiKey, setError, groupRef]);
+    const integrationErrorKey = (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id) || '';
+    // check if integration has been installed in AmpersandProvider
+    (0, react_1.useEffect)(() => {
+        resetInstallations();
+    }, [resetInstallations]);
     const props = (0, react_1.useMemo)(() => ({
         integrationId: (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id) || '',
         provider: (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.provider) || '',
@@ -83,8 +87,9 @@ function InstallIntegrationProvider({ children, integration, consumerRef, consum
         groupName,
         installation,
         setInstallation,
+        resetInstallations,
     }), [integrationObj, consumerRef, consumerName, groupRef,
-        groupName, installation, setInstallation]);
+        groupName, installation, setInstallation, resetInstallations]);
     return (isError(ErrorContextProvider_1.ErrorBoundary.INSTALLATION_LIST, integrationErrorKey)) ? (0, jsx_runtime_1.jsx)(ErrorTextBox_1.ErrorTextBox, { message: `Error retrieving installation information for integration "${(integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.name) || 'unknown'}"` }) : ((0, jsx_runtime_1.jsx)(InstallIntegrationContext.Provider, { value: props, children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingIcon_1.LoadingIcon, {}) : children }));
 }
 exports.InstallIntegrationProvider = InstallIntegrationProvider;

package/build/src/context/IntegrationListContext.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const LoadingIcon_1 = require("../assets/LoadingIcon");
 const ErrorTextBox_1 = require("../components/Configure/ErrorTextBox");
 const api_1 = require("../services/api");
-const ApiKeyContext_1 = require("./ApiKeyContext");
+const ApiKeyProvider_1 = require("./ApiKeyProvider");
 const ErrorContextProvider_1 = require("./ErrorContextProvider");
 exports.IntegrationListContext = (0, react_1.createContext)({
     integrations: null,
@@ -20,9 +20,9 @@ const useIntegrationList = () => {
 };
 exports.useIntegrationList = useIntegrationList;
 function IntegrationListProvider({ projectId, children }) {
-    const [integrations, setIntegrations] = (0, react_1.useState)(null);
-    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
+    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
     const { setError, isError } = (0, ErrorContextProvider_1.useErrorState)();
+    const [integrations, setIntegrations] = (0, react_1.useState)(null);
     const [isLoading, setLoadingState] = (0, react_1.useState)(true);
     (0, react_1.useEffect)(() => {
         (0, api_1.api)().listIntegrations({ projectId }, {

package/build/src/context/ProjectContext.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const LoadingIcon_1 = require("../assets/LoadingIcon");
 const ErrorTextBox_1 = require("../components/Configure/ErrorTextBox");
 const api_1 = require("../services/api");
-const ApiKeyContext_1 = require("./ApiKeyContext");
+const ApiKeyProvider_1 = require("./ApiKeyProvider");
 const ErrorContextProvider_1 = require("./ErrorContextProvider");
 exports.ProjectContext = (0, react_1.createContext)({
     project: null,
@@ -22,10 +22,10 @@ const useProject = () => {
 };
 exports.useProject = useProject;
 function ProjectProvider({ projectId, children }) {
+    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
+    const { isError, setError } = (0, ErrorContextProvider_1.useErrorState)();
     const [project, setProject] = (0, react_1.useState)(null);
-    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
     const [isLoading, setLoadingState] = (0, react_1.useState)(true);
-    const { isError, setError } = (0, ErrorContextProvider_1.useErrorState)();
     (0, react_1.useEffect)(() => {
         (0, api_1.api)().getProject({ projectId }, {
             headers: {

package/build/src/hooks/useIsIntegrationInstalled.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsIntegrationInstalled = void 0;
 const react_1 = require("react");
-const ApiKeyContext_1 = require("../context/ApiKeyContext");
+const ApiKeyProvider_1 = require("../context/ApiKeyProvider");
 const IntegrationListContext_1 = require("../context/IntegrationListContext");
 const ProjectContext_1 = require("../context/ProjectContext");
 const api_1 = require("../services/api");
 const useIsIntegrationInstalled = (integration, groupRef) => {
-    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
+    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
     const { projectId } = (0, ProjectContext_1.useProject)();
     const { integrations } = (0, IntegrationListContext_1.useIntegrationList)();
     const [isLoaded, setIsLoaded] = (0, react_1.useState)(false);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@amp-labs/react",
-  "version": "1.0.0",
-  "description": "Ampersand React library.",
+  "version": "1.0.2",
+  "description": "Ampersand React library",
   "author": {
     "name": "Ampersand Labs",
     "url": "http://withampersand.com"
@@ -56,7 +56,7 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-n": "^16.2.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
@@ -75,6 +75,7 @@
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
+    "immer": "^10.0.3",
     "lodash.isequal": "^4.5.0"
   }
 }

package/build/src/context/ApiKeyContext.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ApiKeyProvider = exports.ApiKeyContext = void 0;
-const react_1 = require("react");
-exports.ApiKeyContext = (0, react_1.createContext)(null);
-exports.ApiKeyProvider = exports.ApiKeyContext.Provider;