npm - @aclymatepackages/modules - Versions diffs - 1.0.0 - Mend

@aclymatepackages/modules 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/README.md +43 -0
package/babel.config.json +18 -0
package/dist/components/CompaniesAutocomplete.js +126 -0
package/dist/components/CompanyOnboardingInput.js +116 -0
package/dist/components/ComparisonChart.js +200 -0
package/dist/components/CustomTooltipDisplayRow.js +59 -0
package/dist/components/EmissionsChart.js +467 -0
package/dist/components/EmissionsCustomTooltip.js +181 -0
package/dist/components/EmissionsPieChart.js +130 -0
package/dist/components/EmissionsReductionGraph.js +118 -0
package/dist/components/FootprintEquivalencies.js +181 -0
package/dist/components/FootprintVideo.js +262 -0
package/dist/components/FuelTypesSelect.js +36 -0
package/dist/components/IndustryAutocomplete.js +58 -0
package/dist/components/PlacesAutocomplete.js +173 -0
package/dist/components/StripeElements.js +95 -0
package/dist/components/YesNoQuestion.js +88 -0
package/dist/components/stripeInput.js +293 -0
package/dist/components/useChartWarningLabels.js +143 -0
package/dist/index.js +118 -0
package/package.json +74 -0
package/public/favicon.ico +0 -0
package/public/index.html +43 -0
package/public/logo192.png +0 -0
package/public/logo512.png +0 -0
package/public/manifest.json +25 -0
package/public/robots.txt +3 -0
package/src/components/CompaniesAutocomplete.js +125 -0
package/src/components/CompanyOnboardingInput.js +113 -0
package/src/components/ComparisonChart.js +236 -0
package/src/components/CustomTooltipDisplayRow.js +41 -0
package/src/components/EmissionsChart.js +579 -0
package/src/components/EmissionsCustomTooltip.js +146 -0
package/src/components/EmissionsPieChart.js +120 -0
package/src/components/EmissionsReductionGraph.js +107 -0
package/src/components/FootprintEquivalencies.js +203 -0
package/src/components/FootprintVideo.js +328 -0
package/src/components/FuelTypesSelect.js +29 -0
package/src/components/IndustryAutocomplete.js +56 -0
package/src/components/PlacesAutocomplete.js +174 -0
package/src/components/StripeElements.js +95 -0
package/src/components/YesNoQuestion.js +68 -0
package/src/components/stripeInput.js +288 -0
package/src/components/useChartWarningLabels.js +139 -0
package/src/index.js +35 -0

package/package.json ADDED Viewed

@@ -0,0 +1,74 @@
+{
+  "name": "@aclymatepackages/modules",
+  "version": "1.0.0",
+  "description": "Aclymate modules",
+  "author": "William Loopesko",
+  "main": "dist/index.js",
+  "dependencies": {
+    "@aclymatepackages/array-immutability-helpers": "^1.0.0",
+    "@aclymatepackages/atoms": "^1.0.21",
+    "@aclymatepackages/chart-helpers": "^1.0.0",
+    "@aclymatepackages/constants": "^1.0.10",
+    "@aclymatepackages/converters": "^1.1.2",
+    "@aclymatepackages/date-helpers": "^1.0.7",
+    "@aclymatepackages/fetch-aclymate-api": "^1.0.2",
+    "@aclymatepackages/formatters": "^1.1.4",
+    "@aclymatepackages/lists": "^1.1.1",
+    "@aclymatepackages/multi-part-form": "2.0.17",
+    "@aclymatepackages/other-helpers": "^0.1.19",
+    "@aclymatepackages/reg-exp": "^1.0.3",
+    "@aclymatepackages/themes": "^4.0.5",
+    "@babel/preset-react": "^7.16.7",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fortawesome/react-fontawesome": "^0.1.18",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "^5.0.0-alpha.134",
+    "@mui/material": "^5.13.6",
+    "@mui/styles": "^5.13.2",
+    "@stripe/react-stripe-js": "^2.1.0",
+    "@stripe/stripe-js": "^1.53.0",
+    "autosuggest-highlight": "^3.2.1",
+    "dayjs": "^1.11.7",
+    "npm": "^8.19.4",
+    "peopledatalabs": "^5.0.4",
+    "react-cookie": "^6.1.0",
+    "react-countup": "^4.4.0",
+    "recharts": "^2.10.4",
+    "typewriter-effect": "^2.18.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.2.0",
+    "react-dom": "^17.0.2 || ^18.2.0",
+    "react-scripts": ">=5.0.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10"
+  }
+}

