chore: add dayjs to i18n locale map

razorpay · May 22, 2024 · e02fba6 · e02fba6
1 parent d37159d
commit e02fba6
Show file tree

Hide file tree

Showing 4 changed files with 278 additions and 129 deletions.
diff --git a/packages/blade/src/components/DatePicker/DatePicker.stories.tsx b/packages/blade/src/components/DatePicker/DatePicker.stories.tsx
@@ -1,6 +1,4 @@
 import type { StoryFn, Meta } from '@storybook/react';
-import { DatesProvider } from '@mantine/dates';
-import { HeadlessMantineProvider } from '@mantine/core';
 import dayjs from 'dayjs';
 import React from 'react';
 import type { CalendarProps, DatesRangeValue } from './types';
@@ -22,44 +20,40 @@ export const Calendar: StoryFn<typeof DatePicker> = ({ ...args }) => {
 
   return (
     <Box>
-      <HeadlessMantineProvider>
-        <DatesProvider settings={{ locale: 'en-US' }}>
-          <DatePicker
-            size="medium"
-            isRequired
-            validationState="none"
-            helpText="Cannot select this range"
-            selectionType="range"
-            isOpen={isOpen}
-            onOpenChange={({ isOpen }) => setIsOpen(isOpen)}
-            value={date}
-            labelPosition="top"
-            onChange={(date) => {
-              console.log(date);
-              setDate(date);
-            }}
-            label={{ start: 'Start Date', end: 'End Date' }}
-            presets={[
-              {
-                label: 'Past 3 days',
-                value: (date) => [dayjs(date).subtract(3, 'day').toDate(), date],
-              },
-              {
-                label: 'Past 7 days',
-                value: (date) => [dayjs(date).subtract(7, 'day').toDate(), date],
-              },
-              {
-                label: 'Past 30 days',
-                value: (date) => [dayjs(date).subtract(30, 'day').toDate(), date],
-              },
-              {
-                label: 'Last Year',
-                value: (date) => [dayjs(date).subtract(1, 'year').toDate(), date],
-              },
-            ]}
-          />
-        </DatesProvider>
-      </HeadlessMantineProvider>
+      <DatePicker
+        size="medium"
+        isRequired
+        validationState="none"
+        helpText="Cannot select this range"
+        selectionType="range"
+        isOpen={isOpen}
+        onOpenChange={({ isOpen }) => setIsOpen(isOpen)}
+        value={date}
+        labelPosition="top"
+        onChange={(date) => {
+          console.log(date);
+          setDate(date);
+        }}
+        label={{ start: 'Start Date', end: 'End Date' }}
+        presets={[
+          {
+            label: 'Past 3 days',
+            value: (date) => [dayjs(date).subtract(3, 'day').toDate(), date],
+          },
+          {
+            label: 'Past 7 days',
+            value: (date) => [dayjs(date).subtract(7, 'day').toDate(), date],
+          },
+          {
+            label: 'Past 30 days',
+            value: (date) => [dayjs(date).subtract(30, 'day').toDate(), date],
+          },
+          {
+            label: 'Last Year',
+            value: (date) => [dayjs(date).subtract(1, 'year').toDate(), date],
+          },
+        ]}
+      />
     </Box>
   );
 };
