@lumx/react 3.21.1 → 3.21.2-alpha.1

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

@@ -1,20 +0,0 @@
-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('en') 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

@@ -1,59 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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: [
-                { long: 'lundi', letter: 'L', number: 1 },
-                { long: 'mardi', letter: 'M', number: 2 },
-                { long: 'mercredi', letter: 'M', number: 3 },
-                { long: 'jeudi', letter: 'J', number: 4 },
-                { long: 'vendredi', letter: 'V', number: 5 },
-                { long: 'samedi', letter: 'S', number: 6 },
-                { long: 'dimanche', 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') },
-                },
-                // Empty row (used for padding to avoid layout shift)
-                {},
-            ],
-        });
-    });
-
-    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: [
-                { long: 'Sunday', letter: 'S', number: 0 },
-                { long: 'Monday', letter: 'M', number: 1 },
-                { long: 'Tuesday', letter: 'T', number: 2 },
-                { long: 'Wednesday', letter: 'W', number: 3 },
-                { long: 'Thursday', letter: 'T', number: 4 },
-                { long: 'Friday', letter: 'F', number: 5 },
-                { long: 'Saturday', 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') },
-                    '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'), 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 },
-                },
-                // Empty row (used for padding to avoid layout shift)
-                {},
-            ],
-        });
-    });
-});

package/src/utils/date/getMonthCalendar.ts

@@ -1,69 +0,0 @@
-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>;
-}
-
-/** Up to 6 rows can appear in a month calendar => 4 weeks + 1 start of month partial week + 1 send of month partial week */
-const MONTH_ROW_COUNT = 6;
-
-/**
- * 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);
-    iterDate.setDate(1);
-
-    const minDate = rangeMinDate && new Date(rangeMinDate);
-    const maxDate = rangeMaxDate && new Date(rangeMaxDate);
-    // Reset time to compare dates only.
-    iterDate.setUTCHours(0, 0, 0, 0);
-    minDate?.setUTCHours(0, 0, 0, 0);
-    maxDate?.setUTCHours(0, 0, 0, 0);
-
-    const weekDays = getWeekDays(locale);
-    const lastDayOfWeek = last(weekDays) as WeekDayInfo;
-
-    const weeks: Array<AnnotatedWeek> = [];
-    let week: AnnotatedWeek = {};
-    let rowCount = 0;
-
-    while (rowCount < MONTH_ROW_COUNT) {
-        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.
-        // min and max date are included within the valid range.
-        if ((minDate && iterDate < minDate) || (maxDate && iterDate > maxDate)) {
-            day.isOutOfRange = true;
-        }
-
-        if (iterDate.getMonth() === month) {
-            week[weekDayNumber] = day;
-        }
-
-        if (weekDayNumber === lastDayOfWeek.number) {
-            weeks.push(week);
-            rowCount += 1;
-            week = {};
-        }
-        iterDate.setDate(iterDate.getDate() + 1);
-    }
-    if (Object.keys(week).length) weeks.push(week);
-
-    return { weeks, weekDays };
-};

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

@@ -1,48 +0,0 @@
-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([
-            { long: 'lundi', letter: 'L', number: 1 },
-            { long: 'mardi', letter: 'M', number: 2 },
-            { long: 'mercredi', letter: 'M', number: 3 },
-            { long: 'jeudi', letter: 'J', number: 4 },
-            { long: 'vendredi', letter: 'V', number: 5 },
-            { long: 'samedi', letter: 'S', number: 6 },
-            { long: 'dimanche', letter: 'D', number: 0 },
-        ]);
-    });
-
-    it('should list US week days', () => {
-        const weekDays = getWeekDays(englishUS);
-        expect(weekDays).toEqual([
-            { long: 'Sunday', letter: 'S', number: 0 },
-            { long: 'Monday', letter: 'M', number: 1 },
-            { long: 'Tuesday', letter: 'T', number: 2 },
-            { long: 'Wednesday', letter: 'W', number: 3 },
-            { long: 'Thursday', letter: 'T', number: 4 },
-            { long: 'Friday', letter: 'F', number: 5 },
-            { long: 'Saturday', letter: 'S', number: 6 },
-        ]);
-    });
-
-    it('should list fa-ir week days', () => {
-        const weekDays = getWeekDays(farsi);
-        expect(weekDays).toEqual([
-            { long: 'شنبه', letter: 'ش', number: 6 },
-            { long: 'یکشنبه', letter: 'ی', number: 0 },
-            { long: 'دوشنبه', letter: 'د', number: 1 },
-            { long: 'سه‌شنبه', letter: 'س', number: 2 },
-            { long: 'چهارشنبه', letter: 'چ', number: 3 },
-            { long: 'پنجشنبه', letter: 'پ', number: 4 },
-            { long: 'جمعه', letter: 'ج', number: 5 },
-        ]);
-    });
-});

package/src/utils/date/getWeekDays.ts

@@ -1,34 +0,0 @@
-import { Locale } from '@lumx/react/utils/locale/types';
-import { getFirstDayOfWeek } from './getFirstDayOfWeek';
-
-export type WeekDayInfo = { letter: string; number: number; long: string };
-
-export const DAYS_PER_WEEK = 7;
-
-/**
- * List week days (based on locale) with the week day letter (ex: "M" for "Monday") and week day number
- * (0-based index starting on Sunday).
- */
-export const getWeekDays = (locale: Locale): Array<WeekDayInfo> => {
-    const iterDate = new Date();
-    const firstDay = getFirstDayOfWeek(locale) ?? 1;
-
-    // Go to start of the week
-    const offset = firstDay - iterDate.getDay();
-    iterDate.setDate(iterDate.getDate() + offset);
-
-    // Iterate through the days of the week
-    const weekDays: Array<WeekDayInfo> = [];
-    for (let i = 0; i < DAYS_PER_WEEK; i++) {
-        // Single letter week day (ex: "M" for "Monday", "L" for "Lundi", etc.)
-        const letter = iterDate.toLocaleDateString(locale.code, { weekday: 'narrow' });
-        // Weed day long notation
-        const long = iterDate.toLocaleDateString(locale.code, { weekday: 'long' });
-        // Day number (1-based index starting on Monday)
-        const number = iterDate.getDay();
-
-        weekDays.push({ letter, number, long });
-        iterDate.setDate(iterDate.getDate() + 1);
-    }
-    return weekDays;
-};

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