package/public/favicon.ico ADDED Viewed

Binary file

package/public/index.html ADDED Viewed

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/logo192.png ADDED Viewed

Binary file

package/public/logo512.png ADDED Viewed

Binary file

package/public/manifest.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt ADDED Viewed

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/src/components/CompaniesAutocomplete.js ADDED Viewed

@@ -0,0 +1,125 @@
+import React, { useState, useMemo } from "react";
+import PDLJS from "peopledatalabs";
+import { LinearProgress, TextField, Autocomplete, Grid } from "@mui/material";
+import { ucFirstLetters } from "@aclymatepackages/formatters";
+import { incorrectNameCheck } from "@aclymatepackages/other-helpers";
+const CompaniesAutocomplete = ({
+  setCompanyName,
+  onSelectCompany,
+  label,
+  variant = "outlined",
+  size = "medium",
+  disabled,
+  helperText = "",
+  id,
+  style,
+  textFieldProps,
+  pdlApiKey,
+}) => {
+  const [nextStepIsLoading, setNextStepIsLoading] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [options, setOptions] = useState([]);
+  const pdlClient = useMemo(
+    () =>
+      new PDLJS({
+        apiKey: pdlApiKey,
+      }),
+    [pdlApiKey]
+  );
+  const fetchCompanies = async (value) => {
+    setNextStepIsLoading(true);
+    const autocompleteParamsObj = {
+      field: "company",
+      text: value || inputValue,
+      size: 10,
+      pretty: true,
+    };
+    return await pdlClient
+      .autocomplete(autocompleteParamsObj)
+      .then(({ data }) => {
+        const capitalizedCompanyNamesOptions = data.map(
+          ({ name, ...otherProps }) => ({
+            name: ucFirstLetters(name),
+            ...otherProps,
+          })
+        );
+        setNextStepIsLoading(false);
+        setOptions(capitalizedCompanyNamesOptions);
+        return data;
+      })
+      .catch(() => setOptions([]));
+  };
+  const onInputChange = (_, newInputValue) => {
+    if (newInputValue === "I don't see my company") {
+      setNextStepIsLoading(false);
+      return setCompanyName(inputValue);
+    }
+    setNextStepIsLoading(false);
+    setInputValue(newInputValue);
+    if (newInputValue === "") {
+      return setOptions([]);
+    }
+    return fetchCompanies();
+  };
+  const isError = !!inputValue && incorrectNameCheck(inputValue, 60);
+  return (
+    <Grid container spacing={1} direction="column">
+      <Grid item>
+        <Autocomplete
+          id={id || "companies-autocomplete"}
+          freeSolo
+          options={[...options, "I don't see my company"]}
+          getOptionLabel={(option) =>
+            typeof option === "string" ? option : option.name || ""
+          }
+          filterOptions={(option) => option}
+          autoComplete
+          includeInputInList
+          disabled={disabled}
+          renderInput={(params) => (
+            <TextField
+              id="companies-autocomplete-input"
+              {...params}
+              label={label}
+              variant={variant}
+              error={isError}
+              size={size}
+              autoComplete="off"
+              helperText={
+                isError ? "This company name is not valid" : helperText || ""
+              }
+              style={style}
+              {...textFieldProps}
+            />
+          )}
+          getOptionSelected={(option, value) =>
+            option === "" || option.name === value.name || option === value
+          }
+          value={inputValue}
+          onChange={(_, newValue) => {
+            setOptions(newValue ? [newValue, ...options] : options);
+            return onSelectCompany(newValue);
+          }}
+          onInputChange={onInputChange}
+        />
+      </Grid>
+      {nextStepIsLoading && (
+        <Grid item>
+          <LinearProgress />
+        </Grid>
+      )}
+    </Grid>
+  );
+};
+export default CompaniesAutocomplete;

