@hero-design/rn 8.93.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/components/{Empty → StatusScreens/Empty}/StyledEmpty.tsx

@@ -1,6 +1,6 @@
 import { View } from 'react-native';
 import styled from '@emotion/native';
-import Typography from '../Typography';
+import Typography from '../../Typography';
 
 type ThemeVariant = 'light' | 'dark';
 
@@ -34,4 +34,13 @@ const StyledDescription = styled(Typography.Body)<{
       : theme.__hd__.empty.colors.subduedText,
 }));
 
-export { StyledWrapper, StyledTitle, StyledDescription };
+const StyledEmptyImageContainer = styled(View)(({ theme }) => ({
+  marginBottom: theme.__hd__.empty.space.imageMargin,
+}));
+
+export {
+  StyledWrapper,
+  StyledTitle,
+  StyledDescription,
+  StyledEmptyImageContainer,
+};