@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

package/src/components/ContentNavigator/index.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { Value, Wrapper } from './StyledContentNavigator';
+import { Wrapper } from './StyledContentNavigator';
 import Button from '../Button';
+import Typography from '../Typography';
+import { useTheme } from '../../theme';
 
 interface ContentNavigatorProps {
   /**
@@ -54,6 +56,7 @@ function ContentNavigator({
   testID,
   style,
 }: ContentNavigatorProps) {
+  const theme = useTheme();
   return (
     <Wrapper testID={testID} style={style}>
       <Button.Icon
@@ -62,14 +65,32 @@ function ContentNavigator({
         disabled={previousDisabled}
         testID="previous-icon-button"
       />
-      <Value
-        fontWeight="semi-bold"
-        fontSize={fontSize}
-        onPress={onPress}
-        testID="content-navigator-value"
-      >
-        {value}
-      </Value>
+      {fontSize === 'medium' ? (
+        <Typography.Body
+          style={{
+            paddingHorizontal:
+              theme.__hd__.contentNavigator.space.valueHorizontalPadding,
+          }}
+          variant="small-bold"
+          onPress={onPress}
+          testID="content-navigator-value"
+        >
+          {value}
+        </Typography.Body>
+      ) : (
+        <Typography.Title
+          style={{
+            paddingHorizontal:
+              theme.__hd__.contentNavigator.space.valueHorizontalPadding,
+          }}
+          level="h5"
+          onPress={onPress}
+          testID="content-navigator-value"
+        >
+          {value}
+        </Typography.Title>
+      )}
+
       <Button.Icon
         icon="arrow-right"
         onPress={onNextPress}

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -1,10 +1,11 @@
 import DateTimePicker from '@react-native-community/datetimepicker';
+import formatDate from 'date-fns/fp/format';
 import React, { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import formatDate from 'date-fns/fp/format';
 
 import TextInput from '../TextInput';
 import type { DatePickerProps } from './types';
+import useCalculateDate from './useCalculateDate';
 
 const DatePickerAndroid = ({
   value,
@@ -20,12 +21,16 @@ const DatePickerAndroid = ({
   helpText,
   style,
   testID,
-}: Omit<DatePickerProps, 'variant'>) => {
+}: Omit<
+  DatePickerProps,
+  'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
+>) => {
   const [open, setOpen] = useState(false);
-
   const displayValue = value ? formatDate(displayFormat, value) : '';
   const pickerInitValue = value || new Date();
 
+  useCalculateDate({ minDate, maxDate, onChange, value });
+
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="datePickerInputAndroid">

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -1,19 +1,32 @@
-import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
 import formatDate from 'date-fns/fp/format';
+import React, { useState } from 'react';
+import { Platform, TouchableOpacity, View } from 'react-native';
 
 import BottomSheet from '../BottomSheet';
-import TextInput from '../TextInput';
 import Button from '../Button';
-import type { DatePickerProps } from './types';
 import Calendar, { CalendarProps } from '../Calendar';
+import TextInput from '../TextInput';
+import type { DatePickerProps } from './types';
+import useCalculateDate from './useCalculateDate';
 
 const InternalCalendar = ({
   minDate,
   maxDate,
   value,
   onChange,
-}: Pick<CalendarProps, 'minDate' | 'maxDate' | 'value' | 'onChange'>) => {
+  onToggleMonthPicker,
+  monthPickerConfirmLabel,
+  monthPickerCancelLabel,
+}: Pick<
+  CalendarProps,
+  | 'minDate'
+  | 'maxDate'
+  | 'value'
+  | 'onChange'
+  | 'onToggleMonthPicker'
+  | 'monthPickerConfirmLabel'
+  | 'monthPickerCancelLabel'
+>) => {
   const [visibleDate, setVisibleDate] = useState(value || new Date());
   const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
   return (
@@ -39,6 +52,10 @@ const InternalCalendar = ({
       }
       minDate={minDate}
       maxDate={maxDate}
+      onMonthChange={(date) => setVisibleDate(date)}
+      onToggleMonthPicker={onToggleMonthPicker}
+      monthPickerConfirmLabel={monthPickerConfirmLabel}
+      monthPickerCancelLabel={monthPickerCancelLabel}
     />
   );
 };
@@ -58,11 +75,18 @@ const DatePickerCalendar = ({
   helpText,
   style,
   testID,
+  monthPickerConfirmLabel,
+  monthPickerCancelLabel,
 }: Omit<DatePickerProps, 'variant'>) => {
   const [open, setOpen] = useState(false);
+  const [monthPickerVisible, setMonthPickerVisible] = useState(false);
+  const shouldHideToolbar = Platform.OS === 'ios' && monthPickerVisible;
 
   const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
   const displayValue = value ? formatDate(displayFormat, value) : '';
+
+  useCalculateDate({ minDate, maxDate, onChange, value });
+
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="datePickerCalendar">
@@ -84,16 +108,18 @@ const DatePickerCalendar = ({
         onRequestClose={() => setOpen(false)}
         header={label}
         footer={
-          <Button
-            variant="text"
-            text={confirmLabel}
-            onPress={() => {
-              if (selectingDate) {
-                onChange(selectingDate);
-              }
-              setOpen(false);
-            }}
-          />
+          shouldHideToolbar ? undefined : (
+            <Button
+              variant="text"
+              text={confirmLabel}
+              onPress={() => {
+                if (selectingDate) {
+                  onChange(selectingDate);
+                }
+                setOpen(false);
+              }}
+            />
+          )
         }
       >
         <InternalCalendar
@@ -101,6 +127,9 @@ const DatePickerCalendar = ({
           maxDate={maxDate}
           value={value}
           onChange={setSelectingDate}
+          monthPickerConfirmLabel={monthPickerConfirmLabel}
+          monthPickerCancelLabel={monthPickerCancelLabel}
+          onToggleMonthPicker={(visible) => setMonthPickerVisible(visible)}
         />
       </BottomSheet>
     </TouchableOpacity>

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -1,30 +1,15 @@
 import DateTimePicker from '@react-native-community/datetimepicker';
+import formatDate from 'date-fns/fp/format';
 import React, { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import formatDate from 'date-fns/fp/format';
 
+import { useTheme } from '../../theme';
 import BottomSheet from '../BottomSheet';
-import TextInput from '../TextInput';
 import Button from '../Button';
+import TextInput from '../TextInput';
 import { StyledPickerWrapper } from './StyledDatePicker';
 import type { DatePickerProps } from './types';
-import { useTheme } from '../../theme';
-
-export const getInitialDateValue = (
-  value: Date,
-  minDate?: Date | undefined,
-  maxDate?: Date | undefined
-) => {
-  if (minDate && value < minDate) {
-    return minDate;
-  }
-
-  if (maxDate && value > maxDate) {
-    return maxDate;
-  }
-
-  return value;
-};
+import useCalculateDate, { getDateValue } from './useCalculateDate';
 
 const DatePickerIOS = ({
   value,
@@ -41,15 +26,19 @@ const DatePickerIOS = ({
   helpText,
   style,
   testID,
-}: Omit<DatePickerProps, 'variant'>) => {
+}: Omit<
+  DatePickerProps,
+  'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
+>) => {
   const [selectingDate, setSelectingDate] = useState<Date>(
-    getInitialDateValue(value || new Date(), minDate, maxDate)
+    getDateValue(value || new Date(), minDate, maxDate)
   );
   const [open, setOpen] = useState(false);
-
   const displayValue = value ? formatDate(displayFormat, value) : '';
-
   const theme = useTheme();
+
+  useCalculateDate({ minDate, maxDate, onChange, value });
+
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="datePickerInputIOS">

package/src/components/DatePicker/__tests__/DatePicker.spec.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Platform } from 'react-native';
+import { fireEvent } from '@testing-library/react-native';
 import DatePicker from '..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { Button } from '../../..';
 
 describe('DatePicker', () => {
   it('renders DatePickerIOS when OS is iOS', () => {
@@ -54,4 +56,94 @@ describe('DatePicker', () => {
     expect(toJSON()).toMatchSnapshot();
     expect(getByTestId('datePickerCalendar')).toBeDefined();
   });
+
+  it.each`
+    OS           | variant
+    ${'ios'}     | ${'calendar'}
+    ${'android'} | ${'calendar'}
+    ${'ios'}     | ${'default'}
+    ${'android'} | ${'default'}
+  `(
+    'changes value when minDate changes with OS=$OS and variant=$variant',
+    ({ OS, variant }) => {
+      Platform.OS = OS;
+      const DatePickerExample = () => {
+        const [minDate, setMinDate] = React.useState<Date | undefined>(
+          new Date('2000-01-01')
+        );
+        const [value, setValue] = React.useState<Date | undefined>(
+          new Date('December 21, 1995')
+        );
+
+        return (
+          <>
+            <Button
+              onPress={() => setMinDate(new Date('2023-11-01'))}
+              text="Change min date"
+            />
+
+            <DatePicker
+              value={value}
+              minDate={minDate}
+              label="Start date"
+              confirmLabel="Confirm"
+              onChange={(date) => setValue(date)}
+              variant={variant}
+            />
+          </>
+        );
+      };
+
+      const { getByText, queryByDisplayValue } = renderWithTheme(
+        <DatePickerExample />
+      );
+
+      expect(queryByDisplayValue('01/01/2000')).toBeTruthy();
+
+      fireEvent.press(getByText('Change min date'));
+      expect(queryByDisplayValue('01/11/2023')).toBeTruthy();
+    }
+  );
+
+  it.each`
+    OS
+    ${'ios'}
+    ${'android'}
+  `('changes value when maxDate changes with OS=$OS', ({ OS }) => {
+    Platform.OS = OS;
+    const DatePickerExample = () => {
+      const [maxDate, setMaxDate] = React.useState<Date | undefined>(
+        new Date('1996-12-21')
+      );
+      const [value, setValue] = React.useState<Date | undefined>(
+        new Date('December 21, 1997')
+      );
+
+      return (
+        <>
+          <Button
+            onPress={() => setMaxDate(new Date('1994-12-21'))}
+            text="Change max date"
+          />
+
+          <DatePicker
+            value={value}
+            maxDate={maxDate}
+            label="Start date"
+            confirmLabel="Confirm"
+            onChange={(date) => setValue(date)}
+          />
+        </>
+      );
+    };
+
+    const { getByText, queryByDisplayValue } = renderWithTheme(
+      <DatePickerExample />
+    );
+
+    expect(queryByDisplayValue('21/12/1996')).toBeTruthy();
+
+    fireEvent.press(getByText('Change max date'));
+    expect(queryByDisplayValue('21/12/1994')).toBeTruthy();
+  });
 });

package/src/components/DatePicker/__tests__/DatePickerCalendar.spec.tsx

@@ -58,4 +58,46 @@ describe('DatePickerCalendar', () => {
 
     expect(getByText('This is help text')).toBeTruthy();
   });
+
+  it.each`
+    platform
+    ${'ios'}
+    ${'android'}
+  `(
+    'renders month year picker when pressing on title',
+    ({ platform: mockedPlatform }) => {
+      jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+        OS: mockedPlatform,
+        select: () => null,
+      }));
+
+      const { queryByText, getByText, getByTestId } = renderWithTheme(
+        <DatePickerCalendar
+          value={new Date('December 21, 1995')}
+          label="Start date"
+          confirmLabel="Confirm"
+          helpText="This is help text"
+          onChange={jest.fn()}
+        />
+      );
+
+      fireEvent.press(getByText('Start date'));
+      fireEvent.press(getByText('December 1995'));
+
+      if (mockedPlatform === 'ios') {
+        expect(queryByText('IOS picker')).toBeDefined();
+      } else {
+        expect(queryByText('Android picker')).toBeDefined();
+      }
+
+      // Selecting month
+      fireEvent(
+        getByTestId('calendar'),
+        'onMonthChange',
+        new Date('January 17, 1993')
+      );
+
+      expect(queryByText('January 1993')).toBeDefined();
+    }
+  );
 });

package/src/components/DatePicker/__tests__/DatePickerIOS.spec.tsx

@@ -2,26 +2,27 @@ import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import DatePickerIOS, { getInitialDateValue } from '../DatePickerIOS';
+import DatePickerIOS from '../DatePickerIOS';
+import { getDateValue } from '../useCalculateDate';
 
 jest.mock('react-native/Libraries/Modal/Modal', () => {
   const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
   return (props: ModalProps) => <Modal {...props} />;
 });
 
-describe('getInitialDateValue', () => {
+describe('getDateValue', () => {
   describe('when value is less than minDate', () => {
     it('should return minDate', () => {
       const value = new Date('2022-01-01T00:00:00.000Z');
       const minDate = new Date('2025-01-01T00:00:00.000Z');
-      expect(getInitialDateValue(value, minDate)).toBe(minDate);
+      expect(getDateValue(value, minDate)).toBe(minDate);
     });
   });
   describe('when value is greater than maxDate', () => {
     it('should return maxDate', () => {
       const value = new Date('2025-01-01T00:00:00.000Z');
       const maxDate = new Date('2022-01-01T00:00:00.000Z');
-      expect(getInitialDateValue(value, undefined, maxDate)).toBe(maxDate);
+      expect(getDateValue(value, undefined, maxDate)).toBe(maxDate);
     });
   });
   describe('when minDate < value < maxDate', () => {
@@ -29,7 +30,7 @@ describe('getInitialDateValue', () => {
       const minDate = new Date('2022-01-01T00:00:00.000Z');
       const value = new Date('2023-01-01T00:00:00.000Z');
       const maxDate = new Date('2025-01-01T00:00:00.000Z');
-      expect(getInitialDateValue(value, minDate, maxDate)).toBe(value);
+      expect(getDateValue(value, minDate, maxDate)).toBe(value);
     });
   });
 });