@amp-labs/react 1.0.0

package/build/src/context/ProjectContext.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProjectProvider = exports.useProject = exports.ProjectContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 ErrorContextProvider_1 = require("./ErrorContextProvider");
+exports.ProjectContext = (0, react_1.createContext)({
+    project: null,
+    appName: '',
+    projectId: '',
+});
+const useProject = () => {
+    const context = (0, react_1.useContext)(exports.ProjectContext);
+    if (!context) {
+        throw new Error('useProject must be used within a ProjectProvider');
+    }
+    return context;
+};
+exports.useProject = useProject;
+function ProjectProvider({ projectId, children }) {
+    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: {
+                'X-Api-Key': apiKey !== null && apiKey !== void 0 ? apiKey : '',
+            },
+        }).then((_project) => {
+            setLoadingState(false);
+            setProject(_project);
+        }).catch((err) => {
+            setError(ErrorContextProvider_1.ErrorBoundary.PROJECT, projectId);
+            setLoadingState(false);
+            console.error('Error loading Ampersand project: ', err);
+        });
+    }, [projectId, apiKey, setLoadingState, setError]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        projectId, project, appName: (project === null || project === void 0 ? void 0 : project.appName) || '',
+    }), [projectId, project]);
+    return (isError(ErrorContextProvider_1.ErrorBoundary.PROJECT, projectId)
+        ? (0, jsx_runtime_1.jsx)(ErrorTextBox_1.ErrorTextBox, { message: `Error loading project ${projectId}` })
+        : ((0, jsx_runtime_1.jsx)(exports.ProjectContext.Provider, { value: contextValue, children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingIcon_1.LoadingIcon, {}) : children })));
+}
+exports.ProjectProvider = ProjectProvider;

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

@@ -0,0 +1 @@
+export * from './useIsIntegrationInstalled';

package/build/src/hooks/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useIsIntegrationInstalled"), exports);

package/build/src/hooks/useIsIntegrationInstalled.d.ts

@@ -0,0 +1,6 @@
+interface UseIsIntegrationInstalledResult {
+    isLoaded: boolean;
+    isIntegrationInstalled: boolean | null;
+}
+export declare const useIsIntegrationInstalled: (integration: string, groupRef: string) => UseIsIntegrationInstalledResult;
+export {};

package/build/src/hooks/useIsIntegrationInstalled.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsIntegrationInstalled = void 0;
+const react_1 = require("react");
+const ApiKeyContext_1 = require("../context/ApiKeyContext");
+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 { projectId } = (0, ProjectContext_1.useProject)();
+    const { integrations } = (0, IntegrationListContext_1.useIntegrationList)();
+    const [isLoaded, setIsLoaded] = (0, react_1.useState)(false);
+    const [isIntegrationInstalled, setIsIntegrationInstalled] = (0, react_1.useState)(null);
+    if (!apiKey || !projectId) {
+        throw new Error('useIsIntegrationInstalled must be used within AmpersandProvider');
+    }
+    if (!integration) {
+        throw new Error('useIsIntegrationInstalled requires an integration name');
+    }
+    if (!groupRef) {
+        throw new Error('useIsIntegrationInstalled requires a groupRef');
+    }
+    const integrationToCheck = (0, react_1.useMemo)(() => integrations === null || integrations === void 0 ? void 0 : integrations.reduce((acc, _integration) => ((_integration === null || _integration === void 0 ? void 0 : _integration.name) === integration
+        ? _integration
+        : acc), {}), [integrations, integration]);
+    (0, react_1.useEffect)(() => {
+        if (!integrationToCheck)
+            return;
+        (0, api_1.api)().listInstallations({
+            projectId,
+            integrationId: integrationToCheck.id,
+            groupRef,
+        }, {
+            headers: {
+                'x-api-key': apiKey,
+            },
+        }).then((installationList) => {
+            setIsLoaded(true);
+            setIsIntegrationInstalled(installationList.length > 0);
+        }).catch((err) => {
+            console.error('Error listing installations: ', err);
+            setIsLoaded(true);
+        });
+    }, [groupRef, apiKey, projectId, integrationToCheck]);
+    return { isLoaded, isIntegrationInstalled };
+};
+exports.useIsIntegrationInstalled = useIsIntegrationInstalled;

package/build/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './hooks';

package/build/src/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./hooks"), exports);

package/build/src/services/api.d.ts

@@ -0,0 +1,9 @@
+import { Config, Connection, CreateInstallationOperationRequest, CreateInstallationRequestConfig, DefaultApi, HydratedIntegrationField, HydratedIntegrationFieldExistent, HydratedIntegrationObject, HydratedIntegrationRead, HydratedRevision, Installation, Integration, IntegrationFieldMapping, Project, ProviderApp, UpdateInstallationOperationRequest, UpdateInstallationRequestInstallationConfig } from '../../generated-sources/api/src';
+export declare const AMP_SERVER: string;
+export declare const AMP_API_ROOT: string;
+export declare const setApi: (api: DefaultApi) => void;
+export declare const api: () => DefaultApi;
+/**
+   * Types exported from generated api
+   */
+export type { Config, Connection, CreateInstallationOperationRequest, CreateInstallationRequestConfig, HydratedIntegrationRead, HydratedIntegrationObject, HydratedIntegrationField, HydratedRevision, Installation, Integration, HydratedIntegrationFieldExistent, IntegrationFieldMapping, Project, ProviderApp, UpdateInstallationOperationRequest, UpdateInstallationRequestInstallationConfig, };