package/src/components/CompanyOnboardingInput.js ADDED Viewed

@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import { Container, Grid } from "@mui/material";
+import { TextField } from "@aclymatepackages/atoms";
+import { editObjectData } from "@aclymatepackages/array-immutability-helpers";
+import { numbersRegExpTest } from "@aclymatepackages/reg-exp";
+import { MultiPartFormLayout } from "@aclymatepackages/multi-part-form";
+import mainTheme from "@aclymatepackages/themes";
+import IndustryAutocomplete from "./IndustryAutocomplete";
+import YesNoQuestion from "./YesNoQuestion";
+import PlacesAutocompleteModule from "./PlacesAutocomplete";
+const CompanyOnboardingInput = ({
+  companyName,
+  header,
+  onFormComplete,
+  PlacesAutocomplete,
+  theme,
+}) => {
+  const [inputData, setInputData] = useState({ name: companyName });
+  const editInputData = (field) => (value) =>
+    editObjectData(setInputData, field, value);
+  const { location, industry, employeeCount, isRemote, name } = inputData;
+  const PlacesAutocompleteComponent =
+    PlacesAutocomplete || PlacesAutocompleteModule;
+  const nonPeopleDataLabsCompanyInputs = [
+    {
+      label: "How many employees work for your company?",
+      value: employeeCount,
+      editData: editInputData("employeeCount"),
+      error:
+        !numbersRegExpTest(employeeCount) ||
+        employeeCount < 0 ||
+        employeeCount > 10000 ||
+        !Number.isInteger(Number(employeeCount)),
+    },
+    {
+      value: industry,
+      input: (
+        <IndustryAutocomplete
+          label="Choose your company's industry"
+          industry={industry}
+          setIndustry={editInputData("industry")}
+          helperText="We'll use this to estimate your emissions and benchmark to other similar companies"
+        />
+      ),
+    },
+    {
+      value: location,
+      input: (
+        <PlacesAutocompleteComponent
+          place={location}
+          editPlace={editInputData("location")}
+          size="small"
+          label="What's your company's primary address?"
+          helperText="We only need your physical address, not your suite number"
+          id="company-address-autocomplete"
+        />
+      ),
+    },
+    {
+      value: isRemote !== undefined,
+      input: (
+        <YesNoQuestion
+          question="Does your company only work remotely?"
+          value={isRemote}
+          setValue={editInputData("isRemote")}
+          lightBackground
+        />
+      ),
+      onNextStep: () => onFormComplete(inputData),
+    },
+  ];
+  const formInputArray = nonPeopleDataLabsCompanyInputs.map((input) => ({
+    ...input,
+    form: "onboarding",
+  }));
+  return (
+    <Container maxWidth="sm">
+      <Grid container direction="column" spacing={2}>
+        {header}
+        <Grid item>
+          <TextField
+            value={name}
+            setValue={editInputData("name")}
+            variant="standard"
+            label="What is your company's name?"
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <MultiPartFormLayout
+            forms={[{ name: "onboarding", label: "Onboarding" }]}
+            rows={formInputArray}
+            confirmClose={false}
+            theme={theme || mainTheme}
+            styleProps={{ padding: 0 }}
+            p={0}
+            noGutter
+          />
+        </Grid>
+      </Grid>
+    </Container>
+  );
+};
+export default CompanyOnboardingInput;

package/src/components/ComparisonChart.js ADDED Viewed

