@widergy/energy-ui 3.158.0 → 3.159.0

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

@@ -0,0 +1,70 @@
+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, { useState } from 'react';
+import UTButtonGroup from '..';
+import { COMMON_ACTIONS, COMMON_ARG_TYPES, COMMON_ARGS } from './storiesConstants';
+const InteractiveButtonGroup = args => {
+  const [selected, setSelected] = useState(args.selected);
+  const actions = args.actions.map(action => ({
+    ...action,
+    onClick: () => setSelected(action.id)
+  }));
+  return /*#__PURE__*/React.createElement(UTButtonGroup, _extends({}, args, {
+    actions: actions,
+    selected: selected
+  }));
+};
+export default {
+  title: 'Energy-UI/UTButtonGroup',
+  component: UTButtonGroup,
+  args: {
+    actions: COMMON_ACTIONS,
+    ...COMMON_ARGS
+  },
+  argTypes: {
+    ...COMMON_ARG_TYPES
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Grupo de botones con selección activa. El botón activo usa variante `shadow` (primary/neutral) o `filled` (negative). El contenedor aplica padding y border-radius via design tokens.'
+      }
+    }
+  }
+};
+export const Playground = {
+  name: 'Playground',
+  render: InteractiveButtonGroup
+};
+export const Primary = {
+  args: {
+    colorTheme: 'primary',
+    selected: COMMON_ACTIONS[0].id
+  },
+  render: InteractiveButtonGroup
+};
+export const Neutral = {
+  args: {
+    colorTheme: 'neutral',
+    selected: COMMON_ACTIONS[0].id
+  },
+  render: InteractiveButtonGroup
+};
+export const Negative = {
+  args: {
+    colorTheme: 'negative',
+    selected: COMMON_ACTIONS[0].id
+  },
+  parameters: {
+    backgrounds: {
+      default: 'Oscuro'
+    }
+  },
+  render: InteractiveButtonGroup
+};
+export const Circle = {
+  args: {
+    shape: 'circle',
+    selected: COMMON_ACTIONS[0].id
+  },
+  render: InteractiveButtonGroup
+};

package/dist/esm/components/UTButtonGroup/stories/storiesConstants.js

@@ -0,0 +1,45 @@
+import { CIRCLE_TYPE, DEFAULT_COLOR_THEME, DEFAULT_SIZE, DEFAULT_TYPE, SQUARE_TYPE } from '../constants';
+export const COMMON_ACTIONS = [{
+  Icon: 'IconPencil',
+  id: 'edit',
+  label: 'Editar'
+}, {
+  Icon: 'IconTrash',
+  id: 'delete',
+  label: 'Eliminar'
+}, {
+  Icon: 'IconEye',
+  id: 'view',
+  label: 'Ver'
+}];
+export const COLOR_THEME_OPTIONS = ['primary', 'neutral', 'negative'];
+export const SHAPE_OPTIONS = [SQUARE_TYPE, CIRCLE_TYPE];
+export const SIZE_OPTIONS = ['small', 'medium', 'large'];
+export const COMMON_ARG_TYPES = {
+  actions: {
+    control: 'object',
+    description: 'Array de acciones. Cada item acepta: id (string), label (string), Icon (nombre de icono Tabler).'
+  },
+  colorTheme: {
+    control: 'select',
+    options: COLOR_THEME_OPTIONS
+  },
+  selected: {
+    control: 'text',
+    description: 'ID del botón activo. Debe coincidir con el id de uno de los actions.'
+  },
+  shape: {
+    control: 'inline-radio',
+    options: SHAPE_OPTIONS
+  },
+  size: {
+    control: 'inline-radio',
+    options: SIZE_OPTIONS
+  }
+};
+export const COMMON_ARGS = {
+  colorTheme: DEFAULT_COLOR_THEME,
+  selected: COMMON_ACTIONS[0].id,
+  shape: DEFAULT_TYPE,
+  size: DEFAULT_SIZE
+};

package/dist/esm/components/UTButtonGroup/styles.module.scss

