@hero-design/rn 8.94.0 → 8.96.0

package/locales/en_AU.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const locale = {
+    lang: 'en-AU',
+    dateTimeFormats: {
+        fullDate: 'dd/MM/yyyy',
+    },
+};
+
+module.exports = locale;

package/locales/en_AU.mjs

@@ -0,0 +1,8 @@
+const locale = {
+    lang: 'en-AU',
+    dateTimeFormats: {
+        fullDate: 'dd/MM/yyyy',
+    },
+};
+
+export { locale as default };

package/locales/en_CA.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const locale = {
+    lang: 'en-CA',
+    dateTimeFormats: {
+        fullDate: 'MMM dd, yyyy',
+    },
+};
+
+module.exports = locale;

package/locales/en_CA.mjs

@@ -0,0 +1,8 @@
+const locale = {
+    lang: 'en-CA',
+    dateTimeFormats: {
+        fullDate: 'MMM dd, yyyy',
+    },
+};
+
+export { locale as default };

package/locales/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var locales_en_AU = require('./en_AU.js');
+var locales_en_CA = require('./en_CA.js');
+
+var index = {
+    'en-AU': locales_en_AU,
+    'en-CA': locales_en_CA,
+};
+
+module.exports = index;

package/locales/index.mjs

@@ -0,0 +1,9 @@
+import locale from './en_AU.mjs';
+import locale$1 from './en_CA.mjs';
+
+var index = {
+    'en-AU': locale,
+    'en-CA': locale$1,
+};
+
+export { index as default };

package/locales/types.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/locales/types.mjs

@@ -0,0 +1 @@
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.94.0",
+  "version": "8.96.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
     "@hero-design/colors": "8.46.0",
-    "date-fns": "^2.16.1",
+    "date-fns": "^2.30.0",
     "hero-editor": "^1.15.5",
     "nanoid": "^5.0.9"
   },
@@ -64,6 +64,7 @@
     "@rollup/plugin-replace": "^6.0.1",
     "@rollup/plugin-typescript": "^12.1.1",
     "@testing-library/jest-native": "^5.4.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^9.1.0",
     "@types/events": "^3.0.3",
     "@types/jest": "^29.5.3",
@@ -81,7 +82,7 @@
     "prettier-config-hd": "8.42.4",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "^0.74.5",
+    "react-native": "0.74.5",
     "react-native-gesture-handler": "^2.15.0",
     "react-native-linear-gradient": "2.8.3",
     "react-native-pager-view": "^6.2.1",

package/rollup.config.mjs

@@ -7,7 +7,8 @@ import replace from '@rollup/plugin-replace';
 import copy from 'rollup-plugin-copy';
 import flow from 'rollup-plugin-flow';
 import { visualizer } from 'rollup-plugin-visualizer';
-
+import glob from 'glob';
+import { fileURLToPath } from 'node:url';
 import pkg from './package.json' assert { type: 'json' };
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
@@ -16,60 +17,98 @@ const generateBuildStats = process.env.GENERATE_BUILD_STATS === 'true';
 const bundleTemplate = process.env.BUNDLE_TEMPLATE || 'treemap';
 const fileName = process.env.FILE_NAME || `stats/${pkg.version}/rn-stats.html`;
 
