@widergy/mobile-ui 2.17.0 → 2.18.0

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;

package/lib/components/UTDatePicker/layout.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+import { array, bool, func, object, string } from 'prop-types';
+
+import UTBaseInputField from '../UTBaseInputField';
+import UTBottomSheet from '../UTBottomSheet';
+import UTFieldLabel from '../UTFieldLabel';
+import UTLabel from '../UTLabel';
+import UTValidation from '../UTValidation';
+import { TEST_IDS } from '../../constants/testIds';
+
+import Calendar from './components/Calendar';
+import { VARIANTS } from './constants';
+import styles from './styles';
+
+const { UTDatePicker: datePickerTestIds } = TEST_IDS;
+
+const UTDatePickerLayout = ({
+  disabled,
+  displayPlaceholder,
+  displayValue,
+  errorMessage,
+  handleClose,
+  handleDaySelect,
+  hasError,
+  helpText,
+  inputStyle,
+  isOpen,
+  maxDate,
+  minDate,
+  modalProps,
+  onPress,
+  pickedDate,
+  readOnly,
+  required,
+  rightAdornments,
+  style,
+  title,
+  variant
+}) => (
+  <View style={[styles.root, style?.root]} testID={datePickerTestIds.root}>
+    {!!title && <UTFieldLabel required={required}>{title}</UTFieldLabel>}
+
+    <Pressable onPress={onPress} style={styles.pressable}>
+      <UTBaseInputField
+        alwaysShowPlaceholder
+        dataTestId={datePickerTestIds.input}
+        disabled={disabled}
+        editable={false}
+        error={hasError}
+        placeholder={displayPlaceholder}
+        readOnly={readOnly}
+        rightAdornments={rightAdornments}
+        style={inputStyle}
+        value={displayValue}
+      />
+    </Pressable>
+
+    {!!helpText && (
+      <UTLabel colorTheme="gray" variant="small">
+        {helpText}
+      </UTLabel>
+    )}
+
+    {variant === VARIANTS.select && !!errorMessage && (
+      <UTValidation
+        dataTestId={datePickerTestIds.errorMessage}
+        validationData={[{ items: [{ status: 'error', text: errorMessage }] }]}
+      />
+    )}
+
+    <UTBottomSheet
+      adjustableHeight
+      onClose={handleClose}
+      visible={isOpen}
+      withBodyPadding={false}
+      {...modalProps}
+    >
+      <Calendar maxDate={maxDate} minDate={minDate} onDaySelect={handleDaySelect} pickedDate={pickedDate} />
+    </UTBottomSheet>
+  </View>
+);
+
+UTDatePickerLayout.propTypes = {
+  disabled: bool,
+  displayPlaceholder: string,
+  displayValue: string,
+  errorMessage: string,
+  handleClose: func,
+  handleDaySelect: func,
+  hasError: bool,
+  helpText: string,
+  inputStyle: object,
+  isOpen: bool,
+  maxDate: string,
+  minDate: string,
+  modalProps: object,
+  onPress: func,
+  pickedDate: object,
+  readOnly: bool,
+  required: bool,
+  rightAdornments: array,
+  style: object,
+  title: string,
+  variant: string
+};
+
+export default UTDatePickerLayout;

package/lib/components/UTDatePicker/proptypes.js

@@ -0,0 +1,20 @@
+import { bool, elementType, func, object, oneOf, shape, string } from 'prop-types';
+
+export const propTypes = {
+  clearable: bool,
+  CustomIcon: elementType,
+  disabled: bool,
+  error: string,
+  helpText: string,
+  modalProps: object,
+  onChange: func,
+  placeholder: string,
+  range: shape({ maxDate: string, minDate: string }),
+  readOnly: bool,
+  required: bool,
+  size: oneOf(['sm', 'md']),
+  style: shape({ root: object }),
+  title: string,
+  value: string,
+  variant: oneOf(['select', 'picker'])
+};

