[l10n] Add Arabic (ar) locale #15693

0xenn · 2024-12-02T06:45:14Z

Fixes #15650

mui-bot · 2024-12-02T06:49:07Z

Localization writing tips ✍️

Seems you are updating localization 🌍 files.

Thank you for contributing to the localization! 🎉 To make your PR perfect, here is a list of elements to check: ✔️

Verify if the PR title respects the release format. Here are two examples (depending if you update or add a locale file)

[l10n] Improve Swedish (sv-SE) locale
[l10n] Add Danish (da-DK) locale
Update the documentation of supported locales by running pnpm l10n
Verify that you have added an export line in src/locales/index.ts for the new locale.
Run pnpm docs:api which should add your new translation to the list of exported interfaces.
Clean files with pnpm prettier.

Deploy preview: https://deploy-preview-15693--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against f2bf8b5

ET-TOUNANI · 2024-12-02T07:19:10Z

packages/x-date-pickers/src/locales/index.ts

@@ -36,4 +36,5 @@ export * from './urPK';
 export * from './viVN';
 export * from './zhCN';
 export * from './zhHK';
+export * from './ar';


Based on other languages, it is recommended to specify the country of the language, such as arMR or arEG

@ET-TOUNANI As arabic is spoken in many countries they have many dialects just like eu. So i have taken that consideration and named it. Kindly suggest! ☺️

LukasTy

Thank you for your contribution @0xenn! 🙏
Could you please run the suggested scripts to fix CI errors?

Given that @mui/material has localization for different Arabic dialects, should we also consider having it separate?
I'm not an expert in Arabic language, so, can't comment on the best approach.
But if it is anything similar to how Norwegian (Bokmål and Nynorsk) differ, then we should probably split it per dialect. 🤔

For languages, where a common form for certain thing is acceptable, I wouldn't mind landing on a generic locale (like having en instead of enUS and endGB, etc.)

0xenn · 2024-12-02T10:40:02Z

@LukasTy Done. Thanks for your feedback.😊

LukasTy · 2024-12-02T10:45:42Z

Done. Thanks for your feedback.😊

What do you think about the localization itself?
Do you think that a single Arabic localization can work for every country speaking Arabic?
As I mentioned, @mui/material has different localization for different countries.
If you strongly feel that this is not needed, then we'd need to add an entry for

ar: 'Arabic'

in the localeNames file.
After this you would need to re-run pnpm l10n, which would update the json file with data for each localization.
And, preferably place the export in the alphabetic order.

0xenn · 2024-12-02T11:16:59Z

@LukasTy as mentioned by you that @mui/material has as different localization for different countries. In this case also i think it would be much better to have that distinction because there might be slight differences between dialects You can have a look on language code and let me know. Even i don't have that much idea 😅.

LukasTy · 2024-12-02T11:41:44Z

In this case also i think it would be much better to have that distinction because there might be slight differences between dialects You can have a look on language code and let me know. Even i don't have that much idea 😅.

The main issue is consistency.
@mui/material has localization per dialect, so does the @mui/x-data-grid.
If we were to introduce a generic ar locale, that might confuse users when products from the same company have different solutions for the same language. 🙈

WDYT @mui/xgrid and @mui/material-ui? Does it make sense to segment Arabic locales precisely? 🤔

0xenn · 2024-12-02T11:53:21Z

🤣.Understood then it's better to have localization per dialect. In that case which country do i need to specify as i have used generic arabic.

LukasTy · 2024-12-02T12:06:23Z

Understood then it's better to have localization per dialect.

If it's ok for you, let's wait for any feedback from the tagged teams before proceeding with any changes. 😉

In that case which country do i need to specify as i have used generic arabic.

Whichever you need or can provide. 👍 Preferably—the most popular/common.
P.S. If a given language is not in the following list, you'll need to add an entry for it.

mui-x/scripts/localeNames.js

Lines 3 to 5 in 259a3d4

    
           'ar-EG': 'Arabic (Egypt)', 
        
           'ar-SA': 'Arabic (Saudi Arabia)', 
        
           'ar-SD': 'Arabic (Sudan)',

0xenn · 2024-12-02T14:58:22Z

