@lumx/react 3.5.4-alpha-optimize-lumx-react-bundle.0 → 3.5.4-alpha-remove-moment.2

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.5.4-alpha-optimize-lumx-react-bundle.0",
-        "@lumx/icons": "^3.5.4-alpha-optimize-lumx-react-bundle.0",
+        "@lumx/core": "^3.5.4-alpha-remove-moment.2",
+        "@lumx/icons": "^3.5.4-alpha-remove-moment.2",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -79,8 +79,6 @@
     },
     "peerDependencies": {
         "lodash": "4.17.21",
-        "moment": ">= 2",
-        "moment-range": "^4.0.2",
         "react": ">= 16.13.0",
         "react-dom": ">= 16.13.0"
     },
@@ -117,5 +115,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.5.4-alpha-optimize-lumx-react-bundle.0"
+    "version": "3.5.4-alpha-remove-moment.2"
 }

package/src/components/date-picker/DatePicker.stories.tsx

@@ -0,0 +1,38 @@
+import { DatePicker, GridColumn } from '@lumx/react';
+import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
+
+export default {
+    title: 'LumX components/date-picker/DatePicker',
+    component: DatePicker,
+    argTypes: {
+        onChange: { action: true },
+    },
+    decorators: [withValueOnChange(), withNestedProps()],
+};
+
+/**
+ * Default date picker
+ */
+export const Default = {
+    args: {
+        defaultMonth: new Date('2023-02'),
+        'nextButtonProps.label': 'Next month',
+        'previousButtonProps.label': 'Previous month',
+    },
+};
+
+/**
+ * Demonstrate variations based on the given locale code
+ */
+export const LocalesVariations = {
+    ...Default,
+    decorators: [
+        withCombinations({
+            combinations: { sections: { key: 'locale', options: ['fr', 'en-US', 'ar', 'zh-HK', 'ar-eg'] } },
+        }),
+        withWrapper({ maxColumns: 5, itemMinWidth: 300 }, GridColumn),
+    ],
+};

package/src/components/date-picker/DatePicker.tsx

@@ -1,6 +1,7 @@
-import moment from 'moment';
 import React, { forwardRef, useState } from 'react';
 import { Comp } from '@lumx/react/utils/type';
+import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
+import { isDateValid } from '@lumx/react/utils/date/isDateValid';
 import { CLASSNAME, COMPONENT_NAME } from './constants';
 import { DatePickerControlled } from './DatePickerControlled';
 import { DatePickerProps } from './types';
