XS-30 | Multi language support - Xola app content

.xo-config.json

@@ -0,0 +1,5 @@
+{
+    "rules": {
+        "complexity": ["warn", { "max": 25 }]
+    }
+}

src/components/DatePicker/DatePicker.helpers.ts

@@ -0,0 +1,49 @@
+import * as de from "dayjs/locale/de";
+import * as en from "dayjs/locale/en";
+import * as enGB from "dayjs/locale/en-gb";
+import * as es from "dayjs/locale/es";
+import * as esMX from "dayjs/locale/es-mx";
+import * as fr from "dayjs/locale/fr";
+import type { DayPickerProps } from "react-day-picker";
+
+export type LocaleCode = keyof typeof locales;
+
+interface ExtendedDayPickerProps extends DayPickerProps {
+    monthsShort?: string;
+}
+
+export type LocalizationProps = Pick<
+    ExtendedDayPickerProps,
+    "locale" | "months" | "monthsShort" | "weekdaysLong" | "weekdaysShort" | "firstDayOfWeek"
+>;
+
+const locales = {
+    en: en,
+    en_US: en,
+    en_GB: enGB,
+
+    es: es,
+    es_ES: es,
+    es_MX: esMX,
+
+    fr: fr,
+    de: de,
+};
+
+export const getLocalizationProps = async (localeCode: LocaleCode): Promise<Partial<LocalizationProps>> => {
+    try {
+        const locale = await locales[localeCode];
+
+        return {
+            locale: localeCode,
+            weekdaysLong: locale.weekdays,
+            weekdaysShort: locale.weekdaysShort,
+            months: locale.months,
+            monthsShort: locale.monthsShort,
+            firstDayOfWeek: locale.weekStart,
+        };
+    } catch (error) {
+        console.error("Error: React Day Picker localization error", error);
+        throw error;
+    }
+};

src/components/DatePicker/DatePicker.jsx

@@ -1,14 +1,16 @@
 import clsx from "clsx";
 import dayjs from "dayjs";
 import PropTypes from "prop-types";
-import React, { useEffect, useMemo, useState } from "react";
-import DayPicker, { DateUtils } from "react-day-picker";
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import { DateUtils } from "react-day-picker";
 import "react-day-picker/lib/style.css";
 import "./DatePicker.css";
 import { isArray, isFunction } from "lodash";
 import { Tooltip } from "../..";
 import { isSame, isValidTimeZoneName, now, toDate } from "../../helpers/date";
+import { Context } from "../Provider";
 import { Day } from "./Day";
+import { LocalizedDayPicker } from "./LocalizedDayPicker";
 import { MonthYearSelector } from "./MonthYearSelector";
 import { NavbarElement } from "./NavbarElement";
 import RangeDatePicker from "./RangeDatePicker";
