@hero-design/rn 8.94.0 → 8.96.0

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

@@ -548,6 +548,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                   >
                     <Picker
                       display="spinner"
+                      locale="en-AU"
                       mode="date"
                       onChange={[Function]}
                       style={

package/src/components/DatePicker/hooks/__tests__/useFormatDate.spec.ts

@@ -0,0 +1,61 @@
+import { renderHook } from '@testing-library/react-hooks';
+import formatDate from 'date-fns/fp/format';
+import useFormatDate from '../useFormatDate';
+import { useDateTimeFormat } from '../../../LocaleProvider/hooks';
+
+// Mock dependencies
+jest.mock('../../../LocaleProvider/hooks', () => ({
+  useDateTimeFormat: jest.fn(),
+}));
+
+jest.mock('date-fns/fp/format', () => {
+  return jest.fn((format, date) => {
+    return `Formatted: ${format}, Date: ${date.toISOString()}`;
+  });
+});
+
+describe('useFormatDate', () => {
+  const testDate = new Date('2023-04-15');
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useDateTimeFormat as jest.Mock).mockReturnValue({
+      localizeDateTime: () => 'MM/dd/yyyy',
+    });
+  });
+
+  it('should return empty string when no date is provided', () => {
+    const { result } = renderHook(() => useFormatDate({}));
+    expect(result.current.displayValue).toBe('');
+  });
+
+  it('should format date with provided format', () => {
+    const { result } = renderHook(() =>
+      useFormatDate({
+        value: testDate,
+        displayFormat: 'yyyy-MM-dd',
+      })
+    );
+
+    expect(formatDate).toHaveBeenCalledWith('yyyy-MM-dd', testDate);
+    expect(result.current.format).toBe('yyyy-MM-dd');
+  });
+
+  it('should use locale format when no displayFormat provided', () => {
+    const { result } = renderHook(() =>
+      useFormatDate({
+        value: testDate,
+        locale: 'en-US',
+      })
+    );
+
+    expect(formatDate).toHaveBeenCalledWith('MM/dd/yyyy', testDate);
+    expect(result.current.format).toBe('MM/dd/yyyy');
+  });
+
+  it('should use default format when no displayFormat or locale provided', () => {
+    const { result } = renderHook(() => useFormatDate({ value: testDate }));
+    expect(formatDate).toHaveBeenCalledWith('MM/dd/yyyy', testDate);
+    expect(result.current.format).toBe('MM/dd/yyyy');
+  });
+});

