@redocly/theme 0.25.1 → 0.25.2

package/lib/components/Search/SuggestedPages.js

@@ -36,13 +36,10 @@ const hooks_1 = require("../../mocks/hooks");
 function SuggestedPages({ className }) {
     const pages = (0, search_1.useSuggestedPages)();
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        title: 'theme.search.suggested',
-    };
     if (!pages.length)
         return null;
     return (React.createElement(Wrapper, { "data-component-name": "Search/SuggestedPages", className: className },
-        React.createElement(Title, { "data-translation-key": translationKeys.title }, translate(translationKeys.title, 'Suggested pages')),
+        React.createElement(Title, { "data-translation-key": "theme.search.suggested" }, translate('theme.search.suggested', 'Suggested pages')),
         React.createElement(SuggestedItems, null, pages.map((page) => page.link && (React.createElement(Item, { key: page.label },
             React.createElement(PageLink, Object.assign({ to: page.link }, page),
                 React.createElement(Group, null,

package/lib/components/Sidebar/DrilldownMenu.js

@@ -35,16 +35,13 @@ const hooks_1 = require("../../mocks/hooks");
 const Menu_1 = require("../../components/Menu");
 function DrilldownMenu({ item, back, prevActiveItem, children, className, }) {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        backLabel: 'theme.sidebar.menu.backLabel',
-    };
     const label = item.label === (prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label) || !(prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label)
-        ? translate(translationKeys.backLabel, 'Back')
+        ? translate('theme.sidebar.menu.backLabel', 'Back')
         : prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label;
     return (react_1.default.createElement(MenuContainer, { "data-component-name": "Sidebar/DrilldownMenu", className: className },
         react_1.default.createElement(MenuContent, null,
             react_1.default.createElement(MenuWrapper, null,
-                react_1.default.createElement(BackButton_1.BackButton, { back: back, "data-translation-key": translationKeys.backLabel }, label),
+                react_1.default.createElement(BackButton_1.BackButton, { back: back, "data-translation-key": "theme.sidebar.menu.backLabel" }, label),
                 react_1.default.createElement(Menu_1.MenuLinkItem, { item: item },
                     react_1.default.createElement(DrilldownMenuItem_1.DrilldownMenuItem, { item: item }))),
             children)));

package/lib/components/Sidebar/VersionPicker.js

@@ -37,10 +37,6 @@ function VersionPicker(props) {
     const themeConfig = (0, hooks_1.useThemeConfig)();
     const { versionPicker } = themeConfig;
     const { translate } = (0, hooks_2.useTranslate)();
-    const translationKeys = {
-        label: 'theme.versionPicker.label',
-        unversioned: 'theme.versionPicker.unversioned',
-    };
     const { versions = [], onChange } = props;
     const options = versions.map((version) => {
         return {
@@ -56,8 +52,8 @@ function VersionPicker(props) {
     if (!options.length && !(versionPicker === null || versionPicker === void 0 ? void 0 : versionPicker.showForUnversioned))
         return null;
     return (React.createElement(VersionsPickerWrapper, null,
-        React.createElement(VersionPickerLabel, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, 'Version:')),
-        React.createElement(exports.VersionPickerSelect, { placeholder: translate(translationKeys.unversioned, 'All versions'), disabled: !options.length, options: options, value: value, onChange: onChange })));
+        React.createElement(VersionPickerLabel, { "data-translation-key": "theme.versionPicker.label" }, translate('theme.versionPicker.label', 'Version:')),
+        React.createElement(exports.VersionPickerSelect, { placeholder: translate('theme.versionPicker.unversioned', 'All versions'), disabled: !options.length, options: options, value: value, onChange: onChange })));
 }
 exports.VersionPicker = VersionPicker;
 const VersionPickerLabel = styled_components_1.default.label `

package/lib/components/TableOfContent/TableOfContent.js

@@ -44,16 +44,13 @@ function TableOfContent(props) {
     const leastDepth = (0, utils_1.getLeastDepth)(displayedHeadings);
     const activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper, (0, utils_1.getDisplayedHeadingsIds)(displayedHeadings));
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        header: 'theme.toc.header',
-    };
     if (toc === null || toc === void 0 ? void 0 : toc.hide) {
         return null;
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent", className: className },
             React.createElement(TableOfContentItems, { ref: sidebar },
-                displayedHeadings.length ? (React.createElement(TocHeader, { "data-translation-key": translationKeys.header }, translate(translationKeys.header, toc.header || 'On this page'))) : null,
+                displayedHeadings.length ? (React.createElement(TocHeader, { "data-translation-key": "theme.toc.header" }, translate('theme.toc.header', toc.header || 'On this page'))) : null,
                 displayedHeadings.map((heading, idx) => {
                     if (!heading) {
                         return null;

package/lib/layouts/Forbidden.js

@@ -10,14 +10,10 @@ const Button_1 = require("../components/Button");
 const hooks_1 = require("../mocks/hooks");
 function Forbidden() {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        title: 'theme.page.forbidden.title',
-        homeButton: 'theme.page.homeButton',
-    };
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Pages/Forbidden" },
         react_1.default.createElement(Header, null, "403"),
-        react_1.default.createElement(Description, { "data-translation-key": translationKeys.title }, translate(translationKeys.title, 'Access forbidden')),
-        react_1.default.createElement(HomeButton, { color: "primary", size: "large", to: "/", "data-translation-key": translationKeys.homeButton }, translate(translationKeys.homeButton, 'Open Homepage'))));
+        react_1.default.createElement(Description, { "data-translation-key": "theme.page.forbidden.title" }, translate('theme.page.forbidden.title', 'Access forbidden')),
+        react_1.default.createElement(HomeButton, { color: "primary", size: "large", to: "/", "data-translation-key": "theme.page.homeButton" }, translate('theme.page.homeButton', 'Open Homepage'))));
 }
 exports.Forbidden = Forbidden;
 const Wrapper = styled_components_1.default.div `

package/lib/layouts/NotFound.js

@@ -10,14 +10,10 @@ const Button_1 = require("../components/Button");
 const hooks_1 = require("../mocks/hooks");
 function NotFound() {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        title: 'theme.page.notFound.title',
-        homeButton: 'theme.page.homeButton',
-    };
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Pages/NotFound" },
         react_1.default.createElement(Header, null, "404"),
-        react_1.default.createElement(Description, { "data-translation-key": translationKeys.title }, translate(translationKeys.title, `It looks like you're lost`)),
-        react_1.default.createElement(HomeButton, { color: "primary", size: "large", to: "/", "data-translation-key": translationKeys.homeButton }, translate(translationKeys.homeButton, 'Open Homepage'))));
+        react_1.default.createElement(Description, { "data-translation-key": "theme.page.notFound.title" }, translate('theme.page.notFound.title', "It looks like you're lost")),
+        react_1.default.createElement(HomeButton, { color: "primary", size: "large", to: "/", "data-translation-key": "theme.page.homeButton" }, translate('theme.page.homeButton', 'Open Homepage'))));
 }
 exports.NotFound = NotFound;
 const Wrapper = styled_components_1.default.div `

package/lib/layouts/OIDCForbidden.js

@@ -35,9 +35,6 @@ function OIDCForbidden() {
     const { translate } = (0, hooks_1.useTranslate)();
     const [searchParams, setSearchParams] = (0, react_router_dom_1.useSearchParams)();
     const [errorDescription, setErrorDescription] = (0, react_1.useState)('');
-    const translationKeys = {
-        title: 'theme.page.forbidden.title',
-    };
     // use whatever you want here
     const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
     const renderText = (text) => text.split(' ').map((part) => URL_REGEX.test(part) ? (react_1.default.createElement(ErrorDescriptionLink, { key: part, href: part },
@@ -51,7 +48,7 @@ function OIDCForbidden() {
     }, [searchParams, setSearchParams]);
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Pages/OIDCForbidden" },
         react_1.default.createElement(Header, null, "403"),
-        react_1.default.createElement(Description, { "data-translation-key": translationKeys.title }, translate(translationKeys.title, 'Access forbidden')),
+        react_1.default.createElement(Description, { "data-translation-key": "theme.page.forbidden.title" }, translate('theme.page.forbidden.title', 'Access forbidden')),
         errorDescription && react_1.default.createElement(ErrorDescription, null, renderText(errorDescription))));
 }
 exports.OIDCForbidden = OIDCForbidden;

package/lib/mocks/hooks/index.d.ts

@@ -1,5 +1,6 @@
+import type { TFunction } from '@redocly/portal-types';
 import type { CatalogConfig, ProductUiConfig, ThemeUIConfig } from '../../config';
-import type { ResolvedNavItem, TFunction, Version } from '../../types/portal';
+import type { ResolvedNavItem, Version } from '../../types/portal';
 import type { FilteredCatalog } from '../../types/portal/src/shared/types/catalog';
 interface PageLink {
     label: string;
@@ -13,7 +14,7 @@ export declare function useSidebarSiblingsData(): {
 };
 export declare function usePageSharedData<T = unknown>(_id: string): T;
 export declare function useCatalog(_items: ResolvedNavItem[], _config: CatalogConfig): FilteredCatalog;
-export declare function useTranslate(): {
+export declare const useTranslate: () => {
     translate: TFunction;
 };
 export declare function useI18n(): {

package/lib/mocks/hooks/index.js

@@ -68,10 +68,9 @@ function useCatalog(_items, _config) {
     throw new Error('Mock not implemented yet.');
 }
 exports.useCatalog = useCatalog;
-function useTranslate() {
-    const translate = (value, options) => (typeof options === 'string' ? options : options === null || options === void 0 ? void 0 : options.defaultValue) || value || '';
-    return { translate };
-}
+const useTranslate = () => ({
+    translate: (value, options) => (typeof options === 'string' ? options : options === null || options === void 0 ? void 0 : options.defaultValue) || value || '',
+});
 exports.useTranslate = useTranslate;
 function useI18n() {
     const changeLanguage = (...args) => args.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.25.1",
+  "version": "0.25.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -81,7 +81,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4",
     "webpack": "^5.72.0",
-    "@redocly/portal-types": "1.1.0"
+    "@redocly/portal-types": "1.1.1"
   },
   "dependencies": {
     "@redocly/ajv": "^8.11.0",

package/src/components/Catalog/Catalog.tsx

@@ -26,9 +26,6 @@ export default function Catalog(props: {
 
   const { filterTerm, setFilterTerm, groups, filters } = useCatalog(items, catalogConfig);
   const [isAddingFilter, setIsAddingFilter] = React.useState(false);
-  const translationKeys = {
-    addFilter: 'theme.catalog.filters.select.addFilter',
-  };
   const { translate } = useTranslate();
 
   useModalScrollLock(isAddingFilter);
@@ -44,7 +41,7 @@ export default function Catalog(props: {
               icon={<PlusIcon />}
               onClick={() => setIsAddingFilter(true)}
             >
-              {translate(translationKeys.addFilter, 'Add filter')}
+              {translate('theme.catalog.filters.select.addFilter', 'Add filter')}
             </Button>
             <FilterTags filters={filters} />
           </FilterTagsWrapper>

package/src/components/CopyButton/CopyButton.tsx

@@ -34,11 +34,6 @@ function CopyButtonComponent({
 }: CopyButtonProps): JSX.Element {
   const tooltip = useControl();
   const { translate } = useTranslate();
-  const translationKeys = {
-    buttonText: 'theme.codeSnippet.copy.buttonText',
-    tooltipText: 'theme.codeSnippet.copy.tooltipText',
-    toasterText: 'theme.codeSnippet.copy.toasterText',
-  };
 
   const showTooltip = (duration: number = 1500): void => {
     tooltip.handleOpen();
@@ -59,7 +54,7 @@ function CopyButtonComponent({
   return (
     <Tooltip
       className="copy-button"
-      tip={translate(translationKeys.toasterText, toasterText || 'Copied!')}
+      tip={translate('theme.codeSnippet.copy.buttonText', toasterText || 'Copied!')}
       isOpen={tooltip.isOpened}
       placement={toasterPlacement}
     >
@@ -67,13 +62,13 @@ function CopyButtonComponent({
         onClick={() => copy(toasterDuration)}
         data-cy={dataTestId}
         asIcon={type === 'icon'}
-        title={translate(translationKeys.tooltipText, tooltipText || 'Copy to clipboard')}
+        title={translate('theme.codeSnippet.copy.tooltipText', tooltipText || 'Copy to clipboard')}
         data-testid={dataTestId}
       >
         {type === 'icon' ? (
           <CopyIcon />
         ) : (
-          translate(translationKeys.buttonText, buttonText || 'Copy')
+          translate('theme.codeSnippet.copy.toasterText', buttonText || 'Copy')
         )}
       </CodeBlockControlButton>
     </Tooltip>

package/src/components/EditPageButton/EditPageButton.tsx

@@ -12,9 +12,6 @@ export interface EditPageButtonProps {
 
 export const EditPageButton = ({ to }: EditPageButtonProps): JSX.Element => {
   const { translate } = useTranslate();
-  const translationKeys = {
-    text: 'theme.markdown.editPage.text',
-  };
 
   return (
     <EditButton
@@ -23,8 +20,8 @@ export const EditPageButton = ({ to }: EditPageButtonProps): JSX.Element => {
       onClick={() => telemetry.send('edit_page_link_clicked', {})}
     >
       <ButtonIcon />
-      <ButtonText data-translation-key={translationKeys.text}>
-        {translate(translationKeys.text, 'Edit')}
+      <ButtonText data-translation-key="theme.markdown.editPage.text">
+        {translate('theme.markdown.editPage.text', 'Edit')}
       </ButtonText>
     </EditButton>
   );

package/src/components/Feedback/Comment.tsx

@@ -10,12 +10,6 @@ export const Comment = ({ settings, onSubmit, onCancel, className }: CommentProp
   const [text, setText] = React.useState('');
   const [submitValue, setSubmitValue] = React.useState('');
   const { translate } = useTranslate();
-  const translationKeys = {
-    submitText: 'theme.feedback.settings.comment.submitText',
-    label: 'theme.feedback.settings.comment.label',
-    send: 'theme.feedback.settings.comment.send',
-    cancel: 'theme.feedback.settings.comment.cancel',
-  };
 
   const send = () => {
     if (!text) return;
@@ -29,9 +23,9 @@ export const Comment = ({ settings, onSubmit, onCancel, className }: CommentProp
   if (submitValue) {
     return (
       <Wrapper className={className}>
-        <Label data-translation-key={translationKeys.submitText}>
+        <Label data-translation-key="theme.feedback.settings.comment.submitText">
           {translate(
-            translationKeys.submitText,
+            'theme.feedback.settings.comment.submitText',
             submitText || 'Thank you for helping improve our documentation!',
           )}
         </Label>
@@ -41,17 +35,23 @@ export const Comment = ({ settings, onSubmit, onCancel, className }: CommentProp
 
   return (
     <Wrapper data-component-name="Feedback/Comment" className={className}>
-      <Label data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, label || 'Please share your feedback with us.')}
+      <Label data-translation-key="theme.feedback.settings.comment.label">
+        {translate(
+          'theme.feedback.settings.comment.label',
+          label || 'Please share your feedback with us.',
+        )}
       </Label>
       <TextArea rows={3} onChange={handleTextAreaChange} />
       <ButtonsContainer>
-        <SendButton data-translation-key={translationKeys.send} onClick={send}>
-          {translate(translationKeys.send, 'Send')}
+        <SendButton data-translation-key="theme.feedback.settings.comment.send" onClick={send}>
+          {translate('theme.feedback.settings.comment.send', 'Send')}
         </SendButton>
         {onCancel && (
-          <CancelButton data-translation-key={translationKeys.cancel} onClick={onCancel}>
-            {translate(translationKeys.cancel, 'Cancel')}
+          <CancelButton
+            data-translation-key="theme.feedback.settings.comment.cancel"
+            onClick={onCancel}
+          >
+            {translate('theme.feedback.settings.comment.cancel', 'Cancel')}
           </CancelButton>
         )}
       </ButtonsContainer>

package/src/components/Feedback/Mood.tsx

@@ -19,13 +19,6 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
   const { translate } = useTranslate();
-  const translationKeys = {
-    submitText: 'theme.feedback.settings.submitText',
-    label: 'theme.feedback.settings.label',
-    satisfiedLabel: 'theme.feedback.settings.comment.satisfiedLabel',
-    neutralLabel: 'theme.feedback.settings.comment.neutralLabel',
-    dissatisfiedLabel: 'theme.feedback.settings.comment.dissatisfiedLabel',
-  };
 
   if (score && reasonsSettings?.enable && !reasons.length) {
     const { label: reasonsLabel, items, multi } = reasonsSettings;
@@ -43,21 +36,24 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
       switch (score) {
         case MOOD_STATES.SATISFIED:
           return translate(
-            translationKeys.satisfiedLabel,
+            'theme.feedback.settings.comment.satisfiedLabel',
             commentSettings.satisfiedLabel || 'What was most helpful?',
           );
         case MOOD_STATES.NEUTRAL:
           return translate(
-            translationKeys.neutralLabel,
+            'theme.feedback.settings.comment.neutralLabel',
             commentSettings.neutralLabel || 'What can we improve?',
           );
         case MOOD_STATES.DISSATISFIED:
           return translate(
-            translationKeys.dissatisfiedLabel,
+            'theme.feedback.settings.comment.dissatisfiedLabel',
             commentSettings.dissatisfiedLabel || 'What can we improve?',
           );
         default:
-          return translate(translationKeys.satisfiedLabel, 'What can we improve?');
+          return translate(
+            'theme.feedback.settings.comment.satisfiedLabel',
+            'What can we improve?',
+          );
       }
     };
     return (
@@ -81,8 +77,11 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
 
     return (
       <Wrapper>
-        <Label data-translation-key={translationKeys.submitText}>
-          {translate(translationKeys.submitText, submitText || 'Thank you for your feedback!')}
+        <Label data-translation-key="theme.feedback.settings.submitText">
+          {translate(
+            'theme.feedback.settings.submitText',
+            submitText || 'Thank you for your feedback!',
+          )}
         </Label>
       </Wrapper>
     );
@@ -90,8 +89,8 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
 
   return (
     <Wrapper data-component-name="Feedback/Mood" className={className}>
-      <Label data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, label || 'Was this page helpful?')}
+      <Label data-translation-key="theme.feedback.settings.label">
+        {translate('theme.feedback.settings.label', label || 'Was this page helpful?')}
       </Label>
       <Vote
         onClick={() => {

package/src/components/Feedback/Rating.tsx

@@ -23,10 +23,6 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
   const { translate } = useTranslate();
-  const translationKeys = {
-    submitText: 'theme.feedback.settings.submitText',
-    label: 'theme.feedback.settings.label',
-  };
   const maxRating = max || 5;
 
   if (score && reasonsSettings?.enable && !reasons.length) {
@@ -62,9 +58,9 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
 
     return (
       <Wrapper>
-        <Label data-translation-key={translationKeys.submitText}>
+        <Label data-translation-key="theme.feedback.settings.submitText">
           {translate(
-            translationKeys.submitText,
+            'theme.feedback.settings.submitText',
             submitText || 'Thank you for helping improve our documentation!',
           )}
         </Label>
@@ -74,8 +70,8 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
 
   return (
     <Wrapper data-component-name="Feedback/Rating" className={className}>
-      <Label data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, label || 'How helpful was this page?')}
+      <Label data-translation-key="theme.feedback.settings.label">
+        {translate('theme.feedback.settings.label', label || 'How helpful was this page?')}
       </Label>
       <Stars max={maxRating} onSubmit={setScore} />
     </Wrapper>

package/src/components/Feedback/Reasons.tsx

@@ -9,11 +9,6 @@ export const Reasons = ({ settings, onSubmit, className }: ReasonsProps): JSX.El
   const { label, multi, buttonText, items = [] } = settings;
   const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
   const { translate } = useTranslate();
-  const translationKeys = {
-    label: 'theme.feedback.settings.reasons.label',
-    items: 'theme.feedback.settings.reasons.items',
-    send: 'theme.feedback.settings.reasons.send',
-  };
 
   if (!items.length) {
     return <></>;
@@ -36,12 +31,12 @@ export const Reasons = ({ settings, onSubmit, className }: ReasonsProps): JSX.El
   return (
     <Wrapper
       data-component-name="Feedback/Reasons"
-      data-translation-key={translationKeys.label}
+      data-translation-key="theme.feedback.settings.reasons.label"
       className={className}
     >
       <Label>
         {translate(
-          translationKeys.label,
+          'theme.feedback.settings.reasons.label',
           label || 'Which statement describes your thoughts about this page?',
         )}
       </Label>
@@ -55,16 +50,16 @@ export const Reasons = ({ settings, onSubmit, className }: ReasonsProps): JSX.El
             onChange={() => handleOptionChange(idx)}
           />
           <label
-            data-translation-key={`${translationKeys.items}.${idx + 1}`}
+            data-translation-key={`theme.feedback.settings.reasons.items.${idx + 1}`}
             id={reason}
             onClick={() => handleOptionChange(idx)}
           >
-            {translate(`${translationKeys.items}.${idx + 1}`, reason)}
+            {translate(`theme.feedback.settings.reasons.items.${idx + 1}`, reason)}
           </label>
         </OptionWrapper>
       ))}
-      <SendButton data-translation-key={translationKeys.send} onClick={submitForm}>
-        {translate(translationKeys.send, buttonText || 'Send')}
+      <SendButton data-translation-key="theme.feedback.settings.reasons.send" onClick={submitForm}>
+        {translate('theme.feedback.settings.reasons.send', buttonText || 'Send')}
       </SendButton>
     </Wrapper>
   );

package/src/components/Feedback/Sentiment.tsx

@@ -13,12 +13,6 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
   const { translate } = useTranslate();
-  const translationKeys = {
-    submitText: 'theme.feedback.settings.submitText',
-    label: 'theme.feedback.settings.label',
-    likeLabel: 'theme.feedback.settings.comment.likeLabel',
-    dislikeLabel: 'theme.feedback.settings.comment.dislikeLabel',
-  };
 
   if (score && reasonsSettings?.enable && !reasons.length) {
     const { label: reasonsLabel, items, multi } = reasonsSettings;
@@ -35,11 +29,11 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
     const commentLabel =
       score === 1
         ? translate(
-            translationKeys.likeLabel,
+            'theme.feedback.settings.comment.likeLabel',
             commentSettings.likeLabel || 'What was most helpful?',
           )
         : translate(
-            translationKeys.dislikeLabel,
+            'theme.feedback.settings.comment.dislikeLabel',
             commentSettings.dislikeLabel || 'What can we improve?',
           );
     return (
@@ -58,9 +52,9 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
     }
     return (
       <Wrapper>
-        <Label data-translation-key={translationKeys.submitText}>
+        <Label data-translation-key="theme.feedback.settings.submitText">
           {translate(
-            translationKeys.submitText,
+            'theme.feedback.settings.submitText',
             submitText || 'Thank you for helping improve our documentation!',
           )}
         </Label>
@@ -70,8 +64,8 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
 
   return (
     <Wrapper data-component-name="Feedback/Sentiment" className={className}>
-      <Label data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, label || 'Was this page helpful?')}
+      <Label data-translation-key="theme.feedback.settings.label">
+        {translate('theme.feedback.settings.label', label || 'Was this page helpful?')}
       </Label>
       <Vote
         onClick={() => {

package/src/components/Feedback/Thumbs.tsx

@@ -5,10 +5,6 @@ import { useTranslate } from '@portal/hooks';
 
 export const ThumbUp = ({ text }: { text?: string }) => {
   const { translate } = useTranslate();
-  const translationKeys = {
-    thumbUp: 'theme.feedback.sentiment.thumbUp',
-  };
-
   return (
     <Wrapper style={{ alignItems: 'normal' }}>
       <Icon>
@@ -50,16 +46,13 @@ export const ThumbUp = ({ text }: { text?: string }) => {
           </g>
         </svg>
       </Icon>
-      <span>{translate(translationKeys.thumbUp, text || 'Yes')}</span>
+      <span>{translate('theme.feedback.sentiment.thumbUp', text || 'Yes')}</span>
     </Wrapper>
   );
 };
 
 export const ThumbDown = ({ text }: { text?: string }) => {
   const { translate } = useTranslate();
-  const translationKeys = {
-    thumbDown: 'theme.feedback.sentiment.thumbDown',
-  };
   return (
     <Wrapper style={{ alignItems: 'end' }}>
       <Icon>
@@ -100,7 +93,7 @@ export const ThumbDown = ({ text }: { text?: string }) => {
           </g>
         </svg>
       </Icon>
-      <span>{translate(translationKeys.thumbDown, text || 'No')}</span>
+      <span>{translate('theme.feedback.sentiment.thumbDown', text || 'No')}</span>
     </Wrapper>
   );
 };

package/src/components/Feedback/useReportDialog.ts

@@ -22,11 +22,6 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
   const isReportButtonShown = report?.hide === false; // TODO: report temporary disabled by default
   const { translate } = useTranslate();
   const { submitFeedback } = useSubmitFeedback();
-  const translationKeys = {
-    buttonText: 'theme.codeSnippet.report.buttonText',
-    tooltipText: 'theme.codeSnippet.report.tooltipText',
-    label: 'theme.codeSnippet.report.label',
-  };
 
   const showReportDialog = () => {
     setIsReportDialogShown(true);
@@ -36,13 +31,13 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
   };
   const reportButtonProps: ReportButtonProps = {
     onClick: showReportDialog,
-    buttonText: translate(translationKeys.buttonText, 'Report'),
-    tooltip: translate(translationKeys.tooltipText, 'Report a problem'),
+    buttonText: translate('theme.codeSnippet.report.buttonText', 'Report'),
+    tooltip: translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
     visible: isReportButtonShown,
   };
   const reportDialogProps: Partial<ReportDialogProps> = {
     settings: {
-      label: translate(translationKeys.label, 'What is wrong with this code?'),
+      label: translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
     },
     onSubmit: hideReportDialog,
     onCancel: hideReportDialog,

package/src/components/Filter/Filter.tsx

@@ -16,10 +16,6 @@ export function Filter({
   filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }) {
   const { translate } = useTranslate();
-  const translationKeys = {
-    selectAll: 'theme.catalog.filters.select.all',
-    clear: 'theme.catalog.filters.clear',
-  };
 
   if (!filter.parentUsed) return null;
 
@@ -34,7 +30,9 @@ export function Filter({
         value: '',
         element: (
           <FilterOption key="all" onClick={() => filter.selectOption('')}>
-            <FilterOptionLabel>{translate(translationKeys.selectAll, 'All')}</FilterOptionLabel>
+            <FilterOptionLabel>
+              {translate('theme.catalog.filters.select.all', 'All')}
+            </FilterOptionLabel>
             <FilterOptionCount>{defaultOptionCount}</FilterOptionCount>
           </FilterOption>
         ),

package/src/components/Filter/FilterContent.tsx

@@ -26,10 +26,6 @@ export function FilterContent({
   filterValuesCasing,
 }: FilterContentProps) {
   const { translate } = useTranslate();
-  const translationKeys = {
-    placeholder: 'theme.catalog.filters.placeholder',
-    clearAll: 'theme.catalog.filters.clearAll',
-  };
 
   const hasActiveFilters = filters.some((filter) => {
     if (filterTerm) return true;
@@ -49,7 +45,7 @@ export function FilterContent({
     <FilterContentWrapper isMobile={isMobile}>
       <FilterControls>
         <StyledInput
-          placeholder={translate(translationKeys.placeholder, 'Type to filter...')}
+          placeholder={translate('theme.catalog.filters.placeholder', 'Type to filter...')}
           value={filterTerm}
           onChange={(e) => setFilterTerm(e.target.value)}
         />
@@ -66,7 +62,7 @@ export function FilterContent({
       {hasActiveFilters && (
         <ActionsContainer>
           <ClearAllButton size="default" variant="outlined" onClick={handleClearAll}>
-            {translate(translationKeys.placeholder, 'Clear all filters')}
+            {translate('theme.catalog.filters.clearAll', 'Clear all filters')}
           </ClearAllButton>
         </ActionsContainer>
       )}