@@ -0,0 +1,26 @@
+$rounded-border-radius: 100px;
+
+%container {
+  display: flex;
+  padding: var(--UT-buttonGroup-padding, 0.25rem);
+  width: fit-content;
+}
+
+.squareContainer {
+  @extend %container;
+  border-radius: var(--UT-buttonGroup-radius, 8px);
+
+  & > button {
+    border: none !important;
+  }
+}
+
+.circleContainer {
+  @extend %container;
+  border-radius: $rounded-border-radius;
+
+  & > button {
+    border: none !important;
+    border-radius: $rounded-border-radius !important;
+  }
+}

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

@@ -0,0 +1,14 @@
+export const retrieveStyle = _ref => {
+  var _theme$Palette$action;
+  let {
+    theme
+  } = _ref;
+  return {
+    lightBackground: {
+      backgroundColor: theme.Palette.light['03']
+    },
+    negativeBackground: {
+      backgroundColor: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.negative['02']) || theme.Palette.negative['02']
+    }
+  };
+};

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTCBUInput = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTCBUInput.propTypes = {
+  version: string
+};
+export default UTCBUInput;

package/dist/esm/components/UTCBUInput/versions/V0/index.js

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { array, func, string, objectOf, shape } from 'prop-types';
+import { metaPropTypes } from '../../../../types/formTypes';
+import UTTextInput from '../../../UTTextInput';
+import WithTheme from '../../../WithTheme';
+import { retrieveStyle } from './theme';
+const UTCBUInput = _ref => {
+  let {
+    classes,
+    dataTestId,
+    field,
+    helperTextDataTestId,
+    input,
+    meta
+  } = _ref;
+  const {
+    onChange,
+    value,
+    name
+  } = input;
+  const {
+    placeholder,
+    title,
+    configuration
+  } = field;
+  const {
+    entities,
+    cbu_number_key: cbuNumberKey,
+    cbu_entity_key: cbuEntityKey
+  } = configuration;
+  const [entity, setEntity] = useState('');
+  const onChangeText = newValue => {
+    const index = entities.findIndex(entityValue => new RegExp(entityValue.expression).test(newValue));
+    const entityToSet = index === -1 ? '' : entities[index].entity_name;
+    setEntity(entityToSet);
+    onChange({
+      [cbuNumberKey]: newValue,
+      [cbuEntityKey]: entityToSet
+    });
+  };
+  return /*#__PURE__*/React.createElement(UTTextInput, {
+    captionLabel: entity,
+    dataTestId: dataTestId,
+    field: field,
+    FormHelperTextProps: {
+      classes: {
+        root: classes.helper
+      }
+    },
+    helperTextDataTestId: helperTextDataTestId,
+    input: {
+      name,
+      onChange: onChangeText,
+      value: {
+        [cbuNumberKey]: value[cbuNumberKey],
+        [cbuEntityKey]: entity
+      }
+    },
+    inputObjectKey: cbuNumberKey,
+    label: title,
+    meta: meta,
+    placeholder: placeholder,
+    disabled: field === null || field === void 0 ? void 0 : field.read_only
+  });
+};
+UTCBUInput.propTypes = {
+  classes: objectOf(string),
+  dataTestId: string,
+  field: shape({
+    placeholder: string,
+    title: string,
+    configuration: shape({
+      entities: array
+    }),
+    cbu_number_key: string,
+    cbu_entity_key: string
+  }),
+  helperTextDataTestId: string,
+  input: shape({
+    onChange: func,
+    value: shape({
+      cbuNumber: string,
+      entityName: string
+    })
+  }),
+  meta: metaPropTypes
+};
+export default WithTheme(retrieveStyle)(UTCBUInput);

package/dist/esm/components/UTCBUInput/versions/V0/theme.js

@@ -0,0 +1,11 @@
+import { getIn } from 'seamless-immutable';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    helper: {
+      color: getIn(theme, ['UTCBUInput', 'helper', 'color'])
+    }
+  };
+};

package/dist/esm/components/UTCBUInput/versions/V1/README.md

