feat: Added multi language support

- Added multi language support
- Added german translation
- Added prettier config
- Improved useStorage hook
- Moved navbar code to separate component

Author: CrawlerCode

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "printWidth": 200
+}

README.md

@@ -28,8 +28,16 @@
 - Remember and forget issue (not assigned to you)
 - Pin and unpin issue
 - View time entries overview
+- Multiple languages
 - Dark & light mode (system default)
 
+# Supported languages
+
+- English
+- German
+
+> If you want to add more languages or extend existing ones, feel free to contribute. Just create a pull request with the desired changes. The language files are located under [src/lang](src/lang).
+
 # Screenshots
 
 ![issues](screenshots/issues-dark.png)

package.json

@@ -34,6 +34,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-flatpickr": "^3.10.13",
+    "react-intl": "^6.4.4",
     "react-router-dom": "^6.14.2",
     "react-tooltip": "^5.18.0",
     "tailwind-merge": "^1.14.0",

pnpm-lock.yaml

@@ -1,16 +1,17 @@
 import { faGear, faList, faStopwatch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import clsx from "clsx";
 import { Suspense, lazy } from "react";
-import { Link, Navigate, Route, Routes, useLocation } from "react-router-dom";
+import { useIntl } from "react-intl";
+import { Navigate, Route, Routes } from "react-router-dom";
+import Navbar from "./components/general/Navbar";
 import Toast from "./components/general/Toast";
 
 const IssuesPage = lazy(() => import("./pages/IssuesPage"));
 const SettingsPage = lazy(() => import("./pages/SettingsPage"));
 const TimePage = lazy(() => import("./pages/TimePage"));
 
 function App() {
-  const location = useLocation();
+  const { formatMessage } = useIntl();
 
   return (
     <div
@@ -19,52 +20,25 @@ function App() {
         e.preventDefault();
       }}
     >
-      <nav className="sticky top-0 z-10 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-1">
-        <ul className="flex flex-wrap gap-x-2 -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
-          <li>
-            <Link
-              to="/issues"
-              className={clsx(
-                "inline-flex items-center gap-x-1 p-2 rounded-t-lg",
-                location.pathname === "/issues" ? "text-primary-600 border-b-2 border-primary-600 dark:text-primary-500 dark:border-primary-500" : "border-b-2 border-transparent hover:text-gray-600 hover:border-gray-30 dark:hover:text-gray-300",
-                "focus:ring-2 focus:ring-primary-300 focus:outline-none dark:focus:ring-primary-600 select-none"
-              )}
-              tabIndex={-1}
-            >
-              <FontAwesomeIcon icon={faList} />
-              Issues
-            </Link>
-          </li>
-          <li>
-            <Link
-              to="/time"
-              className={clsx(
-                "inline-flex items-center gap-x-1 p-2 rounded-t-lg",
-                location.pathname === "/time" ? "text-primary-600 border-b-2 border-primary-600 dark:text-primary-500 dark:border-primary-500" : "border-b-2 border-transparent hover:text-gray-600 hover:border-gray-30 dark:hover:text-gray-300",
-                "focus:ring-2 focus:ring-primary-300 focus:outline-none dark:focus:ring-primary-600 select-none"
-              )}
-              tabIndex={-1}
-            >
-              <FontAwesomeIcon icon={faStopwatch} />
-              Time
-            </Link>
-          </li>
-          <li>
-            <Link
-              to="/settings"
-              className={clsx(
-                "inline-flex items-center gap-x-1 p-2 rounded-t-lg",
-                location.pathname === "/settings" ? "text-primary-600 border-b-2 border-primary-600 dark:text-primary-500 dark:border-primary-500" : "border-b-2 border-transparent hover:text-gray-600 hover:border-gray-30 dark:hover:text-gray-300",
-                "focus:ring-2 focus:ring-primary-300 focus:outline-none dark:focus:ring-primary-600 select-none"
-              )}
-              tabIndex={-1}
-            >
-              <FontAwesomeIcon icon={faGear} />
-              Settings
-            </Link>
-          </li>
-        </ul>
-      </nav>
+      <Navbar
+        navigation={[
+          {
+            href: "/issues",
+            icon: <FontAwesomeIcon icon={faList} />,
+            name: formatMessage({ id: "nav.tabs.issues" }),
+          },
+          {
+            href: "/time",
+            icon: <FontAwesomeIcon icon={faStopwatch} />,
+            name: formatMessage({ id: "nav.tabs.time" }),
+          },
+          {
+            href: "/settings",
+            icon: <FontAwesomeIcon icon={faGear} />,
+            name: formatMessage({ id: "nav.tabs.settings" }),
+          },
+        ]}
+      />
       <main className="h-[500px] overflow-y-auto p-2">
         <Routes>
           <Route index element={<Navigate to="/issues" replace />} />
@@ -94,7 +68,7 @@ function App() {
             }
           />
 
-          <Route path="*" element={<Toast type="error" message="Page not found!" allowClose={false} />} />
+          <Route path="*" element={<Toast type="error" message={formatMessage({ id: "nav.error.page-not-found" })} allowClose={false} />} />
         </Routes>
       </main>
     </div>

src/App.tsx

@@ -0,0 +1,51 @@
+import { setDefaultOptions } from "date-fns";
+import { de as dateFnsLocalDE, enUS as dateFnsLocalEN } from "date-fns/locale";
+import React from "react";
+import { IntlProvider as ReactIntlProvider } from "react-intl";
+import useSettings from "./hooks/useSettings";
+import messagesDE from "./lang/de.json";
+import messagesEN from "./lang/en.json";
+
+type Language = "de" | "en";
+// eslint-disable-next-line react-refresh/only-export-components
+export const LANGUAGES: Language[] = ["de", "en"];
+
+type PropTypes = {
+  children: React.ReactNode;
+};
+
+const IntlProvider = ({ children }: PropTypes) => {
+  const { settings } = useSettings();
+
+  let locale: Language;
+  if (settings.language === "browser") {
+    locale = LANGUAGES.find((lang) => navigator.language === lang || navigator.language.startsWith(`${lang}-`)) ?? "en";
+  } else {
+    locale = LANGUAGES.find((lang) => settings.language === lang) ?? "en";
+  }
+
+  let messages;
+  let dateFnsLocal;
+  switch (locale) {
+    case "de":
+      messages = messagesDE;
+      dateFnsLocal = dateFnsLocalDE;
+      break;
+    case "en":
+      messages = messagesEN;
+      dateFnsLocal = dateFnsLocalEN;
+      break;
+  }
+
+  setDefaultOptions({
+    locale: dateFnsLocal,
+  });
+
+  return (
+    <ReactIntlProvider locale={locale} messages={messages}>
+      {children}
+    </ReactIntlProvider>
+  );
+};
+
+export default IntlProvider;

src/IntlProvider.tsx

@@ -1,13 +1,24 @@
 import clsx from "clsx";
+import React from "react";
 
 type PropTypes = {
-  text: string;
+  children: React.ReactNode;
   space?: "md" | "xl";
   className?: string;
 };
 
-const KBD = ({ text, space = "md", className }: PropTypes) => {
-  return <kbd className={clsx(space === "xl" ? "px-2" : "px-1", "mx-1 py-0.5 text-xs text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500", className)}>{text}</kbd>;
+const KBD = ({ children, space = "md", className }: PropTypes) => {
+  return (
+    <kbd
+      className={clsx(
+        space === "xl" ? "px-2" : "px-1",
+        "mx-1 py-0.5 text-xs text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500",
+        className
+      )}
+    >
+      {children}
+    </kbd>
+  );
 };
 
 // eslint-disable-next-line react-refresh/only-export-components