package/lib/components/UTDatePicker/styles.js

@@ -0,0 +1,63 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  calendarRoot: {
+    paddingHorizontal: 24,
+    paddingTop: 16
+  },
+  dayCell: {
+    flex: 1,
+    paddingVertical: 2,
+    textAlign: 'center'
+  },
+  month: {
+    gap: 2,
+    minHeight: 260
+  },
+  nav: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 24
+  },
+  navLabel: {
+    flex: 1,
+    textAlign: 'center'
+  },
+  navSpacer: {
+    width: 36
+  },
+  pickerColumn: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  pickerContainer: {
+    flexDirection: 'row',
+    gap: 8,
+    height: 260
+  },
+  pickerScroll: {
+    height: 260
+  },
+  pickerScrollContent: {
+    paddingBottom: 220
+  },
+  pressable: {
+    width: '100%'
+  },
+  root: {
+    gap: 8
+  },
+  week: {
+    flexDirection: 'row'
+  },
+  yearItem: {
+    alignItems: 'center',
+    borderRadius: 8,
+    height: 40,
+    justifyContent: 'center',
+    width: '100%'
+  }
+});
+
+export default styles;

package/lib/components/UTDatePicker/theme.js

@@ -0,0 +1,18 @@
+export const getDayCellButtonStyle = (selected, theme) => ({
+  root: {
+    alignItems: 'center',
+    flex: 1,
+    height: 36,
+    justifyContent: 'center',
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    ...(selected && {
+      backgroundColor: theme.Palette.accent['04'],
+      borderRadius: 18
+    })
+  }
+});
+
+export const getYearItemStyle = (selected, theme) => ({
+  backgroundColor: selected ? theme.Palette.accent['04'] : undefined
+});

package/lib/components/UTDatePicker/utils.js

@@ -0,0 +1,52 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+import { DAY_UNIT, MONTH_UNIT, OUTPUT_LABEL_MASK, YEAR_RANGE_AFTER, YEAR_RANGE_BEFORE } from './constants';
+
+dayjs.extend(customParseFormat);
+
+export const isSelected = (date, selectedDate) => selectedDate && date.isSame(selectedDate, DAY_UNIT);
+
+export const dateMatchesFormat = (date, targetFormat) => dayjs(date, targetFormat, true).isValid();
+
+export const getFinalDate = ({ date, maxDate, minDate }) => {
+  const formattedDate = dayjs(date);
+  if (maxDate && formattedDate?.isAfter(dayjs(maxDate, OUTPUT_LABEL_MASK)))
+    return dayjs(maxDate, OUTPUT_LABEL_MASK);
+  if (minDate && formattedDate?.isBefore(dayjs(minDate, OUTPUT_LABEL_MASK)))
+    return dayjs(minDate, OUTPUT_LABEL_MASK);
+  return formattedDate;
+};
+
+export const getWeeks = month => {
+  const firstDay = month.startOf(MONTH_UNIT);
+  const lastDay = month.endOf(MONTH_UNIT);
+  const startDate = firstDay.subtract(firstDay.day(), DAY_UNIT);
+
+  const weeks = [];
+  let current = startDate;
+
+  do {
+    const weekStart = current;
+    weeks.push(Array.from({ length: 7 }, (_, i) => weekStart.add(i, DAY_UNIT)));
+    current = current.add(7, DAY_UNIT);
+  } while (current.isBefore(lastDay) || current.isSame(lastDay, DAY_UNIT));
+
+  return weeks;
+};
+
+export const getYearRange = (minDateStr, maxDateStr) => {
+  const currentYear = dayjs().year();
+  const minYear = minDateStr ? dayjs(minDateStr, OUTPUT_LABEL_MASK).year() : currentYear - YEAR_RANGE_BEFORE;
+  const maxYear = maxDateStr ? dayjs(maxDateStr, OUTPUT_LABEL_MASK).year() : currentYear + YEAR_RANGE_AFTER;
+  const years = [];
+  for (let y = maxYear; y >= minYear; y--) years.push(y);
+  return years;
+};
+
+export const autoFormatDate = val => {
+  const digits = val.replace(/\D/g, '').slice(0, 8);
+  if (digits.length <= 2) return digits;
+  if (digits.length <= 4) return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+  return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;
+};

