feat: add i18n (translation/localization) (#16877)

* Translation module init

* Add more i18n keys

* fix: fix string wrong

* refactor: use namespace translation file

* chore: add more translation key

* fix: fix some page name error

* refactor: change Trans tag for t function

* chore: fix some key not work

* chore: fix SearchFilterDialog i18n key error

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* chore: fix en i18n file filter missing some keys

* chore: add some i18n keys

* chore: add more i18n keys again

* feat: add search page i18n

* feat: add explore model i18n keys

* Update web/src/components/menu/GeneralSettings.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/src/components/menu/GeneralSettings.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/src/components/menu/GeneralSettings.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* feat: add more live i18n keys

* feat: add more search setting i18n keys

* fix: remove some comment

* fix: fix some setting page url error

* Update web/src/views/settings/SearchSettingsView.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* fix: add system missing keys

* fix: update password update i18n keys

* chore: remove outdate translation.json file

* fix: fix exploreSettings error

* chore: add object setting i18n keys

* Update web/src/views/recording/RecordingView.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/public/locales/en/components/filter.json

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/src/components/overlay/ExportDialog.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* feat: add more i18n keys

* fix: fix motionDetectionTuner html node

* feat: add more page i18n keys

* fix: cameraStream i18n keys error

* feat: add Player i18n keys

* feat: add more toast i18n keys

* feat: change explore setting name

* feat: add more document title i18n keys

* feat: add more search i18n keys

* fix: fix accessDenied i18n keys error

* chore: add objectType i18n

* chore: add  inputWithTags i18n

* chore: add SearchFilterDialog i18n

* Update web/src/views/settings/ObjectSettingsView.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/src/views/settings/ObjectSettingsView.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/src/views/settings/ObjectSettingsView.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/src/views/settings/ObjectSettingsView.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/src/views/settings/ObjectSettingsView.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* chore: add some missing i18n keys

* chore: remove most import { t } from "i18next";

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
This commit is contained in:
GuoQing Liu
2025-03-16 10:36:20 -05:00
committed by GitHub
co-authored by Josh Hawkins
parent db541abed4
commit d34533981f
150 changed files with 6809 additions and 1926 deletions
+17 -13
View File
@@ -12,6 +12,10 @@ import {
import { Switch } from "./switch";
import { cn } from "@/lib/utils";
import { LuCheck } from "react-icons/lu";
import { useTranslation } from "react-i18next";
const { t } = useTranslation(["common"]);
export interface DateRangePickerProps {
/** Click handler for applying the updates from DateRangePicker. */
@@ -59,15 +63,15 @@ interface Preset {
// Define presets
const PRESETS: Preset[] = [
{ name: "today", label: "Today" },
{ name: "yesterday", label: "Yesterday" },
{ name: "last7", label: "Last 7 days" },
{ name: "last14", label: "Last 14 days" },
{ name: "last30", label: "Last 30 days" },
{ name: "thisWeek", label: "This Week" },
{ name: "lastWeek", label: "Last Week" },
{ name: "thisMonth", label: "This Month" },
{ name: "lastMonth", label: "Last Month" },
{ name: "today", label: t("time.today") },
{ name: "yesterday", label: t("time.yesterday") },
{ name: "last7", label: t("time.last7") },
{ name: "last14", label: t("time.last14") },
{ name: "last30", label: t("time.last30") },
{ name: "thisWeek", label: t("time.thisWeek") },
{ name: "lastWeek", label: t("time.lastWeek") },
{ name: "thisMonth", label: t("time.thisMonth") },
{ name: "lastMonth", label: t("time.lastMonth") },
];
/** The DateRangePicker component allows a user to select a range of dates */
@@ -418,7 +422,7 @@ export function DateRangePicker({
<div className="mx-auto flex w-64 items-center justify-evenly gap-2 py-2">
<Button
variant="select"
aria-label="Apply"
aria-label={t("button.apply", { ns: "common" })}
onClick={() => {
setIsOpen(false);
if (
@@ -429,7 +433,7 @@ export function DateRangePicker({
}
}}
>
Apply
{t("button.apply", { ns: "common"})}
</Button>
<Button
onClick={() => {
@@ -438,9 +442,9 @@ export function DateRangePicker({
onReset?.();
}}
variant="ghost"
aria-label="Reset"
aria-label={t("button.reset", { ns: "common" })}
>
Reset
{t("button.reset", { ns: "common"})}
</Button>
</div>
</div>
+14 -1
View File
@@ -1,12 +1,24 @@
import * as React from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { DayPicker } from "react-day-picker";
import { enUS, Locale, zhCN } from "date-fns/locale";
import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";
import i18n from "@/utils/i18n";
export type CalendarProps = React.ComponentProps<typeof DayPicker>;
let locale: Locale;
switch(i18n.language) {
case "zh-CN":
locale = zhCN;
break;
default:
locale = enUS;
break;
}
function Calendar({
className,
classNames,
@@ -15,6 +27,7 @@ function Calendar({
}: CalendarProps) {
return (
<DayPicker
locale={locale}
showOutsideDays={showOutsideDays}
className={cn("p-3", className)}
classNames={{
+7 -4
View File
@@ -6,6 +6,7 @@ import { ArrowLeft, ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { useTranslation } from "react-i18next";
type CarouselApi = UseEmblaCarouselType[1];
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
@@ -196,6 +197,7 @@ const CarouselPrevious = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
const { t } = useTranslation(["views/explore"]);
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
return (
@@ -210,13 +212,13 @@ const CarouselPrevious = React.forwardRef<
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
className,
)}
aria-label="Previous slide"
aria-label={t("objectLifecycle.carousel.previous")}
disabled={!canScrollPrev}
onClick={scrollPrev}
{...props}
>
<ArrowLeft className="h-4 w-4" />
<span className="sr-only">Previous slide</span>
<span className="sr-only">{t("objectLifecycle.carousel.previous")}</span>
</Button>
);
});
@@ -226,6 +228,7 @@ const CarouselNext = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
const { t } = useTranslation(["views/explore"]);
const { orientation, scrollNext, canScrollNext } = useCarousel();
return (
@@ -240,13 +243,13 @@ const CarouselNext = React.forwardRef<
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
className,
)}
aria-label="Next slide"
aria-label={t("objectLifecycle.carousel.next")}
disabled={!canScrollNext}
onClick={scrollNext}
{...props}
>
<ArrowRight className="h-4 w-4" />
<span className="sr-only">Next slide</span>
<span className="sr-only">{t("objectLifecycle.carousel.next")}</span>
</Button>
);
});
+9 -6
View File
@@ -3,11 +3,14 @@ import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
import { cn } from "@/lib/utils"
import { ButtonProps, buttonVariants } from "@/components/ui/button"
import { useTranslation } from "react-i18next"
const { t } = useTranslation(["common"])
const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
<nav
role="navigation"
aria-label="pagination"
aria-label={t("pagination.label")}
className={cn("mx-auto flex w-full justify-center", className)}
{...props}
/>
@@ -64,13 +67,13 @@ const PaginationPrevious = ({
...props
}: React.ComponentProps<typeof PaginationLink>) => (
<PaginationLink
aria-label="Go to previous page"
aria-label={t("pagination.previous.label")}
size="default"
className={cn("gap-1 pl-2.5", className)}
{...props}
>
<ChevronLeft className="h-4 w-4" />
<span>Previous</span>
<span>{t("pagination.previous")}</span>
</PaginationLink>
)
PaginationPrevious.displayName = "PaginationPrevious"
@@ -80,12 +83,12 @@ const PaginationNext = ({
...props
}: React.ComponentProps<typeof PaginationLink>) => (
<PaginationLink
aria-label="Go to next page"
aria-label={t("pagination.next.label")}
size="default"
className={cn("gap-1 pr-2.5", className)}
{...props}
>
<span>Next</span>
<span>{t("pagination.next")}</span>
<ChevronRight className="h-4 w-4" />
</PaginationLink>
)
@@ -101,7 +104,7 @@ const PaginationEllipsis = ({
{...props}
>
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">More pages</span>
<span className="sr-only">{t("pagination.more")}</span>
</span>
)
PaginationEllipsis.displayName = "PaginationEllipsis"