@widergy/energy-ui 3.172.3 → 3.173.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

@@ -1 +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};
+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/theme.js

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

@@ -1 +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:version="V0",...props}=_ref;const Component={V0:V0,V1:V1}[version];return React.createElement(Component,props)};UTCBUInput.propTypes={version:string};export default UTCBUInput;
+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

@@ -1 +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:classes,dataTestId:dataTestId,field:field,helperTextDataTestId:helperTextDataTestId,input:input,meta:meta}=_ref;const{onChange:onChange,value:value,name:name}=input,{placeholder:placeholder,title:title,configuration:configuration}=field,{entities:entities,cbu_number_key:cbuNumberKey,cbu_entity_key:cbuEntityKey}=configuration,[entity,setEntity]=useState("");return React.createElement(UTTextInput,{captionLabel:entity,dataTestId:dataTestId,field:field,FormHelperTextProps:{classes:{root:classes.helper}},helperTextDataTestId:helperTextDataTestId,input:{name:name,onChange:newValue=>{const index=entities.findIndex(entityValue=>new RegExp(entityValue.expression).test(newValue)),entityToSet=-1===index?"":entities[index].entity_name;setEntity(entityToSet),onChange({[cbuNumberKey]:newValue,[cbuEntityKey]:entityToSet})},value:{[cbuNumberKey]:value[cbuNumberKey],[cbuEntityKey]:entity}},inputObjectKey:cbuNumberKey,label:title,meta:meta,placeholder:placeholder,disabled:null==field?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);
+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

@@ -1 +1,11 @@
-import{getIn}from"seamless-immutable";export const retrieveStyle=_ref=>{let{theme:theme}=_ref;return{helper:{color:getIn(theme,["UTCBUInput","helper","color"])}}};
+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

@@ -1 +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:entities,error:error,onChange:onChange,value:value={},...props}=_ref;const findEntity=input=>{const matchedEntity=entities.find(_ref2=>{let{expression:expression}=_ref2;return new RegExp(expression).test(input)});return matchedEntity?matchedEntity.entity_name:""},entity=useMemo(()=>findEntity(value[cbuNumberKey]||""),[value,cbuNumberKey,entities]),validations=useMemo(()=>entity&&!error?[{items:[{text:entity,withIcon:!1}]}]:[],[entity,error]);return React.createElement(UTTextInput,_extends({},props,{error:error,onBlur:void 0,onChange:newValue=>{const entityToSet=findEntity(newValue);onChange({[cbuNumberKey]:newValue,[cbuEntityKey]:entityToSet})},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;
+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

@@ -1 +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:date,bookingOptions:bookingOptions,selectedDayIndex:selectedDayIndex,setSelectedDayIndex:setSelectedDayIndex,dayInCurrentMonth:dayInCurrentMonth}=_ref;const index=bookingOptions.findIndex(item=>dayjs(item.value).isSame(dayjs(date),"day")),available=dayInCurrentMonth&&-1!==index,isSelected=index===selectedDayIndex;return React.createElement(UTTouchableWithoutFeedback,{className:"".concat(styles.daysRender,"  ").concat(!available&&styles.disabledButton," ").concat(isSelected&&styles.selectedDay," ").concat(!dayInCurrentMonth&&styles.notInCurrentMonth),onClick:available?()=>setSelectedDayIndex(index):void 0},dayInCurrentMonth?dayjs(date).format(DAY_FORMAT):"")};GenericRenderDay.propTypes={date:object,bookingOptions:object,selectedDayIndex:number,setSelectedDayIndex:func,dayInCurrentMonth:bool};export default GenericRenderDay;
+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/TimeInput/index.js

@@ -1 +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:availableTimeSlots,selectedTime:selectedTime,setSelectedTime:setSelectedTime}=_ref;return React.createElement("div",{className:styles.timeInputContainer},React.createElement("div",{className:styles.timeInputHeader},React.createElement(UTLabel,{variant:"subtitle1"},"Seleccione el horario"),React.createElement(UTLabel,null,"Debe seleccionar un horario para continuar")),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;
+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/constants.js

@@ -1 +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"};
+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

@@ -1 +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:dataTestId,actions:actions,error:error,onChange:onChange,options:options,required:required,showLegend:showLegend,timeSelection:timeSelection,title:title,value:value}=_ref;const[selectedDayIndex,setSelectedDayIndex]=useState(null==value?void 0:value[FIELD_KEYS.DATE]),[selectedTime,setSelectedTime]=useState(null==value?void 0:value[FIELD_KEYS.TIME]),selectedDay=useMemo(()=>{var _options$selectedDayI;return null===(_options$selectedDayI=options[selectedDayIndex])||void 0===_options$selectedDayI?void 0:_options$selectedDayI.value},[selectedDayIndex]),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=null==options||null===(_options$selectedDayI2=options[selectedDayIndex])||void 0===_options$selectedDayI2?void 0:_options$selectedDayI2.configuration.times;return React.createElement("div",{className:styles.container,"data-testid":dataTestId},title&&React.createElement(UTFieldLabel,{actions:actions,required:required},title),React.createElement("div",{className:styles.container},React.createElement("div",{className:styles.calendarContainer},React.createElement(MuiPickersUtilsProvider,{utils:DateFnsUtils,locale:esLocale},React.createElement(DatePicker,{disableToolbar:!0,variant:"static",value:selectedDay,onChange:()=>null,renderDay:(date,_,dayInCurrentMonth)=>React.createElement(Day,{date:date,bookingOptions:options,selectedDayIndex:selectedDayIndex,setSelectedDayIndex:setSelectedDayIndex,dayInCurrentMonth:dayInCurrentMonth,setSelectedDay:setSelectedDayIndex}),minDate:new Date})),showLegend&&React.createElement("div",{className:styles.bottomReference},React.createElement("div",{className:styles.legendReference}),React.createElement(UTLabel,{colorTheme:"gray",className:styles.legendLabel},"Sin horarios disponibles"))),timeSelection&&React.createElement("div",{className:"".concat(styles.timeRankContainer," ").concat(isEmpty(availableTimeSlots)&&styles.emptyTimeRankContainer)},isEmpty(availableTimeSlots)?React.createElement(React.Fragment,null,React.createElement("div",{className:styles.calendarIconWrapper},React.createElement(UTIcon,{name:"IconCalendarEvent",colorTheme:"gray",size:ICON_SIZE_DEFAULT})),React.createElement(UTLabel,{colorTheme:"gray"},selectedDay?"No hay horarios disponibles":"Debe seleccionar una fecha primero")):React.createElement(TimeInput,{availableTimeSlots:availableTimeSlots,selectedTime:selectedTime,setSelectedTime:setSelectedTime}))),validationData&&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;
+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;

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

@@ -1 +1,28 @@
-function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==typeof i?i:i+""}function _toPrimitive(t,r){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}import React,{PureComponent}from"react";import ReCAPTCHA from"react-google-recaptcha";import{string,func}from"prop-types";class UTCaptcha extends PureComponent{constructor(){super(...arguments),_defineProperty(this,"onChange",value=>this.props.onChange(value))}render(){return React.createElement("div",{className:this.props.className},React.createElement(ReCAPTCHA,{sitekey:this.props.siteKey,onChange:this.onChange,size:this.props.size}))}}UTCaptcha.propTypes={siteKey:string.isRequired,onChange:func.isRequired,size:string.isRequired,className:string};export default UTCaptcha;
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { PureComponent } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { string, func } from 'prop-types';
+class UTCaptcha extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "onChange", value => this.props.onChange(value));
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: this.props.className
+    }, /*#__PURE__*/React.createElement(ReCAPTCHA, {
+      sitekey: this.props.siteKey,
+      onChange: this.onChange,
+      size: this.props.size
+    }));
+  }
+}
+UTCaptcha.propTypes = {
+  siteKey: string.isRequired,
+  onChange: func.isRequired,
+  size: string.isRequired,
+  className: string
+};
+export default UTCaptcha;