package/lib/components/UTLoading/README.md

@@ -1,39 +1,117 @@
 # UTLoading
 
-Wraps a component within a screen and displays a loading indicator until it's done loading. For example, if you have a screen with a component that requires data from an external source to render properly, you can wrap it with this component, and by providing the proper `loading` prop, it'll show a spinner until the process finishes.
+Envuelve un componente y muestra un indicador de carga mientras la prop `loading` es `true`. Soporta dos versiones: V0 (comportamiento original) y V1 (nuevo diseño con spinner SVG y loader con logo).
 
-## Props
+## Props comunes
 
-| NAME              | TYPE                | REQUIRED |          USED BY          | DESCRIPTION                                                                                                                                               |
-| ----------------- | ------------------- | -------- | :-----------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| children          | PropTypes.element   | Yes      | AnimatedCircles - Spinner | The component that you want to wrap until it's done loading                                                                                               |
-| loading           | PropTypes.bool      | Yes      | AnimatedCircles - Spinner | The boolean`loading` that you want the spinner to depend on                                                                                               |
-| color             | PropTypes.string    | No       | AnimatedCircles - Spinner | Color of spinner. Uses the theme's primary color by default                                                                                               |
-| size              | PropTypes.number    | No       |          Spinner          | The size of the spinner, defaults to`70`                                                                                                                  |
-| thickness         | PropTypes.number    | No       |          Spinner          | The thickness of the spinner, defaults to`3`                                                                                                              |
-| style             | ViewPropTypes.style | No       |          Spinner          | custom style applied to the spinner's container                                                                                                           |
-| message           | PropTypes.string    | No       |          Spinner          | A message to display below the spinner                                                                                                                    |
-| messageStyle      | ViewPropTypes.style | No       |          Spinner          | Custom style applied to the message                                                                                                                       |
-| Logo              | PropTypes.number    | No       |      AnimatedCircles      | Utility logo (png) shown above the animated circles.                                                                                                      |
-| useUtilityLoading | PropTypes.bool      | No       | AnimatedCircles - Spinner | Flag that determines whether to show the classic loader (spinner) or the new one (animated circles with utility logo).<br /> (_Default: classic loader_). |
+| Nombre            | Tipo                | Requerido | Descripción                                                                 |
+| ----------------- | ------------------- | --------- | --------------------------------------------------------------------------- |
+| loading           | bool                | Sí        | Controla si se muestra el indicador de carga                                |
+| version           | string              | No        | Versión del componente: `'V0'` (default) o `'V1'`                          |
+| useUtilityLoading | bool                | No        | En V0: muestra AnimatedCircles en lugar del Spinner. En V1: muestra LoaderWithLogo en lugar de NewSpinner |
 