@@ -14,17 +15,13 @@ import { DatePickerProps } from './types';
  */
 export const DatePicker: Comp<DatePickerProps, HTMLDivElement> = forwardRef((props, ref) => {
     const { defaultMonth, locale, value, onChange, ...forwardedProps } = props;
-    let castedValue;
-    if (value) {
-        castedValue = moment(value);
-    } else if (defaultMonth) {
-        castedValue = moment(defaultMonth);
-    }
-    if (castedValue && !castedValue.isValid()) {
+
+    let referenceDate = value || defaultMonth || new Date();
+    if (!isDateValid(referenceDate)) {
         // eslint-disable-next-line no-console
-        console.warn(`[@lumx/react/DatePicker] Invalid date provided ${castedValue}`);
+        console.warn(`[@lumx/react/DatePicker] Invalid date provided ${referenceDate}`);
+        referenceDate = new Date();
     }
-    const selectedDay = castedValue && castedValue.isValid() ? castedValue : moment();
 
     const [monthOffset, setMonthOffset] = useState(0);
 
@@ -36,7 +33,7 @@ export const DatePicker: Comp<DatePickerProps, HTMLDivElement> = forwardRef((pro
         setMonthOffset(0);
     };
 
-    const selectedMonth = moment(selectedDay).locale(locale).add(monthOffset, 'months').toDate();
+    const selectedMonth = addMonthResetDay(referenceDate, monthOffset);
 
     return (
         <DatePickerControlled

package/src/components/date-picker/DatePickerControlled.tsx

@@ -1,10 +1,13 @@
 import React, { forwardRef } from 'react';
-import moment from 'moment';
 import classNames from 'classnames';
 import { DatePickerProps, Emphasis, IconButton, Toolbar } from '@lumx/react';
 import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
-import { getAnnotatedMonthCalendar, getWeekDays } from '@lumx/core/js/date-picker';
 import { Comp } from '@lumx/react/utils/type';
+import { getMonthCalendar } from '@lumx/react/utils/date/getMonthCalendar';
+import { isSameDay } from '@lumx/react/utils/date/isSameDay';
+import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
+import { parseLocale } from '@lumx/react/utils/locale/parseLocale';
+import { Locale } from '@lumx/react/utils/locale/types';
 import { CLASSNAME } from './constants';
 
 /**
@@ -33,7 +36,7 @@ const COMPONENT_NAME = 'DatePickerControlled';
  */
 export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElement> = forwardRef((props, ref) => {
     const {
-        locale,
+        locale = getCurrentLocale(),
         maxDate,
         minDate,
         nextButtonProps,
@@ -45,14 +48,11 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
         todayOrSelectedDateRef,
         value,
     } = props;
-    const days = React.useMemo(() => {
-        return getAnnotatedMonthCalendar(locale, minDate, maxDate, moment(selectedMonth));
+    const { weeks, weekDays } = React.useMemo(() => {
+        const localeObj = parseLocale(locale) as Locale;
+        return getMonthCalendar(localeObj, selectedMonth, minDate, maxDate);
     }, [locale, minDate, maxDate, selectedMonth]);
 
-    const weekDays = React.useMemo(() => {
-        return getWeekDays(locale);
-    }, [locale]);
-
     return (
         <div ref={ref} className={`${CLASSNAME}`}>
             <Toolbar
@@ -75,49 +75,46 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
                 }
                 label={
                     <span className={`${CLASSNAME}__month`}>
-                        {moment(selectedMonth).locale(locale).format('MMMM YYYY')}
+                        {selectedMonth.toLocaleDateString(locale, { year: 'numeric', month: 'long' })}
                     </span>
                 }
             />
             <div className={`${CLASSNAME}__calendar`}>
                 <div className={`${CLASSNAME}__week-days ${CLASSNAME}__days-wrapper`}>
-                    {weekDays.map((weekDay) => (
-                        <div key={weekDay.unix()} className={`${CLASSNAME}__day-wrapper`}>
-                            <span className={`${CLASSNAME}__week-day`}>
-                                {weekDay.format('dddd').slice(0, 1).toLocaleUpperCase()}
-                            </span>
+                    {weekDays.map(({ letter, number }) => (
+                        <div key={number} className={`${CLASSNAME}__day-wrapper`}>
+                            <span className={`${CLASSNAME}__week-day`}>{letter.toLocaleUpperCase()}</span>
                         </div>
                     ))}
                 </div>
 
                 <div className={`${CLASSNAME}__month-days ${CLASSNAME}__days-wrapper`}>
-                    {days.map((annotatedDate) => {
-                        if (annotatedDate.isDisplayed) {
+                    {weeks.flatMap((week, weekIndex) => {
+                        return weekDays.map((weekDay, dayIndex) => {
+                            const { date, isOutOfRange } = week[weekDay.number] || {};
+                            const key = `${weekIndex}-${dayIndex}`;
+                            const isToday = !isOutOfRange && date && isSameDay(date, new Date());
+                            const isSelected = date && value && isSameDay(value, date);
+
                             return (
-                                <div key={annotatedDate.date.unix()} className={`${CLASSNAME}__day-wrapper`}>
-                                    <button
-                                        ref={
-                                            (value && annotatedDate.date.isSame(value, 'day')) ||
-                                            (!value && annotatedDate.isToday)
-                                                ? todayOrSelectedDateRef
-                                                : null
-                                        }
-                                        className={classNames(`${CLASSNAME}__month-day`, {
-                                            [`${CLASSNAME}__month-day--is-selected`]:
-                                                value && annotatedDate.date.isSame(value, 'day'),
-                                            [`${CLASSNAME}__month-day--is-today`]:
-                                                annotatedDate.isClickable && annotatedDate.isToday,
-                                        })}
-                                        disabled={!annotatedDate.isClickable}
-                                        type="button"
-                                        onClick={() => onChange(moment(annotatedDate.date).toDate())}
-                                    >
-                                        <span>{annotatedDate.date.format('DD')}</span>
-                                    </button>
+                                <div key={key} className={`${CLASSNAME}__day-wrapper`}>
+                                    {date && (
+                                        <button
+                                            ref={isSelected || (!value && isToday) ? todayOrSelectedDateRef : null}
+                                            className={classNames(`${CLASSNAME}__month-day`, {
+                                                [`${CLASSNAME}__month-day--is-selected`]: isSelected,
+                                                [`${CLASSNAME}__month-day--is-today`]: isToday,
+                                            })}
+                                            disabled={isOutOfRange}
+                                            type="button"
+                                            onClick={() => onChange(date)}
+                                        >
+                                            <span>{date.toLocaleDateString(locale, { day: 'numeric' })}</span>
+                                        </button>
+                                    )}
                                 </div>
                             );
-                        }
-                        return <div key={annotatedDate.date.unix()} className={`${CLASSNAME}__day-wrapper`} />;
+                        });
                     })}
                 </div>
             </div>

package/src/components/date-picker/DatePickerField.stories.tsx

@@ -8,7 +8,6 @@ export default {
     component: DatePickerField,
     args: {
         ...DatePickerField.defaultProps,
-        locale: 'fr',
         'nextButtonProps.label': 'Next month',
         'previousButtonProps.label': 'Previous month',
     },

package/src/components/date-picker/DatePickerField.tsx

@@ -1,12 +1,10 @@
-import { DatePicker, Placement, Popover, TextField, IconButtonProps } from '@lumx/react';
-import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
-
-import moment from 'moment';
-
 import React, { forwardRef, SyntheticEvent, useCallback, useRef, useState } from 'react';
 
+import { DatePicker, IconButtonProps, Placement, Popover, TextField } from '@lumx/react';
+import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
 
 /**
  * Defines the props of the component.
@@ -17,7 +15,7 @@ export interface DatePickerFieldProps extends GenericProps {
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
     /** Locale (language or region) to use. */
-    locale: string;
+    locale?: string;
     /** Date after which dates can't be selected. */
     maxDate?: Date;
     /** Date before which dates can't be selected. */
@@ -52,7 +50,7 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
         defaultMonth,
         disabled,
         isDisabled = disabled,
-        locale,
+        locale = getCurrentLocale(),
         maxDate,
         minDate,
         name,
@@ -97,6 +95,9 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
         onClose();
     };
 
+    // Format date for text field
+    const textFieldValue = value?.toLocaleDateString(locale, { year: 'numeric', month: 'long', day: 'numeric' }) || '';
+
     return (
         <>
             <TextField
@@ -105,7 +106,7 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
                 name={name}
                 forceFocusStyle={isOpen}
                 textFieldRef={anchorRef}
-                value={value ? moment(value).locale(locale).format('LL') : ''}
+                value={textFieldValue}
                 onClick={toggleSimpleMenu}
                 onChange={onTextFieldChange}
                 onKeyPress={handleKeyboardNav}

package/src/components/date-picker/types.ts

@@ -9,7 +9,7 @@ export interface DatePickerProps extends GenericProps {
     /** Default month. */
     defaultMonth?: Date;
     /** Locale (language or region) to use. */
-    locale: string;
+    locale?: string;
     /** Date after which dates can't be selected. */
     maxDate?: Date;
     /** Date before which dates can't be selected. */

package/src/utils/date/addMonthResetDay.test.ts

@@ -0,0 +1,13 @@
+import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
+
+describe(addMonthResetDay.name, () => {
+    it('should add month to date', () => {
+        const actual = addMonthResetDay(new Date('2017-01-30'), 1);
+        expect(actual).toEqual(new Date('2017-02-01'));
+    });
+
+    it('should remove months to date', () => {
+        const actual = addMonthResetDay(new Date('2017-01-30'), -2);
+        expect(actual).toEqual(new Date('2016-11-01'));
+    });
+});

package/src/utils/date/addMonthResetDay.ts

@@ -0,0 +1,9 @@
+/**
+ * Add a number of months from a date while resetting the day to prevent month length mismatches.
+ */
+export function addMonthResetDay(date: Date, monthOffset: number) {
+    const newDate = new Date(date.getTime());
+    newDate.setDate(1);
+    newDate.setMonth(date.getMonth() + monthOffset);
+    return newDate;
+}

package/src/utils/date/getFirstDayOfWeek.test.ts

@@ -0,0 +1,20 @@
+import { Locale } from '@lumx/react/utils/locale/types';
+import { parseLocale } from '../locale/parseLocale';
+import { getFirstDayOfWeek } from './getFirstDayOfWeek';
+
+describe(getFirstDayOfWeek.name, () => {
+    it('should return for a valid locales', () => {
+        expect(getFirstDayOfWeek(parseLocale('fa-ir') as Locale)).toBe(6);
+        expect(getFirstDayOfWeek(parseLocale('ar-ma') as Locale)).toBe(1);
+        expect(getFirstDayOfWeek(parseLocale('ar') as Locale)).toBe(6);
+        expect(getFirstDayOfWeek(parseLocale('ar-eg') as Locale)).toBe(0);
+    });
+
+    it('should return for the lang locale if available', () => {
+        // Test for a specific locale and its root locale
+        const localeWithRoot = parseLocale('es-ES') as Locale; // Spanish (Spain) with root locale es
+        const expectedFirstDay = getFirstDayOfWeek(parseLocale('es') as Locale); // First day for root locale 'es'
+
+        expect(getFirstDayOfWeek(localeWithRoot)).toBe(expectedFirstDay);
+    });
+});

package/src/utils/date/getFirstDayOfWeek.ts

@@ -0,0 +1,58 @@
+import { Locale } from '@lumx/react/utils/locale/types';
+
+/** Get first day of week for locale from the browser API */
+export const getFromBrowser = (locale: Locale): number | undefined => {
+    try {
+        const localeMetadata = new Intl.Locale(locale.code) as any;
+        const { firstDay } = localeMetadata.getWeekInfo?.() || localeMetadata.weekInfo;
+        // Sunday is represented as `0` in Date.getDay()
+        if (firstDay === 7) return 0;
+        return firstDay;
+    } catch (e) {
+        return undefined;
+    }
+};
+
+/** List first day for each locale (could be removed when all browser implement Locale weekInfo) */
+const FIRST_DAY_FOR_LOCALES = [
+    {
+        // Locales with Sunday as the first day of the week
+        localeRX: /^(af|ar-(dz|eg|sa)|bn|cy|en-(ca|us|za)|fr-ca|gd|he|hi|ja|km|ko|pt-br|te|th|ug|zh-hk)$/i,
+        firstDay: 0,
+    },
+    {
+        // Locales with Monday as the first day of the week
+        localeRX: /^(ar-(ma|tn)|az|be|bg|bs|ca|cs|da|de|el|en-(au|gb|ie|in|nz)|eo|es|et|eu|fi|fr|fy|gl|gu|hr|ht|hu|hy|id|is|it|ka|kk|kn|lb|lt|lv|mk|mn|ms|mt|nb|nl|nn|oc|pl|pt|ro|ru|sk|sl|sq|sr|sv|ta|tr|uk|uz|vi|zh-(cn|tw))$/i,
+        firstDay: 1,
+    },
+    {
+        // Locales with Saturday as the first day of the week
+        localeRX: /^(ar|fa-ir)$/i,
+        firstDay: 6,
+    },
+];
+
+/** Find first day of week for locale from the constant */
+const getFromConstant = (locale: Locale, searchBy: keyof Locale = 'code'): number | undefined => {
+    // Search for locale (lang + region)
+    for (const { localeRX, firstDay } of FIRST_DAY_FOR_LOCALES) {
+        if (localeRX.test(locale[searchBy] as string)) return firstDay;
+    }
+    // Fallback search for locale lang
+    if (locale.code !== locale.language) {
+        return getFromConstant(locale, 'language');
+    }
+    return undefined;
+};
+
+/**
+ * Get first day of the week for the given locale code (language + region).
+ */
+export const getFirstDayOfWeek = (locale: Locale): number | undefined => {
+    // Get from browser API
+    const firstDay = getFromBrowser(locale);
+    if (firstDay !== undefined) return firstDay;
+
+    // Get from constant
+    return getFromConstant(locale);
+};

package/src/utils/date/getMonthCalendar.test.ts

@@ -0,0 +1,123 @@
+import { parseLocale } from '@lumx/react/utils/locale/parseLocale';
+import { Locale } from '@lumx/react/utils/locale/types';
+import { getMonthCalendar } from './getMonthCalendar';
+
+describe(getMonthCalendar.name, () => {
+    it('should generate calendar', () => {
+        const referenceDate = new Date('2017-02-03');
+        const french = parseLocale('fr') as Locale;
+        const month = getMonthCalendar(french, referenceDate);
+
+        expect(month).toEqual({
+            weekDays: [
+                { letter: 'L', number: 1 },
+                { letter: 'M', number: 2 },
+                { letter: 'M', number: 3 },
+                { letter: 'J', number: 4 },
+                { letter: 'V', number: 5 },
+                { letter: 'S', number: 6 },
+                { letter: 'D', number: 0 },
+            ],
+            weeks: [
+                {
+                    '3': { date: new Date('2017-02-01') },
+                    '4': { date: new Date('2017-02-02') },
+                    '5': { date: new Date('2017-02-03') },
+                    '6': { date: new Date('2017-02-04') },
+                    '0': { date: new Date('2017-02-05') },
+                },
+                {
+                    '1': { date: new Date('2017-02-06') },
+                    '2': { date: new Date('2017-02-07') },
+                    '3': { date: new Date('2017-02-08') },
+                    '4': { date: new Date('2017-02-09') },
+                    '5': { date: new Date('2017-02-10') },
+                    '6': { date: new Date('2017-02-11') },
+                    '0': { date: new Date('2017-02-12') },
+                },
+                {
+                    '1': { date: new Date('2017-02-13') },
+                    '2': { date: new Date('2017-02-14') },
+                    '3': { date: new Date('2017-02-15') },
+                    '4': { date: new Date('2017-02-16') },
+                    '5': { date: new Date('2017-02-17') },
+                    '6': { date: new Date('2017-02-18') },
+                    '0': { date: new Date('2017-02-19') },
+                },
+                {
+                    '1': { date: new Date('2017-02-20') },
+                    '2': { date: new Date('2017-02-21') },
+                    '3': { date: new Date('2017-02-22') },
+                    '4': { date: new Date('2017-02-23') },
+                    '5': { date: new Date('2017-02-24') },
+                    '6': { date: new Date('2017-02-25') },
+                    '0': { date: new Date('2017-02-26') },
+                },
+                {
+                    '1': { date: new Date('2017-02-27') },
+                    '2': { date: new Date('2017-02-28') },
+                },
+            ],
+        });
+    });
+
+    it('should generate calendar with sunday as start of week and mark dates in range', () => {
+        const referenceDate = new Date('2017-02-03');
+        const minDate = new Date('2017-02-06');
+        const maxDate = new Date('2017-02-10');
+        const englishUS = parseLocale('en-US') as Locale;
+        const month = getMonthCalendar(englishUS, referenceDate, minDate, maxDate);
+
+        expect(month).toEqual({
+            weekDays: [
+                { letter: 'S', number: 0 },
+                { letter: 'M', number: 1 },
+                { letter: 'T', number: 2 },
+                { letter: 'W', number: 3 },
+                { letter: 'T', number: 4 },
+                { letter: 'F', number: 5 },
+                { letter: 'S', number: 6 },
+            ],
+            weeks: [
+                {
+                    '3': { date: new Date('2017-02-01'), isOutOfRange: true },
+                    '4': { date: new Date('2017-02-02'), isOutOfRange: true },
+                    '5': { date: new Date('2017-02-03'), isOutOfRange: true },
+                    '6': { date: new Date('2017-02-04'), isOutOfRange: true },
+                },
+                {
+                    '0': { date: new Date('2017-02-05'), isOutOfRange: true },
+                    '1': { date: new Date('2017-02-06'), isOutOfRange: true },
+                    '2': { date: new Date('2017-02-07') },
+                    '3': { date: new Date('2017-02-08') },
+                    '4': { date: new Date('2017-02-09') },
+                    '5': { date: new Date('2017-02-10'), isOutOfRange: true },
+                    '6': { date: new Date('2017-02-11'), isOutOfRange: true },
+                },
+                {
+                    '0': { date: new Date('2017-02-12'), isOutOfRange: true },
+                    '1': { date: new Date('2017-02-13'), isOutOfRange: true },
+                    '2': { date: new Date('2017-02-14'), isOutOfRange: true },
+                    '3': { date: new Date('2017-02-15'), isOutOfRange: true },
+                    '4': { date: new Date('2017-02-16'), isOutOfRange: true },
+                    '5': { date: new Date('2017-02-17'), isOutOfRange: true },
+                    '6': { date: new Date('2017-02-18'), isOutOfRange: true },
+                },
+                {
+                    '0': { date: new Date('2017-02-19'), isOutOfRange: true },
+                    '1': { date: new Date('2017-02-20'), isOutOfRange: true },
+                    '2': { date: new Date('2017-02-21'), isOutOfRange: true },
+                    '3': { date: new Date('2017-02-22'), isOutOfRange: true },
+                    '4': { date: new Date('2017-02-23'), isOutOfRange: true },
+                    '5': { date: new Date('2017-02-24'), isOutOfRange: true },
+                    '6': { date: new Date('2017-02-25'), isOutOfRange: true },
+                },
+                {
+                    '0': { date: new Date('2017-02-26'), isOutOfRange: true },
+                    '1': { date: new Date('2017-02-27'), isOutOfRange: true },
+                    '2': { date: new Date('2017-02-28'), isOutOfRange: true },
+                },
+            ],
+        });
+    });
+});

package/src/utils/date/getMonthCalendar.ts

@@ -0,0 +1,52 @@
+import last from 'lodash/last';
+
+import { getWeekDays, WeekDayInfo } from '@lumx/react/utils/date/getWeekDays';
+import { Locale } from '@lumx/react/utils/locale/types';
+
+type AnnotatedDay = { date: Date; isOutOfRange?: boolean };
+type AnnotatedWeek = Partial<Record<number, AnnotatedDay>>;
+
+interface MonthCalendar {
+    weekDays: Array<WeekDayInfo>;
+    weeks: Array<AnnotatedWeek>;
+}
+
+/**
+ * Get month calendar.
+ * A list of weeks with days indexed by week day number
+ */
+export const getMonthCalendar = (
+    locale: Locale,
+    referenceDate = new Date(),
+    rangeMinDate?: Date,
+    rangeMaxDate?: Date,
+): MonthCalendar => {
+    const month = referenceDate.getMonth();
+    const iterDate = new Date(referenceDate.getTime());
+    iterDate.setDate(1);
+
+    const weekDays = getWeekDays(locale);
+    const lastDayOfWeek = last(weekDays) as WeekDayInfo;
+
+    const weeks: Array<AnnotatedWeek> = [];
+    let week: AnnotatedWeek = {};
+    while (iterDate.getMonth() === month) {
+        const weekDayNumber = iterDate.getDay();
+        const day: AnnotatedDay = { date: new Date(iterDate.getTime()) };
+
+        // If a range is specified, check if the day is out of range.
+        if ((rangeMinDate && iterDate <= rangeMinDate) || (rangeMaxDate && iterDate >= rangeMaxDate)) {
+            day.isOutOfRange = true;
+        }
+
+        week[weekDayNumber] = day;
+        if (weekDayNumber === lastDayOfWeek.number) {
+            weeks.push(week);
+            week = {};
+        }
+        iterDate.setDate(iterDate.getDate() + 1);
+    }
+    if (Object.keys(week).length) weeks.push(week);
+
+    return { weeks, weekDays };
+};

package/src/utils/date/getWeekDays.test.ts

@@ -0,0 +1,48 @@
+import { parseLocale } from '@lumx/react/utils/locale/parseLocale';
+import { Locale } from '@lumx/react/utils/locale/types';
+import { getWeekDays } from './getWeekDays';
+
+describe(getWeekDays.name, () => {
+    const french = parseLocale('fr') as Locale;
+    const englishUS = parseLocale('en-us') as Locale;
+    const farsi = parseLocale('fa-ir') as Locale;
+
+    it('should list french week days', () => {
+        const weekDays = getWeekDays(french);
+        expect(weekDays).toEqual([
+            { letter: 'L', number: 1 },
+            { letter: 'M', number: 2 },
+            { letter: 'M', number: 3 },
+            { letter: 'J', number: 4 },
+            { letter: 'V', number: 5 },
+            { letter: 'S', number: 6 },
+            { letter: 'D', number: 0 },
+        ]);
+    });
+
+    it('should list US week days', () => {
+        const weekDays = getWeekDays(englishUS);
+        expect(weekDays).toEqual([
+            { letter: 'S', number: 0 },
+            { letter: 'M', number: 1 },
+            { letter: 'T', number: 2 },
+            { letter: 'W', number: 3 },
+            { letter: 'T', number: 4 },
+            { letter: 'F', number: 5 },
+            { letter: 'S', number: 6 },
+        ]);
+    });
+
+    it('should list fa-ir week days', () => {
+        const weekDays = getWeekDays(farsi);
+        expect(weekDays).toEqual([
+            { letter: 'ش', number: 6 },
+            { letter: 'ی', number: 0 },
+            { letter: 'د', number: 1 },
+            { letter: 'س', number: 2 },
+            { letter: 'چ', number: 3 },
+            { letter: 'پ', number: 4 },
+            { letter: 'ج', number: 5 },
+        ]);
+    });
+});