feat: i18n keys

Author: siiick

packages/app-builder/src/locales/ar/filters.json

@@ -1,5 +1,8 @@
 {
   "clear_filters": "مسح الفلاتر",
+  "ds.addNewFilter.label": "إضافة فلتر جديد",
+  "ds.chooseFilter.label": "اختر فلتر",
+  "ds.noOptionsAvailable.label": "لا يوجد خيارات متاحة",
   "filters": "الفلاتر",
   "new_filter": "فلتر جدبد",
   "up_to": "حتى {{date}}"

packages/app-builder/src/locales/en/filters.json

@@ -1,5 +1,8 @@
 {
   "clear_filters": "clear filters",
+  "ds.addNewFilter.label": "Add new filter",
+  "ds.chooseFilter.label": "Choose a filter",
+  "ds.noOptionsAvailable.label": "No options available",
   "filters": "filters",
   "new_filter": "new filter",
   "up_to": "up to {{duration}}"

packages/app-builder/src/locales/fr/filters.json

@@ -1,5 +1,8 @@
 {
   "clear_filters": "effacer les filtres",
+  "ds.addNewFilter.label": "Ajouter un nouveau filtre",
+  "ds.chooseFilter.label": "Choisir un filtre",
+  "ds.noOptionsAvailable.label": "Aucune option disponible",
   "filters": "filtres",
   "new_filter": "nouveau filtre",
   "up_to": "jusqu'à {{duration}}"

packages/ui-design-system/src/FiltersBar/FiltersBar.tsx

@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react';
 import { match } from 'ts-pattern';
 import { ButtonV2 } from '../Button/Button';
 import { Checkbox } from '../Checkbox/Checkbox';
+import { useI18n } from '../contexts/I18nContext';
 import { Modal } from '../Modal/Modal';
 import { cn } from '../utils';
 import { BooleanValueFilter } from './internals/BooleanValueFilter';
@@ -46,6 +47,7 @@ export function FiltersBar({
   active = [],
   onChange,
 }: FiltersBarProps) {
+  const { t } = useI18n();
   const [isAddModalOpen, setAddModalOpen] = useState(false);
 
   const contextValue = useMemo<FiltersBarContextValue>(() => {
@@ -195,11 +197,11 @@ export function FiltersBar({
             {level === 'additional' && (
               <>
                 <ButtonV2 variant="secondary" onClick={() => setAddModalOpen(true)}>
-                  Add new filter
+                  {t('filters:ds.addNewFilter.label')}
                 </ButtonV2>
                 <Modal.Root open={isAddModalOpen} onOpenChange={setAddModalOpen}>
                   <Modal.Content size="small">
-                    <Modal.Title>Choose a filter</Modal.Title>
+                    <Modal.Title>{t('filters:ds.chooseFilter.label')}</Modal.Title>
                     <div className="p-4 grid grid-cols-1 gap-2">
                       {dynamicDescriptors
                         .filter((d) => !active.includes(d.name))

packages/ui-design-system/src/FiltersBar/internals/SelectOptionFilter.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useState } from 'react';
 import { Button } from '../../Button/Button';
+import { useI18n } from '../../contexts/I18nContext';
 import { MenuCommand } from '../../MenuCommand/MenuCommand';
 import { type SelectFilter } from '../types';
 import { useFiltersBarContext } from './FiltersBarContext';
 
 export function SelectOptionFilter(props: SelectFilter) {
+  const { t } = useI18n();
   const { options, placeholder, selectedValue, name } = props;
   const { emitSet } = useFiltersBarContext();
   const [internalSelectedValue, setInternalSelectedValue] = useState<string>(
@@ -61,7 +63,7 @@ export function SelectOptionFilter(props: SelectFilter) {
                 );
               })
             ) : (
-              <MenuCommand.Empty>No options available</MenuCommand.Empty>
+              <MenuCommand.Empty>{t('filters:ds.noOptionsAvailable.label')}</MenuCommand.Empty>
             )}
           </MenuCommand.List>
         </MenuCommand.Content>

packages/ui-design-system/src/FiltersBar/types.d.ts

@@ -4,7 +4,6 @@ export type FilterBarLevel = 'main' | 'additional';
 
 export type CommittedDynamicValues = Record<string, unknown>;
 
-// Legacy internal filter data shape used for rendering
 export interface BaseFilter<T> {
   name: string;
   placeholder: string;