-## Example
+## V0 — Comportamiento original (default)
+
+Cuando `useUtilityLoading` es `false` (default): spinner Material Design.
+Cuando `useUtilityLoading` es `true`: logo del cliente + tres círculos animados.
+
+### Props adicionales de V0
+
+| Nombre        | Tipo                | Usado por                   | Descripción                                      |
+| ------------- | ------------------- | --------------------------- | ------------------------------------------------ |
+| children      | node                | AnimatedCircles - Spinner   | Componente a mostrar cuando `loading` es `false` |
+| color         | string              | AnimatedCircles - Spinner   | Color del spinner                                |
+| Logo          | number              | AnimatedCircles             | Asset del logo de la utility (`require()`)       |
+| message       | string              | Spinner                     | Texto debajo del spinner                         |
+| messageStyle  | style               | Spinner                     | Estilo del texto                                 |
+| preventUnmount| bool                | Spinner                     | Mantiene el children montado durante la carga    |
+| size          | number              | Spinner                     | Tamaño del spinner (default: 70)                 |
+| style         | style               | Spinner                     | Estilo del contenedor                            |
+| thickness     | number              | Spinner                     | Grosor del spinner (default: 3)                  |
+
+## V1 — Nuevo diseño
+
+Cuando `useUtilityLoading` es `false` (default): **NewSpinner** — spinner SVG animado con Track + Arc redondeado.
+Cuando `useUtilityLoading` es `true`: **LoaderWithLogo** — logo SVG del cliente con animación de pulso y track con gradiente.
+
+### Props adicionales de V1 — NewSpinner
+
+| Nombre     | Tipo   | Descripción                                         |
+| ---------- | ------ | --------------------------------------------------- |
+| dataTestId | string | Test ID del contenedor (default: `UTLoading.spinner`) |
+| label      | string | Texto opcional debajo del spinner (ej: "Cargando...") |
+| size       | number | Tamaño del spinner en px (default: 72)              |
+| thickness  | number | Grosor del Track y Arc (default: 5)                 |
+
+### Props adicionales de V1 — LoaderWithLogo
+
+| Nombre     | Tipo        | Descripción                                                    |
+| ---------- | ----------- | -------------------------------------------------------------- |
+| dataTestId | string      | Test ID del contenedor (default: `UTLoading.loader`)           |
+| fullScreen | bool        | Si `true`, ocupa toda la pantalla con position absolute y z-index alto |
+| Logo       | elementType | Componente SVG del logo de la utility (importado vía react-native-svg-transformer) |
+| logoSize   | number      | Tamaño del logo en px (default: 56)                            |
+| size       | number      | Tamaño del track circular en px (default: 120)                 |
+| thickness  | number      | Grosor del track (default: 5)                                  |
+
+### Colores (override vía ThemeProvider)
+
+Los colores del V1 se configuran vía `theme.UTLoading`:
+
+| Token              | Default    | Descripción                          |
+| ------------------ | ---------- | ------------------------------------ |
+| `arcColor`         | `#0136E7`  | Color del arco del NewSpinner        |
+| `trackColor`       | `#E9EFFF`  | Color del track del NewSpinner       |
+| `gradientStart`    | `#285AFF`  | Color inicial del gradiente del Loader |
+| `gradientEnd`      | `#7AA0FF`  | Color final del gradiente del Loader |
+| `trackBackground`  | `#E9EFFF`  | Color del track de fondo del Loader  |
+
+## Activación desde la app (UtilityGO Office Mobile)
+
+```js
+// src/config/base/config.json
+"dashboard": {
+  "parameters": {
+    "newDashboardExperience": {
+      "parameters": {
+        "loading": { "enabled": false }
+      }
+    }
+  }
+}
+```
+
+```js
+// En cada pantalla
+const { enabled: useNewLoading } =
+  appConfig.dashboard?.parameters?.newDashboardExperience?.parameters?.loading || {};
+
+<UTLoading
+  version={useNewLoading ? 'V1' : 'V0'}
+  loading={isLoading}
+  Logo={UtilityLogo}
+  useUtilityLoading={useUtilityLoading}
+/>
+```
+
+## Ejemplo
 
 ```js
-import { Loading } from "@widergy/mobile-ui";
-
-  return (
-    <UTLabel>This component does not depend on the loader</UTLabel>
-    <UTLoading
-      loading={this.props.loading}
-      color="blue"
-      size={200}
-      thickness={20}
-      style={{backgroundColor: 'green'}}
-      message="This one does!"
-      messageStyle={{fontWeight: 'italic'}}
-    />
-      {your wrapped component goes here}
-    </UTLoading>
-  )
+import { UTLoading } from '@widergy/mobile-ui';
+import DemoLogo from 'config/utility/usersConfig/default/logo.svg';
+
+// V1 — Spinner nuevo
+<UTLoading version="V1" loading={isLoading} label="Cargando..." />
+
+// V1 — Loader con logo fullScreen
+<UTLoading
+  version="V1"
+  useUtilityLoading
+  fullScreen
+  loading={isLoading}
+  Logo={DemoLogo}
+/>
+
+// V0 — Spinner clásico (sin cambios)
+<UTLoading version="V0" loading={isLoading} message="Cargando..." />
 ```

