🔄 chore: Enforce 18next Language Keys (#5803)

* chore: enforcing language keys to adhere to the new standard.

* chore: enforcing i18n forbids to write plain text in JSX markup

* chore: enforcing i18n forbids to write plain text in JSX markup

* fix: ci with checkbox for unused keys :)

* refactor: removed all the unused `i18n` keys
This commit is contained in:
Ruben Talstra 2025-02-12 21:48:13 +01:00 committed by GitHub
parent 2a506df443
commit 7f48030452
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
33 changed files with 200 additions and 219 deletions

View file

@ -34,7 +34,7 @@ export default function ActionsAuth({ disableOAuth }: { disableOAuth?: boolean }
</div>
<div className="border-token-border-medium flex rounded-lg border text-sm hover:cursor-pointer">
<div className="h-9 grow px-3 py-2">
{localize(`com_ui_${type}` as TranslationKeys)}
{localize(getAuthLocalizationKey(type))}
</div>
<div className="bg-token-border-medium w-px"></div>
<button type="button" color="neutral" className="flex items-center gap-2 px-3">
@ -269,6 +269,18 @@ const ApiKey = () => {
);
};
/** Returns the appropriate localization key for authentication type */
function getAuthLocalizationKey(type: AuthTypeEnum): TranslationKeys {
switch (type) {
case AuthTypeEnum.ServiceHttp:
return 'com_ui_api_key';
case AuthTypeEnum.OAuth:
return 'com_ui_oauth';
default:
return 'com_ui_none';
}
}
const OAuth = () => {
const localize = useLocalize();
const { register, watch, setValue } = useFormContext();

View file

@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
import { OptionTypes } from 'librechat-data-provider';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { Label, Checkbox, HoverCard, HoverCardTrigger } from '~/components/ui';
import { useLocalize, useParameterEffects } from '~/hooks';
import { TranslationKeys, useLocalize, useParameterEffects } from '~/hooks';
import { useChatContext } from '~/Providers';
import OptionHover from './OptionHover';
import { ESide } from '~/common';
@ -66,7 +66,7 @@ function DynamicCheckbox({
htmlFor={`${settingKey}-dynamic-checkbox`}
className="text-left text-sm font-medium"
>
{labelCode ? localize(label) ?? label : label || settingKey}{' '}
{labelCode ? localize(label as TranslationKeys) ?? label : label || settingKey}{' '}
{showDefault && (
<small className="opacity-40">
({localize('com_endpoint_default')}:{' '}
@ -85,7 +85,7 @@ function DynamicCheckbox({
</HoverCardTrigger>
{description && (
<OptionHover
description={descriptionCode ? localize(description) ?? description : description}
description={descriptionCode ? localize(description as TranslationKeys) ?? description : description}
side={ESide.Left}
/>
)}

View file

@ -3,7 +3,7 @@ import { OptionTypes } from 'librechat-data-provider';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { Label, HoverCard, HoverCardTrigger } from '~/components/ui';
import ControlCombobox from '~/components/ui/ControlCombobox';
import { useLocalize, useParameterEffects } from '~/hooks';
import { TranslationKeys, useLocalize, useParameterEffects } from '~/hooks';
import { useChatContext } from '~/Providers';
import OptionHover from './OptionHover';
import { ESide } from '~/common';
@ -93,7 +93,7 @@ function DynamicCombobox({
htmlFor={`${settingKey}-dynamic-combobox`}
className="text-left text-sm font-medium"
>
{labelCode ? localize(label) ?? label : label || settingKey}
{labelCode ? localize(label as TranslationKeys) ?? label : label || settingKey}
{showDefault && (
<small className="opacity-40">
({localize('com_endpoint_default')}: {defaultValue})
@ -105,10 +105,10 @@ function DynamicCombobox({
<ControlCombobox
displayValue={selectedValue}
selectPlaceholder={
selectPlaceholderCode === true ? localize(selectPlaceholder) : selectPlaceholder
selectPlaceholderCode === true ? localize(selectPlaceholder as TranslationKeys) : selectPlaceholder
}
searchPlaceholder={
searchPlaceholderCode === true ? localize(searchPlaceholder) : searchPlaceholder
searchPlaceholderCode === true ? localize(searchPlaceholder as TranslationKeys) : searchPlaceholder
}
isCollapsed={isCollapsed}
ariaLabel={settingKey}
@ -120,7 +120,7 @@ function DynamicCombobox({
</HoverCardTrigger>
{description && (
<OptionHover
description={descriptionCode ? localize(description) ?? description : description}
description={descriptionCode ? localize(description as TranslationKeys) ?? description : description}
side={ESide.Left}
/>
)}

View file

@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
import { OptionTypes } from 'librechat-data-provider';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { Label, HoverCard, HoverCardTrigger, SelectDropDown } from '~/components/ui';
import { useLocalize, useParameterEffects } from '~/hooks';
import { TranslationKeys, useLocalize, useParameterEffects } from '~/hooks';
import { useChatContext } from '~/Providers';
import OptionHover from './OptionHover';
import { ESide } from '~/common';
@ -78,7 +78,7 @@ function DynamicDropdown({
htmlFor={`${settingKey}-dynamic-dropdown`}
className="text-left text-sm font-medium"
>
{labelCode ? localize(label) ?? label : label || settingKey}
{labelCode ? localize(label as TranslationKeys) ?? label : label || settingKey}
{showDefault && (
<small className="opacity-40">
({localize('com_endpoint_default')}: {defaultValue})
@ -96,12 +96,12 @@ function DynamicDropdown({
availableValues={options}
containerClassName="w-full"
id={`${settingKey}-dynamic-dropdown`}
placeholder={placeholderCode ? localize(placeholder) ?? placeholder : placeholder}
placeholder={placeholderCode ? localize(placeholder as TranslationKeys) ?? placeholder : placeholder}
/>
</HoverCardTrigger>
{description && (
<OptionHover
description={descriptionCode ? localize(description) ?? description : description}
description={descriptionCode ? localize(description as TranslationKeys) ?? description : description}
side={ESide.Left}
/>
)}

View file

@ -1,6 +1,6 @@
import { OptionTypes } from 'librechat-data-provider';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { useLocalize, useDebouncedInput, useParameterEffects } from '~/hooks';
import { useLocalize, useDebouncedInput, useParameterEffects, TranslationKeys } from '~/hooks';
import { Label, Input, HoverCard, HoverCardTrigger } from '~/components/ui';
import { useChatContext } from '~/Providers';
import OptionHover from './OptionHover';
@ -73,7 +73,7 @@ function DynamicInput({
htmlFor={`${settingKey}-dynamic-input`}
className="text-left text-sm font-medium"
>
{labelCode ? localize(label) || label : label || settingKey}{' '}
{labelCode ? localize(label as TranslationKeys) || label : label || settingKey}{' '}
{showDefault && (
<small className="opacity-40">
(
@ -90,7 +90,7 @@ function DynamicInput({
disabled={readonly}
value={inputValue ?? ''}
onChange={handleInputChange}
placeholder={placeholderCode ? localize(placeholder) || placeholder : placeholder}
placeholder={placeholderCode ? localize(placeholder as TranslationKeys) || placeholder : placeholder}
className={cn(
'flex h-10 max-h-10 w-full resize-none border-none bg-surface-secondary px-3 py-2',
)}
@ -98,7 +98,7 @@ function DynamicInput({
</HoverCardTrigger>
{description && (
<OptionHover
description={descriptionCode ? localize(description) || description : description}
description={descriptionCode ? localize(description as TranslationKeys) || description : description}
side={ESide.Left}
/>
)}

View file

@ -2,7 +2,7 @@ import { useMemo, useCallback } from 'react';
import { OptionTypes } from 'librechat-data-provider';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { Label, Slider, HoverCard, Input, InputNumber, HoverCardTrigger } from '~/components/ui';
import { useLocalize, useDebouncedInput, useParameterEffects } from '~/hooks';
import { useLocalize, useDebouncedInput, useParameterEffects, TranslationKeys } from '~/hooks';
import { cn, defaultTextProps, optionText } from '~/utils';
import { ESide, defaultDebouncedDelay } from '~/common';
import { useChatContext } from '~/Providers';
@ -117,7 +117,7 @@ function DynamicSlider({
htmlFor={`${settingKey}-dynamic-setting`}
className="text-left text-sm font-medium"
>
{labelCode ? localize(label) ?? label : label || settingKey}{' '}
{labelCode ? localize(label as TranslationKeys) ?? label : label || settingKey}{' '}
{showDefault && (
<small className="opacity-40">
({localize('com_endpoint_default')}: {defaultValue})
@ -176,7 +176,7 @@ function DynamicSlider({
</HoverCardTrigger>
{description && (
<OptionHover
description={descriptionCode ? localize(description) ?? description : description}
description={descriptionCode ? localize(description as TranslationKeys) ?? description : description}
side={ESide.Left}
/>
)}

View file

@ -2,7 +2,7 @@ import { useState, useMemo } from 'react';
import { OptionTypes } from 'librechat-data-provider';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { Label, Switch, HoverCard, HoverCardTrigger } from '~/components/ui';
import { useLocalize, useParameterEffects } from '~/hooks';
import { TranslationKeys, useLocalize, useParameterEffects } from '~/hooks';
import { useChatContext } from '~/Providers';
import OptionHover from './OptionHover';
import { ESide } from '~/common';
@ -65,7 +65,7 @@ function DynamicSwitch({
htmlFor={`${settingKey}-dynamic-switch`}
className="text-left text-sm font-medium"
>
{labelCode ? localize(label) ?? label : label || settingKey}{' '}
{labelCode ? localize(label as TranslationKeys) ?? label : label || settingKey}{' '}
{showDefault && (
<small className="opacity-40">
({localize('com_endpoint_default')}:{' '}
@ -84,7 +84,7 @@ function DynamicSwitch({
</HoverCardTrigger>
{description && (
<OptionHover
description={descriptionCode ? localize(description) ?? description : description}
description={descriptionCode ? localize(description as TranslationKeys) ?? description : description}
side={ESide.Left}
/>
)}

View file

@ -1,7 +1,7 @@
import { OptionTypes } from 'librechat-data-provider';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { Label, TextareaAutosize, HoverCard, HoverCardTrigger } from '~/components/ui';
import { useLocalize, useDebouncedInput, useParameterEffects } from '~/hooks';
import { useLocalize, useDebouncedInput, useParameterEffects, TranslationKeys } from '~/hooks';
import { cn, defaultTextProps } from '~/utils';
import { useChatContext } from '~/Providers';
import OptionHover from './OptionHover';
@ -58,7 +58,7 @@ function DynamicTextarea({
htmlFor={`${settingKey}-dynamic-textarea`}
className="text-left text-sm font-medium"
>
{labelCode ? localize(label) ?? label : label || settingKey}{' '}
{labelCode ? localize(label as TranslationKeys) ?? label : label || settingKey}{' '}
{showDefault && (
<small className="opacity-40">
(
@ -75,7 +75,7 @@ function DynamicTextarea({
disabled={readonly}
value={inputValue ?? ''}
onChange={setInputValue}
placeholder={placeholderCode ? localize(placeholder) ?? placeholder : placeholder}
placeholder={placeholderCode ? localize(placeholder as TranslationKeys) ?? placeholder : placeholder}
className={cn(
// TODO: configurable max height
'flex max-h-[138px] min-h-[100px] w-full resize-none rounded-lg bg-surface-secondary px-3 py-2 focus:outline-none',
@ -84,7 +84,7 @@ function DynamicTextarea({
</HoverCardTrigger>
{description && (
<OptionHover
description={descriptionCode ? localize(description) ?? description : description}
description={descriptionCode ? localize(description as TranslationKeys) ?? description : description}
side={ESide.Left}
/>
)}

View file

@ -1,6 +1,6 @@
import React from 'react';
import { HoverCardPortal, HoverCardContent } from '~/components/ui';
import { useLocalize } from '~/hooks';
import { TranslationKeys, useLocalize } from '~/hooks';
import { ESide } from '~/common';
type TOptionHoverProps = {
@ -24,7 +24,7 @@ function OptionHover({
if (disabled) {
return null;
}
const text = langCode ? localize(description) : description;
const text = langCode ? localize(description as TranslationKeys) : description;
return (
<HoverCardPortal>
<HoverCardContent side={side} className={`z-[999] w-80 ${className}`} sideOffset={sideOffset}>