If it's ok for you, let's wait for any feedback from the tagged teams before proceeding with any changes. 😉

Sure No problem. Kindly notify it

Whichever you need or can provide. 👍 Preferably—the most popular/common. P.S. If a given language is not in the following list, you'll need to add an entry for it.

Ok. 😁

DiegoAndai · 2024-12-02T15:30:59Z

Hey @LukasTy, I asked the Material UI team, and we agree that we should try to keep consistency and follow https://mui.com/material-ui/guides/localization/#supported-locales, which would be best.

LukasTy · 2024-12-02T15:55:14Z

I asked the Material UI team, and we agree that we should try to keep consistency and follow https://mui.com/material-ui/guides/localization/#supported-locales, which would be best.

Thanks for the reply @DiegoAndai. 🙏
We recently noticed mui/material-ui#31847.
Does that change the decision?
Maybe this PR could be the catalyst for finalizing that issue. 🤔
The "optimizer" gene" in me is all in for simplifying where possible.

One could say that we could even rename enUS to en 🙈

DiegoAndai · 2024-12-02T20:16:43Z

We recently noticed mui/material-ui#31847.
Does that change the decision?

I'm not aware of that issue, but seems like there's no decision there either.

0xenn · 2024-12-03T05:40:36Z

Whichever you need or can provide. 👍 Preferably—the most popular/common. P.S. If a given language is not in the following list, you'll need to add an entry for it.

mui-x/scripts/localeNames.js

Lines 3 to 5 in 259a3d4

'ar-EG': 'Arabic (Egypt)',

'ar-SA': 'Arabic (Saudi Arabia)',

'ar-SD': 'Arabic (Sudan)',

So that means for now we can go with these three according to https://mui.com/material-ui/guides/localization/#supported-locales right.

MBilalShafi · 2024-12-03T07:36:12Z

WDYT @mui/xgrid and @mui/material-ui? Does it make sense to segment Arabic locales precisely? 🤔

I'm not a native Arabic, however, I speak a language that uses the same alphabet system and many words are common with Arabic. As I understand, although different dialects exist they are very similar in terms of communication and a standard locale could cover more than 99% of the communication.

Thus, the proposal in mui/material-ui#31847 makes sense to me, I'd be in favor of doing it for X line of products in v8, and possibly deprecating the country-specific ones aiming to remove them in v9. The core line of products could follow it then.

LukasTy · 2024-12-03T08:17:36Z

Thank you for your input @MBilalShafi. 🙏
This further strengthens the position of optimizing locales. After all, it's just translations that users can override if something doesn't fit their use case. 🤷

Besides, we already have a couple (eu and mk) country independent locales. 👍

