@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/esm/components/UTGoogleAutocomplete/README.md

@@ -0,0 +1,25 @@
+# UTGoogleAutocomplete
+
+Component used for searching for addresses and getting their details from Google Api.
+
+## Props
+
+
+| Name                  | Type   | Default                                                                        | Description                                                                                                                                                                                                                                                                                                                                                                                              |
+| ----------------------- | -------- | -------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiKey                | string |                                                                                | Google Api Key provided.                                                                                                                                                                                                                                                                                                                                                                                 |
+| classes               | string |                                                                                | Classes returned by UTGoogleAutocomplete's own [Theme](./theme.js#L40) `retrieveStyle`.                                                                                                                                                                                                                                                                                                                   |
+| detailErrorLabel      | string | "Hubo un error al intentar recuperar el detalle de la dirección seleccionada" | Message to show when the Google Api places detail service fails.                                                                                                                                                                                                                                                                                                                                         |
+| inputProps            | object |                                                                                | [UTTextInput](../UTTextInput/index.js) inputProps. This allows you to customize the autocomplete input.                                                                                                                                                                                                                                                                                                  |
+| minChar               | number | 3                                                                              | The component won´t call google predictions (Autocomplete service) until the user had entered at least the number indicated by minChar.                                                                                                                                                                                                                                                                 |
+| noResultsLabel        | string | 'No se encuentran resultados. Ingresa una dirección valida.'                  | Message to show to the user when google predictions don´t return anything.                                                                                                                                                                                                                                                                                                                              |
+| predictionsErrorLabel | string | "Hubo un error al intentar recuperar la dirección ingresada"                  | Message to show when the Google Api places autocomplete service fails.                                                                                                                                                                                                                                                                                                                                   |
+| retrieveError         | string | () => {}                                                                       | Func to execute when any google service fails. It retrieves the status code, since google doesn´t return the error message. Check[PlacesServiceStatus](https://developers.google.com/maps/documentation/javascript/reference/places-service?hl=es-419#PlacesServiceStatus) for status descriptions. <br />The ideal case is to use this function to log the error into rollbar so we can be aware of it. |
+| searchRestrictions    | object | {}                                                                             | Autocomplete service restrictions. Check [AutocompletionRequest](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service?hl=es-419#AutocompletionRequest) for more information                                                                                                                                                                                  |
+| setSelectedPlace      | func   | () => {}                                                                       | Func to execute when a result from the predictions is selected.                                                                                                                                                                                                                                                                                                                                          |
+
+### Use
+
+```JSX
+<UTGoogleAutocomplete apiKey={apiKey} />
+```

package/dist/esm/components/UTGoogleAutocomplete/index.js

@@ -0,0 +1,132 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useMemo, useRef, useState } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import WithGoogleMapScript from '../WithGoogleMaps';
+import WithTheme from '../WithTheme';
+import UTTouchableWithoutFeedback from '../UTTouchableWithoutFeedback';
+import UTTextInput from '../UTTextInput';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
+import AlertHandler from '../UTAlert/AlertHandler';
+import UTAlert from '../UTAlert';
+import { UTGoogleAutocompletePropTypes } from '../../types/googleMapsTypes';
+import { retrieveStyle } from './theme';
+import googleLogo from './assets/google_on_white.png';
+const UTGoogleAutocomplete = _ref => {
+  let {
+    alert,
+    classes,
+    dataTestId,
+    detailErrorLabel = 'Hubo un error al intentar recuperar el detalle de la dirección seleccionada',
+    helperTextDataTestId,
+    inputProps,
+    minChar = 3,
+    noResultsLabel = 'No se encuentran resultados. Ingresa una dirección valida.',
+    onChange,
+    predictionsErrorLabel = 'Hubo un error al intentar recuperar la dirección ingresada',
+    retrieveError = () => {},
+    searchRestrictions = {},
+    setSelectedPlace = () => {},
+    value
+  } = _ref;
+  const [autoCompletePredictions, setAutoCompletePredictions] = useState([]);
+  const [predictionsNotFound, setPredictionsNotFound] = useState(false);
+  const [showPredictions, setShowPredicitions] = useState(false);
+  const placeDetailRef = useRef();
+  const {
+    google
+  } = window;
+  const googleAutocompleteService = new google.maps.places.AutocompleteService();
+  const GOOGLE_OK_STATUS = google.maps.places.PlacesServiceStatus.OK;
+  const GOOGLE_ZERO_STATUS = google.maps.places.PlacesServiceStatus.ZERO_RESULTS;
+  const sessionToken = useMemo(() => new google.maps.places.AutocompleteSessionToken(), [google.maps.places.AutocompleteSessionToken]);
+  const handlePredictions = (predictions, status) => {
+    if (status === GOOGLE_OK_STATUS) {
+      setShowPredicitions(true);
+      setPredictionsNotFound(false);
+      const autocompleteSuggestions = predictions.map(prediction => ({
+        id: prediction.place_id,
+        name: prediction.description
+      }));
+      return setAutoCompletePredictions(autocompleteSuggestions);
+    }
+    if (status === GOOGLE_ZERO_STATUS) {
+      setPredictionsNotFound(true);
+      setAutoCompletePredictions([]);
+    } else {
+      AlertHandler.error(predictionsErrorLabel);
+      retrieveError(status);
+    }
+  };
+  const handleInputChange = inputValue => {
+    onChange(inputValue);
+    if (inputValue.length >= minChar) {
+      googleAutocompleteService.getPlacePredictions({
+        input: inputValue,
+        sessionToken,
+        ...searchRestrictions
+      }, handlePredictions);
+    } else {
+      setAutoCompletePredictions([]);
+      setSelectedPlace(null);
+    }
+  };
+  const handleGetDetails = (place, status) => {
+    if (status === GOOGLE_OK_STATUS) {
+      setShowPredicitions(false);
+      setSelectedPlace(place);
+    } else {
+      AlertHandler.error(detailErrorLabel);
+      retrieveError(status);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.inputContainer
+  }, /*#__PURE__*/React.createElement(UTAlert, {
+    content: alert
+  }), /*#__PURE__*/React.createElement(UTTextInput, _extends({
+    dataTestId: dataTestId,
+    helperTextDataTestId: helperTextDataTestId,
+    input: {
+      value,
+      onChange: handleInputChange
+    },
+    inputClassName: classes.inputClassName
+  }, inputProps)), showPredictions && !isEmpty(autoCompletePredictions) && autoCompletePredictions.map(_ref2 => {
+    let {
+      id,
+      name
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: placeDetailRef,
+      key: id
+    }, /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+      onClick: () => {
+        onChange(name);
+        const googleGetPlaceService = new google.maps.places.PlacesService(placeDetailRef.current);
+        googleGetPlaceService.getDetails({
+          placeId: id
+        }, handleGetDetails);
+      },
+      className: classes.resultsContainer
+    }, /*#__PURE__*/React.createElement(UTIcon, {
+      size: 20,
+      name: "IconMapPin",
+      className: classes.resultIcon
+    }), /*#__PURE__*/React.createElement(UTLabel, null, name)));
+  }), value.length >= minChar && predictionsNotFound && /*#__PURE__*/React.createElement("div", {
+    className: classes.noResultsContainer
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    size: 32,
+    name: "IconSearchOff",
+    className: classes.noResultsIcon
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray"
+  }, noResultsLabel)), /*#__PURE__*/React.createElement("img", {
+    className: classes.googlelogo,
+    src: googleLogo,
+    alt: "googleLogo"
+  }));
+};
+UTGoogleAutocomplete.propTypes = UTGoogleAutocompletePropTypes;
+export default WithTheme(retrieveStyle)(WithGoogleMapScript()(UTGoogleAutocomplete));