@@ -1,20 +0,0 @@
-import { getYearDisplayName } from './getYearDisplayName';
-
-describe(getYearDisplayName, () => {
-    beforeEach(() => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        vi.spyOn(Intl, 'DisplayNames').mockImplementation(() => ({
-            resolvedOptions: () => ({
-                fallback: 'code',
-                locale: 'fr',
-                style: 'short',
-                type: 'dateTimeField',
-            }),
-            of: () => 'année',
-        }));
-    });
-    it('should return a label', () => {
-        expect(getYearDisplayName('fr-FR')).toEqual('année');
-    });
-});

package/src/utils/date/getYearDisplayName.ts

@@ -1,12 +0,0 @@
-export const getYearDisplayName = (locale: string) => {
-    let label: string | undefined;
-    try {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        const displayNames = new Intl.DisplayNames(locale, { type: 'dateTimeField' });
-        label = displayNames.of('year');
-    } catch (error) {
-        label = '';
-    }
-    return label;
-};

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

@@ -1,15 +0,0 @@
-import { isDateValid } from '@lumx/react/utils/date/isDateValid';
-
-describe(isDateValid.name, () => {
-    it('should mark `undefined` as invalid', () => {
-        expect(isDateValid(undefined)).toBe(false);
-    });
-
-    it('should mark invalid date as invalid', () => {
-        expect(isDateValid(new Date('foo'))).toBe(false);
-    });
-
-    it('should mark valid date as valid', () => {
-        expect(isDateValid(new Date())).toBe(true);
-    });
-});

package/src/utils/date/isDateValid.ts

@@ -1,4 +0,0 @@
-/**
- * Check if given date is valid.
- */
-export const isDateValid = (date?: Date) => date instanceof Date && !Number.isNaN(date.getTime());

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

@@ -1,37 +0,0 @@
-import { isSameDay } from '@lumx/react/utils/date/isSameDay';
-
-describe(isSameDay, () => {
-    it('should return true for same dates', () => {
-        const date1 = new Date('2023-08-26T12:00:00');
-        const date2 = new Date('2023-08-26T15:30:00');
-        expect(isSameDay(date1, date2)).toBe(true);
-    });
-
-    it('should return false for different dates', () => {
-        const date1 = new Date('2023-08-26T10:00:00');
-        const date2 = new Date('2023-08-27T10:00:00');
-        expect(isSameDay(date1, date2)).toBe(false);
-    });
-
-    it('should handle different months', () => {
-        const date1 = new Date('2023-08-15T08:00:00');
-        const date2 = new Date('2023-09-15T08:00:00');
-        expect(isSameDay(date1, date2)).toBe(false);
-    });
-
-    it('should handle different years', () => {
-        const date1 = new Date('2022-12-25T18:30:00');
-        const date2 = new Date('1923-12-25T18:30:00');
-        expect(isSameDay(date1, date2)).toBe(false);
-    });
-
-    it('should handle invalid date', () => {
-        // Invalid date input are not comparable, so we always return `false`
-        // Undefined date
-        expect(isSameDay(undefined as any, undefined as any)).toBe(false);
-        // Null date
-        expect(isSameDay(null as any, new Date())).toBe(false);
-        // Invalid date
-        expect(isSameDay(new Date('-'), new Date('-'))).toBe(false);
-    });
-});