package/src/components/DatePicker/{useCalculateDate.tsx → hooks/useCalculateDate.tsx}

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { DatePickerProps } from './types';
+import { DatePickerProps } from '../types';
 
 export const getDateValue = (
   value: Date,

package/src/components/DatePicker/hooks/useFormatDate.ts

@@ -0,0 +1,25 @@
+import formatDate from 'date-fns/fp/format';
+import { useDateTimeFormat } from '../../LocaleProvider/hooks';
+import { getDateFormat } from './utils';
+
+type UseFormatDateProps = {
+  displayFormat?: string;
+  locale?: string;
+  value?: Date;
+};
+
+const useFormatDate = ({
+  displayFormat,
+  locale,
+  value,
+}: UseFormatDateProps) => {
+  const { localizeDateTime } = useDateTimeFormat();
+
+  const format = getDateFormat({ displayFormat, locale, localizeDateTime });
+
+  const displayValue = value ? formatDate(format, value) : '';
+
+  return { displayValue, format };
+};
+
+export default useFormatDate;

package/src/components/DatePicker/hooks/utils.ts

@@ -0,0 +1,30 @@
+import { DateTimeFormats, LocaleCode } from '../../../types';
+import locales from '../../../locales';
+
+// Function to get the date format based on the displayFormat and locale,
+// if no displayFormat or locale is provided, use the default fullDate format
+export const getDateFormat = ({
+  displayFormat,
+  locale,
+  localizeDateTime,
+}: {
+  displayFormat?: string;
+  locale?: string;
+  localizeDateTime: (key: keyof DateTimeFormats) => string;
+}) => {
+  // Prioritise displayFormat
+  if (displayFormat) {
+    return displayFormat;
+  }
+
+  // If locale is provided, find the corresponding locale in the locales object
+  if (locale && locales[locale as LocaleCode]) {
+    const localeObject = locales[locale as LocaleCode];
+    if (localeObject) {
+      return localeObject.dateTimeFormats.fullDate;
+    }
+  }
+
+  // If no displayFormat or locale is provided, use the default fullDate format
+  return localizeDateTime('fullDate');
+};

package/src/components/DatePicker/types.ts

@@ -1,4 +1,8 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type {
+  TextInputProps as NativeTextInputProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 
 export interface DatePickerProps {
   /**
@@ -85,4 +89,14 @@ export interface DatePickerProps {
    * [Android only] autoTheme will automatically set the theme based on the device's light mode or dark mode.
    * */
   autoTheme?: boolean;
+  /**
+   * Custom renderer for the selected value. The function provides the current date object and the formatted date string for the current display format.
+   */
+  renderSelectedValue?: (
+    value: {
+      date: Date;
+      formattedDateString: string;
+    },
+    props?: NativeTextInputProps
+  ) => React.ReactNode;
 }

package/src/components/HeroDesignProvider/index.tsx

@@ -2,13 +2,26 @@ import React from 'react';
 import ThemeProvider, { ThemeProviderProps } from '../../theme/ThemeProvider';
 import Toast from '../Toast';
 import Portal from '../Portal';
+import LocaleProvider from '../LocaleProvider';
+import { LocaleValues } from '../../locales/types';
+import enAULocale from '../../locales/en_AU';
 
-const HeroDesignProvider = ({ theme, children }: ThemeProviderProps) => (
-  <ThemeProvider theme={theme}>
-    <Toast.Provider>
-      <Portal.Provider>{children}</Portal.Provider>
-    </Toast.Provider>
-  </ThemeProvider>
+interface HeroDesignProviderProps extends ThemeProviderProps {
+  locale?: LocaleValues;
+}
+
+const HeroDesignProvider = ({
+  theme,
+  locale = enAULocale,
+  children,
+}: HeroDesignProviderProps) => (
+  <LocaleProvider locale={locale}>
+    <ThemeProvider theme={theme}>
+      <Toast.Provider>
+        <Portal.Provider>{children}</Portal.Provider>
+      </Toast.Provider>
+    </ThemeProvider>
+  </LocaleProvider>
 );
 
 export default HeroDesignProvider;

package/src/components/LocaleProvider/__tests__/utils.specs.ts

@@ -0,0 +1,12 @@
+import enAU from 'date-fns/locale/en-AU';
+import enCA from 'date-fns/locale/en-CA';
+import { getDateFnsLocale } from '../utils';
+
+describe('getDateFnsLocale', () => {
+  it('should find en-AU', () => {
+    expect(getDateFnsLocale('en-AU')).toBe(enAU);
+  });
+  it('should find en-CA', () => {
+    expect(getDateFnsLocale('en-CA')).toBe(enCA);
+  });
+});

package/src/components/LocaleProvider/context.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+import enAULocale from '../../locales/en_AU';
+import { LocaleValues } from '../../locales/types';
+
+const LocaleContext = createContext<LocaleValues>(enAULocale);
+
+export { LocaleContext };

package/src/components/LocaleProvider/hooks.ts

@@ -0,0 +1,19 @@
+import { useCallback, useContext } from 'react';
+import { LocaleContext } from './context';
+import enAUTranslations from '../../locales/en_AU';
+import type { DateTimeFormats } from '../../locales/types';
+
+export const useLocale = () => {
+  const context = useContext(LocaleContext);
+  if (!context) return enAUTranslations;
+  return context;
+};
+
+export const useDateTimeFormat = () => {
+  const { dateTimeFormats } = useLocale();
+  const localizeDateTime = useCallback(
+    (key: keyof DateTimeFormats) => dateTimeFormats?.[key],
+    [dateTimeFormats]
+  );
+  return { localizeDateTime };
+};

package/src/components/LocaleProvider/index.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import setDefaultOptions from 'date-fns/setDefaultOptions';
+import { LocaleContext } from './context';
+import { getDateFnsLocale } from './utils';
+import { LocaleValues } from '../../locales/types';
+
+interface LocaleProviderProps {
+  locale: LocaleValues;
+}
+
+const LocaleProvider = (
+  props: React.PropsWithChildren<LocaleProviderProps>
+) => {
+  const { locale, children } = props;
+  const code = locale?.['lang'] || 'en-AU';
+  // setDefaultOptions here instead of inside useEffect for first rendering
+  setDefaultOptions({ locale: getDateFnsLocale(code) });
+  useEffect(() => {
+    return () => setDefaultOptions({ locale: getDateFnsLocale('en-AU') });
+  }, []);
+
+  return (
+    <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>
+  );
+};
+
+export default LocaleProvider;

package/src/components/LocaleProvider/utils.ts

@@ -0,0 +1,14 @@
+import enAU from 'date-fns/locale/en-AU';
+import enCA from 'date-fns/locale/en-CA';
+import type { Locale } from 'date-fns';
+import { LocaleCode } from '../../locales/types';
+
+const Locales = {
+  'en-AU': enAU,
+  'en-CA': enCA,
+} as const;
+
+export function getDateFnsLocale(locale: LocaleCode): Locale {
+  const fallbackLocale = Locales['en-AU'];
+  return Locales[locale] || fallbackLocale;
+}

package/src/index.ts

@@ -76,6 +76,7 @@ import {
 } from './components/AnimatedScroller';
 import Search from './components/Search';
 import FloatingIsland from './components/FloatingIsland';
+import LocaleProvider from './components/LocaleProvider';
 
 export {
   theme,
@@ -153,6 +154,7 @@ export {
   RefreshControl,
   RichTextEditor,
   FloatingIsland,
+  LocaleProvider,
 };
 
 export * from './types';

package/src/locales/en_AU.ts

@@ -0,0 +1,10 @@
+import { LocaleValues } from './types';
+
+const locale: LocaleValues = {
+  lang: 'en-AU',
+  dateTimeFormats: {
+    fullDate: 'dd/MM/yyyy',
+  },
+};
+
+export default locale;

package/src/locales/en_CA.ts

@@ -0,0 +1,10 @@
+import { LocaleValues } from './types';
+
+const locale: LocaleValues = {
+  lang: 'en-CA',
+  dateTimeFormats: {
+    fullDate: 'MMM dd, yyyy',
+  },
+};
+
+export default locale;

package/src/locales/index.ts

@@ -0,0 +1,7 @@
+import enAU from './en_AU';
+import enCA from './en_CA';
+
+export default {
+  'en-AU': enAU,
+  'en-CA': enCA,
+};

package/src/locales/types.ts

@@ -0,0 +1,12 @@
+const LOCALES = ['en-AU', 'en-CA'] as const;
+
+export type LocaleCode = typeof LOCALES[number];
+
+export type DateTimeFormats = {
+  fullDate: string;
+};
+
+export type LocaleValues = {
+  lang: LocaleCode;
+  dateTimeFormats: DateTimeFormats;
+};

package/src/testHelpers/renderWithTheme.tsx

@@ -3,8 +3,14 @@ import { render } from '@testing-library/react-native'; // eslint-disable-line i
 import type { RenderOptions } from '@testing-library/react-native';
 import { theme } from '../index';
 import HeroDesignProvider from '../components/HeroDesignProvider';
+import enAU from '../locales/en_AU';
 
 const renderWithTheme = (ui: JSX.Element, options?: RenderOptions) =>
-  render(<HeroDesignProvider theme={theme}>{ui}</HeroDesignProvider>, options);
+  render(
+    <HeroDesignProvider theme={theme} locale={enAU}>
+      {ui}
+    </HeroDesignProvider>,
+    options
+  );
 
 export default renderWithTheme;

package/src/types.ts

@@ -19,6 +19,7 @@ import { FABHandles } from './components/FAB/FAB';
 import { ActionGroupHandles } from './components/FAB/ActionGroup';
 import type { SliderRangeValue } from './components/Slider/RangeSlider';
 import type { CalendarDateRange } from './components/Calendar/CalendarRange';
+import { LocaleCode, LocaleValues, DateTimeFormats } from './locales/types';
 
 export type {
   BottomNavigationTabType,
@@ -40,4 +41,7 @@ export type {
   ActionGroupHandles,
   SliderRangeValue,
   CalendarDateRange,
+  LocaleCode,
+  LocaleValues,
+  DateTimeFormats,
 };