package/dist/esm/components/UTGoogleAutocomplete/theme.js

@@ -0,0 +1,45 @@
+export const retrieveStyle = _ref => {
+  var _theme$Palette$action;
+  let {
+    theme
+  } = _ref;
+  return {
+    googlelogo: {
+      width: '45px'
+    },
+    inputContainer: {
+      borderRadius: '8px',
+      display: 'flex',
+      flexDirection: 'column',
+      gridGap: '8px',
+      maxWidth: '480px',
+      padding: '16px',
+      width: '480px'
+    },
+    inputClassName: {
+      width: '480px'
+    },
+    noResultsContainer: {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'column',
+      gridGap: '24px',
+      padding: '16px'
+    },
+    noResultsIcon: {
+      backgroundColor: theme.Palette.light['03'],
+      borderRadius: '25px',
+      color: theme.Palette.light['05'],
+      padding: '9px'
+    },
+    resultsContainer: {
+      display: 'flex',
+      gridGap: '16px',
+      padding: '12px 0'
+    },
+    resultIcon: {
+      color: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.neutral['05']) || theme.Palette.neutral['05'],
+      minWidth: '20px'
+    }
+  };
+};

package/dist/esm/components/UTGraph/UTGraph.mdx

@@ -0,0 +1,13 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
+
+import * as UTGraphStories from './UTGraph.stories';
+
+<Meta of={UTGraphStories} />
+
+<Title>UTGraph</Title>
+
+<Description of={UTGraphStories} />
+
+<Canvas of={UTGraphStories.BarAndLineChart} withToolbar name="UTGraph" />
+
+<ArgTypes />

package/dist/esm/components/UTGraph/UTGraph.stories.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import reportSchema from './report.schema.json';
+import { BarAndLineChartData, DualAxisChartData, PieChartData, ContinuousDomainChartData } from './UTGraph.storiesdata';
+import UTGraph from '.';
+export default {
+  title: 'Energy-UI/UTGraph',
+  component: UTGraph,
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      height: 600
+    }
+  }, /*#__PURE__*/React.createElement(UTGraph, args)),
+  parameters: {
+    jsonschema: {
+      schema: reportSchema
+    },
+    docs: {
+      description: {
+        component: 'Este componente permite mostrar gráficos en base a una configuración y un set de datos. Soporta gráficos de barras y de líneas (con múltiples barras/líneas apiladas o lado a lado en un mismo período y con orientación vertical u horizontal), gráficos de dona y gráficos de dispersión'
+      }
+    }
+  },
+  argTypes: {
+    meta: {
+      control: 'object',
+      description: 'Configuración del gráfico (para más información sobre el contenido ver la documentación del JSON Schema)'
+    },
+    datasets: {
+      control: 'object',
+      description: 'Datos del gráfico (para más información sobre el contenido ver la documentación del JSON Schema)'
+    }
+  }
+};
+export const BarAndLineChart = {
+  name: 'Bar and Line Chart',
+  args: {
+    meta: BarAndLineChartData.meta,
+    datasets: BarAndLineChartData.datasets
+  }
+};
+export const DualAxisChart = {
+  name: 'Dual Axis Chart',
+  args: {
+    meta: DualAxisChartData.meta,
+    datasets: DualAxisChartData.datasets
+  }
+};
+export const PieChart = {
+  name: 'Pie Chart',
+  args: {
+    meta: PieChartData.meta,
+    datasets: PieChartData.datasets
+  }
+};
+export const ContinuousDomainChart = {
+  name: 'Continuous Domain Chart',
+  args: {
+    meta: ContinuousDomainChartData.meta,
+    datasets: ContinuousDomainChartData.datasets
+  }
+};