Basic i18next integration

package.json

@@ -32,6 +32,7 @@
     "@turf/centroid": "^6.5.0",
     "chroma-js": "^2.4.2",
     "fuse.js": "^6.6.2",
+    "i18next": "^23.10.0",
     "maplibre-gl": "^2.4.0",
     "nanoid": "^4.0.0",
     "ngraph.graph": "^20.0.0",
@@ -40,6 +41,7 @@
     "react": "^18.2.0",
     "react-18-image-lightbox": "^5.1.4",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.0.5",
     "react-icons": "^4.6.0",
     "react-map-gl": "^7.0.19",
     "react-transition-group": "^4.4.5",

src/components/KimaPopup/SelectedCard.css

@@ -152,14 +152,9 @@
   padding: 0 5px;
   font-size: 12px;
   display: inline-block;
-  text-transform: lowercase;
   vertical-align: middle;
 }
 
-.kima-selected-card main h2.type .label::first-letter {
-  text-transform: uppercase;
-}
-
 .kima-selected-card a {
   color: #000;
   text-decoration: none;

src/components/KimaPopup/SelectedCard.jsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { HiChevronRight } from 'react-icons/hi2';
 import { CgArrowsExpandRight, CgSpinner } from 'react-icons/cg';
-import { FiShare2 } from 'react-icons/fi';
-import { InfoModal } from '../../peripleo';
+import { useTranslation } from 'react-i18next';
 import { useAutoPosition } from './useAutoPosition';
 import { FullscreenImage } from '../FullscreenImage/FullscreenImage';
 import { getDescription } from './utils';
@@ -31,6 +30,8 @@ export const logRequestedAsset = (recordType, id) =>
 
 export const SelectedCard = props => {
 
+  const { t } = useTranslation();
+
   const el = useRef();
 
   const { record } = props;
@@ -120,7 +121,7 @@ export const SelectedCard = props => {
             </h1>
             <h2 className="type">
               {TYPE_ICONS[type.label]}
-              <span className="label">{type.label}</span>
+              <span className="label">{t(type.label)}</span>
             </h2>
           </div>
           {description && <p style={isRTL(description) ? { direction: 'rtl' } : null}>{description}</p> }
@@ -129,15 +130,15 @@ export const SelectedCard = props => {
         <footer>
           <a href={id} target="_blank">
             <section className="details">
-              <span>פרטים נוספים</span>
+              <span>{t('Details')}</span>
               <span className="chevron">
                 <HiChevronRight />
               </span>
             </section>
           </a>
 
           <section className="close" style={{ borderBottomColor: TYPE_COLORS[type.label] }}>
-            <button className="close" onClick={props.onClose}>סגירה</button>
+            <button className="close" onClick={props.onClose}>{t('Close')}</button>
           </section>
         </footer>
 

src/components/KimaTooltip/KimaTooltip.jsx

@@ -1,8 +1,11 @@
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useGraph, useDeviceState } from '../../peripleo';
 
 export const KimaTooltip = props => {
 
+  const { t } = useTranslation();
+
   const graph = useGraph();
 
   const device = useDeviceState();
@@ -32,7 +35,7 @@ export const KimaTooltip = props => {
       {totalConnected === 1 && connected.length > 0 &&
         <div className="kima-tooltip-footer kima-first-connected">
           {connected[0].title} {connected[0].type?.label && 
-            <span>({connected[0].type.label})</span> 
+            <span>({t(connected[0].type.label)})</span> 
           }
         </div>
       }

src/i18n.jsx

@@ -0,0 +1,30 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import ar from './messages/ar.json';
+import en from './messages/en.json';
+import he from './messages/he.json';
+
+const resources = {
+  ar: {
+    translation: ar
+  },
+  en: {
+    translation: en
+  },
+  he: {
+    translation: he
+  }
+};
+
+i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    lng: 'he',
+    interpolation: {
+      escapeValue: false
+    }
+  });
+
+export default i18n;

src/index.jsx

@@ -19,6 +19,7 @@ import { KimaPopup, KimaStore, KimaTooltip, LoadIndicator } from './components';
 import { TYPE_COLORS } from './Colors';
 import { API_BASE, MAP_STYLE } from './Config';
 
+import './i18n';
 import './index.css';
 
 // Needed for lightbox: https://stackoverflow.com/questions/72114775/vite-global-is-not-defined

src/messages/ar.json

@@ -0,0 +1,22 @@
+{
+  "Close": "Close",
+  "Details": "Details",
+  "Record Types": "Record Types",
+  "Relationships": "Relationships",
+
+  "ARCHIVE": "Archive",
+  "BOOK": "Book",
+  "EPHEMERA": "Ephemera",
+  "GENIZA MANUSCRIPT": "Geniza Manuscript",
+  "KETUBBA": "Ketubba",
+  "MANUSCRIPT": "Manuscript",
+  "MAP": "Map",
+  "MOVIE": "Movie",
+  "MUSIC": "Music",
+  "NEWSPAPER": "Newspaper",
+  "NEWSPAPER ARTICLE": "Newspaper Article",
+  "ORAL": "Oral",
+  "PHOTOGRAPH": "Photograph",
+  "PICTURE": "Picture",
+  "SCORE": "Score"
+}

src/messages/en.json

@@ -0,0 +1,22 @@
+{
+  "Close": "Close",
+  "Details": "Details",
+  "Record Types": "Record Types",
+  "Relationships": "Relationships",
+
+  "ARCHIVE": "Archive",
+  "BOOK": "Book",
+  "EPHEMERA": "Ephemera",
+  "GENIZA MANUSCRIPT": "Geniza Manuscript",
+  "KETUBBA": "Ketubba",
+  "MANUSCRIPT": "Manuscript",
+  "MAP": "Map",
+  "MOVIE": "Movie",
+  "MUSIC": "Music",
+  "NEWSPAPER": "Newspaper",
+  "NEWSPAPER ARTICLE": "Newspaper Article",
+  "ORAL": "Oral",
+  "PHOTOGRAPH": "Photograph",
+  "PICTURE": "Picture",
+  "SCORE": "Score"
+}

src/messages/he.json

@@ -0,0 +1,22 @@
+{
+  "Close": "סגירה",
+  "Details": "פרטים נוספים",
+  "Record Types": "Record Types",
+  "Relationships": "Relationships",
+
+  "ARCHIVE": "Archive",
+  "BOOK": "Book",
+  "EPHEMERA": "Ephemera",
+  "GENIZA MANUSCRIPT": "Geniza Manuscript",
+  "KETUBBA": "Ketubba",
+  "MANUSCRIPT": "Manuscript",
+  "MAP": "Map",
+  "MOVIE": "Movie",
+  "MUSIC": "Music",
+  "NEWSPAPER": "Newspaper",
+  "NEWSPAPER ARTICLE": "Newspaper Article",
+  "ORAL": "Oral",
+  "PHOTOGRAPH": "Photograph",
+  "PICTURE": "Picture",
+  "SCORE": "Score"
+}

src/peripleo/controls/Aggregations/AggregationsOverlay.css

@@ -123,16 +123,10 @@
 }
 
 .p6o-aggs-values .p6o-agg-value-wrapper span.p6o-agg-value-label {
-  text-transform:capitalize;
   background-color:#fff;
-  text-transform: lowercase;
   padding-right: 16px;
 }
 
-.p6o-aggs-values .p6o-agg-value-wrapper span.p6o-agg-value-label::first-letter {
-  text-transform: uppercase;
-}
-
 .p6o-aggs-values .p6o-value-unselected {
   opacity: 0.2;
 }