@@ -0,0 +1,236 @@
+import React from "react";
+import { Box, Grid, Typography, Tooltip } from "@mui/material";
+import { ThemeProvider } from "@mui/material/styles";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { tonsToLbs } from "@aclymatepackages/converters";
+import { formatDecimal } from "@aclymatepackages/formatters";
+import {
+  mergeDarkTheme,
+  useLayoutHelpers,
+  isColorDarkTheme,
+  mergeMainTheme,
+} from "@aclymatepackages/themes";
+const GraphBar = ({
+  color,
+  categoryMaxTons,
+  dataCategoryTons,
+  left,
+  isUnitsTons,
+}) => {
+  const { theme, isMobile } = useLayoutHelpers();
+  const displayColor = theme.palette[color].main;
+  const maxPercentage = dataCategoryTons / categoryMaxTons;
+  const barPercentage = maxPercentage * 100;
+  const barSize = isMobile ? 40 : 50;
+  const dataCategoryDisplayValue = isUnitsTons
+    ? dataCategoryTons
+    : Math.round(tonsToLbs(dataCategoryTons));
+  const SmallBarAnnotation = () => (
+    <Box
+      style={{
+        height: barSize - 10,
+        width: barSize - 10,
+        backgroundColor: "white",
+        borderRadius: "50%",
+        border: `${displayColor} solid thin`,
+        color: displayColor,
+      }}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Typography
+        variant={isMobile ? "caption" : "subtitle1"}
+        align="center"
+        color={isColorDarkTheme(displayColor) ? "secondary" : "textPrimary"}
+      >
+        {formatDecimal(dataCategoryDisplayValue)}
+      </Typography>
+    </Box>
+  );
+  const barPercentageMobileBreakPoint = isMobile ? 25 : 15;
+  return (
+    <ThemeProvider
+      theme={isColorDarkTheme(displayColor) ? mergeDarkTheme : mergeMainTheme}
+    >
+      <Box
+        display="flex"
+        justifyContent={left ? "flex-end" : "flex-start"}
+        alignItems="center"
+      >
+        {barPercentage < barPercentageMobileBreakPoint && left && (
+          <SmallBarAnnotation />
+        )}
+        <Box
+          style={{
+            width: `${barPercentage > 100 ? 100 : barPercentage}%`,
+            height: `${barSize}px`,
+            backgroundColor: displayColor,
+            borderRadius: left ? "25px 0 0 25px" : "0 25px 25px 0",
+          }}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+        >
+          {barPercentage > barPercentageMobileBreakPoint && (
+            <div>
+              <Typography
+                variant={isMobile ? "subtitle1" : "h6"}
+                color="textPrimary"
+                align="center"
+              >
+                {`${formatDecimal(dataCategoryDisplayValue)}`}
+              </Typography>
+            </div>
+          )}
+        </Box>
+        {barPercentage < barPercentageMobileBreakPoint && !left && (
+          <SmallBarAnnotation />
+        )}
+      </Box>
+    </ThemeProvider>
+  );
+};
+const GraphRow = ({
+  category,
+  idx,
+  individualData,
+  comparisonData,
+  categories,
+  isUnitsTons,
+}) => {
+  const { theme, isMobile } = useLayoutHelpers();
+  const { color, title, icon, type, categoryMaxTons } = category;
+  const individualTons = individualData[`${type}Tons`] || 0;
+  const comparisonTons = comparisonData[`${type}Tons`];
+  const barDisplayMaxTons =
+    categoryMaxTons > individualTons ? categoryMaxTons : individualTons;
+  return (
+    <Grid
+      item
+      container
+      justifyContent="center"
+      alignItems="center"
+      wrap="nowrap"
+    >
+      <Grid item xs={5}>
+        <GraphBar
+          {...category}
+          categoryMaxTons={barDisplayMaxTons}
+          dataCategoryTons={individualTons}
+          isUnitsTons={isUnitsTons}
+          left
+        />
+      </Grid>
+      <Grid item xs="auto">
+        <Box
+          style={{
+            height: isMobile ? "65px" : "85px",
+            width: isMobile ? "65px" : "85px",
+            backgroundColor: theme.palette.backgroundGray.dark,
+            borderRadius: !idx
+              ? "8px 8px 0 0"
+              : idx === categories.length - 1
+              ? "0 0 8px 8px"
+              : 0,
+          }}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Tooltip
+            title={title}
+            key={`comparison-graphic-category-icon-${idx}`}
+          >
+            <Box
+              style={{
+                backgroundColor: theme.palette[color].main,
+                height: isMobile ? "50px" : "70px",
+                width: isMobile ? "50px" : "70px",
+                borderRadius: "50%",
+              }}
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <FontAwesomeIcon
+                icon={icon}
+                size={isMobile ? "1x" : "2x"}
+                style={{ color: "white" }}
+              />
+            </Box>
+          </Tooltip>
+        </Box>
+      </Grid>
+      <Grid item xs={5}>
+        <GraphBar
+          {...category}
+          categoryMaxTons={barDisplayMaxTons}
+          dataCategoryTons={comparisonTons}
+          isUnitsTons={isUnitsTons}
+        />
+      </Grid>
+    </Grid>
+  );
+};
+const ComparisonChart = ({
+  individualData,
+  comparisonData,
+  categories,
+  youTitle = "You",
+  comparisonTitle = "US Average",
+  isUnitsTons,
+}) => {
+  const { isMobile } = useLayoutHelpers();
+  return (
+    <Grid container direction="column">
+      <Grid item container alignItems="flex-end">
+        <Grid item xs={5}>
+          <Typography variant={isMobile ? "subtitle1" : "h5"} align="center">
+            {youTitle}
+          </Typography>
+        </Grid>
+        <Grid item xs={2}>
+          <Typography variant={isMobile ? "h5" : "h3"} align="center">
+            VS
+          </Typography>
+        </Grid>
+        <Grid item xs={5}>
+          <Typography variant={isMobile ? "subtitle1" : "h5"} align="center">
+            {comparisonTitle}
+          </Typography>
+        </Grid>
+      </Grid>
+      {categories.map((category, idx) => (
+        <GraphRow
+          idx={idx}
+          key={`comparison-graph-row-${idx}`}
+          individualData={individualData}
+          comparisonData={comparisonData}
+          categories={categories}
+          category={category}
+          isUnitsTons={isUnitsTons}
+        />
+      ))}
+    </Grid>
+  );
+};
+export default ComparisonChart;

