@widergy/mobile-ui 2.16.0 → 2.17.1

package/lib/components/UTBottomSheet/index.js

@@ -96,6 +96,7 @@ const UTBottomSheet = ({
   }, [height]);
 
   const ChildrenContainer = scrolleable ? ScrollView : View;
+  const hasHeader = !!(title || buttonText || description);
 
   const actionAlignment =
     actionAlignment_ || [primaryAction, secondaryAction, tertiaryAction].filter(Boolean).length === 2
@@ -118,44 +119,46 @@ const UTBottomSheet = ({
     >
       <Animated.View style={[styles.animatedContainer(theme), { height: modalHeight }, pan.getLayout()]}>
         <SafeAreaView onLayout={onLayout} style={styles.content(adjustableHeight)}>
-          <View style={styles.dragHandle}>
+          <View style={styles.dragHandle(hasHeader)}>
             <View style={styles.handleIndicator(theme)} />
           </View>
           <View style={styles.content(adjustableHeight)}>
-            <View style={styles.header}>
-              <View style={styles.headerTopRow}>
-                <UTFieldLabel
-                  required={required}
-                  style={styles.title}
-                  variant="subtitle1"
-                  weight="medium"
-                  dataTestId={dataTestId ? `${dataTestId}.${titleTestId}` : undefined}
-                  {...titleProps}
-                >
-                  {title}
-                </UTFieldLabel>
-                {buttonText && (
-                  <UTButton
-                    colorTheme="primary"
-                    onPress={onButtonPress ?? onClose}
-                    variant="semitransparent"
-                    dataTestId={dataTestId ? `${dataTestId}.${closeButton}` : undefined}
-                    {...onCloseProps}
+            {hasHeader && (
+              <View style={styles.header}>
+                <View style={styles.headerTopRow}>
+                  <UTFieldLabel
+                    required={required}
+                    style={styles.title}
+                    variant="subtitle1"
+                    weight="medium"
+                    dataTestId={dataTestId ? `${dataTestId}.${titleTestId}` : undefined}
+                    {...titleProps}
                   >
-                    {buttonText}
-                  </UTButton>
+                    {title}
+                  </UTFieldLabel>
+                  {buttonText && (
+                    <UTButton
+                      colorTheme="primary"
+                      onPress={onButtonPress ?? onClose}
+                      variant="semitransparent"
+                      dataTestId={dataTestId ? `${dataTestId}.${closeButton}` : undefined}
+                      {...onCloseProps}
+                    >
+                      {buttonText}
+                    </UTButton>
+                  )}
+                </View>
+                {description && (
+                  <UTLabel
+                    colorTheme="gray"
+                    variant="small"
+                    dataTestId={dataTestId ? `${dataTestId}.${descriptionTestId}` : undefined}
+                  >
+                    {description}
+                  </UTLabel>
                 )}
               </View>
-              {description && (
-                <UTLabel
-                  colorTheme="gray"
-                  variant="small"
-                  dataTestId={dataTestId ? `${dataTestId}.${descriptionTestId}` : undefined}
-                >
-                  {description}
-                </UTLabel>
-              )}
-            </View>
+            )}
             <ChildrenContainer
               keyboardShouldPersistTaps="handled"
               style={styles.childrenContainer(adjustableHeight, withBodyPadding)}

package/lib/components/UTBottomSheet/styles.js

@@ -42,11 +42,12 @@ const styles = StyleSheet.create({
   content: adjustableHeight => ({
     flexGrow: adjustableHeight ? 0 : 1
   }),
-  dragHandle: {
+  dragHandle: hasHeader => ({
     alignItems: 'center',
     backgroundColor: 'transparent',
-    padding: 16
-  },
+    padding: 16,
+    paddingBottom: hasHeader ? 16 : 0
+  }),
   handleIndicator: theme => ({
     backgroundColor: theme.Palette.light['04'],
     borderRadius: 2.5,

package/lib/components/UTDatePicker/README.md

@@ -0,0 +1,73 @@
+# UTDatePicker
+
+Selector de fechas con calendario modal y soporte de entrada manual. Adaptación mobile del componente `UTDatePicker` de Energy-UI web (V1).
+
+## Props
+
+| Nombre      | Tipo                      | Default       | Descripción                                                           |
+|-------------|---------------------------|---------------|-----------------------------------------------------------------------|
+| clearable   | `bool`                    | `true`        | Muestra botón para limpiar la fecha seleccionada                      |
+| CustomIcon  | `elementType`             | —             | Ícono personalizado para el botón del calendario                      |
+| disabled    | `bool`                    | —             | Deshabilita toda interacción                                          |
+| error       | `string`                  | `''`          | Mensaje de error externo                                              |
+| helpText    | `string`                  | —             | Texto de ayuda debajo del campo                                       |
+| modalProps  | `object`                  | —             | Props adicionales para el Modal de React Native (equivalente mobile de `popoverProps` en web) |
+| onChange    | `func`                    | `() => {}`   | Callback al seleccionar una fecha. Recibe string en formato `DD/MM/YYYY` |
+| placeholder | `string`                  | `'DD/MM/AAAA'`| Texto placeholder del campo                                           |
+| range       | `{ maxDate, minDate }`    | —             | Restricción de rango. Fechas en formato `DD/MM/YYYY`                  |
+| readOnly    | `bool`                    | `false`       | Modo solo lectura                                                     |
+| required    | `bool`                    | —             | Marca el título como requerido                                        |
+| size        | `'sm' \| 'md'`            | `'sm'`        | Tamaño del campo de entrada                                           |
+| style       | `{ root: ViewStyle }`     | —             | Estilos personalizados para el contenedor raíz                        |
+| title       | `string`                  | —             | Etiqueta superior del campo                                           |
+| value       | `string`                  | `''`          | Fecha seleccionada en formato `DD/MM/YYYY`                            |
+| variant     | `'select' \| 'picker'`    | `'select'`    | Variante visual del campo. `'picker'` usa fondo transparente sin borde |
+
+## Variantes
+
+### `variant='select'` (default)
+Campo con borde y fondo blanco. Muestra el mensaje de error debajo del campo.
+
+### `variant='picker'`
+Fondo transparente sin borde. El error no se muestra debajo (se maneja externamente).
+
+## Adaptaciones mobile vs web
+
+- El calendario se abre mediante el ícono de calendario (no al hacer foco en el input, como en web).
+- El `Popover` de MUI fue reemplazado por un `Modal` de React Native. Usar `modalProps` en lugar de `popoverProps`.
+- Los estilos usan `StyleSheet` y el sistema de theming de la librería (no CSS Modules).
+- La entrada de texto usa teclado numérico (`type='number'`).
+
+## Ejemplos
+
+```jsx
+// Básico
+<UTDatePicker
+  onChange={date => console.log(date)}
+  title="Fecha de nacimiento"
+  value={selectedDate}
+/>
+
+// Con rango y error
+<UTDatePicker
+  error="La fecha no es válida"
+  onChange={setDate}
+  range={{ minDate: '01/01/2020', maxDate: '31/12/2030' }}
+  title="Seleccioná una fecha"
+  value={date}
+/>
+
+// Variante picker (transparente)
+<UTDatePicker
+  onChange={setDate}
+  value={date}
+  variant="picker"
+/>
+
+// Solo lectura
+<UTDatePicker
+  readOnly
+  title="Fecha registrada"
+  value="15/06/2024"
+/>
+```

package/lib/components/UTDatePicker/components/Calendar/constants.js

@@ -0,0 +1,3 @@
+export const CALENDAR_LOCALE = 'es';
+export const PICKER_ITEM_HEIGHT = 40;
+export const WEEK_KEY_FORMAT = 'YYYY-MM-DD';

package/lib/components/UTDatePicker/components/Calendar/index.js

@@ -0,0 +1,197 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import dayjs from 'dayjs';
+import 'dayjs/locale/es';
+import { View } from 'react-native';
+import { func, object, string } from 'prop-types';
+
+import UTButton from '../../../UTButton';
+import UTLabel from '../../../UTLabel';
+import { TEST_IDS } from '../../../../constants/testIds';
+import {
+  CALENDAR_VIEWS,
+  DAY_UNIT,
+  MONTH_LABELS,
+  MONTH_UNIT,
+  MONTH_YEAR_FORMAT,
+  OUTPUT_LABEL_MASK,
+  WEEKDAYS_LABELS
+} from '../../constants';
+import styles from '../../styles';
+import { getWeeks, getYearRange } from '../../utils';
+import Day from '../Day';
+import PickerColumn from '../PickerColumn';
+
+import { CALENDAR_LOCALE, PICKER_ITEM_HEIGHT, WEEK_KEY_FORMAT } from './constants';
+
+const { UTDatePicker: datePickerTestIds } = TEST_IDS;
+
+const Calendar = ({ dataTestId, maxDate, minDate, onDaySelect, pickedDate }) => {
+  const monthScrollRef = useRef(null);
+  const yearScrollRef = useRef(null);
+  const [currentMonth, setCurrentMonth] = useState(pickedDate?.isValid() ? pickedDate : dayjs());
+  const [viewMode, setViewMode] = useState(CALENDAR_VIEWS.calendar);
+
+  useEffect(() => {
+    if (pickedDate?.isValid()) setCurrentMonth(pickedDate);
+  }, [pickedDate]);
+
+  const weeks = getWeeks(currentMonth);
+  const years = useMemo(() => getYearRange(minDate, maxDate), [minDate, maxDate]);
+  const selectedYear = pickedDate?.isValid() ? pickedDate.year() : null;
+  const selectedMonth = pickedDate?.isValid() ? pickedDate.month() : null;
+
+  const visibleMonths = useMemo(() => {
+    const viewedYear = currentMonth.year();
+    const parsedMin = minDate ? dayjs(minDate, OUTPUT_LABEL_MASK) : null;
+    const parsedMax = maxDate ? dayjs(maxDate, OUTPUT_LABEL_MASK) : null;
+    const minMonthBound = parsedMin?.year() === viewedYear ? parsedMin.month() : 0;
+    const maxMonthBound = parsedMax?.year() === viewedYear ? parsedMax.month() : 11;
+    return MONTH_LABELS.map((label, index) => ({ index, label })).filter(
+      ({ index }) => index >= minMonthBound && index <= maxMonthBound
+    );
+  }, [currentMonth, minDate, maxDate]);
+
+  const handlePrevMonth = () => setCurrentMonth(prev => prev.subtract(1, MONTH_UNIT));
+  const handleNextMonth = () => setCurrentMonth(prev => prev.add(1, MONTH_UNIT));
+
+  const handleMonthSelect = month => {
+    setCurrentMonth(prev => prev.month(month));
+  };
+
+  const handleYearSelect = year => {
+    setCurrentMonth(prev => prev.year(year));
+  };
+
+  const isInYearView = viewMode === CALENDAR_VIEWS.year;
+  const rawMonthLabel = currentMonth.locale(CALENDAR_LOCALE).format(MONTH_YEAR_FORMAT);
+  const monthYearLabel = rawMonthLabel.charAt(0).toUpperCase() + rawMonthLabel.slice(1);
+
+  const toggleViewMode = () =>
+    setViewMode(prev => (prev === CALENDAR_VIEWS.calendar ? CALENDAR_VIEWS.year : CALENDAR_VIEWS.calendar));
+
+  useEffect(() => {
+    if (!isInYearView) return;
+    const targetMonth = selectedMonth ?? currentMonth.month();
+    const monthScrollPos = visibleMonths.findIndex(m => m.index === targetMonth);
+    const yearIdx = years.findIndex(y => y === (selectedYear ?? currentMonth.year()));
+    const id = setTimeout(() => {
+      if (monthScrollPos >= 0) {
+        monthScrollRef.current?.scrollTo({ animated: false, y: monthScrollPos * PICKER_ITEM_HEIGHT });
+      }
+      if (yearIdx >= 0) yearScrollRef.current?.scrollTo({ animated: false, y: yearIdx * PICKER_ITEM_HEIGHT });
+    }, 50);
+    return () => clearTimeout(id);
+  }, [isInYearView, visibleMonths, years, selectedMonth, selectedYear, currentMonth]);
+
+  const isDisabled = date => {
+    if (minDate && date.isBefore(dayjs(minDate, OUTPUT_LABEL_MASK), DAY_UNIT)) return true;
+    if (maxDate && date.isAfter(dayjs(maxDate, OUTPUT_LABEL_MASK), DAY_UNIT)) return true;
+    return false;
+  };
+
+  const monthItems = visibleMonths.map(({ index, label }) => ({
+    key: label,
+    label,
+    onPress: () => handleMonthSelect(index),
+    selected: index === currentMonth.month(),
+    testID: `${datePickerTestIds.monthItem}.${label}`
+  }));
+
+  const yearItems = years.map(year => ({
+    key: year,
+    label: String(year),
+    onPress: () => handleYearSelect(year),
+    selected: year === currentMonth.year(),
+    testID: `${datePickerTestIds.yearItem}.${year}`
+  }));
+
+  return (
+    <View style={styles.calendarRoot} testID={dataTestId || datePickerTestIds.calendar}>
+      <View style={styles.nav}>
+        {isInYearView ? (
+          <View style={styles.navSpacer} />
+        ) : (
+          <UTButton
+            colorTheme="secondary"
+            dataTestId={datePickerTestIds.calendarPrevBtn}
+            Icon="IconChevronLeft"
+            onPress={handlePrevMonth}
+            size="small"
+            variant="text"
+          />
+        )}
+
+        <UTButton
+          colorTheme="secondary"
+          dataTestId={datePickerTestIds.calendarMonthYear}
+          Icon={isInYearView ? 'IconChevronUp' : 'IconChevronDown'}
+          iconPlacement="right"
+          onPress={toggleViewMode}
+          size="small"
+          style={{ root: styles.navLabel }}
+          variant="text"
+        >
+          {monthYearLabel}
+        </UTButton>
+
+        {isInYearView ? (
+          <View style={styles.navSpacer} />
+        ) : (
+          <UTButton
+            colorTheme="secondary"
+            dataTestId={datePickerTestIds.calendarNextBtn}
+            Icon="IconChevronRight"
+            onPress={handleNextMonth}
+            size="small"
+            variant="text"
+          />
+        )}
+      </View>
+
+      {isInYearView ? (
+        <View style={styles.pickerContainer}>
+          <PickerColumn items={monthItems} scrollRef={monthScrollRef} testID={datePickerTestIds.monthView} />
+          <PickerColumn items={yearItems} scrollRef={yearScrollRef} testID={datePickerTestIds.yearView} />
+        </View>
+      ) : (
+        <View style={styles.month}>
+          <View style={styles.week}>
+            {WEEKDAYS_LABELS.map(label => (
+              <UTLabel colorTheme="gray" key={label} style={styles.dayCell} variant="small" weight="medium">
+                {label}
+              </UTLabel>
+            ))}
+          </View>
+
+          {weeks.map(week => (
+            <View key={week[0].format(WEEK_KEY_FORMAT)} style={styles.week}>
+              {week.map(date => {
+                const dayInCurrentMonth = date.month() === currentMonth.month();
+                return (
+                  <Day
+                    date={date}
+                    dayInCurrentMonth={dayInCurrentMonth}
+                    isDisabled={isDisabled(date)}
+                    key={date.format(WEEK_KEY_FORMAT)}
+                    onClick={onDaySelect}
+                    pickedDate={pickedDate}
+                  />
+                );
+              })}
+            </View>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};
+
+Calendar.propTypes = {
+  dataTestId: string,
+  maxDate: string,
+  minDate: string,
+  onDaySelect: func,
+  pickedDate: object
+};
+
+export default Calendar;

package/lib/components/UTDatePicker/components/Day/index.js

@@ -0,0 +1,44 @@
+import React, { memo } from 'react';
+import dayjs from 'dayjs';
+import { View } from 'react-native';
+import { bool, func, object } from 'prop-types';
+
+import { useTheme } from '../../../../theming';
+import UTButton from '../../../UTButton';
+import { DAY_NUMBER_FORMAT } from '../../constants';
+import { getDayCellButtonStyle } from '../../theme';
+import { isSelected } from '../../utils';
+
+import styles from './styles';
+
+const Day = ({ date, dayInCurrentMonth, isDisabled, onClick, pickedDate }) => {
+  const theme = useTheme();
+  const selected = isSelected(date, pickedDate);
+
+  if (!dayInCurrentMonth) return <View style={styles.otherMonthCell} />;
+
+  const buttonStyle = getDayCellButtonStyle(selected, theme);
+
+  return (
+    <UTButton
+      colorTheme={selected ? 'primary' : 'secondary'}
+      disabled={isDisabled}
+      onPress={() => onClick(date)}
+      size="small"
+      style={buttonStyle}
+      variant={selected ? 'filled' : 'text'}
+    >
+      {dayjs(date).format(DAY_NUMBER_FORMAT)}
+    </UTButton>
+  );
+};
+
+Day.propTypes = {
+  date: object,
+  dayInCurrentMonth: bool,
+  isDisabled: bool,
+  onClick: func,
+  pickedDate: object
+};
+
+export default memo(Day);

package/lib/components/UTDatePicker/components/Day/styles.js

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  otherMonthCell: {
+    flex: 1,
+    height: 36
+  }
+});

package/lib/components/UTDatePicker/components/PickerColumn/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import { arrayOf, bool, func, number, object, oneOfType, shape, string } from 'prop-types';
+
+import { useTheme } from '../../../../theming';
+import UTButton from '../../../UTButton';
+import { getYearItemStyle } from '../../theme';
+import styles from '../../styles';
+
+const PickerColumn = ({ items, scrollRef, testID }) => {
+  const theme = useTheme();
+
+  return (
+    <View style={styles.pickerColumn}>
+      <ScrollView
+        contentContainerStyle={styles.pickerScrollContent}
+        ref={scrollRef}
+        showsVerticalScrollIndicator={false}
+        style={styles.pickerScroll}
+        testID={testID}
+      >
+        {items.map(({ key, label, onPress, selected, testID: itemTestID }) => {
+          const itemTheme = getYearItemStyle(selected, theme);
+          return (
+            <UTButton
+              colorTheme={selected ? 'primary' : 'secondary'}
+              dataTestId={itemTestID}
+              key={key}
+              onPress={onPress}
+              size="small"
+              style={{ root: { ...styles.yearItem, ...itemTheme } }}
+              variant={selected ? 'filled' : 'text'}
+            >
+              {label}
+            </UTButton>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+};
+
+PickerColumn.propTypes = {
+  items: arrayOf(
+    shape({
+      key: oneOfType([number, string]),
+      label: string,
+      onPress: func,
+      selected: bool,
+      testID: string
+    })
+  ),
+  scrollRef: object,
+  testID: string
+};
+
+export default PickerColumn;

package/lib/components/UTDatePicker/constants.js

@@ -0,0 +1,48 @@
+export const OUTPUT_LABEL_MASK = 'DD/MM/YYYY';
+
+export const WEEKDAYS_LABELS = ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'];
+
+export const MONTH_YEAR_FORMAT = 'MMMM YYYY';
+
+export const DAY_NUMBER_FORMAT = 'DD';
+
+export const DEFAULT_PLACEHOLDER = 'DD/MM/AAAA';
+
+export const TYPING_ERROR_MESSAGE = 'Fecha inválida';
+
+export const VARIANTS = {
+  picker: 'picker',
+  select: 'select'
+};
+
+export const SIZES = {
+  md: 'md',
+  sm: 'sm'
+};
+
+export const DAY_UNIT = 'day';
+export const MONTH_UNIT = 'month';
+
+export const CALENDAR_VIEWS = {
+  calendar: 'calendar',
+  year: 'year'
+};
+
+export const MONTH_LABELS = [
+  'Ene',
+  'Feb',
+  'Mar',
+  'Abr',
+  'May',
+  'Jun',
+  'Jul',
+  'Ago',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dic'
+];
+
+export const YEAR_RANGE_BEFORE = 50;
+export const YEAR_RANGE_AFTER = 10;
+export const YEARS_PER_ROW = 3;

package/lib/components/UTDatePicker/index.js

@@ -0,0 +1,135 @@
+import React, { useState, useEffect } from 'react';
+import { Keyboard } from 'react-native';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+import { COMPONENT_KEYS } from '../UTBaseInputField/constants';
+
+import { DEFAULT_PLACEHOLDER, OUTPUT_LABEL_MASK, VARIANTS } from './constants';
+import UTDatePickerLayout from './layout';
+import { propTypes } from './proptypes';
+import { dateMatchesFormat, getFinalDate } from './utils';
+
+dayjs.extend(customParseFormat);
+
+const UTDatePicker = ({
+  modalProps,
+  clearable = true,
+  CustomIcon,
+  disabled,
+  error = '',
+  helpText,
+  onChange = () => {},
+  placeholder,
+  range,
+  readOnly = false,
+  required,
+  style,
+  title,
+  value = '',
+  variant = VARIANTS.select
+}) => {
+  const { maxDate, minDate } = range || {};
+
+  const [pickedDate, setPickedDate] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (!value && pickedDate?.isValid()) setPickedDate(null);
+    else if (dateMatchesFormat(value, OUTPUT_LABEL_MASK)) setPickedDate(dayjs(value, OUTPUT_LABEL_MASK));
+    else setPickedDate(null);
+  }, [value]);
+
+  const openCalendar = () => {
+    if (disabled || readOnly) return;
+    Keyboard.dismiss();
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const handleDaySelect = date => {
+    const finalDate = getFinalDate({ date, maxDate, minDate });
+    setPickedDate(finalDate);
+    if (finalDate.isValid()) onChange(finalDate.format(OUTPUT_LABEL_MASK));
+    else onChange('');
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    setPickedDate(null);
+    onChange('');
+  };
+
+  const displayValue = pickedDate?.isValid() ? pickedDate.format(OUTPUT_LABEL_MASK) : '';
+
+  const hasError = !!error;
+  const hasValue = !!pickedDate?.isValid();
+  const displayPlaceholder = placeholder || DEFAULT_PLACEHOLDER;
+  const errorMessage = error;
+  const isTransparent = variant === VARIANTS.picker;
+
+  const showClearButton = clearable && hasValue && !disabled && !readOnly;
+  const showCalendarIcon = !readOnly && !disabled;
+
+  const calendarAction = {
+    colorTheme: hasError ? 'error' : isOpen ? 'primary' : 'gray',
+    Icon: CustomIcon || 'IconCalendarEvent',
+    onPress: openCalendar,
+    size: 'small',
+    variant: 'text'
+  };
+
+  const clearAction = {
+    colorTheme: 'secondary',
+    Icon: 'IconX',
+    onPress: handleClear,
+    size: 'small',
+    variant: 'text'
+  };
+
+  const rightAdornments = showCalendarIcon
+    ? [
+        {
+          name: COMPONENT_KEYS.ACTION,
+          props: { action: showClearButton ? clearAction : calendarAction }
+        }
+      ]
+    : [];
+
+  const inputStyle = isTransparent
+    ? { container: { backgroundColor: 'transparent', borderColor: 'transparent' } }
+    : { container: { alignItems: 'stretch', paddingHorizontal: 12 } };
+
+  return (
+    <UTDatePickerLayout
+      disabled={disabled}
+      displayPlaceholder={displayPlaceholder}
+      displayValue={displayValue}
+      errorMessage={errorMessage}
+      handleClose={handleClose}
+      handleDaySelect={handleDaySelect}
+      hasError={hasError}
+      helpText={helpText}
+      inputStyle={inputStyle}
+      isOpen={isOpen}
+      maxDate={maxDate}
+      minDate={minDate}
+      modalProps={modalProps}
+      onPress={openCalendar}
+      pickedDate={pickedDate}
+      readOnly={readOnly}
+      required={required}
+      rightAdornments={rightAdornments}
+      style={style}
+      title={title}
+      variant={variant}
+    />
+  );
+};
+
+UTDatePicker.propTypes = propTypes;
+
+export default UTDatePicker;