feat: add DatePicker and DatePickerModal components by GonzaFran · Pull Request #77 · janis-commerce/ui-native

GonzaFran · 2026-06-19T03:23:04Z

Link al ticket

APPSRN-523

Descripción del requerimiento

@janiscommerce/ui-native no tenía un componente nativo para selección de fechas y horas. Las apps que necesitaban un date picker tenían que
resolver por su cuenta la dependencia y el wrapping, sin una interfaz consistente ni theming aplicado.

Descripción de la solución

Se incorporaron dos componentes que envuelven react-native-date-picker (módulo nativo, peerDependency):

DatePicker: picker inline, siempre visible. Declarativo: emite cambios en tiempo real vía onDateChange.
DatePickerModal: picker en modal. Control imperativo vía ref (ref.current.open() / ref.current.close()), con callbacks onConfirm y
onCancel.

Ambos comparten props base (mode, minimumDate, maximumDate, locale, minuteInterval, timeZoneOffsetInMinutes, theme) resueltas en
la función pura getSharedProps (src/components/atoms/DatePicker/utils/index.ts), que también aplica el theming por plataforma: tinte del
palette de Janis (palette.primary.main y palette.grey[300]) en los botones y divisores de Android, y prop theme ('light' | 'dark' | 'auto') en iOS (limitación de la librería — en iOS no expone buttonColor/dividerColor).

getSharedProps incluye una validación: si minimumDate > maximumDate, lanza console.warn. El prop date={null} hace que el picker
arranque en "hoy" sin emitir cambios hasta que el usuario interactúe.

Se removió @react-native-community/datetimepicker de dependencies (era una dependencia huérfana sin uso real en el código). Se agregó
react-native-date-picker >=5.0.0 como peerDependency.

Ambos componentes se exportan desde src/index.ts. El README incluye instrucciones de instalación (peerDep + pod install + rebuild) y notas
sobre el comportamiento de date={null}, la zona horaria y las limitaciones de Storybook web.

Nivel de pruebas requerido

Documentación y ejemplos

MARCAR	NIVEL	DESCRIPCIÓN	CONDICIONES
[ ]	CRÍTICO: Cambios Mayores	Se consideran cambios que afectan partes fundamentales del sistema o funcionalidades que impactan múltiples
módulos de la app.	Generar APK para pruebas. Utilizar perfil regular. Realizar pruebas exhaustivas en todos los módulos afectados.
[ ]	ALTO: Cambios moderados	Cambios que afectan aspectos importantes pero no críticos de la aplicación.	Se puede probar localmente,
salvo que surja necesidad de crear un APK. Utilizar perfil regular para las pruebas.
[X]	MEDIO: Cambios menores	Cambios menores que impactan una parte del flujo o ajustes que no modifican la funcionalidad general.
Validación localmente. Se puede usar perfil dev
[ ]	BAJO: Ajustes	Modificaciones pequeñas que no impactan el rendimiento o funcionalidad general de la app.	Validación localmente. Se
puede usar perfil dev

¿Cómo se puede probar?

Caso a probar	Resultado esperado	Resultado obtenido	Observaciones
Renderizar `DatePicker` con `date={null}`	El wheel muestra la fecha de hoy, sin emitir `onDateChange` hasta que el usuario mueva el wheel
pendiente	-
Mover el wheel del `DatePicker`	`onDateChange` se llama con la fecha seleccionada	pendiente	-
Llamar `ref.current.open()` en `DatePickerModal`	El modal se abre mostrando el picker	pendiente	-
Confirmar una fecha en `DatePickerModal`	`onConfirm` recibe el `Date` seleccionado y el modal se cierra	pendiente	-
Cancelar o tocar fuera del modal	`onCancel` se ejecuta (si fue pasada) y el modal se cierra	pendiente	-
Pasar `minimumDate > maximumDate`	Se loguea un `console.warn` y el picker renderiza igual	pendiente	Validación en `getSharedProps`

Evidencias, pruebas de cómo funciona

pendiente (probado en device en desarrollo)

Link a la documentación

