@aclymatepackages/modules 3.0.8 → 4.0.0

package/dist/components/{PdlCompanySelect.js → DbCompanySelect.js}

@@ -1,20 +1,18 @@
 "use strict";
 
-require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 require("core-js/modules/es.promise.js");
 require("core-js/modules/web.dom-collections.iterator.js");
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _material = require("@mui/material");
 var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
 var _atoms = require("@aclymatepackages/atoms");
+var _theme = require("@aclymatepackages/theme");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const PdlCompanySelect = _ref => {
+const DbCompanySelect = _ref => {
   let {
     onCompanyNotFound,
     onCompanySelected,
@@ -46,13 +44,15 @@ const PdlCompanySelect = _ref => {
     await onCompanySelected(companyId, name);
     return onSelectClick();
   };
-  return /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  return /*#__PURE__*/React.createElement(_material.ThemeProvider, {
+    theme: _theme.mainTheme
+  }, /*#__PURE__*/React.createElement(_material.Grid, {
     container: true,
     spacing: 2,
     direction: "column"
-  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  }, /*#__PURE__*/React.createElement(_material.Grid, {
     item: true
-  }, /*#__PURE__*/_react.default.createElement(_atoms.TextField, {
+  }, /*#__PURE__*/React.createElement(_atoms.TextField, {
     disabled: pdlFetchLoading,
     label: label,
     value: inputValue,
@@ -67,47 +67,47 @@ const PdlCompanySelect = _ref => {
     },
     helperText: helperText || "Press enter or click the search icon to search for matching companies",
     InputProps: {
-      endAdornment: /*#__PURE__*/_react.default.createElement(_material.InputAdornment, null, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+      endAdornment: /*#__PURE__*/React.createElement(_material.InputAdornment, null, /*#__PURE__*/React.createElement(_material.IconButton, {
         disabled: pdlFetchLoading,
         onClick: fetchMatchingCompanies
-      }, pdlFetchLoading ? /*#__PURE__*/_react.default.createElement(_material.CircularProgress, {
+      }, pdlFetchLoading ? /*#__PURE__*/React.createElement(_material.CircularProgress, {
         size: 20
-      }) : /*#__PURE__*/_react.default.createElement(_Search.default, null)))
+      }) : /*#__PURE__*/React.createElement(_Search.default, null)))
     }
-  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  })), /*#__PURE__*/React.createElement(_material.Grid, {
     item: true,
     container: true,
     justifyContent: "center"
-  }), inputComplete && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  }), inputComplete && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_material.Grid, {
     item: true
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+  }, /*#__PURE__*/React.createElement(_material.Typography, {
     variant: "h6",
     align: "center"
-  }, actionLabel)), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  }, actionLabel)), /*#__PURE__*/React.createElement(_material.Grid, {
     item: true
-  }, /*#__PURE__*/_react.default.createElement(_atoms.MatchingCompanyChips, {
+  }, /*#__PURE__*/React.createElement(_atoms.MatchingCompanyChips, {
     matchingCompanies: matchingCompanies,
     selectedCompany: selectedCompany,
     setSelectedCompany: setSelectedCompany
-  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  })), /*#__PURE__*/React.createElement(_material.Grid, {
     item: true,
     container: true,
     spacing: 2,
     justifyContent: "center"
-  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  }, /*#__PURE__*/React.createElement(_material.Grid, {
     item: true
-  }, selectedCompany ? /*#__PURE__*/_react.default.createElement(_atoms.LoadingButton, {
+  }, selectedCompany ? /*#__PURE__*/React.createElement(_atoms.LoadingButton, {
     isLoading: nextStepLoading,
     label: "Choose This Company",
     variant: "contained",
     color: "secondary",
     onClick: () => onSelectCompany(selectedCompany)
-  }) : /*#__PURE__*/_react.default.createElement(_atoms.LoadingButton, {
+  }) : /*#__PURE__*/React.createElement(_atoms.LoadingButton, {
     isLoading: nextStepLoading,
     color: "primary",
     onClick: () => onSelectCompany("none", inputValue),
     label: "I don't see my company",
     variant: "text"
-  })))));
+  }))))));
 };
-var _default = exports.default = PdlCompanySelect;
+var _default = exports.default = DbCompanySelect;

package/dist/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "ComparisonChart", {
     return _ComparisonChart.default;
   }
 });
