From ef5e671cfe8fa9d0cbb78cd65782356aacf45a0d Mon Sep 17 00:00:00 2001 From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Date: Sat, 28 Dec 2024 17:05:15 +0100 Subject: [PATCH] i18n: rename some files, add tests for useDateLocale (#3481) --- @navikt/core/react/src/alert/Alert.tsx | 2 +- @navikt/core/react/src/chips/Removable.tsx | 2 +- .../core/react/src/copybutton/CopyButton.tsx | 2 +- .../date/context/useDateTranslationContext.ts | 2 +- .../react/src/date/datepicker/DatePicker.tsx | 2 +- .../date/datepicker/DatePickerStandalone.tsx | 2 +- .../react/src/date/hooks/useDatepicker.tsx | 2 +- .../react/src/date/hooks/useMonthPicker.tsx | 2 +- .../src/date/hooks/useRangeDatepicker.tsx | 2 +- .../src/date/monthpicker/MonthPicker.tsx | 2 +- .../monthpicker/MonthPickerStandalone.tsx | 2 +- .../core/react/src/date/parts/DateWrapper.tsx | 3 +- .../expansion-card/ExpansionCardHeader.tsx | 2 +- @navikt/core/react/src/form/ReadOnlyIcon.tsx | 2 +- .../combobox/FilteredOptions/AddNewOption.tsx | 2 +- .../FilteredOptions/LoadingMessage.tsx | 2 +- .../FilteredOptions/MaxSelectedMessage.tsx | 2 +- .../src/form/error-summary/ErrorSummary.tsx | 2 +- .../file-upload/parts/dropzone/Dropzone.tsx | 2 +- .../src/form/file-upload/parts/item/Item.tsx | 2 +- .../src/form/form-progress/FormProgress.tsx | 2 +- .../form/form-summary/FormSummaryEditLink.tsx | 2 +- @navikt/core/react/src/form/search/Search.tsx | 2 +- .../react/src/form/search/SearchButton.tsx | 2 +- .../src/form/textarea/TextareaCounter.tsx | 2 +- .../src/guide-panel/Illustration.darkside.tsx | 2 +- .../react/src/guide-panel/Illustration.tsx | 2 +- @navikt/core/react/src/help-text/HelpText.tsx | 2 +- @navikt/core/react/src/loader/Loader.tsx | 2 +- @navikt/core/react/src/modal/ModalHeader.tsx | 2 +- .../core/react/src/pagination/Pagination.tsx | 2 +- .../react/src/progress-bar/ProgressBar.tsx | 2 +- .../core/react/src/table/ExpandableRow.tsx | 2 +- .../core/react/src/timeline/AxisLabels.tsx | 3 +- @navikt/core/react/src/timeline/Pin.tsx | 2 +- .../core/react/src/timeline/TimelineRow.tsx | 2 +- .../src/timeline/period/ClickablePeriod.tsx | 2 +- .../timeline/period/NonClickablePeriod.tsx | 2 +- .../core/react/src/timeline/utils/period.ts | 2 +- .../react/src/timeline/zoom/ZoomButton.tsx | 2 +- ...n.context.test.tsx => i18n.hooks.test.tsx} | 65 ++++++++++++++++++- .../i18n/{i18n.context.ts => i18n.hooks.ts} | 22 +------ .../core/react/src/util/i18n/i18n.types.ts | 12 ++++ 43 files changed, 119 insertions(+), 62 deletions(-) rename @navikt/core/react/src/util/i18n/{i18n.context.test.tsx => i18n.hooks.test.tsx} (66%) rename @navikt/core/react/src/util/i18n/{i18n.context.ts => i18n.hooks.ts} (77%) diff --git a/@navikt/core/react/src/alert/Alert.tsx b/@navikt/core/react/src/alert/Alert.tsx index 8b7caac7b4..601b475fae 100644 --- a/@navikt/core/react/src/alert/Alert.tsx +++ b/@navikt/core/react/src/alert/Alert.tsx @@ -9,7 +9,7 @@ import { } from "@navikt/aksel-icons"; import { Button } from "../button"; import { BodyLong } from "../typography"; -import { useI18n } from "../util/i18n/i18n.context"; +import { useI18n } from "../util/i18n/i18n.hooks"; export interface AlertProps extends React.HTMLAttributes { /** diff --git a/@navikt/core/react/src/chips/Removable.tsx b/@navikt/core/react/src/chips/Removable.tsx index bbc8a8e41b..400686ccb4 100644 --- a/@navikt/core/react/src/chips/Removable.tsx +++ b/@navikt/core/react/src/chips/Removable.tsx @@ -2,7 +2,7 @@ import cl from "clsx"; import React, { forwardRef } from "react"; import { XMarkIcon } from "@navikt/aksel-icons"; import { composeEventHandlers } from "../util/composeEventHandlers"; -import { useI18n } from "../util/i18n/i18n.context"; +import { useI18n } from "../util/i18n/i18n.hooks"; export interface ChipsRemovableProps extends React.ButtonHTMLAttributes { diff --git a/@navikt/core/react/src/copybutton/CopyButton.tsx b/@navikt/core/react/src/copybutton/CopyButton.tsx index 1eeb6fbeb8..4eb147c318 100644 --- a/@navikt/core/react/src/copybutton/CopyButton.tsx +++ b/@navikt/core/react/src/copybutton/CopyButton.tsx @@ -10,7 +10,7 @@ import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons"; import { Label } from "../typography"; import { composeEventHandlers } from "../util/composeEventHandlers"; import copy from "../util/copy"; -import { useI18n } from "../util/i18n/i18n.context"; +import { useI18n } from "../util/i18n/i18n.hooks"; export interface CopyButtonProps extends Omit, "children"> { diff --git a/@navikt/core/react/src/date/context/useDateTranslationContext.ts b/@navikt/core/react/src/date/context/useDateTranslationContext.ts index 56594ac657..384d8dcba4 100644 --- a/@navikt/core/react/src/date/context/useDateTranslationContext.ts +++ b/@navikt/core/react/src/date/context/useDateTranslationContext.ts @@ -1,5 +1,5 @@ import { createContext } from "../../util/create-context"; -import { TFunction } from "../../util/i18n/i18n.context"; +import { TFunction } from "../../util/i18n/i18n.types"; interface DateTranslationContextProps { translate: TFunction<"DatePicker">; diff --git a/@navikt/core/react/src/date/datepicker/DatePicker.tsx b/@navikt/core/react/src/date/datepicker/DatePicker.tsx index 713fa0c76a..6b0c221f36 100644 --- a/@navikt/core/react/src/date/datepicker/DatePicker.tsx +++ b/@navikt/core/react/src/date/datepicker/DatePicker.tsx @@ -5,7 +5,7 @@ import { DateRange, DayPicker, isMatch } from "react-day-picker"; import { omit } from "../../util"; import { useId } from "../../util/hooks"; import { useMergeRefs } from "../../util/hooks/useMergeRefs"; -import { useDateLocale, useI18n } from "../../util/i18n/i18n.context"; +import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks"; import { DateInputContext, DateTranslationContextProvider } from "../context"; import { DatePickerInput } from "../parts/DateInput"; import { DateWrapper } from "../parts/DateWrapper"; diff --git a/@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx b/@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx index 11ebd368a0..2f1d01ec27 100644 --- a/@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx +++ b/@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx @@ -3,7 +3,7 @@ import { isWeekend } from "date-fns"; import React, { forwardRef } from "react"; import { DateRange, DayPicker, isMatch } from "react-day-picker"; import { omit } from "../../util"; -import { useDateLocale, useI18n } from "../../util/i18n/i18n.context"; +import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks"; import { DateTranslationContextProvider } from "../context"; import { getLocaleFromString, getTranslations } from "../utils"; import Caption from "./parts/Caption"; diff --git a/@navikt/core/react/src/date/hooks/useDatepicker.tsx b/@navikt/core/react/src/date/hooks/useDatepicker.tsx index f0f9d6e477..6fc8b292e7 100644 --- a/@navikt/core/react/src/date/hooks/useDatepicker.tsx +++ b/@navikt/core/react/src/date/hooks/useDatepicker.tsx @@ -1,7 +1,7 @@ import { differenceInCalendarDays, isWeekend } from "date-fns"; import React, { useCallback, useState } from "react"; import { DayClickEventHandler, isMatch } from "react-day-picker"; -import { useDateLocale } from "../../util/i18n/i18n.context"; +import { useDateLocale } from "../../util/i18n/i18n.hooks"; import { DatePickerProps } from "../datepicker/DatePicker"; import { DateInputProps } from "../parts/DateInput"; import { diff --git a/@navikt/core/react/src/date/hooks/useMonthPicker.tsx b/@navikt/core/react/src/date/hooks/useMonthPicker.tsx index 02e3be24ee..bc97e01235 100644 --- a/@navikt/core/react/src/date/hooks/useMonthPicker.tsx +++ b/@navikt/core/react/src/date/hooks/useMonthPicker.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useMemo, useState } from "react"; -import { useDateLocale } from "../../util/i18n/i18n.context"; +import { useDateLocale } from "../../util/i18n/i18n.hooks"; import { MonthPickerProps } from "../monthpicker/types"; import { DateInputProps } from "../parts/DateInput"; import { diff --git a/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx b/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx index 59cec139ae..d59f763296 100644 --- a/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx +++ b/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx @@ -5,7 +5,7 @@ import { } from "date-fns"; import React, { useState } from "react"; import { DateRange, isMatch } from "react-day-picker"; -import { useDateLocale } from "../../util/i18n/i18n.context"; +import { useDateLocale } from "../../util/i18n/i18n.hooks"; import { DatePickerProps } from "../datepicker/DatePicker"; import { DateInputProps } from "../parts/DateInput"; import { diff --git a/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx b/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx index 1d2e2748f1..563e909048 100644 --- a/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx +++ b/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx @@ -3,7 +3,7 @@ import React, { forwardRef, useState } from "react"; import { DayPickerProvider } from "react-day-picker"; import { useId } from "../../util/hooks"; import { useMergeRefs } from "../../util/hooks/useMergeRefs"; -import { useDateLocale, useI18n } from "../../util/i18n/i18n.context"; +import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks"; import { DateInputContext, DateTranslationContextProvider, diff --git a/@navikt/core/react/src/date/monthpicker/MonthPickerStandalone.tsx b/@navikt/core/react/src/date/monthpicker/MonthPickerStandalone.tsx index a0b3663b29..a087194ab5 100644 --- a/@navikt/core/react/src/date/monthpicker/MonthPickerStandalone.tsx +++ b/@navikt/core/react/src/date/monthpicker/MonthPickerStandalone.tsx @@ -1,7 +1,7 @@ import cl from "clsx"; import React, { forwardRef, useState } from "react"; import { DayPickerProvider } from "react-day-picker"; -import { useDateLocale, useI18n } from "../../util/i18n/i18n.context"; +import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks"; import { DateTranslationContextProvider, SharedMonthProvider, diff --git a/@navikt/core/react/src/date/parts/DateWrapper.tsx b/@navikt/core/react/src/date/parts/DateWrapper.tsx index 4ff7efa380..332a29c29e 100644 --- a/@navikt/core/react/src/date/parts/DateWrapper.tsx +++ b/@navikt/core/react/src/date/parts/DateWrapper.tsx @@ -5,7 +5,8 @@ import { Modal } from "../../modal"; import { useModalContext } from "../../modal/Modal.context"; import { Popover } from "../../popover"; import { useMedia } from "../../util/hooks"; -import { TFunction, useI18n } from "../../util/i18n/i18n.context"; +import { useI18n } from "../../util/i18n/i18n.hooks"; +import { TFunction } from "../../util/i18n/i18n.types"; import { getGlobalTranslations } from "../utils"; const variantToLabel = { diff --git a/@navikt/core/react/src/expansion-card/ExpansionCardHeader.tsx b/@navikt/core/react/src/expansion-card/ExpansionCardHeader.tsx index 50192a61d7..428a1eec9c 100644 --- a/@navikt/core/react/src/expansion-card/ExpansionCardHeader.tsx +++ b/@navikt/core/react/src/expansion-card/ExpansionCardHeader.tsx @@ -1,7 +1,7 @@ import cl from "clsx"; import React, { forwardRef, useContext } from "react"; import { ChevronDownIcon } from "@navikt/aksel-icons"; -import { useI18n } from "../util/i18n/i18n.context"; +import { useI18n } from "../util/i18n/i18n.hooks"; import { ExpansionCardContext } from "./context"; export interface ExpansionCardHeaderProps diff --git a/@navikt/core/react/src/form/ReadOnlyIcon.tsx b/@navikt/core/react/src/form/ReadOnlyIcon.tsx index 59eafc4688..ef09f3e16d 100644 --- a/@navikt/core/react/src/form/ReadOnlyIcon.tsx +++ b/@navikt/core/react/src/form/ReadOnlyIcon.tsx @@ -1,6 +1,6 @@ import React from "react"; import { PadlockLockedFillIcon } from "@navikt/aksel-icons"; -import { useI18n } from "../util/i18n/i18n.context"; +import { useI18n } from "../util/i18n/i18n.hooks"; export const ReadOnlyIcon = () => ( { const translate = useI18n("GuidePanel"); diff --git a/@navikt/core/react/src/guide-panel/Illustration.tsx b/@navikt/core/react/src/guide-panel/Illustration.tsx index 32f4236ec7..a06c16f600 100644 --- a/@navikt/core/react/src/guide-panel/Illustration.tsx +++ b/@navikt/core/react/src/guide-panel/Illustration.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { useI18n } from "../util/i18n/i18n.context"; +import { useI18n } from "../util/i18n/i18n.hooks"; export const DefaultIllustration = () => { const translate = useI18n("GuidePanel"); diff --git a/@navikt/core/react/src/help-text/HelpText.tsx b/@navikt/core/react/src/help-text/HelpText.tsx index ffcd65f59e..80a346f6aa 100644 --- a/@navikt/core/react/src/help-text/HelpText.tsx +++ b/@navikt/core/react/src/help-text/HelpText.tsx @@ -4,7 +4,7 @@ import { Popover, PopoverProps } from "../popover"; import { useThemeInternal } from "../theme/Theme"; import { composeEventHandlers } from "../util/composeEventHandlers"; import { useMergeRefs } from "../util/hooks/useMergeRefs"; -import { useI18n } from "../util/i18n/i18n.context"; +import { useI18n } from "../util/i18n/i18n.hooks"; import { HelpTextIcon } from "./HelpTextIcon"; export interface HelpTextProps diff --git a/@navikt/core/react/src/loader/Loader.tsx b/@navikt/core/react/src/loader/Loader.tsx index 41142daa1c..551d4266fe 100644 --- a/@navikt/core/react/src/loader/Loader.tsx +++ b/@navikt/core/react/src/loader/Loader.tsx @@ -2,7 +2,7 @@ import cl from "clsx"; import React, { SVGProps, forwardRef } from "react"; import { omit } from "../util"; import { useId } from "../util/hooks"; -import { useI18n } from "../util/i18n/i18n.context"; +import { useI18n } from "../util/i18n/i18n.hooks"; export interface LoaderProps extends Omit, "ref"> { /** diff --git a/@navikt/core/react/src/modal/ModalHeader.tsx b/@navikt/core/react/src/modal/ModalHeader.tsx index fd6193587b..ea9efa807a 100644 --- a/@navikt/core/react/src/modal/ModalHeader.tsx +++ b/@navikt/core/react/src/modal/ModalHeader.tsx @@ -2,7 +2,7 @@ import cl from "clsx"; import React, { forwardRef } from "react"; import { XMarkIcon } from "@navikt/aksel-icons"; import { Button } from "../button"; -import { useI18n } from "../util/i18n/i18n.context"; +import { useI18n } from "../util/i18n/i18n.hooks"; import { useModalContext } from "./Modal.context"; export interface ModalHeaderProps extends React.HTMLAttributes { diff --git a/@navikt/core/react/src/pagination/Pagination.tsx b/@navikt/core/react/src/pagination/Pagination.tsx index 016d44b16c..0c74026005 100644 --- a/@navikt/core/react/src/pagination/Pagination.tsx +++ b/@navikt/core/react/src/pagination/Pagination.tsx @@ -3,7 +3,7 @@ import React, { forwardRef } from "react"; import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons"; import { BodyShort, Heading } from "../typography"; import { useId } from "../util"; -import { useI18n } from "../util/i18n/i18n.context"; +import { useI18n } from "../util/i18n/i18n.hooks"; import PaginationItem, { PaginationItemProps, PaginationItemType, diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index 57c840b60b..6680070858 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -1,6 +1,6 @@ import cl from "clsx"; import React, { HTMLAttributes, forwardRef, useEffect, useRef } from "react"; -import { useI18n } from "../util/i18n/i18n.context"; +import { useI18n } from "../util/i18n/i18n.hooks"; interface ProgressBarPropsBase extends Omit, "role"> { diff --git a/@navikt/core/react/src/table/ExpandableRow.tsx b/@navikt/core/react/src/table/ExpandableRow.tsx index f651e33ca2..3e83d6b6bf 100644 --- a/@navikt/core/react/src/table/ExpandableRow.tsx +++ b/@navikt/core/react/src/table/ExpandableRow.tsx @@ -4,7 +4,7 @@ import { ChevronDownIcon } from "@navikt/aksel-icons"; import { composeEventHandlers } from "../util/composeEventHandlers"; import { useId } from "../util/hooks"; import { useControllableState } from "../util/hooks/useControllableState"; -import { useI18n } from "../util/i18n/i18n.context"; +import { useI18n } from "../util/i18n/i18n.hooks"; import AnimateHeight from "./AnimateHeight"; import DataCell from "./DataCell"; import Row, { RowProps } from "./Row"; diff --git a/@navikt/core/react/src/timeline/AxisLabels.tsx b/@navikt/core/react/src/timeline/AxisLabels.tsx index 10dbec8ef6..7396f996b9 100644 --- a/@navikt/core/react/src/timeline/AxisLabels.tsx +++ b/@navikt/core/react/src/timeline/AxisLabels.tsx @@ -16,7 +16,8 @@ import { } from "date-fns"; import React from "react"; import { Detail } from "../typography/Detail"; -import { TFunction, useDateLocale, useI18n } from "../util/i18n/i18n.context"; +import { useDateLocale, useI18n } from "../util/i18n/i18n.hooks"; +import { TFunction } from "../util/i18n/i18n.types"; import { useTimelineContext } from "./hooks/useTimelineContext"; import { isVisible } from "./utils"; import { horizontalPositionAndWidth } from "./utils/calc"; diff --git a/@navikt/core/react/src/timeline/Pin.tsx b/@navikt/core/react/src/timeline/Pin.tsx index 59899fe6da..2171b7dfc6 100644 --- a/@navikt/core/react/src/timeline/Pin.tsx +++ b/@navikt/core/react/src/timeline/Pin.tsx @@ -17,7 +17,7 @@ import { format } from "date-fns"; import React, { forwardRef, useRef, useState } from "react"; import { useThemeInternal } from "../theme/Theme"; import { useMergeRefs } from "../util/hooks/useMergeRefs"; -import { useI18n } from "../util/i18n/i18n.context"; +import { useI18n } from "../util/i18n/i18n.hooks"; import { useTimelineContext } from "./hooks/useTimelineContext"; import { position } from "./utils/calc"; import { TimelineComponentTypes } from "./utils/types.internal"; diff --git a/@navikt/core/react/src/timeline/TimelineRow.tsx b/@navikt/core/react/src/timeline/TimelineRow.tsx index ea13276131..df6afcfa74 100644 --- a/@navikt/core/react/src/timeline/TimelineRow.tsx +++ b/@navikt/core/react/src/timeline/TimelineRow.tsx @@ -2,7 +2,7 @@ import cl from "clsx"; import { format } from "date-fns"; import React, { forwardRef } from "react"; import { BodyShort } from "../typography/BodyShort"; -import { useI18n } from "../util/i18n/i18n.context"; +import { useI18n } from "../util/i18n/i18n.hooks"; import { PeriodContext } from "./hooks/usePeriodContext"; import { useRowContext } from "./hooks/useRowContext"; import { useTimelineContext } from "./hooks/useTimelineContext"; diff --git a/@navikt/core/react/src/timeline/period/ClickablePeriod.tsx b/@navikt/core/react/src/timeline/period/ClickablePeriod.tsx index 8285ddfbeb..c1d343b464 100644 --- a/@navikt/core/react/src/timeline/period/ClickablePeriod.tsx +++ b/@navikt/core/react/src/timeline/period/ClickablePeriod.tsx @@ -17,7 +17,7 @@ import cl from "clsx"; import React, { useRef, useState } from "react"; import { useThemeInternal } from "../../theme/Theme"; import { useMergeRefs } from "../../util/hooks/useMergeRefs"; -import { useI18n } from "../../util/i18n/i18n.context"; +import { useI18n } from "../../util/i18n/i18n.hooks"; import { usePeriodContext } from "../hooks/usePeriodContext"; import { useRowContext } from "../hooks/useRowContext"; import { useTimelineContext } from "../hooks/useTimelineContext"; diff --git a/@navikt/core/react/src/timeline/period/NonClickablePeriod.tsx b/@navikt/core/react/src/timeline/period/NonClickablePeriod.tsx index 149f8bd57a..6cf65851c6 100644 --- a/@navikt/core/react/src/timeline/period/NonClickablePeriod.tsx +++ b/@navikt/core/react/src/timeline/period/NonClickablePeriod.tsx @@ -1,6 +1,6 @@ import cl from "clsx"; import React from "react"; -import { useI18n } from "../../util/i18n/i18n.context"; +import { useI18n } from "../../util/i18n/i18n.hooks"; import { ariaLabel, getConditionalClasses } from "../utils/period"; import type { PeriodProps } from "./types"; diff --git a/@navikt/core/react/src/timeline/utils/period.ts b/@navikt/core/react/src/timeline/utils/period.ts index 0ca9abf951..9b04e0462b 100644 --- a/@navikt/core/react/src/timeline/utils/period.ts +++ b/@navikt/core/react/src/timeline/utils/period.ts @@ -1,6 +1,6 @@ import cl from "clsx"; import { format } from "date-fns"; -import type { TFunction } from "../../util/i18n/i18n.context"; +import type { TFunction } from "../../util/i18n/i18n.types"; import type { PeriodProps } from "../period/types"; export const getConditionalClasses = ( diff --git a/@navikt/core/react/src/timeline/zoom/ZoomButton.tsx b/@navikt/core/react/src/timeline/zoom/ZoomButton.tsx index c029295327..2e5ffa2a6e 100644 --- a/@navikt/core/react/src/timeline/zoom/ZoomButton.tsx +++ b/@navikt/core/react/src/timeline/zoom/ZoomButton.tsx @@ -8,7 +8,7 @@ import { } from "date-fns"; import React, { forwardRef } from "react"; import { Detail } from "../../typography/Detail"; -import { useI18n } from "../../util/i18n/i18n.context"; +import { useI18n } from "../../util/i18n/i18n.hooks"; import { useTimelineContext } from "../hooks/useTimelineContext"; export interface TimelineZoomButtonProps { diff --git a/@navikt/core/react/src/util/i18n/i18n.context.test.tsx b/@navikt/core/react/src/util/i18n/i18n.hooks.test.tsx similarity index 66% rename from @navikt/core/react/src/util/i18n/i18n.context.test.tsx rename to @navikt/core/react/src/util/i18n/i18n.hooks.test.tsx index 45976c70d0..7f1b125956 100644 --- a/@navikt/core/react/src/util/i18n/i18n.context.test.tsx +++ b/@navikt/core/react/src/util/i18n/i18n.hooks.test.tsx @@ -2,9 +2,8 @@ import { renderHook } from "@testing-library/react"; import React from "react"; import { describe, expect, test } from "vitest"; import { Provider } from "../../provider"; -import { useI18n } from "./i18n.context"; -import en from "./locales/en"; -import nb from "./locales/nb"; +import { useDateLocale, useI18n } from "./i18n.hooks"; +import { en, nb, nn } from "./locales"; describe("useI18n", () => { test("should throw error if key is not found", () => { @@ -112,3 +111,63 @@ describe("useI18n", () => { expect(() => translate("item.uploading", { other: "John" })).toThrowError(); }); }); + +describe("useDateLocale", () => { + test("should return the default NB date locale when Provider is not used", () => { + const { result } = renderHook(() => useDateLocale()); + const dateLocale = result.current; + expect(dateLocale).toBe(nb.global.dateLocale); + }); + + test("should return the default NB date locale when Provider is used without the locale prop", () => { + const { result } = renderHook(() => useDateLocale(), { + wrapper: ({ children }) => {children}, + }); + const dateLocale = result.current; + expect(dateLocale).toBe(nb.global.dateLocale); + }); + + test("should return date locale from context.locale when using Provider with just locale prop", () => { + const { result } = renderHook(() => useDateLocale(), { + wrapper: ({ children }) => {children}, + }); + const dateLocale = result.current; + expect(dateLocale).toBe(en.global.dateLocale); + }); + + test("should return date locale from context.locale when it does not exist in translations", () => { + const { result } = renderHook(() => useDateLocale(), { + wrapper: ({ children }) => ( + + {children} + + ), + }); + const dateLocale = result.current; + expect(dateLocale).toBe(en.global.dateLocale); + }); + + test("should return date locale from context.translations", () => { + const { result } = renderHook(() => useDateLocale(), { + wrapper: ({ children }) => ( + + {children} + + ), + }); + const dateLocale = result.current; + expect(dateLocale).toBe(nn.global.dateLocale); + }); + + test("should return date locale from second object in context.translations", () => { + const { result } = renderHook(() => useDateLocale(), { + wrapper: ({ children }) => ( + + {children} + + ), + }); + const dateLocale = result.current; + expect(dateLocale).toBe(nn.global.dateLocale); + }); +}); diff --git a/@navikt/core/react/src/util/i18n/i18n.context.ts b/@navikt/core/react/src/util/i18n/i18n.hooks.ts similarity index 77% rename from @navikt/core/react/src/util/i18n/i18n.context.ts rename to @navikt/core/react/src/util/i18n/i18n.hooks.ts index 8640be2938..1b566cf0c9 100644 --- a/@navikt/core/react/src/util/i18n/i18n.context.ts +++ b/@navikt/core/react/src/util/i18n/i18n.hooks.ts @@ -5,26 +5,12 @@ import { Component, ComponentTranslation, PartialTranslations, - Translations, + TFunction, } from "./i18n.types"; -/** - * https://regex101.com/r/LYKWi3/1 - */ +/* https://regex101.com/r/LYKWi3/1 */ const REPLACE_REGEX = /{[^}]*}/g; -/* https://dev.to/pffigueiredo/typescript-utility-keyof-nested-object-2pa3 */ -type NestedKeyOf = { - [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object - ? `${Key}.${NestedKeyOf}` - : `${Key}`; -}[keyof ObjectType & (string | number)]; - -export type TFunction = ( - keypath: NestedKeyOf, - replacements?: Record, -) => string; - export function useI18n( componentName: T, ...localTranslations: (ComponentTranslation | undefined)[] @@ -39,9 +25,7 @@ export function useI18n( context.locale[componentName], ]; - /** - * https://github.com/Shopify/polaris/blob/2115f9ba2f5bcbf2ad15745233501bff2db81ecf/polaris-react/src/utilities/i18n/I18n.ts#L24 - */ + /* https://github.com/Shopify/polaris/blob/2115f9ba2f5bcbf2ad15745233501bff2db81ecf/polaris-react/src/utilities/i18n/I18n.ts#L24 */ const translate: TFunction = (keypath, replacements) => { const text = get(keypath, i18nObjects); diff --git a/@navikt/core/react/src/util/i18n/i18n.types.ts b/@navikt/core/react/src/util/i18n/i18n.types.ts index db83bf03ee..a819e4b8e0 100644 --- a/@navikt/core/react/src/util/i18n/i18n.types.ts +++ b/@navikt/core/react/src/util/i18n/i18n.types.ts @@ -1,5 +1,17 @@ import type nb from "./locales/nb"; +/* https://dev.to/pffigueiredo/typescript-utility-keyof-nested-object-2pa3 */ +type NestedKeyOf = { + [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object + ? `${Key}.${NestedKeyOf}` + : `${Key}`; +}[keyof ObjectType & (string | number)]; + +export type TFunction = ( + keypath: NestedKeyOf, + replacements?: Record, +) => string; + /* https://stackoverflow.com/questions/47914536/use-partial-in-nested-property-with-typescripts */ type RecursivePartial = { [P in keyof T]?: RecursivePartial;