@trii/components 2.0.11 → 2.0.12

package/dist/esm/types/components/ContactInfoPopup/ContactInfoPopup.d.ts

@@ -4,11 +4,10 @@ export interface ContactInfoPopupProps {
     open: boolean;
     anchorEl: HTMLElement | null;
     onClose: () => void;
-    t?: (key: string) => string;
     contactData?: IContact | IBusiness;
     avatarImgUrl?: string;
     sx?: SxProps<Theme>;
     navigate: (path: string) => void;
 }
-declare const ContactInfoPopup: ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, t, }: ContactInfoPopupProps) => import("react/jsx-runtime").JSX.Element;
+declare const ContactInfoPopup: ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, }: ContactInfoPopupProps) => import("react/jsx-runtime").JSX.Element;
 export default ContactInfoPopup;

package/dist/esm/types/components/ContactInfoPopup/components/Header/Header.d.ts

@@ -1,8 +1,8 @@
-type HeaderProps = {
-    imgUrl: string | undefined;
-    name: string | undefined;
-    contactId: string | undefined;
+export interface HeaderProps {
+    contactId?: string;
+    imgUrl?: string;
+    name?: string;
     navigate: (path: string) => void;
-};
-declare const Header: ({ imgUrl, name, contactId, navigate }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+}
+export declare const Header: ({ contactId, imgUrl, name, navigate }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/dist/esm/types/components/ContactInfoPopup/hooks/useContactInfoPopupTranslation.d.ts

@@ -0,0 +1,24 @@
+export declare const useContactInfoPopupTranslation: () => {
+    businessSection: {
+        title: string;
+        description: string;
+    };
+    contactMethod: {
+        email: string;
+        phone: string;
+        website: string;
+    };
+    labelsSection: {
+        title: string;
+    };
+    membersSection: {
+        title: string;
+        noMembers: string;
+    };
+    global: {
+        properties: string;
+        business: string;
+        businessMembers: string;
+        labels: string;
+    };
+};

package/dist/esm/types/components/LanguageSelector.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LanguageSelector: React.FC;

package/dist/esm/types/contexts/LanguageContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface LanguageContextType {
+    language: string;
+    setLanguage: (lang: string) => void;
+}
+export declare const LanguageProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useLanguage: () => LanguageContextType;
+export {};

package/dist/esm/types/i18n.d.ts

@@ -0,0 +1,2 @@
+import i18n from 'i18next';
+export default i18n;

package/dist/esm/types/index.d.ts

@@ -1 +1,6 @@
 export * from './components';
+export { LanguageProvider, useLanguage } from './contexts/LanguageContext';
+export { LanguageSelector } from './components/LanguageSelector';
+export { useTriiTranslation } from './utils/translation';
+export { enTranslations } from './translations/en';
+export { esTranslations } from './translations/es';

package/dist/esm/types/translations/en.d.ts

@@ -0,0 +1,31 @@
+export declare const enTranslations: {
+    components: {
+        contactInfoPopup: {
+            businessSection: {
+                title: string;
+                description: string;
+            };
+            contactMethod: {
+                email: string;
+                phone: string;
+                website: string;
+            };
+            labelsSection: {
+                title: string;
+            };
+            membersSection: {
+                title: string;
+                noMembers: string;
+            };
+            global: {
+                properties: string;
+                business: string;
+                businessMembers: string;
+                labels: string;
+            };
+        };
+        textBox: {
+            placeholder: string;
+        };
+    };
+};

package/dist/esm/types/translations/es.d.ts

@@ -0,0 +1,31 @@
+export declare const esTranslations: {
+    components: {
+        contactInfoPopup: {
+            businessSection: {
+                title: string;
+                description: string;
+            };
+            contactMethod: {
+                email: string;
+                phone: string;
+                website: string;
+            };
+            labelsSection: {
+                title: string;
+            };
+            membersSection: {
+                title: string;
+                noMembers: string;
+            };
+            global: {
+                properties: string;
+                business: string;
+                businessMembers: string;
+                labels: string;
+            };
+        };
+        textBox: {
+            placeholder: string;
+        };
+    };
+};

package/dist/esm/types/translations/index.d.ts

@@ -0,0 +1,2 @@
+export { enTranslations } from './en';
+export { esTranslations } from './es';

package/dist/esm/types/types/translations.d.ts

@@ -0,0 +1,25 @@
+export interface TriiTranslations {
+    components: {
+        contactInfoPopup: {
+            businessSection: {
+                title: string;
+                description: string;
+            };
+            contactMethod: {
+                email: string;
+                phone: string;
+                website: string;
+            };
+            labelsSection: {
+                title: string;
+            };
+            membersSection: {
+                title: string;
+                noMembers: string;
+            };
+        };
+        textBox: {
+            placeholder: string;
+        };
+    };
+}

package/dist/esm/types/utils/translation.d.ts

@@ -0,0 +1,7 @@
+export interface TranslationKeys {
+    [key: string]: string;
+}
+export declare const useTriiTranslation: (namespace?: string) => {
+    t: (key: string, options?: Record<string, any>) => string;
+    i18n: import("i18next").i18n;
+};

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IContact, IBusiness } from '@trii/types/dist/Contacts';
 import { SxProps, Theme } from '@mui/material';
+import React from 'react';
+import * as i18next from 'i18next';
 
 interface TestBoxProps {
     /**
@@ -14,12 +16,91 @@ interface ContactInfoPopupProps {
     open: boolean;
     anchorEl: HTMLElement | null;
     onClose: () => void;
-    t?: (key: string) => string;
     contactData?: IContact | IBusiness;
     avatarImgUrl?: string;
     sx?: SxProps<Theme>;
     navigate: (path: string) => void;
 }
-declare const ContactInfoPopup: ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, t, }: ContactInfoPopupProps) => react_jsx_runtime.JSX.Element;
+declare const ContactInfoPopup: ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, }: ContactInfoPopupProps) => react_jsx_runtime.JSX.Element;
 
-export { ContactInfoPopup, TestBox };
+interface LanguageContextType {
+    language: string;
+    setLanguage: (lang: string) => void;
+}
+declare const LanguageProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+declare const useLanguage: () => LanguageContextType;
+
+declare const LanguageSelector: React.FC;
+
+declare const useTriiTranslation: (namespace?: string) => {
+    t: (key: string, options?: Record<string, any>) => string;
+    i18n: i18next.i18n;
+};
+
+declare const enTranslations: {
+    components: {
+        contactInfoPopup: {
+            businessSection: {
+                title: string;
+                description: string;
+            };
+            contactMethod: {
+                email: string;
+                phone: string;
+                website: string;
+            };
+            labelsSection: {
+                title: string;
+            };
+            membersSection: {
+                title: string;
+                noMembers: string;
+            };
+            global: {
+                properties: string;
+                business: string;
+                businessMembers: string;
+                labels: string;
+            };
+        };
+        textBox: {
+            placeholder: string;
+        };
+    };
+};
+
+declare const esTranslations: {
+    components: {
+        contactInfoPopup: {
+            businessSection: {
+                title: string;
+                description: string;
+            };
+            contactMethod: {
+                email: string;
+                phone: string;
+                website: string;
+            };
+            labelsSection: {
+                title: string;
+            };
+            membersSection: {
+                title: string;
+                noMembers: string;
+            };
+            global: {
+                properties: string;
+                business: string;
+                businessMembers: string;
+                labels: string;
+            };
+        };
+        textBox: {
+            placeholder: string;
+        };
+    };
+};
+
+export { ContactInfoPopup, LanguageProvider, LanguageSelector, TestBox, enTranslations, esTranslations, useLanguage, useTriiTranslation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trii/components",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "description": "Trii components package",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -74,12 +74,14 @@
     "@types/jest": "^29.5.5",
     "@types/react": "^18.2.23",
     "babel-jest": "^29.7.0",
+    "i18next": "^23.7.16",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.31",
     "postcss-import": "^15.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.0.5",
     "rollup": "^3.29.4",
     "rollup-plugin-dts": "^6.0.2",
     "rollup-plugin-postcss": "^4.0.2",
@@ -90,7 +92,9 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.4",
     "react": ">=17.0.2 <19.0.0",
-    "react-dom": ">=17.0.2 <19.0.0"
+    "react-dom": ">=17.0.2 <19.0.0",
+    "i18next": ">=21.0.0",
+    "react-i18next": ">=13.0.0"
   },
   "dependencies": {
     "@trii/types": "^2.10.398",

package/readme

@@ -69,3 +69,45 @@ or
 ```sh
 yarn publish
 ```
+
+## Translations
+
+The components support translations using react-i18next. To use translations in your project:
+
+1. Make sure you have react-i18next installed in your project
+2. Import the translation utility:
+   ```typescript
+   import { useTriiTranslation } from '@trii/components';
+   ```
+3. Use the translation hook in your components:
+
+   ```typescript
+   const { t } = useTriiTranslation();
+
+   // Use translations
+   <div>{t('components.contactInfoPopup.businessSection.title')}</div>;
+   ```
+
+### Default Translations
+
+The package includes default English translations. You can extend or override these translations in your project by adding them to your i18next configuration:
+
+```typescript
+import { enTranslations } from '@trii/components/translations/en';
+
+i18n.addResourceBundle('en', 'translation', enTranslations, true, true);
+```
+
+### Type Safety
+
+The package includes TypeScript types for translations. You can extend the `TriiTranslations` interface to add your own translations:
+
+```typescript
+import { TriiTranslations } from '@trii/components/types/translations';
+
+declare module '@trii/components/types/translations' {
+  interface TriiTranslations {
+    // Add your custom translations here
+  }
+}
+```