+Object.defineProperty(exports, "DbCompanySelect", {
+  enumerable: true,
+  get: function get() {
+    return _DbCompanySelect.default;
+  }
+});
 Object.defineProperty(exports, "EmissionsPieChart", {
   enumerable: true,
   get: function get() {
@@ -57,12 +63,6 @@ Object.defineProperty(exports, "IndustryAutocomplete", {
     return _IndustryAutocomplete.default;
   }
 });
-Object.defineProperty(exports, "PdlCompanySelect", {
-  enumerable: true,
-  get: function get() {
-    return _PdlCompanySelect.default;
-  }
-});
 Object.defineProperty(exports, "PlacesAutocomplete", {
   enumerable: true,
   get: function get() {
@@ -93,5 +93,5 @@ var _CompanyOnboardingInput = _interopRequireDefault(require("./components/Compa
 var _EmissionsPieChart = _interopRequireDefault(require("./components/EmissionsPieChart"));
 var _useChartWarningLabels = _interopRequireDefault(require("./components/useChartWarningLabels"));
 var _EmissionsSummarySentence = _interopRequireDefault(require("./components/EmissionsSummarySentence"));
-var _PdlCompanySelect = _interopRequireDefault(require("./components/PdlCompanySelect"));
+var _DbCompanySelect = _interopRequireDefault(require("./components/DbCompanySelect"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aclymatepackages/modules",
-  "version": "3.0.8",
+  "version": "4.0.0",
   "description": "Aclymate modules",
   "author": "William Loopesko",
   "main": "dist/index.js",

package/src/components/DbCompanySelect.js

@@ -0,0 +1,136 @@
+import { useState } from "react";
+
+import {
+  Grid,
+  InputAdornment,
+  CircularProgress,
+  IconButton,
+  Typography,
+  ThemeProvider,
+} from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+
+import {
+  TextField,
+  LoadingButton,
+  MatchingCompanyChips,
+} from "@aclymatepackages/atoms";
+
+import { mainTheme } from "@aclymatepackages/theme";
+
+const DbCompanySelect = ({
+  onCompanyNotFound,
+  onCompanySelected,
+  onSelectClick = () => {},
+  matchingFunction,
+  label = "Enter your company's name",
+  actionLabel = "Please select your company from these options",
+  helperText,
+}) => {
+  const [inputValue, setInputValue] = useState("");
+  const [matchingCompanies, setMatchingCompanies] = useState([]);
+  const [inputComplete, setInputComplete] = useState(false);
+  const [pdlFetchLoading, setPdlFetchLoading] = useState(false);
+  const [nextStepLoading, setNextStepLoading] = useState(false);
+  const [selectedCompany, setSelectedCompany] = useState(null);
+
+  const fetchMatchingCompanies = async () => {
+    setPdlFetchLoading(true);
+
+    const matchingCompanies = await matchingFunction(inputValue);
+
+    setPdlFetchLoading(false);
+    setMatchingCompanies(matchingCompanies);
+    return setInputComplete(true);
+  };
+
+  const onSelectCompany = async (companyId, name) => {
+    setNextStepLoading(true);
+    if (!companyId || companyId === "none") {
+      await onCompanyNotFound(name);
+      return onSelectClick();
+    }
+
+    await onCompanySelected(companyId, name);
+    return onSelectClick();
+  };
+
+  return (
+    <ThemeProvider theme={mainTheme}>
+      <Grid container spacing={2} direction="column">
+        <Grid item>
+          <TextField
+            disabled={pdlFetchLoading}
+            label={label}
+            value={inputValue}
+            setValue={setInputValue}
+            onKeyPress={({ key }) => {
+              if (key === "Enter") {
+                return fetchMatchingCompanies();
+              }
+            }}
+            helperText={
+              helperText ||
+              "Press enter or click the search icon to search for matching companies"
+            }
+            InputProps={{
+              endAdornment: (
+                <InputAdornment>
+                  <IconButton
+                    disabled={pdlFetchLoading}
+                    onClick={fetchMatchingCompanies}
+                  >
+                    {pdlFetchLoading ? (
+                      <CircularProgress size={20} />
+                    ) : (
+                      <SearchIcon />
+                    )}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+        </Grid>
+        <Grid item container justifyContent="center"></Grid>
+        {inputComplete && (
+          <>
+            <Grid item>
+              <Typography variant="h6" align="center">
+                {actionLabel}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <MatchingCompanyChips
+                matchingCompanies={matchingCompanies}
+                selectedCompany={selectedCompany}
+                setSelectedCompany={setSelectedCompany}
+              />
+            </Grid>
+            <Grid item container spacing={2} justifyContent="center">
+              <Grid item>
+                {selectedCompany ? (
+                  <LoadingButton
+                    isLoading={nextStepLoading}
+                    label="Choose This Company"
+                    variant="contained"
+                    color="secondary"
+                    onClick={() => onSelectCompany(selectedCompany)}
+                  />
+                ) : (
+                  <LoadingButton
+                    isLoading={nextStepLoading}
+                    color="primary"
+                    onClick={() => onSelectCompany("none", inputValue)}
+                    label="I don't see my company"
+                    variant="text"
+                  />
+                )}
+              </Grid>
+            </Grid>
+          </>
+        )}
+      </Grid>
+    </ThemeProvider>
+  );
+};
+export default DbCompanySelect;

package/src/index.js

@@ -10,7 +10,7 @@ import CompanyOnboardingInput from "./components/CompanyOnboardingInput";
 import EmissionsPieChart from "./components/EmissionsPieChart";
 import useChartWarningLabels from "./components/useChartWarningLabels";
 import EmissionsSummarySentence from "./components/EmissionsSummarySentence";
-import PdlCompanySelect from "./components/PdlCompanySelect";
+import DbCompanySelect from "./components/DbCompanySelect";
 
 export {
   AccountingChart,
@@ -25,5 +25,5 @@ export {
   EmissionsPieChart,
   useChartWarningLabels,
   EmissionsSummarySentence,
-  PdlCompanySelect,
+  DbCompanySelect,
 };

package/src/components/PdlCompanySelect.js

@@ -1,131 +0,0 @@
-import React, { useState } from "react";
-
-import {
-  Grid,
-  InputAdornment,
-  CircularProgress,
-  IconButton,
-  Typography,
-} from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
-
-import {
-  TextField,
-  LoadingButton,
-  MatchingCompanyChips,
-} from "@aclymatepackages/atoms";
-
-const PdlCompanySelect = ({
-  onCompanyNotFound,
-  onCompanySelected,
-  onSelectClick = () => {},
-  matchingFunction,
-  label = "Enter your company's name",
-  actionLabel = "Please select your company from these options",
-  helperText,
-}) => {
-  const [inputValue, setInputValue] = useState("");
-  const [matchingCompanies, setMatchingCompanies] = useState([]);
-  const [inputComplete, setInputComplete] = useState(false);
-  const [pdlFetchLoading, setPdlFetchLoading] = useState(false);
-  const [nextStepLoading, setNextStepLoading] = useState(false);
-  const [selectedCompany, setSelectedCompany] = useState(null);
-
-  const fetchMatchingCompanies = async () => {
-    setPdlFetchLoading(true);
-
-    const matchingCompanies = await matchingFunction(inputValue);
-
-    setPdlFetchLoading(false);
-    setMatchingCompanies(matchingCompanies);
-    return setInputComplete(true);
-  };
-
-  const onSelectCompany = async (companyId, name) => {
-    setNextStepLoading(true);
-    if (!companyId || companyId === "none") {
-      await onCompanyNotFound(name);
-      return onSelectClick();
-    }
-
-    await onCompanySelected(companyId, name);
-    return onSelectClick();
-  };
-
-  return (
-    <Grid container spacing={2} direction="column">
-      <Grid item>
-        <TextField
-          disabled={pdlFetchLoading}
-          label={label}
-          value={inputValue}
-          setValue={setInputValue}
-          onKeyPress={({ key }) => {
-            if (key === "Enter") {
-              return fetchMatchingCompanies();
-            }
-          }}
-          helperText={
-            helperText ||
-            "Press enter or click the search icon to search for matching companies"
-          }
-          InputProps={{
-            endAdornment: (
-              <InputAdornment>
-                <IconButton
-                  disabled={pdlFetchLoading}
-                  onClick={fetchMatchingCompanies}
-                >
-                  {pdlFetchLoading ? (
-                    <CircularProgress size={20} />
-                  ) : (
-                    <SearchIcon />
-                  )}
-                </IconButton>
-              </InputAdornment>
-            ),
-          }}
-        />
-      </Grid>
-      <Grid item container justifyContent="center"></Grid>
-      {inputComplete && (
-        <>
-          <Grid item>
-            <Typography variant="h6" align="center">
-              {actionLabel}
-            </Typography>
-          </Grid>
-          <Grid item>
-            <MatchingCompanyChips
-              matchingCompanies={matchingCompanies}
-              selectedCompany={selectedCompany}
-              setSelectedCompany={setSelectedCompany}
-            />
-          </Grid>
-          <Grid item container spacing={2} justifyContent="center">
-            <Grid item>
-              {selectedCompany ? (
-                <LoadingButton
-                  isLoading={nextStepLoading}
-                  label="Choose This Company"
-                  variant="contained"
-                  color="secondary"
-                  onClick={() => onSelectCompany(selectedCompany)}
-                />
-              ) : (
-                <LoadingButton
-                  isLoading={nextStepLoading}
-                  color="primary"
-                  onClick={() => onSelectCompany("none", inputValue)}
-                  label="I don't see my company"
-                  variant="text"
-                />
-              )}
-            </Grid>
-          </Grid>
-        </>
-      )}
-    </Grid>
-  );
-};
-export default PdlCompanySelect;