@@ -0,0 +1,46 @@
+# UTCBUInput
+
+## Description
+
+`UTCBUInput` is a configurable input component for handling CBU (Clave Bancaria Uniforme) numbers, often used in banking contexts. It allows users to input a CBU number and automatically detects the corresponding entity (e.g., bank name) based on predefined rules. The component provides validation feedback, supports error messages, and can be customized through various props.
+
+## Props
+
+| Name                | Type                                                                       | Default | Description                                                                                                |
+| ------------------- | -------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------- |
+| entityConfiguration | shape({ cbu_number_key: string, cbu_entity_key: string, entities: array }) |         | Configuration for handling CBU numbers, including keys for CBU number and entity, and entity list.         |
+| error               | string                                                                     |         | Error message to display below the input field.                                                            |
+| onChange            | func                                                                       |         | Callback function triggered when the input value changes. Returns an object containing the CBU and entity. |
+| value               | shape({ cbuNumber: string, entityName: string })                           | `{}`    | Initial value for the CBU input. Expected format is an object with `cbuNumber` and `entityName`.           |
+| ...props            | any                                                                        |         | Inherits all other props from `UTTextInput`.                                                               |
+
+### Entity Configuration
+
+The `entityConfiguration` prop defines the configuration for CBU numbers and includes the following keys:
+
+- **cbu_number_key**: The key for accessing the CBU number within the `value` object.
+- **cbu_entity_key**: The key for accessing the entity name within the `value` object.
+- **entities**: An array of objects, each containing `expression` (a regex pattern to match the CBU) and `entity_name` (the name of the entity to display).
+
+### Handling Errors and Validations
+
+Errors and validations are managed through the `error` and `validations` props:
+
+- The `error` prop will display an error message below the input if a validation fails.
+- The `validations` prop displays the detected entity name in a validation format if the CBU is valid.
+
+If the `error` prop is set, any entity-related validation message will be hidden, ensuring only one validation message appears at a time.
+
+### Example Configuration for entityConfiguration
+
+```javascript
+const fieldConfiguration = {
+  cbu_number_key: 'CBU',
+  cbu_entity_key: 'BANK',
+  entities: [
+    { expression: '^005', entity_name: 'A.B.N. AMRO BANK N.V.' },
+    { expression: '^006', entity_name: 'BANCO SUDAMERIS' }
+    // Additional entities...
+  ]
+};
+```

package/dist/esm/components/UTCBUInput/versions/V1/index.js

@@ -0,0 +1,61 @@
+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 } from 'react';
+import { array, func, string, shape } from 'prop-types';
+import { propTypes as textInputPropTypes } from '../../../UTTextInput/versions/V1';
+import UTTextInput from '../../../UTTextInput';
+const UTCBUInput = _ref => {
+  let {
+    cbu_entity_key: cbuEntityKey,
+    cbu_number_key: cbuNumberKey,
+    entities,
+    error,
+    onChange,
+    value = {},
+    ...props
+  } = _ref;
+  const findEntity = input => {
+    const matchedEntity = entities.find(_ref2 => {
+      let {
+        expression
+      } = _ref2;
+      return new RegExp(expression).test(input);
+    });
+    return matchedEntity ? matchedEntity.entity_name : '';
+  };
+  const entity = useMemo(() => findEntity(value[cbuNumberKey] || ''), [value, cbuNumberKey, entities]);
+  const validations = useMemo(() => entity && !error ? [{
+    items: [{
+      text: entity,
+      withIcon: false
+    }]
+  }] : [], [entity, error]);
+  const onChangeText = newValue => {
+    const entityToSet = findEntity(newValue);
+    onChange({
+      [cbuNumberKey]: newValue,
+      [cbuEntityKey]: entityToSet
+    });
+  };
+  return /*#__PURE__*/React.createElement(UTTextInput, _extends({}, props, {
+    error: error,
+    onBlur: undefined,
+    onChange: onChangeText,
+    type: "numeric",
+    validations: validations,
+    value: value[cbuNumberKey],
+    version: "V1"
+  }));
+};
+UTCBUInput.propTypes = {
+  cbu_entity_key: string,
+  cbu_number_key: string,
+  entities: array,
+  error: string,
+  onChange: func,
+  value: shape({
+    cbuNumber: string,
+    entityName: string
+  }),
+  ...textInputPropTypes
+};
+export default UTCBUInput;