-export default {
-  input: 'src/index.ts',
-  output: [
-    {
-      file: pkg.main,
-      format: 'cjs',
-      interop: 'compat',
-    },
-    {
-      file: pkg.module,
-      format: 'es',
-      interop: 'compat',
-    },
-  ],
-  external: [
-    'react',
-    'react-native',
-    'react-native-safe-area-context',
-    'react-native-svg',
-    '@react-native-community/datetimepicker',
-    '@react-native-community/slider',
-    'react-native-gesture-handler',
-    'react-native-webview',
-    'react-native-pager-view',
-    'react-native-vector-icons',
-    'react-native-linear-gradient',
-    '@hero-design/react-native-month-year-picker',
-    '@ptomasroos/react-native-multi-slider',
-  ],
-  plugins: [
-    replace({
-      'process.env.NODE_ENV': JSON.stringify('production'),
-    }),
-    nodeResolve({ extensions, browser: true }),
-    flow(),
-    commonjs(),
-    json(),
-    typescript({ tsconfig: './tsconfig.rollup.json' }),
-    babel({ extensions, babelHelpers: 'bundled' }),
-    copy({
-      targets: [
-        {
-          src: 'assets/fonts/hero-icons-mobile.ttf',
-          dest: 'lib/assets/fonts',
-        },
-      ],
-    }),
-    ...(generateBuildStats
-      ? [
-          visualizer({
-            filename: fileName,
-            template: bundleTemplate,
-          }),
-        ]
-      : []),
-  ],
-};
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+        interop: 'compat',
+      },
+      {
+        file: pkg.module,
+        format: 'es',
+        interop: 'compat',
+      },
+    ],
+    external: [
+      'react',
+      'react-native',
+      'react-native-safe-area-context',
+      'react-native-svg',
+      '@react-native-community/datetimepicker',
+      '@react-native-community/slider',
+      'react-native-gesture-handler',
+      'react-native-webview',
+      'react-native-pager-view',
+      'react-native-vector-icons',
+      'react-native-linear-gradient',
+      '@hero-design/react-native-month-year-picker',
+      '@ptomasroos/react-native-multi-slider',
+    ],
+    plugins: [
+      replace({
+        'process.env.NODE_ENV': JSON.stringify('production'),
+      }),
+      nodeResolve({ extensions, browser: true }),
+      flow(),
+      commonjs(),
+      json(),
+      typescript({ tsconfig: './tsconfig.rollup.json' }),
+      babel({ extensions, babelHelpers: 'bundled' }),
+      copy({
+        targets: [
+          {
+            src: 'assets/fonts/hero-icons-mobile.ttf',
+            dest: 'lib/assets/fonts',
+          },
+        ],
+      }),
+      ...(generateBuildStats
+        ? [
+            visualizer({
+              filename: fileName,
+              template: bundleTemplate,
+            }),
+          ]
+        : []),
+    ],
+  },
+  {
+    input: Object.fromEntries(
+      glob.sync('src/locales/*.ts').map((file) => [
+        // This remove `src/` as well as the file extension from each
+        // file, so e.g. src/nested/foo.js becomes locales/foo
+        `locales/${file.split('/').pop().split('.')[0]}`,
+        // This expands the relative paths to absolute paths, so e.g.
+        // src/nested/foo becomes /project/src/nested/foo.js
+        fileURLToPath(new URL(file, import.meta.url)),
+      ])
+    ),
+    output: [
+      {
+        format: 'es',
+        interop: 'auto',
+        dir: '.',
+        entryFileNames: '[name].mjs',
+      },
+      {
+        format: 'cjs',
+        interop: 'auto',
+        dir: '.',
+        entryFileNames: '[name].js',
+      },
+    ],
+    plugins: [
+      typescript({
+        tsconfig: './tsconfig.rollup.json',
+        declaration: false,
+        exclude: ['src/**/*.spec.ts', 'src/**/*.spec.tsx'],
+      }),
+      copy({
+        targets: [{ src: 'types/locales/*.ts', dest: 'locales' }],
+      }),
+    ],
+  },
+];

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -1,13 +1,13 @@
 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 { MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
+import { useTheme } from '../../theme';
 import TextInput from '../TextInput';
+import useCalculateDate from './hooks/useCalculateDate';
+import useFormatDate from './hooks/useFormatDate';
 import type { DatePickerProps } from './types';
-import useCalculateDate from './useCalculateDate';
-import { useTheme } from '../../theme';
 
 type DatePickerAndroidProps = Omit<
   DatePickerProps,
@@ -22,7 +22,7 @@ const DatePickerAndroid = ({
   label,
   placeholder,
   onChange,
-  displayFormat = 'dd/MM/yyyy',
+  displayFormat,
   disabled = false,
   required,
   error,
@@ -30,12 +30,20 @@ const DatePickerAndroid = ({
   style,
   testID,
   variant = 'default',
+  renderSelectedValue,
+  locale,
 }: DatePickerAndroidProps) => {
   const [open, setOpen] = useState(false);
-  const displayValue = value ? formatDate(displayFormat, value) : '';
-  const pickerInitValue = value || new Date();
+
+  const { displayValue, format } = useFormatDate({
+    displayFormat,
+    locale,
+    value,
+  });
 
   useCalculateDate({ minDate, maxDate, onChange, value });
+
+  const pickerInitValue = value || new Date();
   const theme = useTheme();
 
   return (
@@ -45,13 +53,25 @@ const DatePickerAndroid = ({
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
-          placeholder={placeholder || displayFormat}
+          placeholder={placeholder || format}
           disabled={disabled}
           error={error}
           required={required}
           helpText={helpText}
           style={style}
           testID={testID}
+          renderInputValue={
+            renderSelectedValue !== undefined && !!value
+              ? (props) =>
+                  renderSelectedValue(
+                    {
+                      date: value,
+                      formattedDateString: displayValue,
+                    },
+                    props
+                  )
+              : undefined
+          }
         />
       </View>
       {open && variant === 'month-year' ? (

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -1,4 +1,3 @@
-import formatDate from 'date-fns/fp/format';
 import React, { useState } from 'react';
 import { Platform, ScrollView, TouchableOpacity, View } from 'react-native';
 
@@ -6,8 +5,9 @@ import BottomSheet from '../BottomSheet';
 import Button from '../Button';
 import Calendar, { CalendarProps } from '../Calendar';
 import TextInput from '../TextInput';
+import useCalculateDate from './hooks/useCalculateDate';
+import useFormatDate from './hooks/useFormatDate';
 import type { DatePickerProps } from './types';
-import useCalculateDate from './useCalculateDate';
 
 const InternalCalendar = ({
   minDate,
@@ -68,7 +68,7 @@ const DatePickerCalendar = ({
   placeholder,
   onChange,
   confirmLabel,
-  displayFormat = 'dd/MM/yyyy',
+  displayFormat,
   disabled = false,
   required,
   error,
@@ -78,13 +78,20 @@ const DatePickerCalendar = ({
   monthPickerConfirmLabel,
   monthPickerCancelLabel,
   supportedOrientations = ['portrait'],
+  renderSelectedValue,
+  locale,
 }: 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) : '';
+
+  const { displayValue } = useFormatDate({
+    value,
+    displayFormat,
+    locale,
+  });
 
   useCalculateDate({ minDate, maxDate, onChange, value });
 
@@ -102,6 +109,18 @@ const DatePickerCalendar = ({
           helpText={helpText}
           testID={testID}
           style={style}
+          renderInputValue={
+            renderSelectedValue !== undefined && !!value
+              ? (props) =>
+                  renderSelectedValue(
+                    {
+                      date: value,
+                      formattedDateString: displayValue,
+                    },
+                    props
+                  )
+              : undefined
+          }
         />
       </View>
       <BottomSheet

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -1,5 +1,4 @@
 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';
 
@@ -7,10 +6,12 @@ import { MonthYearPickerViewIOS } from '@hero-design/react-native-month-year-pic
 import { useTheme } from '../../theme';
 import BottomSheet from '../BottomSheet';
 import Button from '../Button';
+import { useLocale } from '../LocaleProvider/hooks';
 import TextInput from '../TextInput';
+import useCalculateDate, { getDateValue } from './hooks/useCalculateDate';
+import useFormatDate from './hooks/useFormatDate';
 import { StyledPickerWrapper } from './StyledDatePicker';
 import type { DatePickerProps } from './types';
-import useCalculateDate, { getDateValue } from './useCalculateDate';
 
 type DatePickerIOSProps = Omit<
   DatePickerProps,
@@ -26,7 +27,7 @@ const DatePickerIOS = ({
   placeholder,
   onChange,
   confirmLabel,
-  displayFormat = 'dd/MM/yyyy',
+  displayFormat,
   disabled = false,
   required,
   error,
@@ -36,13 +37,19 @@ const DatePickerIOS = ({
   supportedOrientations = ['portrait'],
   variant = 'default',
   locale,
+  renderSelectedValue,
 }: DatePickerIOSProps) => {
+  const theme = useTheme();
   const [selectingDate, setSelectingDate] = useState<Date>(
     getDateValue(value || new Date(), minDate, maxDate)
   );
   const [open, setOpen] = useState(false);
-  const displayValue = value ? formatDate(displayFormat, value) : '';
-  const theme = useTheme();
+  const { lang: defaultLocale } = useLocale();
+  const { displayValue, format } = useFormatDate({
+    displayFormat,
+    locale,
+    value,
+  });
 
   useCalculateDate({ minDate, maxDate, onChange, value });
 
@@ -53,13 +60,25 @@ const DatePickerIOS = ({
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
-          placeholder={placeholder || displayFormat}
+          placeholder={placeholder || format}
           disabled={disabled}
           error={error}
           required={required}
           helpText={helpText}
           testID={testID}
           style={style}
+          renderInputValue={
+            renderSelectedValue !== undefined && !!value
+              ? (props) =>
+                  renderSelectedValue(
+                    {
+                      date: value,
+                      formattedDateString: displayValue,
+                    },
+                    props
+                  )
+              : undefined
+          }
         />
       </View>
       <BottomSheet
@@ -84,7 +103,7 @@ const DatePickerIOS = ({
           {variant === 'month-year' ? (
             <MonthYearPickerViewIOS
               value={value}
-              locale={locale}
+              locale={locale || defaultLocale}
               minimumDate={minDate}
               textColor={theme.colors.onDefaultGlobalSurface}
               maximumDate={maxDate}
@@ -98,7 +117,7 @@ const DatePickerIOS = ({
           ) : null}
           {variant === 'default' ? (
             <DateTimePicker
-              locale={locale}
+              locale={locale || defaultLocale}
               testID="datePickerIOS"
               value={selectingDate}
               minimumDate={minDate}

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

@@ -3,7 +3,7 @@ import { Platform } from 'react-native';
 import { fireEvent } from '@testing-library/react-native';
 import DatePicker from '..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { Button } from '../../..';
+import { Button, Typography } from '../../..';
 
 describe('DatePicker', () => {
   it('renders DatePickerIOS when OS is iOS', () => {
@@ -146,4 +146,33 @@ describe('DatePicker', () => {
     fireEvent.press(getByText('Change max date'));
     expect(queryByDisplayValue('21/12/1994')).toBeTruthy();
   });
+
+  it.each`
+    OS           | variant
+    ${'ios'}     | ${'default'}
+    ${'android'} | ${'default'}
+    ${'ios'}     | ${'calendar'}
+    ${'android'} | ${'calendar'}
+  `(
+    'renders correct with custom value with OS=$OS and variant=$variant',
+    ({ OS, variant }) => {
+      Platform.OS = OS;
+      const { getByTestId } = renderWithTheme(
+        <DatePicker
+          value={new Date('1995-12-17')}
+          label="Start date"
+          confirmLabel="Confirm"
+          onChange={jest.fn()}
+          variant={variant}
+          renderSelectedValue={({ date }) => (
+            <Typography.Body testID="custom-value">
+              {date.toLocaleDateString()}
+            </Typography.Body>
+          )}
+        />
+      );
+
+      expect(getByTestId('custom-value')).toBeVisible();
+    }
+  );
 });

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

@@ -2,6 +2,11 @@ import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import DatePickerAndroid from '../DatePickerAndroid';
+import HeroDesignProvider from '../../HeroDesignProvider';
+import { theme } from '../../..';
+
+import enAU from '../../../locales/en_AU';
+import enCA from '../../../locales/en_CA';
 
 describe('DatePickerAndroid', () => {
   it('renders correctly', () => {
@@ -79,4 +84,26 @@ describe('DatePickerAndroid', () => {
     expect(queryByText('Android month year picker')).toBeNull();
     expect(onChangeSpy).toBeCalledWith(new Date('2019-09-01'));
   });
+
+  it.each`
+    locale  | expected
+    ${enAU} | ${'21/12/1995'}
+    ${enCA} | ${'Dec 21, 1995'}
+  `(
+    'renders correct format for $locale.lang locale',
+    ({ locale, expected }) => {
+      const { getByDisplayValue } = renderWithTheme(
+        <HeroDesignProvider theme={theme} locale={locale}>
+          <DatePickerAndroid
+            value={new Date('December 21, 1995')}
+            label="Start date"
+            confirmLabel="Confirm"
+            onChange={jest.fn()}
+          />
+        </HeroDesignProvider>
+      );
+
+      expect(getByDisplayValue(expected)).toBeVisible();
+    }
+  );
 });

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

@@ -4,6 +4,11 @@ import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import DatePickerCalendar from '../DatePickerCalendar';
 import { setOrientation } from '../../../testHelpers/utils';
+import HeroDesignProvider from '../../HeroDesignProvider';
+import { theme } from '../../..';
+
+import enAU from '../../../locales/en_AU';
+import enCA from '../../../locales/en_CA';
 
 jest.mock('react-native/Libraries/Modal/Modal', () => {
   const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
@@ -137,4 +142,26 @@ describe('DatePickerCalendar', () => {
       expect(queryByText('January 1993')).toBeDefined();
     }
   );
+
+  it.each`
+    locale  | expected
+    ${enAU} | ${'21/12/1995'}
+    ${enCA} | ${'Dec 21, 1995'}
+  `(
+    'renders correct format for $locale.lang locale',
+    ({ locale, expected }) => {
+      const { getByDisplayValue } = renderWithTheme(
+        <HeroDesignProvider theme={theme} locale={locale}>
+          <DatePickerCalendar
+            value={new Date('December 21, 1995')}
+            label="Start date"
+            confirmLabel="Confirm"
+            onChange={jest.fn()}
+          />
+        </HeroDesignProvider>
+      );
+
+      expect(getByDisplayValue(expected)).toBeVisible();
+    }
+  );
 });

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

@@ -3,8 +3,13 @@ import React from 'react';
 import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import DatePickerIOS from '../DatePickerIOS';
-import { getDateValue } from '../useCalculateDate';
+import { getDateValue } from '../hooks/useCalculateDate';
 import { setOrientation } from '../../../testHelpers/utils';
+import HeroDesignProvider from '../../HeroDesignProvider';
+import { theme } from '../../..';
+
+import enAU from '../../../locales/en_AU';
+import enCA from '../../../locales/en_CA';
 
 jest.mock('react-native/Libraries/Modal/Modal', () => {
   const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
@@ -178,4 +183,26 @@ describe('DatePickerIOS', () => {
     expect(queryByText('iOS month year picker')).toBeNull();
     expect(onChangeSpy).toBeCalledWith(new Date('2019-09-01'));
   });
+
+  it.each`
+    locale  | expected
+    ${enAU} | ${'21/12/1995'}
+    ${enCA} | ${'Dec 21, 1995'}
+  `(
+    'renders correct format for $locale.lang locale',
+    ({ locale, expected }) => {
+      const { getByDisplayValue } = renderWithTheme(
+        <HeroDesignProvider theme={theme} locale={locale}>
+          <DatePickerIOS
+            value={new Date('December 21, 1995')}
+            label="Start date"
+            confirmLabel="Confirm"
+            onChange={jest.fn()}
+          />
+        </HeroDesignProvider>
+      );
+
+      expect(getByDisplayValue(expected)).toBeVisible();
+    }
+  );
 });