package/src/utils/date/isSameDay.ts

@@ -1,11 +0,0 @@
-import { isDateValid } from '@lumx/react/utils/date/isDateValid';
-
-/**
- * Check `date1` is on the same day as `date2`.
- */
-export const isSameDay = (date1: Date, date2: Date) =>
-    isDateValid(date1) &&
-    isDateValid(date2) &&
-    date1.getFullYear() === date2.getFullYear() &&
-    date1.getMonth() === date2.getMonth() &&
-    date1.getDate() === date2.getDate();

package/src/utils/disabled/DisabledStateContext.tsx

@@ -1,29 +0,0 @@
-import React, { useContext } from 'react';
-
-/** Disable state */
-type DisabledStateContextValue =
-    | {
-          state: 'disabled';
-      }
-    | { state: undefined | null };
-
-export const DisabledStateContext = React.createContext<DisabledStateContextValue>({ state: null });
-
-export type DisabledStateProviderProps = DisabledStateContextValue & {
-    children: React.ReactNode;
-};
-
-/**
- * Disabled state provider.
- * All nested LumX Design System components inherit this disabled state.
- */
-export function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps) {
-    return <DisabledStateContext.Provider value={value}>{children}</DisabledStateContext.Provider>;
-}
-
-/**
- * Get DisabledState context value
- */
-export function useDisabledStateContext(): DisabledStateContextValue {
-    return useContext(DisabledStateContext);
-}

package/src/utils/disabled/DisabledStateProvider.stories.tsx

@@ -1,94 +0,0 @@
-import React from 'react';
-
-import {
-    Button,
-    Checkbox,
-    Chip,
-    DatePickerField,
-    IconButton,
-    Link,
-    List,
-    ListItem,
-    RadioButton,
-    Switch,
-    TextField,
-    Thumbnail,
-    Uploader,
-} from '@lumx/react';
-import { DisabledStateProvider } from '@lumx/react/utils';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { disableArgTypes } from '@lumx/react/stories/utils/disableArgTypes';
-import { mdiFoodApple } from '@lumx/icons';
-import { LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
-
-export default {
-    title: 'LumX components/DisabledStateProvider',
-    component: DisabledStateProvider,
-    argTypes: {
-        state: getSelectArgType(['disabled', undefined]),
-        ...disableArgTypes(['children']),
-    },
-};
-
-/**
- * Disabling nested children
- */
-export const Disabled = {
-    args: {
-        state: 'disabled',
-    },
-    render: ({ state }: any) => (
-        <DisabledStateProvider state={state}>
-            <Button>Button</Button>
-            <Button isDisabled>Disabled Button</Button>
-        </DisabledStateProvider>
-    ),
-};
-
-/**
- * Testing when the context is not active
- */
-export const NotDisabled = {
-    args: {
-        state: undefined,
-    },
-    render: ({ state }: any) => (
-        <DisabledStateProvider state={state}>
-            <Button>Button</Button>
-            <Button isDisabled>Disabled Button</Button>
-        </DisabledStateProvider>
-    ),
-};
-
-/**
- * Testing disabling children
- */
-export const AllComponents = {
-    args: {
-        state: 'disabled',
-    },
-    render: ({ state }: any) => (
-        <DisabledStateProvider state={state}>
-            <Button>Button</Button>
-            <IconButton label="Icon button" icon={mdiFoodApple} />
-            <Checkbox label="Checkbox" />
-            <Chip onClick={() => {}}>Chip</Chip>
-            <DatePickerField
-                label="Date picker field"
-                nextButtonProps={{ label: 'Next' }}
-                previousButtonProps={{ label: 'Previous' }}
-                value={new Date()}
-                onChange={() => {}}
-            />
-            <Link href="https://example.com">Link</Link>
-            <List>
-                <ListItem onItemSelected={() => {}}>Clickable list item</ListItem>
-            </List>
-            <RadioButton label="Radio button" />
-            <Switch>Switch</Switch>
-            <TextField label="texfield" onChange={() => {}} value="" />
-            <Thumbnail alt="Thumbnail" image={LANDSCAPE_IMAGES.landscape1s200} onClick={() => {}} />
-            <Uploader label="Upload a file" fileInputProps={{ onChange: () => {} }} />
-        </DisabledStateProvider>
-    ),
-};

package/src/utils/disabled/index.ts

@@ -1,2 +0,0 @@
-export { useDisableStateProps } from './useDisableStateProps';
-export { DisabledStateProvider, useDisabledStateContext } from './DisabledStateContext';