package/dist/esm/components/UTCalendar/components/Day/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { func, object, number, bool } from 'prop-types';
+import dayjs from 'dayjs';
+import UTTouchableWithoutFeedback from '../../../UTTouchableWithoutFeedback';
+import { DAY_FORMAT } from '../../constants';
+import styles from './styles.module.scss';
+const GenericRenderDay = _ref => {
+  let {
+    date,
+    bookingOptions,
+    selectedDayIndex,
+    setSelectedDayIndex,
+    dayInCurrentMonth
+  } = _ref;
+  const index = bookingOptions.findIndex(item => dayjs(item.value).isSame(dayjs(date), 'day'));
+  const available = dayInCurrentMonth && index !== -1;
+  const isSelected = index === selectedDayIndex;
+  return /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: "".concat(styles.daysRender, "  ").concat(!available && styles.disabledButton, " ").concat(isSelected && styles.selectedDay, " ").concat(!dayInCurrentMonth && styles.notInCurrentMonth),
+    onClick: available ? () => setSelectedDayIndex(index) : undefined
+  }, dayInCurrentMonth ? dayjs(date).format(DAY_FORMAT) : '');
+};
+GenericRenderDay.propTypes = {
+  date: object,
+  bookingOptions: object,
+  selectedDayIndex: number,
+  setSelectedDayIndex: func,
+  dayInCurrentMonth: bool
+};
+export default GenericRenderDay;

package/dist/esm/components/UTCalendar/components/Day/styles.module.scss

@@ -0,0 +1,36 @@
+.dateContainer {
+  grid-gap: 16px;
+  padding: 16px;
+
+  & > * {
+    padding: 0;
+  }
+}
+
+.daysRender {
+  background-color: var(--light01);
+  color: var(--gray04);
+  place-content: center;
+  flex-grow: 1;
+  height: 40px;
+  flex-wrap: wrap;
+
+  &:hover {
+    cursor: default;
+  }
+}
+
+.disabledButton {
+  background-color: var(--semanticError01);
+  color: var(--semanticError05);
+}
+
+.selectedDay {
+  background-color: var(--actionAccent04);
+  color: var(--light01);
+}
+
+.notInCurrentMonth { 
+  background-color: var(--light013);
+}
+

package/dist/esm/components/UTCalendar/components/TimeInput/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { array, func, string } from 'prop-types';
+import UTLabel from '../../../UTLabel';
+import UTRadioGroup from '../../../UTRadioGroup';
+import styles from './styles.module.scss';
+const TimeInput = _ref => {
+  let {
+    availableTimeSlots,
+    selectedTime,
+    setSelectedTime
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.timeInputContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.timeInputHeader
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    variant: "subtitle1"
+  }, "Seleccione el horario"), /*#__PURE__*/React.createElement(UTLabel, null, "Debe seleccionar un horario para continuar")), /*#__PURE__*/React.createElement(UTRadioGroup, {
+    options: availableTimeSlots,
+    value: selectedTime,
+    onChange: setSelectedTime,
+    version: "V1",
+    verticalSpacing: "small",
+    variant: "card"
+  }));
+};
+TimeInput.propTypes = {
+  availableTimeSlots: array,
+  selectedTime: string,
+  setSelectedTime: func
+};
+export default TimeInput;

package/dist/esm/components/UTCalendar/components/TimeInput/styles.module.scss

@@ -0,0 +1,12 @@
+.timeInputContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+  width: 100%;
+}
+
+.timeInputHeader {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 4px;
+}

package/dist/esm/components/UTCalendar/constants.js

@@ -0,0 +1,9 @@
+export const INPUT_VALUE_DEFAULT = '00:00';
+export const ONLY_ONE_WORK_SCHEDULE = 0;
+export const DAY_FORMAT = 'DD';
+export const FORMAT_DATE = 'YYYY-MM-DD';
+export const ICON_SIZE_DEFAULT = 32;
+export const FIELD_KEYS = {
+  DATE: 'date',
+  TIME: 'time'
+};

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