diff --git a/packages/blade/src/components/DatePicker/DatePicker.web.tsx b/packages/blade/src/components/DatePicker/DatePicker.web.tsx
@@ -2,16 +2,19 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { shiftTimezone, useDatesContext } from '@mantine/dates';
+import { DatesProvider, shiftTimezone, useDatesContext } from '@mantine/dates';
 import React from 'react';
 import { FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
+import { useI18nContext } from '@razorpay/i18nify-react';
+import { HeadlessMantineProvider } from '@mantine/core';
 import type { DatesRangeValue, DatePickerProps, DateSelectionType, PickerType } from './types';
 import { Calendar } from './Calendar';
 import { PresetSideBar } from './QuickSelection/PresetSideBar';
 import { useDatesState } from './useDatesState';
 import { DatePickerInput } from './DateInput';
 import { usePopup } from './usePopup';
 import { CalendarFooter } from './CalendarFooter';
+import { convertIntlToDayjsLocale } from './utils';
 import BaseBox from '~components/Box/BaseBox';
 import { useControllableState } from '~utils/useControllable';
 import { useTheme } from '~utils';
@@ -53,12 +56,12 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
   onPickerChange,
   ...props
 }: DatePickerProps<Type>): React.ReactElement => {
+  const { i18nState } = useI18nContext();
   const _selectionType = selectionType ?? 'single';
   const { theme } = useTheme();
   const ctx = useDatesContext();
   const isSingle = _selectionType === 'single';
   const [_, forceRerenderBottomSheet] = React.useReducer((x: number) => x + 1, 0);
-
   const [selectedPreset, setSelectedPreset] = React.useState<DatesRangeValue | null>(null);
 
   const [_picker, setPicker] = useControllableState<PickerType>({
@@ -213,90 +216,100 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
     </>
   );
 
+  const dateProviderValue = React.useMemo(() => {
+    return {
+      locale: convertIntlToDayjsLocale(i18nState?.locale ?? 'en-IN'),
+    };
+  }, [i18nState?.locale]);
+
   return (
-    <BaseBox width="100%">
-      <DatePickerInput
-        selectionType={_selectionType}
-        date={controlledValue}
-        ref={referenceRef}
-        inputRef={refs.reference}
-        referenceProps={getReferenceProps()}
-        name={name as never}
-        label={label as never}
-        labelPosition={labelPosition}
-        accessibilityLabel={accessibilityLabel}
-        size={size}
-        errorText={errorText}
-        helpText={helpText}
-        isDisabled={isDisabled}
-        isRequired={isRequired}
-        successText={successText}
-        validationState={validationState}
-        autoFocus={autoFocus}
-        necessityIndicator={necessityIndicator}
-      />
-      {isMobile ? (
-        <BottomSheet
-          snapPoints={[0.9, 0.9, 1]}
-          isOpen={controllableIsOpen}
-          onDismiss={() => {
-            handleCancel();
-          }}
-        >
-          <BottomSheetHeader title={isSingle ? 'Select Date' : 'Select Date Range'} />
-          <BottomSheetBody>
-            {content}
-            {!isSingle && (
-              <PresetSideBar
-                isMobile
-                presets={presets}
-                date={currentDate}
-                selectedPreset={selectedPreset}
-                onSelection={(preset) => {
-                  const presetValue = preset?.(currentDate);
-                  setControlledValue(presetValue);
-                  setSelectedPreset(presetValue);
-                }}
-              />
-            )}
-          </BottomSheetBody>
-          <BottomSheetFooter>
-            <CalendarFooter onCancel={handleCancel} onApply={handleApply} />
-          </BottomSheetFooter>
-        </BottomSheet>
-      ) : (
-        isMounted && (
-          <FloatingPortal>
-            <FloatingFocusManager
-              initialFocus={defaultInitialFocusRef}
-              context={context}
-              guards={true}
+    <HeadlessMantineProvider>
+      <DatesProvider settings={dateProviderValue}>
+        <BaseBox width="100%">
+          <DatePickerInput
+            selectionType={_selectionType}
+            date={controlledValue}
+            ref={referenceRef}
+            inputRef={refs.reference}
+            referenceProps={getReferenceProps()}
+            name={name as never}
+            label={label as never}
+            labelPosition={labelPosition}
+            accessibilityLabel={accessibilityLabel}
+            size={size}
+            errorText={errorText}
+            helpText={helpText}
+            isDisabled={isDisabled}
+            isRequired={isRequired}
+            successText={successText}
+            validationState={validationState}
+            autoFocus={autoFocus}
+            necessityIndicator={necessityIndicator}
+          />
+          {isMobile ? (
+            <BottomSheet
+              snapPoints={[0.9, 0.9, 1]}
+              isOpen={controllableIsOpen}
+              onDismiss={() => {
+                handleCancel();
+              }}
             >
-              <BaseBox
-                ref={refs.setFloating}
-                style={floatingStyles}
-                {...getFloatingProps()}
-                {...makeAccessible({ labelledBy: titleId })}
-              >
-                <BaseBox
-                  display="flex"
-                  flexDirection="row"
-                  borderColor="surface.border.gray.subtle"
-                  borderWidth="thin"
-                  borderStyle="solid"
-                  borderRadius="medium"
-                  overflow="hidden"
-                  minWidth="320px"
-                  style={{ ...animationStyles, boxShadow: `${theme.elevation.lowRaised}` }}
+              <BottomSheetHeader title={isSingle ? 'Select Date' : 'Select Date Range'} />
+              <BottomSheetBody>
+                {content}
+                {!isSingle && (
+                  <PresetSideBar
+                    isMobile
+                    presets={presets}
+                    date={currentDate}
+                    selectedPreset={selectedPreset}
+                    onSelection={(preset) => {
+                      const presetValue = preset?.(currentDate);
+                      setControlledValue(presetValue);
+                      setSelectedPreset(presetValue);
+                    }}
+                  />
+                )}
+              </BottomSheetBody>
+              <BottomSheetFooter>
+                <CalendarFooter onCancel={handleCancel} onApply={handleApply} />
+              </BottomSheetFooter>
+            </BottomSheet>
+          ) : (
+            isMounted && (
+              <FloatingPortal>
+                <FloatingFocusManager
+                  initialFocus={defaultInitialFocusRef}
+                  context={context}
+                  guards={true}
                 >
-                  {content}
-                </BaseBox>
-              </BaseBox>
-            </FloatingFocusManager>
-          </FloatingPortal>
-        )
-      )}
-    </BaseBox>
+                  <BaseBox
+                    ref={refs.setFloating}
+                    style={floatingStyles}
+                    {...getFloatingProps()}
+                    {...makeAccessible({ labelledBy: titleId })}
+                  >
+                    <BaseBox
+                      display="flex"
+                      flexDirection="row"
+                      borderColor="surface.border.gray.subtle"
+                      borderWidth="thin"
+                      borderStyle="solid"
+                      borderRadius="medium"
+                      overflow="hidden"
+                      minWidth="320px"
+                      style={{ ...animationStyles, boxShadow: `${theme.elevation.lowRaised}` }}
+                    >
+                      {content}
+                    </BaseBox>
+                  </BaseBox>
+                </FloatingFocusManager>
+              </FloatingPortal>
+            )
+          )}
+        </BaseBox>
+      </DatesProvider>
+    </HeadlessMantineProvider>
   );
 };
 

diff --git a/packages/blade/src/components/DatePicker/types.ts b/packages/blade/src/components/DatePicker/types.ts
@@ -95,12 +95,6 @@ type CalendarProps<SelectionType extends DateSelectionType> = Pick<
    * @default false
    */
   allowSingleDateInRange?: boolean;
-  /**
-   * Sets the locale for the calendar.
-   *
-   * @default 'en'
-   */
-  locale?: string;
 
   /**
    * Callback which is called whenever the next button is clicked.