package/build/src/services/api.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.api = exports.setApi = exports.AMP_API_ROOT = exports.AMP_SERVER = void 0;
+/* eslint-disable import/no-relative-packages */
+// currently not using a bundler to support alias imports
+const src_1 = require("../../generated-sources/api/src");
+/**
+   * To update the api you need to
+   * 1. git clone `https://github.com/amp-labs/server` into a sibling directory
+   * 2. run `yarn generate-api`
+   *
+   */
+/**
+   * When we run ```prism mock -d ./openapi/api.yaml```, prism will mock a server
+   * based on the api.yaml swagger (open-api v2) spec
+   *
+   * */
+const VERSION = 'v1';
+function getApiEndpoint() {
+    var _a;
+    switch (process.env.REACT_APP_AMP_SERVER) {
+        case 'local':
+            return 'http://localhost:8080';
+        case 'dev':
+            return 'https://dev-api.withampersand.com';
+        case 'staging':
+            return 'https://staging-api.withampersand.com';
+        case 'prod':
+            return 'https://api.withampersand.com';
+        case 'mock':
+            return 'http://127.0.0.1:4010';
+        case '':
+            return 'https://api.withampersand.com';
+        default:
+            // The user may provide an arbitrary URL here if they want to, or else the
+            // default prod url will be used.
+            return (_a = process.env.REACT_APP_AMP_SERVER) !== null && _a !== void 0 ? _a : 'https://api.withampersand.com';
+    }
+}
+const getApiRoot = (server, version) => `${server}/${version}`;
+// REACT_APP_AMP_SERVER=local npm start will use the local server
+function assignRoot() {
+    return getApiRoot(getApiEndpoint(), VERSION);
+}
+exports.AMP_SERVER = getApiEndpoint();
+exports.AMP_API_ROOT = assignRoot();
+/**
+   * we can modify the authentication, baseURL and other configurations to access
+   * our API in the future
+   *
+   * When in dev mode we want to mock the PRISM_MOCK_URL
+   *
+   * */
+const config = new src_1.Configuration({
+    basePath: exports.AMP_API_ROOT,
+});
+let apiValue = new src_1.DefaultApi(config);
+// For testing, etc. we may want to use a different API configuration than the default
+const setApi = (api) => {
+    apiValue = api;
+};
+exports.setApi = setApi;
+const api = () => apiValue;
+exports.api = api;

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

@@ -0,0 +1,10 @@
+import { Integration } from '../services/api';
+export declare function capitalize(str: string): string;
+/**
+ * Given the name of an integration, return the integration object
+ *
+ * @param integrationName {string} Name of the integration.
+ * @param integrations {Integration[]} List of integrations.
+ * @returns {Integration | null}
+ */
+export declare const findIntegrationFromList: (integrationName: string, integrations: Integration[]) => Integration | null;

package/build/src/utils/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findIntegrationFromList = exports.capitalize = void 0;
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+exports.capitalize = capitalize;
+/**
+ * Given the name of an integration, return the integration object
+ *
+ * @param integrationName {string} Name of the integration.
+ * @param integrations {Integration[]} List of integrations.
+ * @returns {Integration | null}
+ */
+const findIntegrationFromList = (integrationName, integrations) => {
+    var _a;
+    if ((integrations === null || integrations === void 0 ? void 0 : integrations.length) === 0 || !integrationName)
+        return null;
+    return (_a = integrations.find((s) => s.name === integrationName)) !== null && _a !== void 0 ? _a : null;
+};
+exports.findIntegrationFromList = findIntegrationFromList;

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@amp-labs/react",
+  "version": "1.0.0",
+  "description": "Ampersand React library.",
+  "author": {
+    "name": "Ampersand Labs",
+    "url": "http://withampersand.com"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/amp-labs/react/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "homepage": "https://github.com/amp-labs/react#readme",
+  "main": "build/src/index.js",
+  "typings": "build/src/index.d.ts",
+  "files": [
+    "/build"
+  ],
+  "scripts": {
+    "test": "jest",
+    "watch": "npm run prepbuild && tsc -p tsconfig.json --watch",
+    "build": "npm run prepbuild && tsc -p tsconfig.json",
+    "prepbuild": "npm run clean",
+    "clean": "rm -rf ./build/",
+    "assets": "mkdir ./build/ && cp -R ./src/public/ ./build/public/",
+    "lint": "eslint --ext .ts,.tsx -c .eslintrc.cjs src/ --fix",
+    "lint:dry": "eslint --ext .ts,.tsx -c .eslintrc.cjs src/",
+    "generate-api": "openapi-generator-cli generate -i ../server/openapi/api.yaml -g typescript-fetch -o generated-sources/api --additional-properties=npmName=amp-labs-generated-rest-sdk,supportsES6=true,withInterfaces=true"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/amp-labs/react.git"
+  },
+  "jest": {
+    "testPathIgnorePatterns": [
+      "build"
+    ]
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@chakra-ui/react": "^2.8.1",
+    "@jest/globals": "^29.5.0",
+    "@openapitools/openapi-generator-cli": "^2.7.0",
+    "@types/lodash.isequal": "^4.5.7",
+    "@types/react": "^18.2.33",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
+    "babel-jest": "^29.7.0",
+    "eslint": "^8.52.0",
+    "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-n": "^16.2.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "jest": "^29.7.0",
+    "react-test-renderer": "^18.2.0",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "@chakra-ui/react": "^2.4.4",
+    "@emotion/react": "^x.x.x",
+    "@emotion/styled": "^x.x.x",
+    "framer-motion": "^x.x.x",
+    "react": "^18.0.0"
+  },
+  "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
+    "lodash.isequal": "^4.5.0"
+  }
+}