@@ -38,9 +40,11 @@ export const DatePicker = ({
     components = {},
     getTooltip,
     upcomingDates,
+    locale,
     timezoneName = null, // seller timezone (e.g. "America/Los_Angeles") to return correct today date
     ...rest
 }) => {
+    const { locale: contextLocale } = useContext(Context);
     const initialValue = value ? (variant === variants.single ? value : value.from) : null;
     const [currentMonth, setCurrentMonth] = useState(initialValue ?? now(null, timezoneName).toDate());
     const [startMonth, setStartMonth] = useState(() => {
@@ -183,7 +187,14 @@ export const DatePicker = ({
     // TODO: Should be outside this component because this returns JSX
     const CaptionElement = useMemo(() => {
         return shouldShowYearPicker && currentMonth
-            ? ({ date }) => <MonthYearSelector date={date} currentMonth={currentMonth} onChange={handleMonthChange} />
+            ? ({ date }) => (
+                  <MonthYearSelector
+                      date={date}
+                      currentMonth={currentMonth}
+                      locale={locale ?? contextLocale}
+                      onChange={handleMonthChange}
+                  />
+              )
             : undefined;
         // Adding `handleMonthChange` causes a lot of re-renders, and closes drop-down.
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -250,11 +261,12 @@ export const DatePicker = ({
                         handleEndMonthChange={handleEndMonthChange}
                         handleTodayClick={handleTodayClick}
                         selectedDays={selectedDays}
+                        locale={locale ?? contextLocale}
                         timezoneName={timezoneName}
                         {...rest}
                     />
                 ) : (
-                    <DayPicker
+                    <LocalizedDayPicker
                         className={clsx(
                             "ui-date-picker rounded-lg pt-3",
                             useDateRangeStyle ? "date-range-picker" : null,
@@ -312,5 +324,6 @@ DatePicker.propTypes = {
     shouldShowRelativeRanges: PropTypes.bool,
     components: PropTypes.shape({ Footer: PropTypes.oneOfType([PropTypes.node, PropTypes.func]) }),
     getTooltip: PropTypes.func,
+    locale: PropTypes.string,
     timezoneName: PropTypes.string,
 };

src/components/DatePicker/DatePickerPopover.jsx

@@ -110,7 +110,7 @@ const DefaultInput = forwardRef(({ className, ...rest }, reference) => {
                 <CalendarIcon className="z-10 inline-block" />
             </div>
 
-            <Input className={clsx("cursor-pointer px-8", className)} {...rest} />
+            <Input className={clsx("no-translate cursor-pointer px-8", className)} {...rest} />
 
             <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                 <DownArrowIcon className="inline-block" />

src/components/DatePicker/LocalizedDayPicker.tsx

@@ -0,0 +1,22 @@
+import clsx from "clsx";
+import React, { forwardRef, useContext, useEffect, useState } from "react";
+import DayPicker, { DayPickerProps } from "react-day-picker";
+import { Context } from "../Provider";
+import { getLocalizationProps, LocaleCode, LocalizationProps } from "./DatePicker.helpers";
+
+export const LocalizedDayPicker = forwardRef<any, DayPickerProps>(({ className, ...rest }, ref) => {
+    const { locale } = useContext(Context);
+    const [localizationProps, setLocalizationProps] = useState<Partial<LocalizationProps>>({});
+    console.log("Locale", locale);
+
+    useEffect(() => {
+        setLocalizationProps({});
+
+        /** We don't want any localization-related props for "English" */
+        if (!locale || locale === "en" || locale === "en_US") return;
+
+        getLocalizationProps(locale as LocaleCode).then(setLocalizationProps);
+    }, [locale]);
+
+    return <DayPicker ref={ref} className={clsx(className)} {...localizationProps} {...rest} />;
+});

src/components/DatePicker/MonthYearSelector.jsx

@@ -9,11 +9,14 @@ const getDiffInMonths = (to, from) => {
     return 12 * (to.getFullYear() - from.getFullYear()) + (to.getMonth() - from.getMonth());
 };
 
-export const MonthYearSelector = ({ date, onChange, currentMonth }) => {
-    const months = [...Array.from({ length: 12 }).keys()].map((m) => today.month(m).format("MMM"));
+export const MonthYearSelector = ({ date, locale, onChange, currentMonth }) => {
+    const months = [...Array.from({ length: 12 }).keys()].map((m) => today.locale(locale).month(m).format("MMM"));
     // 2012 as baseline + 5 years in future
     const years = [...Array.from({ length: today.year() - 2012 + 5 + 1 }).keys()].map((y) =>
-        today.year(2012 + y).format("YYYY"),
+        today
+            .locale(locale)
+            .year(2012 + y)
+            .format("YYYY"),
     );
 
     /**

src/components/DatePicker/RangeDatePicker.jsx

@@ -2,10 +2,10 @@ import clsx from "clsx";
 import { isArray, isFunction } from "lodash";
 import PropTypes from "prop-types";
 import React from "react";
-import DayPicker from "react-day-picker";
 import { now } from "../../helpers/date";
 import { Tooltip } from "../Tooltip";
 import { Day } from "./Day";
+import { LocalizedDayPicker } from "./LocalizedDayPicker";
 import { MonthYearSelector } from "./MonthYearSelector";
 import { NavbarElement } from "./NavbarElement";
 
@@ -24,6 +24,7 @@ const RangeDatePicker = ({
     handleStartMonthChange,
     handleEndMonthChange,
     handleTodayClick,
+    locale,
     timezoneName,
     ...rest
 }) => {
@@ -32,7 +33,9 @@ const RangeDatePicker = ({
 
     const createCaptionElement = (currentMonth, handleChange) =>
         shouldShowYearPicker && currentMonth
-            ? ({ date }) => <MonthYearSelector date={date} currentMonth={currentMonth} onChange={handleChange} />
+            ? ({ date }) => (
+                  <MonthYearSelector date={date} currentMonth={currentMonth} locale={locale} onChange={handleChange} />
+              )
             : undefined;
 
     const CaptionStartElement = createCaptionElement(startMonth, handleStartMonthChange);
@@ -90,7 +93,7 @@ const RangeDatePicker = ({
 
     return (
         <div className="flex gap-4">
-            <DayPicker
+            <LocalizedDayPicker
                 className={clsx(
                     "ui-date-picker max-w-[400px] rounded-lg pt-3",
                     isDateRangeStyle ? "date-range-picker" : null,
@@ -110,7 +113,7 @@ const RangeDatePicker = ({
                 onTodayButtonClick={handleTodayClick}
                 {...rest}
             />
-            <DayPicker
+            <LocalizedDayPicker
                 className={clsx(
                     "ui-date-picker max-w-[400px] rounded-lg pt-3",
                     isDateRangeStyle ? "date-range-picker" : null,

src/components/Drawer.jsx

@@ -2,9 +2,9 @@ import { Dialog, Transition } from "@headlessui/react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { forwardRef, Fragment } from "react";
-import { CloseIcon } from "../icons";
 import { isIosBrowser } from "../helpers/browser";
 import { useViewportHeight } from "../hooks/useViewportHeight";
+import { CloseIcon } from "../icons";
 import { Button } from "./Buttons/Button";
 
 const sizes = {

src/components/Key.jsx

@@ -10,7 +10,7 @@ export const Key = ({ char, className, ...rest }) => {
         <div
             className={clsx(
                 "ui-key",
-                "inline-flex h-5 items-center justify-center rounded bg-gray-lighter py-1 px-2 text-xs font-semibold text-gray",
+                "no-translate inline-flex h-5 items-center justify-center rounded bg-gray-lighter py-1 px-2 text-xs font-semibold text-gray",
                 key.length === 1 && "w-5",
                 className,
             )}

src/components/Provider.jsx

@@ -11,21 +11,25 @@ export const Context = createContext({
 
         return fallbackIdCounter++;
     },
+
+    localize: true,
+
+    locale: "en_US",
 });
 
 /**
  * UI Kit's default provider.
  * Must be used from now on in order to generate correct component IDs.
  * Also a good place to implement any global state required for the UI Kit in the future.
  */
-export const Provider = ({ children }) => {
+export const Provider = ({ children, localize = true, locale = "en_US" }) => {
     const idCounterRef = useRef(1);
 
     const generateId = useCallback(() => {
         return idCounterRef.current++;
     }, [idCounterRef]);
 
-    const value = useMemo(() => ({ generateId }), [generateId]);
+    const value = useMemo(() => ({ generateId, localize, locale }), [generateId, localize, locale]);
 
     return <Context.Provider value={value}>{children}</Context.Provider>;
 };

src/components/Sidebar/Sidebar.Button.jsx

@@ -1,11 +1,15 @@
+import clsx from "clsx";
 import PropTypes from "prop-types";
 import React from "react";
 
-export const SidebarButton = ({ icon: Icon, label, ...rest }) => {
+export const SidebarButton = ({ icon: Icon, label, className, ...rest }) => {
     return (
         <button
             type="button"
-            className="ui-sidebar-button flex w-full cursor-pointer items-center rounded py-2 px-4 hover:bg-gray-darker"
+            className={clsx(
+                "ui-sidebar-button flex w-full cursor-pointer items-center rounded py-2 px-4 hover:bg-gray-darker",
+                className,
+            )}
             {...rest}
         >
             <div className="p-1.5">