fix: fix localization for Filter and improve Filter component

src/organisms/Filter/components/Footer/index.tsx

@@ -6,6 +6,19 @@ import { Flex, Typography } from '../../../../atomics';
 import { Form, Select, Space, Tooltip } from '../../../../molecules';
 import { FilterFooterWrapper } from './styles';
 import { RdFilterFooterProps } from './types';
+import { localize } from '../../../../utils/localize';
+
+// export const rdI118next = i18next;
+// (rdI118next as any).fromLib = '1byte-react-design';
+
+// export const useRdLocation = useLocation;
+// (useRdLocation as any).fromLib = '1byte-react-design';
+
+// export const rdReact = React;
+// (rdReact as any).fromLib = '1byte-react-design';
+
+// export const rdYup = Yup;
+// (rdYup as any).fromLib = '1byte-react-design';
 
 export const FilterFooter = <T extends Record<string, string>>(props: RdFilterFooterProps<T>) => {
     const {
@@ -16,6 +29,7 @@ export const FilterFooter = <T extends Record<string, string>>(props: RdFilterFo
         isLoading,
         filterValue,
         localization,
+        children,
         onChangeFilterValue,
     } = props;
 
@@ -39,38 +53,46 @@ export const FilterFooter = <T extends Record<string, string>>(props: RdFilterFo
             <Flex justify="space-between" wrap>
                 {Boolean(fields?.length) && (
                     <Space>
-                        {fields?.map(field => (
-                            <Form.Item
-                                key={field.name as string}
-                                label={field.label}
-                                disableMargin
-                                // labelCol={{
-                                //     flex: 1,
-                                // }}
-                                // wrapperCol={false}
-                            >
-                                <Select
-                                    options={field.options}
-                                    value={filterValue?.[field.name] || null}
-                                    onChange={e => {
-                                        const newFilterValue = { ...filterValue } as T;
-                                        newFilterValue[field.name] = e;
+                        {fields?.map(field => {
+                            return (
+                                <Form.Item
+                                    key={field.name as string}
+                                    label={field.label}
+                                    disableMargin
+                                    // labelCol={{
+                                    //     flex: 1,
+                                    // }}
+                                    // wrapperCol={false}
+                                >
+                                    {field?.render ? (
+                                        field.render()
+                                    ) : (
+                                        <Select
+                                            options={field.options}
+                                            value={filterValue?.[field.name] || null}
+                                            onChange={e => {
+                                                const newFilterValue = { ...filterValue } as T;
+                                                newFilterValue[field.name] = e;
 
-                                        onChangeFilterValue?.(newFilterValue);
-                                    }}
-                                    popupMatchSelectWidth={false}
-                                />
-                            </Form.Item>
-                        ))}
+                                                onChangeFilterValue?.(newFilterValue);
+                                            }}
+                                            popupMatchSelectWidth={false}
+                                        />
+                                    )}
+                                </Form.Item>
+                            );
+                        })}
                     </Space>
                 )}
 
+                {children}
+
                 {Boolean(totalItems || showTotalItemsCount) && (
                     <Space size={'small'} style={{ marginLeft: 'auto' }} align="end">
                         {isLoading && <LoadingOutlined />}
                         <Typography.Text>
-                            {i18next.t(showing, { total: totalItems, count: showTotalItemsCount })}{' '}
-                            <Tooltip title={i18next.t(showing_tooltip)}>
+                            {localize(showing, { total: totalItems, count: showTotalItemsCount })}{' '}
+                            <Tooltip title={localize(showing_tooltip)}>
                                 <Typography.Text type="secondary">
                                     <InfoCircleFilled />
                                 </Typography.Text>

src/organisms/Filter/components/Footer/types.ts

@@ -24,6 +24,7 @@ export type RdFilterFooterComponent = <T extends {}>(
 interface IFieldItem<T extends {}> extends RdSelectProps {
     name: keyof T;
     label: ReactNode;
+    render?: () => ReactNode;
 }
 
 export interface FilterFooterLocalization {

src/organisms/Filter/components/Header/index.tsx

@@ -3,6 +3,7 @@ import { RdSearchProps, Space } from '../../../../molecules';
 import { FilterHeaderWrapper, InputFilterStyles } from './styles';
 import { RdFilterHeaderProps } from './types';
 import i18next from 'i18next';
+import { localize } from '../../../../utils/localize';
 
 export const FilterHeader = (props: RdFilterHeaderProps) => {
     const { defaultKeywords, className, localization, onChangeKeywords } = props;
@@ -17,7 +18,7 @@ export const FilterHeader = (props: RdFilterHeaderProps) => {
             <Space size="small" direction="vertical" block>
                 <InputFilterStyles
                     defaultValue={defaultKeywords}
-                    placeholder={i18next.t(search_placeholder)}
+                    placeholder={localize(search_placeholder)}
                     onSearch={handleChangeKeywords}
                 />
 

src/organisms/Filter/index.ts

@@ -1 +1,2 @@
+export * from './components/Footer';
 export * from './Filter';

src/utils/localize.ts

@@ -0,0 +1,32 @@
+// utils/localize.ts
+
+/**
+ * Localize template string by replacing {{variables}} with values from context.
+ * Supports nested keys (e.g. {{user.name}}) and fallback (e.g. {{key|default}}).
+ *
+ * Example:
+ *  localize("Hi {{user.name|there}}!", { user: { name: "Kenneth" } })
+ *  -> "Hi Kenneth!"
+ */
+export function localize(
+    template: string,
+    context: Record<string, any> = {},
+    options?: { strict?: boolean }
+): string {
+    if (typeof template !== 'string') return template as any;
+
+    const getValue = (path: string, ctx: any): any => {
+        return path.split('.').reduce((acc, key) => (acc ? acc[key] : undefined), ctx);
+    };
+
+    return template.replace(/\{\{(.*?)\}\}/g, (_, match) => {
+        const [path, fallback] = match.split('|').map((s: string) => s.trim());
+        const value = getValue(path, context);
+
+        if (value !== undefined && value !== null) return String(value);
+
+        if (fallback !== undefined) return fallback;
+        if (options?.strict) throw new Error(`Missing localization key: ${path}`);
+        return '';
+    });
+}