package/lib/components/UTLoading/index.js

@@ -1,18 +1,18 @@
 import React from 'react';
-import { bool } from 'prop-types';
+import { string } from 'prop-types';
 
-import AnimatedCircles from './components/AnimatedCircles';
-import Spinner from './components/Spinner';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
 
-const UTLoading = props => {
-  const { useUtilityLoading } = props || {};
-  return useUtilityLoading ? <AnimatedCircles {...props} /> : <Spinner {...props} />;
-};
+const VERSIONS = { V0, V1 };
 
-UTLoading.displayName = 'UTLoading';
+const UTLoading = ({ version = 'V0', ...props }) => {
+  const Component = VERSIONS[version] || V0;
+  return <Component {...props} />;
+};
 
 UTLoading.propTypes = {
-  useUtilityLoading: bool
+  version: string
 };
 
 export default UTLoading;

package/lib/components/UTLoading/{components → versions/V0/components}/AnimatedCircles/index.js

@@ -3,7 +3,7 @@ import React, { useEffect, useRef } from 'react';
 import { Animated, Image, View } from 'react-native';
 import { string, bool, node, number } from 'prop-types';
 
-import { useTheme } from '../../../../theming';
+import { useTheme } from '../../../../../../theming';
 
 import {
   OPACITY_DURATION,

package/lib/components/UTLoading/{components → versions/V0/components}/AnimatedCircles/styles.js

@@ -1,27 +1,30 @@
 import { StyleSheet } from 'react-native';
 
-import { verticalScale } from '../../../../utils/scaleUtils';
+import { verticalScale } from '../../../../../../utils/scaleUtils';
+
+const WHITE = '#ffffff';
+const BLACK = '#000000';
 
 export default StyleSheet.create({
+  circle: {
+    backgroundColor: BLACK,
+    borderRadius: 10,
+    height: 16,
+    margin: 4,
+    width: 16
+  },
+  circlesContainer: {
+    flexDirection: 'row',
+    marginTop: 50
+  },
   container: {
     alignItems: 'center',
-    backgroundColor: '#ffffff',
+    backgroundColor: WHITE,
     flex: 1,
     flexDirection: 'column',
     justifyContent: 'center',
     width: '100%'
   },
-  circlesContainer: {
-    marginTop: 50,
-    flexDirection: 'row'
-  },
-  circle: {
-    backgroundColor: '#000000',
-    borderRadius: 10,
-    height: 16,
-    margin: 4,
-    width: 16
-  },
   imageStyle: {
     height: verticalScale(40)
   }

package/lib/components/UTLoading/{components → versions/V0/components}/Spinner/index.js

@@ -1,9 +1,9 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { number, string, bool } from 'prop-types';
 import { View } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
-import Loading from '../../../Loading';
+import Loading from '../../../../../Loading';
 
 import styles from './styles';
 
@@ -19,7 +19,7 @@ const Spinner = ({
   thickness
 }) => {
   return (
-    <Fragment>
+    <>
       {!!loading && (
         <Loading
           style={[styles.spinner, style]}
@@ -36,7 +36,7 @@ const Spinner = ({
       ) : (
         !loading && children
       )}
-    </Fragment>
+    </>
   );
 };
 

package/lib/components/UTLoading/{components → versions/V0/components}/Spinner/styles.js

@@ -4,8 +4,5 @@ export default StyleSheet.create({
   spinner: {
     alignSelf: 'center',
     justifyContent: 'center'
-  },
-  displayNone: {
-    display: 'none'
   }
 });