@@ -0,0 +1,114 @@
+import { DatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import { func, bool, string, object, array } from 'prop-types';
+import React, { useEffect, useMemo, useState } from 'react';
+import DateFnsUtils from '@date-io/date-fns';
+import esLocale from 'date-fns/locale/es';
+import isEmpty from 'lodash/isEmpty';
+import UTLabel from '../UTLabel';
+import UTIcon from '../UTIcon';
+import UTFieldLabel from '../UTFieldLabel';
+import { formatErrorToValidation } from '../UTValidation/utils';
+import UTValidation from '../UTValidation';
+import { ICON_SIZE_DEFAULT, FIELD_KEYS } from './constants';
+import TimeInput from './components/TimeInput';
+import Day from './components/Day';
+import styles from './styles.module.scss';
+const Calendar = _ref => {
+  var _options$selectedDayI2;
+  let {
+    dataTestId,
+    actions,
+    error,
+    onChange,
+    options,
+    required,
+    showLegend,
+    timeSelection,
+    title,
+    value
+  } = _ref;
+  const [selectedDayIndex, setSelectedDayIndex] = useState(value === null || value === void 0 ? void 0 : value[FIELD_KEYS.DATE]);
+  const [selectedTime, setSelectedTime] = useState(value === null || value === void 0 ? void 0 : value[FIELD_KEYS.TIME]);
+  const selectedDay = useMemo(() => {
+    var _options$selectedDayI;
+    return (_options$selectedDayI = options[selectedDayIndex]) === null || _options$selectedDayI === void 0 ? void 0 : _options$selectedDayI.value;
+  }, [selectedDayIndex]);
+  const validationData = useMemo(() => error && formatErrorToValidation(error), [error]);
+  useEffect(() => {
+    setSelectedTime(null);
+    onChange({
+      [FIELD_KEYS.DATE]: selectedDay
+    });
+  }, [selectedDayIndex]);
+  useEffect(() => {
+    onChange({
+      [FIELD_KEYS.DATE]: selectedDay,
+      [FIELD_KEYS.TIME]: selectedTime
+    });
+  }, [selectedTime]);
+  const availableTimeSlots = options === null || options === void 0 || (_options$selectedDayI2 = options[selectedDayIndex]) === null || _options$selectedDayI2 === void 0 ? void 0 : _options$selectedDayI2.configuration.times;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container,
+    "data-testid": dataTestId
+  }, title && /*#__PURE__*/React.createElement(UTFieldLabel, {
+    actions: actions,
+    required: required
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.calendarContainer
+  }, /*#__PURE__*/React.createElement(MuiPickersUtilsProvider, {
+    utils: DateFnsUtils,
+    locale: esLocale
+  }, /*#__PURE__*/React.createElement(DatePicker, {
+    disableToolbar: true,
+    variant: "static",
+    value: selectedDay,
+    onChange: () => null,
+    renderDay: (date, _, dayInCurrentMonth) => /*#__PURE__*/React.createElement(Day, {
+      date: date,
+      bookingOptions: options,
+      selectedDayIndex: selectedDayIndex,
+      setSelectedDayIndex: setSelectedDayIndex,
+      dayInCurrentMonth: dayInCurrentMonth,
+      setSelectedDay: setSelectedDayIndex
+    }),
+    minDate: new Date()
+  })), showLegend && /*#__PURE__*/React.createElement("div", {
+    className: styles.bottomReference
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.legendReference
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    className: styles.legendLabel
+  }, "Sin horarios disponibles"))), timeSelection && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.timeRankContainer, " ").concat(isEmpty(availableTimeSlots) && styles.emptyTimeRankContainer)
+  }, !isEmpty(availableTimeSlots) ? /*#__PURE__*/React.createElement(TimeInput, {
+    availableTimeSlots: availableTimeSlots,
+    selectedTime: selectedTime,
+    setSelectedTime: setSelectedTime
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles.calendarIconWrapper
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    name: "IconCalendarEvent",
+    colorTheme: "gray",
+    size: ICON_SIZE_DEFAULT
+  })), /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray"
+  }, selectedDay ? 'No hay horarios disponibles' : 'Debe seleccionar una fecha primero')))), validationData && /*#__PURE__*/React.createElement(UTValidation, {
+    validationData: validationData
+  }));
+};
+Calendar.propTypes = {
+  actions: array,
+  dataTestId: string,
+  error: string,
+  onChange: func,
+  options: array,
+  required: bool,
+  showLegend: bool,
+  timeSelection: bool,
+  title: string,
+  value: object
+};
+export default Calendar;