package/src/components/CustomTooltipDisplayRow.js ADDED Viewed

@@ -0,0 +1,41 @@
+import React from "react";
+import { Grid, Typography, Avatar } from "@mui/material";
+import { ucFirstLetters } from "@aclymatepackages/formatters";
+const CustomTooltipDisplayRow = ({
+  category,
+  Icon,
+  icon,
+  customAvatar,
+  color,
+  name,
+  subtitle,
+}) => (
+  <Grid item container spacing={1} wrap="nowrap" alignItems="center">
+    <Grid item>
+      {customAvatar || (
+        <Avatar style={{ backgroundColor: color, color: "white" }}>
+          {icon}
+          {Icon && <Icon style={{ color: "inherit" }} />}
+        </Avatar>
+      )}
+    </Grid>
+    <Grid item container direction="column" wrap="nowrap">
+      <Grid item xs={12}>
+        <Typography
+          variant="subtitle1"
+          color="textPrimary"
+          noWrap
+        >{`${ucFirstLetters(name || category)}`}</Typography>
+      </Grid>
+      <Grid item xs={12}>
+        <Typography variant="caption" color="textSecondary">
+          {subtitle}
+        </Typography>
+      </Grid>
+    </Grid>
+  </Grid>
+);
+export default CustomTooltipDisplayRow;