[README — DatePicker component installation](https://github.com/janis-commerce/ui-native/blob/APPSRN-523-agregar-componente-date-picker-modal
-a-ui-native/README.md#datepicker-component-installation)

Documentación y
ejemplos

MARCAR	NIVEL	DESCRIPCIÓN	CONDICIONES
[ ]	CRÍTICO: Cambios Mayores	Se consideran cambios que afectan partes fundamentales del sistema o funcionalidades
que impactan múltiples módulos de la app.	Generar APK para pruebas. Utilizar perfil regular. Realizar pruebas
exhaustivas en todos los módulos afectados.
[ ]	ALTO: Cambios moderados	Cambios que afectan aspectos importantes pero no críticos de la aplicación.	Se puede
probar localmente, salvo que surja necesidad de crear un APK. Utilizar perfil regular para las pruebas.
[X]	MEDIO: Cambios menores	Cambios menores que impactan una parte del flujo o ajustes que no modifican la
funcionalidad general.	Validación localmente. Se puede usar perfil dev
[ ]	BAJO: Ajustes	Modificaciones pequeñas que no impactan el rendimiento o funcionalidad general de la app.
Validación localmente. Se puede usar perfil dev

¿Cómo se puede probar?

¿Cómo se puede probar?

Caso a probar	Resultado esperado	Resultado obtenido	Observaciones
Renderizar `DatePicker` con `date={null}`	El wheel muestra la fecha de hoy, sin emitir `onDateChange` hasta que el usuario mueva el wheel	pendiente	-
Mover el wheel del `DatePicker`	`onDateChange` se llama con la fecha seleccionada	pendiente	-
Llamar `ref.current.open()` en `DatePickerModal`	El modal se abre mostrando el picker	pendiente	-
Confirmar una fecha en `DatePickerModal`	`onConfirm` recibe el `Date` seleccionado y el modal se cierra	pendiente	-
Cancelar o tocar fuera del modal	`onCancel` se ejecuta (si fue pasada) y el modal se cierra	pendiente	-
Pasar `minimumDate > maximumDate`	Se loguea un `console.warn` y el picker renderiza igual	pendiente	Validación en `getSharedProps`

Evidencias, pruebas de cómo funciona

pendiente (probado en device en desarrollo)

Link a la documentación

Datos extra a tener en cuenta

El componente es un módulo nativo. El consumidor debe instalar react-native-date-picker como peerDependency en el repo destino.
El componente no renderiza en Storybook web (no hay implementación react-native-web en la librería). La story incluida funciona solo en el Storybook on-device (Android/iOS).
Se removió @react-native-community/datetimepicker de dependencies (estaba como dependencia directa sin usar).

CHANGELOG:

### Added
- `DatePicker` inline component wrapping `react-native-date-picker` with Janis palette theming [APPSRN-523](https://janiscommerce.atlassian.net/browse/APPSRN-523)
- `DatePickerModal` component with imperative ref API (`open`/`close`) and `onConfirm`/`onCancel` callbacks [APPSRN-523](https://janiscommerce.atlassian.net/browse/APPSRN-523)

### Removed
- Removed orphan `@react-native-community/datetimepicker` direct dependency [APPSRN-523](https://janiscommerce.atlassian.net/browse/APPSRN-523)

Add DatePicker (inline) and DatePickerModal (modal, controlled imperatively via ref) wrapping react-native-date-picker, with platform-aware palette theming and full test coverage. Also initialize OpenSpec in the repo and add the add-date-picker change with its proposal, design, specs and tasks.

colomfernando · 2026-06-19T16:11:40Z

 import Collapsible from 'atoms/Collapsible';
 import Modal from 'atoms/Modal';
+import DatePicker from 'atoms/DatePicker/DatePicker';
+import DatePickerModal from 'atoms/DatePicker/DatePickerModal';


fijate aca @GonzaFran que estamos "rompiendo" un poco la convencion que canda componente tiene su index y se imorta todo desde la estructura interna del coomnponente.

Lo que podmeos hacer es que DAtePciker tenga su index como el resto de componenentes y dicho index tendria

export { default as DatePicker } from './DatePicker'; export { default as DatePickerModal } from './DatePickerModal';

en el index general podes importar como

import { DatePicker, DatePickerModal } from 'atoms/DatePicker'; ````

colomfernando · 2026-06-19T17:15:19Z

+	testID,
+}: SharedDatePickerProps): RNDatePickerProps => {
+	if (minimumDate && maximumDate && minimumDate > maximumDate) {
+		console.warn('DatePicker: `minimumDate` is greater than `maximumDate`.');


aca agregaria que solo loguee con isDev

colomfernando · 2026-06-19T17:18:57Z

+	// buttonColor and dividerColor are Android-only props.
+	const androidTint = Platform.select({
+		android: {buttonColor: palette.primary.main, dividerColor: palette.grey[300]},
+		default: undefined,


por algun motivo definimos por default undefined y no {} que seria el tipo de dato que devuelte android? IOS necesita undefined?

GonzaFran · 2026-06-19T20:41:01Z

@colomfernando listo los cambios!

coveralls · 2026-06-19T20:41:04Z

Coverage Report for CI Build 27980519294

Coverage remained the same at 100.0%

Details

Coverage remained the same as the base build.
Patch coverage: 26 of 26 lines across 3 files are fully covered (100%).
No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

Coverage Stats


Relevant Lines:	786
Covered Lines:	786
Line Coverage:	100.0%
Relevant Branches:	723
Covered Branches:	723
Branch Coverage:	100.0%
Branches in Coverage %:	Yes
Coverage Strength:	13.33 hits per line

💛 - Coveralls

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…SRN-523-agregar-componente-date-picker-modal-a-ui-native

…tive' of github.com:janis-commerce/ui-native into APPSRN-523-agregar-componente-date-picker-modal-a-ui-native

colomfernando

@GonzaFran te deje comentarios

colomfernando · 2026-06-22T13:00:30Z

+import {palette} from 'theme/palette';
+import {isDevEnv} from 'utils/index';
+
+export type SharedDatePickerProps = Pick<


te comento lo mismo que deje en el de nico, me parece que los types no son utils. Podriamos tener el archivo types.ts en el root de Datepicker @GonzaFran

colomfernando · 2026-06-22T13:24:06Z

@@ -0,0 +1,2 @@
+export {default as DatePicker} from './DatePicker';


este archivo puede ser mejor ts, porque no tiene sintaxis de jsx

colomfernando · 2026-06-22T13:45:27Z

+	});
+
+	return {
+		date: date ?? new Date(),


aca tenemos un problema a revisar. LA funcion getSharedProps se termina usando en ambos componentes. Esto quiere decir que si por algun motivo se dispara un render, la funcion se ejecuta de vuelta y va a generar un nuevo date.

Una solucion es que en cada componente tengas un useState que se inicia con new Date y seria el fallback si date no viene. De esa manera te aseguras que el componente tiene un solo new Data cuando se monta

corregido! pero en vez de un useState se usó un useMemo, porque el valor para date vive por fuera del componente, es del consumidor.

colomfernando · 2026-06-22T13:49:12Z

+		useImperativeHandle(ref, () => ({
+			open: () => setIsVisible(true),
+			close: () => setIsVisible(false),
+		}));


aca podriamos pasar el tercer argumentos deps vacias [], con esto evitamos que en cada render tengamos una referencia nueva del useImperativeHandle dado que es estable y no depende de cambios

colomfernando · 2026-06-22T13:51:49Z

+			close: () => setIsVisible(false),
+		}));
+
+		const handleConfirm = (selectedDate: Date) => {


tanto handleConfirm como handleCAncel podrimaos usar useCallback con su dep de handleConfirm y hancledCancel. Obviamente que el consumidor tiene que memoizar los handlers cuando lo pase por props y como nosotros somos los consumidores tenemos mas control.

De esta manera evitamos 2 renders por los handlers

@colomfernando estuve revisando esto con Claude para aplicar el cambio y encontré que el componente de date-picker que usamos internamente (el DatePicker de la librería) no está memoizado, así que agregarle un useCallback a estas funciones no le aporta nada ni evita re-renders. El date-picker original no compara referencias y se vuelve a renderizar cada vez que nuestro componente se re-renderiza, le pasemos funciones estables o no.
Lo que sí voy a agregar es memoizar nuestros componentes (los que expone ui-native) para evitar que se re-rendericen en cada render del consumidor

Forward onStateChange, expose dividerColor/buttonColor with palette fallback, move types to types.ts and resolve the date fallback via useMemo. Memoize both components with displayName and add the project CLAUDE.md. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

GonzaFran requested review from christian97dd, colomfernando, pablodamianberdun and pablonortiz June 19, 2026 03:23

colomfernando reviewed Jun 19, 2026

View reviewed changes

fix: DatePicker barrel exportation

bf421fc

GonzaFran requested a review from colomfernando June 19, 2026 20:40

Gonzalo and others added 4 commits June 21, 2026 01:46

fix: forward onStateChange prop in DatePicker

e460454

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Merge branch 'master' of github.com:janis-commerce/ui-native into APP…

3815a96

…SRN-523-agregar-componente-date-picker-modal-a-ui-native

fix: DatePicker props

388ec58

Merge branch 'APPSRN-523-agregar-componente-date-picker-modal-a-ui-na…

1a5fb69

…tive' of github.com:janis-commerce/ui-native into APPSRN-523-agregar-componente-date-picker-modal-a-ui-native

colomfernando requested changes Jun 22, 2026

View reviewed changes

GonzaFran requested a review from colomfernando June 22, 2026 20:05

colomfernando merged commit f5c5fdf into master Jun 22, 2026
2 checks passed

		@@ -0,0 +1,2 @@
		export {default as DatePicker} from './DatePicker';

Uh oh!

Conversation

GonzaFran commented Jun 19, 2026 • edited by atlassian Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Link al ticket

Descripción del requerimiento

Descripción de la solución

Nivel de pruebas requerido

¿Cómo se puede probar?

Evidencias, pruebas de cómo funciona

Link a la documentación

¿Cómo se puede probar?

¿Cómo se puede probar?

Evidencias, pruebas de cómo funciona

Link a la documentación

Datos extra a tener en cuenta

CHANGELOG:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

GonzaFran commented Jun 19, 2026

Uh oh!

coveralls commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report for CI Build 27980519294

Coverage remained the same at 100.0%

Details

Uncovered Changes

Coverage Regressions

Coverage Stats

💛 - Coveralls

Uh oh!

colomfernando left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

GonzaFran Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

GonzaFran commented Jun 19, 2026 •

edited by atlassian Bot

Loading

coveralls commented Jun 19, 2026 •

edited

Loading

GonzaFran Jun 22, 2026 •

edited

Loading