Merge branch 'feature/194' into development

a-ui · Dec 7, 2023 · 4a4ad16 · 4a4ad16
2 parents 6dfead3 + 8ea3bbf
commit 4a4ad16
Show file tree

Hide file tree

Showing 11 changed files with 44 additions and 72 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Upload component: the `hasValidFormat` will now check for multiple type notations (MIME type, . notation). Users will no longer see wrong error states when they select valid file formats as stated in the `accept` prop of the html `input` field.
+- Removed locales import for Calendar, reducing package size.
 
 ## 7.0.5
 

diff --git a/documentation/playground/src/molecules/DatepickerExamples.tsx b/documentation/playground/src/molecules/DatepickerExamples.tsx
@@ -1,4 +1,5 @@
 import { Calendar, Datepicker } from '@a-ui/react';
+import { mn } from 'date-fns/locale';
 
 import { useState } from 'react';
 
@@ -10,7 +11,7 @@ export function DatepickerExamples() {
       <h2>Calendar</h2>
       <div className="u-margin">
         <p className="u-margin-top">Uncontrolled</p>
-        <Calendar />
+        <Calendar locale={mn} />
         <p className="u-margin-top">Controlled</p>
         <Calendar
           value={date}
@@ -38,6 +39,9 @@ export function DatepickerExamples() {
           inputProps={{ id: 'aui-datepicker-2' }}
           format="dd-MM-yyyy"
           value={new Date(Date.now()).toISOString()}
+          calendarProps={{
+            locale: mn
+          }}
         />
         <Datepicker
           label="With value (format dd-mm-yyyy)"

diff --git a/packages/antwerp-ui/react-components/src/constants/settings.ts b/packages/antwerp-ui/react-components/src/constants/settings.ts
@@ -1,3 +1,5 @@
+import { nlBE } from 'date-fns/locale';
+
 // BASE
 export const ICONS_URL = 'https://cdn.antwerpen.be/core_branding_scss/6.5.0/assets/images/ai.svg';
 
@@ -15,4 +17,4 @@ export const SORT_DESCENDING = 'descending';
 export const DEFAULT_DATE_FORMAT = 'dd/MM/yyyy';
 
 // LOCALES
-export const DEFAULT_LOCALE = 'nl';
+export const DEFAULT_LOCALE = nlBE;
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Calendar.spec.tsx b/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Calendar.spec.tsx
@@ -2,6 +2,7 @@ import jest from 'jest-mock';
 import { fireEvent, render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { Calendar } from './Calendar';
+import { enUS } from 'date-fns/locale';
 
 describe('UI Components - Molecules - Calendar', () => {
   it('should render successfully', () => {
@@ -58,7 +59,7 @@ describe('UI Components - Molecules - Calendar', () => {
 
   it('should change to previous page when clicking on previous button', () => {
     const date = new Date('2023-02-22').toISOString();
-    const { baseElement, queryByText } = render(<Calendar value={date} locale="enUS" />);
+    const { baseElement, queryByText } = render(<Calendar value={date} locale={enUS} />);
 
     const rotateViewButton = baseElement.querySelector('.m-datepicker__nav-title') as HTMLButtonElement;
     const prevButton = baseElement.getElementsByClassName('m-datepicker__nav-pagination')[0]
@@ -89,7 +90,7 @@ describe('UI Components - Molecules - Calendar', () => {
 
   it('should change to next page when clicking on next button', () => {
     const date = new Date('2023-02-22').toISOString();
-    const { baseElement, queryByText } = render(<Calendar value={date} locale="enUS" />);
+    const { baseElement, queryByText } = render(<Calendar value={date} locale={enUS} />);
 
     const rotateViewButton = baseElement.querySelector('.m-datepicker__nav-title') as HTMLButtonElement;
     const nextButton = baseElement.getElementsByClassName('m-datepicker__nav-pagination')[0]
@@ -120,7 +121,7 @@ describe('UI Components - Molecules - Calendar', () => {
 
   it('should rotate views correctly when selecting a value in a specific view', () => {
     const date = new Date('2023-02-22').toISOString();
-    const { baseElement, queryByText } = render(<Calendar value={date} locale="enUS" />);
+    const { baseElement, queryByText } = render(<Calendar value={date} locale={enUS} />);
 
     const rotateViewButton = baseElement.querySelector('.m-datepicker__nav-title') as HTMLButtonElement;
     // Go to YearsView
@@ -143,7 +144,7 @@ describe('UI Components - Molecules - Calendar', () => {
 
   it('should move to previous year if clicking previous on MonthsView in January', () => {
     const date = new Date('2023-01-22').toISOString();
-    const { baseElement, queryByText } = render(<Calendar value={date} locale="enUS" />);
+    const { baseElement, queryByText } = render(<Calendar value={date} locale={enUS} />);
     const prevButton = baseElement.getElementsByClassName('m-datepicker__nav-pagination')[0]
       .childNodes[0] as HTMLButtonElement;
 
@@ -155,7 +156,7 @@ describe('UI Components - Molecules - Calendar', () => {
 
   it('should move to next year if clicking next on MonthsView in December', () => {
     const date = new Date('2023-12-22').toISOString();
-    const { baseElement, queryByText } = render(<Calendar value={date} locale="enUS" />);
+    const { baseElement, queryByText } = render(<Calendar value={date} locale={enUS} />);
     const nextButton = baseElement.getElementsByClassName('m-datepicker__nav-pagination')[0]
       .childNodes[1] as HTMLButtonElement;
 
@@ -164,15 +165,4 @@ describe('UI Components - Molecules - Calendar', () => {
     expect(queryByText('December 2023')).toBeFalsy();
     expect(queryByText('January 2024')).toBeTruthy();
   });
-
-  it('should use the default locale (nl) when providing an unknown/erroneous one', () => {
-    const date = new Date('2023-02-22').toISOString();
-    const { baseElement, queryByText } = render(<Calendar value={date} locale="unknown" />);
-    const prevButton = baseElement.getElementsByClassName('m-datepicker__nav-pagination')[0]
-      .childNodes[0] as HTMLButtonElement;
-    expect(queryByText('Februari 2023')).toBeTruthy();
-    fireEvent.click(prevButton);
-    expect(queryByText('Februari 2023')).toBeFalsy();
-    expect(queryByText('Januari 2023')).toBeTruthy();
-  });
 });
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Calendar.stories.jsx b/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Calendar.stories.jsx
@@ -1,5 +1,6 @@
 import Calendar from './Calendar';
 import { QA_PROP_STORY } from '../../../constants/stories.settings';
+import * as locales from 'date-fns/locale';
 
 Calendar.displayName = 'Calendar';
 
@@ -90,11 +91,11 @@ export default {
     locale: {
       control: { type: 'text' },
       table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'nl' }
+        type: { summary: 'Locale' },
+        defaultValue: { summary: 'nlBE' }
       },
       description:
-        'Use this prop to localize the calendar. List of available locales: https://github.com/date-fns/date-fns/tree/main/src/locale.'
+        'Use this prop to localize the calendar, the locale argument expect a `date-fns locale`. List of available locales: https://github.com/date-fns/date-fns/tree/main/src/locale.'
     },
     ariaLabel: {
       control: { type: 'text' },
@@ -171,5 +172,5 @@ export default {
   }
 };
 
-const Template = (args) => <Calendar {...args} />;
+const Template = (args) => <Calendar {...args} locale={locales[args.locale]} />;
 export const calendar = Template.bind({});
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Calendar.tsx b/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Calendar.tsx
@@ -4,11 +4,10 @@ import { classNames } from '../../../utils/dom.utils';
 import { DaysView } from './views/DaysView';
 import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { getMonth, getYear, addMonths, subMonths, format, addYears, subYears, formatISO } from 'date-fns';
+import { DEFAULT_LOCALE } from '../../../constants/settings';
 import { Icon } from '../../base/icon';
 import { MonthsView } from './views/MonthsView';
 import { YearsView } from './views/YearsView';
-import { useLocale } from '../../../utils/time.utils';
-import { DEFAULT_LOCALE } from '../../../constants/settings';
 import { titleize } from '../../../utils/string.utils';
 
 export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
@@ -24,7 +23,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
       ariaLabelPreviousYears,
       className,
       isOpen,
-      locale,
+      locale = DEFAULT_LOCALE,
       onBlur,
       onChange,
       qa,
@@ -35,7 +34,6 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
     },
     ref
   ) => {
-    const dateFnsLocale = useLocale(locale);
     const [activeDate, setActiveDate] = useState(value ? new Date(value) : undefined);
     const [activeYear, setActiveYear] = useState(getYear(new Date(value || new Date())));
     const [activeMonth, setActiveMonth] = useState(getMonth(new Date(value || new Date())));
@@ -50,14 +48,14 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
       const dateToShow = new Date(activeYear, activeMonth);
       return {
         [CalendarView.DAYS]: {
-          main: titleize(format(dateToShow, 'MMMM yyyy', dateFnsLocale)),
-          next: `${ariaLabelNextMonth}, ${format(addMonths(dateToShow, 1), 'MMMM yyyy', dateFnsLocale)}`,
-          prev: `${ariaLabelPreviousMonth}, ${format(subMonths(dateToShow, 1), 'MMMM yyyy', dateFnsLocale)}`
+          main: titleize(format(dateToShow, 'MMMM yyyy', { locale })),
+          next: `${ariaLabelNextMonth}, ${format(addMonths(dateToShow, 1), 'MMMM yyyy', { locale })}`,
+          prev: `${ariaLabelPreviousMonth}, ${format(subMonths(dateToShow, 1), 'MMMM yyyy', { locale })}`
         },
         [CalendarView.MONTHS]: {
-          main: format(dateToShow, 'yyyy', dateFnsLocale),
-          next: `${ariaLabelNextYear}, ${format(addYears(dateToShow, 1), 'yyyy', dateFnsLocale)}`,
-          prev: `${ariaLabelPreviousYear}, ${format(subYears(dateToShow, 1), 'yyyy', dateFnsLocale)}`
+          main: format(dateToShow, 'yyyy', { locale }),
+          next: `${ariaLabelNextYear}, ${format(addYears(dateToShow, 1), 'yyyy', { locale })}`,
+          prev: `${ariaLabelPreviousYear}, ${format(subYears(dateToShow, 1), 'yyyy', { locale })}`
         },
         [CalendarView.YEARS]: {
           main: `${yearsRowsStart} - ${yearsRowsStart + 17}`,
@@ -76,7 +74,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
       ariaLabelPreviousMonth,
       ariaLabelPreviousYear,
       ariaLabelPreviousYears,
-      dateFnsLocale
+      locale
     ]);
 
     const handlePreviousDatesClick = () => {

diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Datepicker.types.ts b/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Datepicker.types.ts
@@ -1,5 +1,6 @@
 import { FocusEvent } from 'react';
 import { TextFieldProps } from '../../atoms/input';
+import { Locale } from 'date-fns';
 
 export interface DatepickerProps {
   qa?: string;
@@ -20,7 +21,7 @@ export interface DatepickerProps {
 
 export interface CalendarProps {
   ariaLabel?: string;
-  locale?: string;
+  locale?: Locale;
   ariaLabelCurrentDay?: string;
   ariaLabelNextMonth?: string;
   ariaLabelNextYear?: string;
@@ -60,7 +61,7 @@ export interface MonthsViewProps {
   value?: Date;
   onChange: (value: Date) => void;
   activeYear: number;
-  locale?: string;
+  locale?: Locale;
 }
 
 export interface YearsViewProps {

diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/views/DaysView.tsx b/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/views/DaysView.tsx
@@ -11,7 +11,6 @@ import {
 } from 'date-fns';
 import { DaysViewProps } from '../Datepicker.types';
 import { DayButton } from './DayButton';
-import { useLocale } from '../../../../utils/time.utils';
 import { titleize } from '../../../../utils/string.utils';
 
 export function DaysView({
@@ -25,12 +24,10 @@ export function DaysView({
   unavailableTo,
   unavailable
 }: DaysViewProps) {
-  const dateFnsLocale = useLocale(locale);
-
   const renderWeek = (weekDay: Date) => {
     const days: React.ReactElement[] = [];
-    let index = startOfWeek(weekDay, dateFnsLocale);
-    const endWeek = endOfWeek(weekDay, dateFnsLocale);
+    let index = startOfWeek(weekDay, { locale });
+    const endWeek = endOfWeek(weekDay, { locale });
     while (!isAfter(index, endWeek)) {
       const activeMonthYear = new Date(activeYear, activeMonth);
       days.push(
@@ -54,7 +51,7 @@ export function DaysView({
   const renderBody = () => {
     const weeks = [];
     const current = new Date(activeYear, activeMonth);
-    let index = startOfWeek(startOfMonth(current), dateFnsLocale);
+    let index = startOfWeek(startOfMonth(current), { locale });
     const end = endOfMonth(current);
     while (!isAfter(index, end)) {
       weeks.push(renderWeek(index));
@@ -64,8 +61,8 @@ export function DaysView({
   };
 
   const daysOfWeek = eachDayOfInterval({
-    start: startOfWeek(new Date(), dateFnsLocale),
-    end: endOfWeek(new Date(), dateFnsLocale)
+    start: startOfWeek(new Date(), { locale }),
+    end: endOfWeek(new Date(), { locale })
   });
 
   return (
@@ -75,8 +72,8 @@ export function DaysView({
           <tr className="m-datepicker__grid-head">
             {daysOfWeek.map((day) => (
               <th key={`aui-calendar-weekday-${day}`} scope="col">
-                <span title={titleize(format(day, 'EEEE', dateFnsLocale))}>
-                  {titleize(format(day, 'EEEEEE', dateFnsLocale))}
+                <span title={titleize(format(day, 'EEEE', { locale }))}>
+                  {titleize(format(day, 'EEEEEE', { locale }))}
                 </span>
               </th>
             ))}

diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/views/MonthsView.tsx b/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/views/MonthsView.tsx
@@ -1,13 +1,10 @@
 import { format, getDate, getMonth, getYear } from 'date-fns';
 import { classNames } from '../../../../utils/dom.utils';
 import { MonthsViewProps } from '../Datepicker.types';
-import { DEFAULT_LOCALE } from '../../../../constants/settings';
-import { useLocale } from '../../../../utils/time.utils';
 import { titleize } from '../../../../utils/string.utils';
+import { DEFAULT_LOCALE } from '../../../../constants/settings';
 
 export function MonthsView({ onChange, value, activeYear, locale = DEFAULT_LOCALE }: MonthsViewProps) {
-  const dateFnsLocale = useLocale(locale);
-
   const renderMonth = (month: number) => {
     const classes = classNames({
       'is-current': month === getMonth(new Date()) && activeYear === getYear(new Date()),
@@ -17,7 +14,7 @@ export function MonthsView({ onChange, value, activeYear, locale = DEFAULT_LOCAL
     return (
       <td>
         <button type="button" className={classes} onClick={() => onChange(monthValue)}>
-          {titleize(format(monthValue, 'MMMM', dateFnsLocale))}
+          {titleize(format(monthValue, 'MMMM', { locale }))}
         </button>
       </td>
     );

diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/views/YearsView.tsx b/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/views/YearsView.tsx
@@ -27,11 +27,9 @@ export function YearsView({ yearsRowsStart, value, activeMonth, onChange }: Year
     while (index < 16) {
       yearsRows.push(
         <tr key={`aui-calendar-years-${index}`}>
-          <>
-            {renderYear(yearsRowsStart + index)}
-            {renderYear(yearsRowsStart + index + 1)}
-            {renderYear(yearsRowsStart + index + 2)}
-          </>
+          {renderYear(yearsRowsStart + index)}
+          {renderYear(yearsRowsStart + index + 1)}
+          {renderYear(yearsRowsStart + index + 2)}
         </tr>
       );
       index += 3;

diff --git a/packages/antwerp-ui/react-components/src/utils/time.utils.ts b/packages/antwerp-ui/react-components/src/utils/time.utils.ts
@@ -1,7 +1,4 @@
 import { isAfter, isBefore, isSameDay } from 'date-fns';
-import * as locales from 'date-fns/locale';
-import { useEffect, useState } from 'react';
-import { DEFAULT_LOCALE } from '../constants/settings';
 
 export function isInRange(date: Date, from?: string, to?: string, list?: string[]): boolean {
   return (
@@ -10,17 +7,3 @@ export function isInRange(date: Date, from?: string, to?: string, list?: string[
     !!list?.find((u) => isSameDay(date, new Date(u)))
   );
 }
-
-export function useLocale(locale: string = DEFAULT_LOCALE) {
-  type localeType = keyof typeof locales;
-
-  const [localeState, setLocaleState] = useState({
-    locale: locales[locale.replace('-', '') as localeType] || locales[DEFAULT_LOCALE]
-  });
-
-  useEffect(() => {
-    setLocaleState({ locale: locales[locale.replace('-', '') as localeType] || locales[DEFAULT_LOCALE] });
-  }, [locale]);
-
-  return localeState;
-}