@0xenn could you update the PR with the mentioned suggestion (#15693 (comment)) of adding an entry in the localeNames file? 🤔

0xenn · 2024-12-03T13:12:20Z

@LukasTy Done. Thanks ☺️

LukasTy · 2024-12-05T11:24:01Z

Based on https://www.rfc-editor.org/rfc/rfc5646.html#section-4.1.2

Similarly, an application already using tags that start with the 'ar' (Arabic)
subtag might continue to use this more general subtag even for new
data, which could be more precisely tagged with 'arb' (Standard
Arabic).

and this list, you could say that arb might be the most accurate code for "Standard Arabic" if these translations try to target the standard localization. 🤔

A final note

dayjs, moment, and date-fns also have a generic Arabic locale.

My position hasn't changed, I would like to proceed with introducing the ar locale if there are no objections. 🥷

LukasTy

Thank you for all your effort and cooperation @0xenn! 🙏

I'll wait a bit to see if there are no objections for this solution. 😉

SafaAlfulaij · 2024-12-07T08:24:54Z

I'll wait a bit to see if there are no objections for this solution. 😉

Hello! I have noticed some issues in the translation itself.
I have attached the suggested file below. I don't know what is the process of proofreading applied.

import { PickersLocaleText } from './utils/pickersLocaleTextApi';
import { getPickersLocalization } from './utils/getPickersLocalization';
import { TimeViewWithMeridiem } from '../internals/models';

// maps TimeView to its translation
const views: Record<TimeViewWithMeridiem, string> = {
  hours: 'الساعة',
  minutes: 'الدقيقة',
  seconds: 'الثانية',
  meridiem: 'صباحًا/مساءً',
};

const arPickers: Partial<PickersLocaleText> = {
  // Calendar navigation
  previousMonth: 'الشهر السابق',
  nextMonth: 'الشهر القادم',

  // View navigation
  openPreviousView: 'فتح العرض السابق',
  openNextView: 'فتح العرض التالي',
  calendarViewSwitchingButtonAriaLabel: (view) =>
    view === 'year'
      ? 'عرض السنوات مفتوح، بدِّل إلى عرض التقويم'
      : 'عرض التقويم مفتوح، بدِّل إلى عرض السنوات',

  // DateRange labels
  start: 'من',
  end: 'إلى',
  startDate: 'تاريخ البدء',
  startTime: 'وقت البدء',
  endDate: 'تاريخ الانتهاء',
  endTime: 'وقت الانتهاء',

  // Action bar
  cancelButtonLabel: 'إلغاء',
  clearButtonLabel: 'مسح الاختيار',
  okButtonLabel: 'تم',
  todayButtonLabel: 'اليوم',

  // Toolbar titles
  datePickerToolbarTitle: 'اختر التاريخ',
  dateTimePickerToolbarTitle: 'اختر التاريخ والوقت',
  timePickerToolbarTitle: 'اختر الوقت',
  dateRangePickerToolbarTitle: 'اختر التواريخ',

  // Clock labels
  clockLabelText: (view, formattedTime) =>
    `اختر ${views[view]}. ${!formattedTime ? 'لم تختر الوقت' : `اخترت الوقت: ${formattedTime}`}`,
  hoursClockNumberText: (hours) => `ساعة ${hours}`,
  minutesClockNumberText: (minutes) => `دقيقة ${minutes}`,
  secondsClockNumberText: (seconds) => `ثانية ${seconds}`,

  // Digital clock labels
  selectViewText: (view) => `اختر ${views[view]}`,

  // Calendar labels
  calendarWeekNumberHeaderLabel: 'رقم الأسبوع',
  calendarWeekNumberHeaderText: '#',
  calendarWeekNumberAriaLabelText: (weekNumber) => `أسبوع ${weekNumber}`,
  calendarWeekNumberText: (weekNumber) => `${weekNumber}`,

  // Open picker labels
  openDatePickerDialogue: (formattedDate) =>
    formattedDate ? `اختر التاريخ، اخترت التاريخ: ${formattedDate}` : 'اختر التاريخ',
  openTimePickerDialogue: (formattedTime) =>
    formattedTime ? `اختر الوقت، اخترت الوقت: ${formattedTime}` : 'اختر الوقت',
  fieldClearLabel: 'مسح الاختيار',

  // Table labels
  timeTableLabel: 'اختر الوقت',
  dateTableLabel: 'اختر التاريخ',

  // Field section placeholders
  fieldYearPlaceholder: () => 'سنة',
  fieldMonthPlaceholder: () => 'شهر',
  fieldDayPlaceholder: () => 'يوم',
  fieldWeekDayPlaceholder: () => 'يوم-الأسبوع',
  fieldHoursPlaceholder: () => 'ساعة',
  fieldMinutesPlaceholder: () => 'دقيقة',
  fieldSecondsPlaceholder: () => 'ثانية',
  fieldMeridiemPlaceholder: () => 'ص/م',

  // View names
  year: 'السنوات',
  month: 'الأشهر',
  day: 'الأيام',
  weekDay: 'أيام الأسبوع',
  hours: 'الساعات',
  minutes: 'الدقائق',
  seconds: 'الثواني',
  meridiem: 'صباحًا/مساءً',

  // Common
  empty: 'فارغ',
};

export const ar = getPickersLocalization(arPickers);

LukasTy · 2024-12-09T08:00:49Z

@SafaAlfulaij could you do a review and provide suggestions line by line so that you could discuss them with @0xenn or someone else, who knows Arabic? 🙏
I can only do as much with Google Translate. 🙈

SafaAlfulaij

I have added my comments line-by-line :)

SafaAlfulaij · 2024-12-09T09:56:12Z