@redocly/theme 0.25.1 → 0.25.2

package/src/components/Filter/FilterPopover.tsx

@@ -34,10 +34,6 @@ export function FilterPopover({
     })
     .filter(Boolean) as ResolvedFilter[];
 
-  const translationKeys = {
-    placeholder: 'theme.catalog.filters.placeholder',
-    done: 'theme.catalog.filters.done',
-  };
   const { translate } = useTranslate();
 
   return (
@@ -45,7 +41,7 @@ export function FilterPopover({
       <FilterPopoverHeader>
         <FilterPopoverHeaderLabel>Add Filter</FilterPopoverHeaderLabel>
         <FilterPopoverHeaderButton onClick={() => setIsAddingFilter(false)}>
-          {translate(translationKeys.placeholder, 'Done')}
+          {translate('theme.catalog.filters.done', 'Done')}
         </FilterPopoverHeaderButton>
       </FilterPopoverHeader>
       <FilterContent
@@ -57,7 +53,7 @@ export function FilterPopover({
       />
       <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)}
         />

package/src/components/Footer/FooterCopyright.tsx

@@ -16,16 +16,13 @@ export function FooterCopyright({
   const { translate } = useTranslate();
   const { changeLanguage } = useI18n();
 
-  const translationKeys = {
-    copyrightText: 'theme.footer.copyrightText',
-  };
   return copyrightText ? (
     <Wrapper
       className={className}
       data-component-name="Footer/FooterCopyright"
-      data-translation-key={translationKeys.copyrightText}
+      data-translation-key="theme.footer.copyrightText"
     >
-      <Label>{translate(translationKeys.copyrightText, copyrightText)}</Label>
+      <Label>{translate('theme.footer.copyrightText', copyrightText)}</Label>
       <LanguagePicker onChangeLanguage={changeLanguage} placement="top" alignment="end" />
     </Wrapper>
   ) : null;

package/src/components/LastUpdated/LastUpdated.tsx

@@ -40,7 +40,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
 
   const text =
     format === 'timeago'
-      ? translate(translationKey, 'Last updated ')
+      ? translate(translationKey, 'Last updated') + ' '
       : translate(translationKey, 'Last updated on');
 
   return (

package/src/components/Menu/hooks/use-mobile-menu-items.ts

@@ -13,10 +13,6 @@ const MENU_SEPARATOR: ResolvedNavItem = {
   separatorLine: true,
 };
 
-const TRANSLATION_KEYS = {
-  products: 'theme.mobileMenu.products',
-};
-
 export const useMobileMenuItems = (menuType: MenuType) => {
   const { versions = [] } = usePageVersions() || {};
   const { defaultLocale, currentLocale, locales } = useI18nConfig();
@@ -71,7 +67,7 @@ export const useMobileMenuItems = (menuType: MenuType) => {
     if (productMenuItems.length) {
       menuItems.push({
         type: 'separator',
-        label: translate(TRANSLATION_KEYS.products, 'Products'),
+        label: translate('theme.mobileMenu.products', 'Products'),
       });
 
       menuItems.push(...productMenuItems);

package/src/components/Menu/hooks/use-mobile-menu-levels.ts

@@ -7,11 +7,6 @@ import { MenuType } from '@theme/components/Menu/constants';
 import { useThemeConfig } from '@theme/hooks';
 import type { ResolvedNavItem } from '@theme/types/portal';
 
-const TRANSLATION_KEYS = {
-  mainMenu: 'theme.mobileMenu.mainMenu',
-  previous: 'theme.mobileMenu.previous',
-};
-
 export const useMobileMenuLevels = () => {
   const { versions = [] } = usePageVersions() || {};
   const activeVersion = versions.find((version) => version?.active);
@@ -29,7 +24,7 @@ export const useMobileMenuLevels = () => {
   const menuLevels = useMemo(() => {
     const menuLevels = [
       {
-        label: translate(TRANSLATION_KEYS.mainMenu, 'Main Menu'),
+        label: translate('theme.mobileMenu.mainMenu', 'Main Menu'),
         type: MenuType.MAIN_MENU,
       },
     ];
@@ -43,7 +38,7 @@ export const useMobileMenuLevels = () => {
 
     if (sidebarItems.length || activeVersion) {
       menuLevels.push({
-        label: translate(TRANSLATION_KEYS.previous, 'Previous'),
+        label: translate('theme.mobileMenu.previous', 'Previous'),
         type: MenuType.PAGE,
       });
     }

package/src/components/Menu/utils.ts

@@ -1,7 +1,8 @@
 import type { Location } from 'react-router-dom';
+import type { TFunction } from '@redocly/portal-types';
 
 import type { ItemState } from '@theme/components/Sidebar/types';
-import type { Locale, ResolvedNavItem, TFunction, Version } from '@theme/types/portal';
+import type { Locale, ResolvedNavItem, Version } from '@theme/types/portal';
 import { getPathnameForLocale } from '@portal/utils';
 import { withPathPrefix } from '@theme/utils/urls';
 

package/src/components/Profile/LoginLink.tsx

@@ -12,19 +12,16 @@ export interface LoginLinkProps {
 export function LoginLink({ href }: LoginLinkProps): JSX.Element {
   const { userProfile } = useThemeConfig();
   const { translate } = useTranslate();
-  const translationKeys = {
-    login: 'theme.profile.login',
-  };
 
   return (
     <StyledLink
       href={href}
-      data-translation-key={translationKeys.login}
+      data-translation-key="theme.profile.login"
       onClick={() => {
         telemetry.send('login_button_clicked', {});
       }}
     >
-      {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
+      {translate('theme.profile.login', userProfile?.loginLabel || 'Login')}
     </StyledLink>
   );
 }

package/src/components/Profile/MobileUserProfile.tsx

@@ -12,9 +12,6 @@ export function MobileUserProfile() {
   const { userProfile } = useThemeConfig();
   const { userData, handleLogout, loginUrl } = useProfileProps();
   const { translate } = useTranslate();
-  const translationKeys = {
-    login: 'theme.profile.login',
-  };
 
   if (!userData?.isAuthenticated && !loginUrl) return null;
 
@@ -26,7 +23,7 @@ export function MobileUserProfile() {
           data-cy="login-btn"
           onClick={() => telemetry.send('login_button_clicked', {})}
         >
-          {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
+          {translate('theme.profile.login', userProfile?.loginLabel || 'Login')}
         </LoginButton>
       ) : (
         <>

package/src/components/Profile/UserProfile.tsx

@@ -18,18 +18,15 @@ export function UserProfile({
 }: UserProfileProps): JSX.Element {
   const { userProfile } = useThemeConfig();
   const { translate } = useTranslate();
-  const translationKeys = {
-    myApps: 'theme.profile.myApps',
-    logout: 'theme.profile.logout',
-  };
+
   const [isOpened, setIsOpened] = useState<boolean>(false);
 
   const menuItems: JSX.Element[] = [<UserProfileData key={userData.name} userData={userData} />];
 
   if (hasDeveloperOnboarding) {
     menuItems.push(
-      <Link to="/apps" data-translation-key={translationKeys.myApps}>
-        {translate(translationKeys.myApps, 'My Apps')}
+      <Link to="/apps" data-translation-key="theme.profile.myApps">
+        {translate('theme.profile.myApps', 'My Apps')}
       </Link>,
     );
   }
@@ -55,11 +52,11 @@ export function UserProfile({
         handleLogout();
         telemetry.send('logout_menu_item_clicked', {});
       }}
-      data-translation-key={translationKeys.logout}
+      data-translation-key="theme.profile.logout"
       role="link"
     >
       <LogoutIcon />
-      {translate(translationKeys.logout, userProfile?.logoutLabel || 'Log out')}
+      {translate('theme.profile.logout', userProfile?.logoutLabel || 'Log out')}
     </Logout>,
   );
 

package/src/components/Search/CancelSearch.tsx

@@ -12,14 +12,11 @@ export function CancelSearch({
   className?: string;
 }): JSX.Element {
   const { translate } = useTranslate();
-  const translationKeys = {
-    cancel: 'theme.search.cancel',
-  };
 
   return (
     <Wrapper data-component-name="Search/CancelSearch" onClick={onClick} className={className}>
-      <Button data-translation-keys={translationKeys.cancel} fullWidth variant="outlined">
-        {translate(translationKeys.cancel, 'Cancel')}
+      <Button data-translation-keys="theme.search.cancel" fullWidth variant="outlined">
+        {translate('theme.search.cancel', 'Cancel')}
       </Button>
     </Wrapper>
   );

package/src/components/Search/RecentSearches.tsx

@@ -15,9 +15,6 @@ export function RecentSearches({
 }) {
   const { items, removeSearchHistoryItem } = useRecentSearches();
   const { translate } = useTranslate();
-  const translationKeys = {
-    title: 'theme.search.recent',
-  };
 
   if (!items || !items.length) return null;
 
@@ -34,8 +31,8 @@ export function RecentSearches({
 
   return (
     <Wrapper data-component-name="Search/RecentSearches" className={className}>
-      <Title data-translation-key={translationKeys.title}>
-        {translate(translationKeys.title, 'Recent searches')}
+      <Title data-translation-key="theme.search.recent">
+        {translate('theme.search.recent', 'Recent searches')}
       </Title>
       <RecentItems>
         {items.map((item) => (

package/src/components/Search/SearchDialog.tsx

@@ -39,13 +39,6 @@ export const SearchDialog = ({
     }
   };
 
-  const translationKeys = {
-    noResults: 'theme.search.noResults',
-    navigate: 'theme.search.keys.navigate',
-    select: 'theme.search.keys.select',
-    exit: 'theme.search.keys.exit',
-  };
-
   const mapItem = (item: SearchDocument) => {
     return (
       <SearchItem key={item.id} item={item} product={!product ? item.product?.name : undefined} />
@@ -74,8 +67,8 @@ export const SearchDialog = ({
             items.length ? (
               items.map(mapItem)
             ) : (
-              <Message data-translation-key={translationKeys.noResults}>
-                {translate(translationKeys.noResults, 'No results')}
+              <Message data-translation-key="theme.search.noResults">
+                {translate('theme.search.noResults', 'No results')}
               </Message>
             )
           ) : (
@@ -88,19 +81,19 @@ export const SearchDialog = ({
         <BottomContainer>
           <Shortcuts>
             <Shortcut
-              data-translation-key={translationKeys.navigate}
+              data-translation-key="theme.search.keys.navigate"
               combination="Tab"
-              text={translate(translationKeys.navigate, 'to navigate')}
+              text={translate('theme.search.keys.navigate', 'to navigate')}
             />
             <Shortcut
-              data-translation-key={translationKeys.select}
+              data-translation-key="theme.search.keys.select"
               combination="↵"
-              text={translate(translationKeys.select, 'to select')}
+              text={translate('theme.search.keys.select', 'to select')}
             />
             <Shortcut
-              data-translation-key={translationKeys.exit}
+              data-translation-key="theme.search.keys.exit"
               combination="Esc"
-              text={translate(translationKeys.exit, 'to exit')}
+              text={translate('theme.search.keys.exit', 'to exit')}
             />
           </Shortcuts>
           <CancelSearch onClick={onClose} />

package/src/components/Search/SearchTrigger.tsx

@@ -15,16 +15,14 @@ export function SearchTrigger({
 }): JSX.Element {
   const themeSettings = useThemeConfig();
   const { translate } = useTranslate();
-  const translationKeys = {
-    label: 'theme.search.navbar.label',
-  };
+
   const keyShortcuts = themeSettings?.search?.shortcuts ?? ['/'];
 
   return (
     <Wrapper data-component-name="Search/SearchTrigger" onClick={onClick} className={className}>
       <SearchIconSmall />
-      <Label data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, 'Search')}
+      <Label data-translation-key="theme.search.navbar.label">
+        {translate('theme.search.navbar.label', 'Search')}
       </Label>
       <ShortcutKey keyShortcuts={keyShortcuts} />
     </Wrapper>

package/src/components/Search/SuggestedPages.tsx

@@ -9,16 +9,12 @@ import { useTranslate } from '@portal/hooks';
 export function SuggestedPages({ className }: { className?: string }) {
   const pages = useSuggestedPages();
   const { translate } = useTranslate();
-  const translationKeys = {
-    title: 'theme.search.suggested',
-  };
-
   if (!pages.length) return null;
 
   return (
     <Wrapper data-component-name="Search/SuggestedPages" className={className}>
-      <Title data-translation-key={translationKeys.title}>
-        {translate(translationKeys.title, 'Suggested pages')}
+      <Title data-translation-key="theme.search.suggested">
+        {translate('theme.search.suggested', 'Suggested pages')}
       </Title>
       <SuggestedItems>
         {pages.map(

package/src/components/Sidebar/DrilldownMenu.tsx

@@ -15,19 +15,16 @@ export function DrilldownMenu({
   className,
 }: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element {
   const { translate } = useTranslate();
-  const translationKeys = {
-    backLabel: 'theme.sidebar.menu.backLabel',
-  };
   const label =
     item.label === prevActiveItem?.label || !prevActiveItem?.label
-      ? translate(translationKeys.backLabel, 'Back')
+      ? translate('theme.sidebar.menu.backLabel', 'Back')
       : prevActiveItem?.label;
 
   return (
     <MenuContainer data-component-name="Sidebar/DrilldownMenu" className={className}>
       <MenuContent>
         <MenuWrapper>
-          <BackButton back={back} data-translation-key={translationKeys.backLabel}>
+          <BackButton back={back} data-translation-key="theme.sidebar.menu.backLabel">
             {label}
           </BackButton>
           <MenuLinkItem item={item}>

package/src/components/Sidebar/VersionPicker.tsx

@@ -16,10 +16,6 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
   const { versionPicker } = themeConfig;
 
   const { translate } = useTranslate();
-  const translationKeys = {
-    label: 'theme.versionPicker.label',
-    unversioned: 'theme.versionPicker.unversioned',
-  };
 
   const { versions = [], onChange } = props;
   const options = versions.map((version) => {
@@ -40,11 +36,11 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
 
   return (
     <VersionsPickerWrapper>
-      <VersionPickerLabel data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, 'Version:')}
+      <VersionPickerLabel data-translation-key="theme.versionPicker.label">
+        {translate('theme.versionPicker.label', 'Version:')}
       </VersionPickerLabel>
       <VersionPickerSelect
-        placeholder={translate(translationKeys.unversioned, 'All versions')}
+        placeholder={translate('theme.versionPicker.unversioned', 'All versions')}
         disabled={!options.length}
         options={options}
         value={value}

package/src/components/TableOfContent/TableOfContent.tsx

@@ -35,9 +35,6 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
   );
 
   const { translate } = useTranslate();
-  const translationKeys = {
-    header: 'theme.toc.header',
-  };
 
   if (toc?.hide) {
     return null;
@@ -48,8 +45,8 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
       <TableOfContentMenu data-component-name="TableOfContent/TableOfContent" className={className}>
         <TableOfContentItems ref={sidebar}>
           {displayedHeadings.length ? (
-            <TocHeader data-translation-key={translationKeys.header}>
-              {translate(translationKeys.header, toc.header || 'On this page')}
+            <TocHeader data-translation-key="theme.toc.header">
+              {translate('theme.toc.header', toc.header || 'On this page')}
             </TocHeader>
           ) : null}
           {displayedHeadings.map((heading: MdHeading | null, idx: number) => {

package/src/layouts/Forbidden.tsx

@@ -6,24 +6,15 @@ import { useTranslate } from '@portal/hooks';
 
 export function Forbidden(): JSX.Element {
   const { translate } = useTranslate();
-  const translationKeys = {
-    title: 'theme.page.forbidden.title',
-    homeButton: 'theme.page.homeButton',
-  };
 
   return (
     <Wrapper data-component-name="Pages/Forbidden">
       <Header>403</Header>
-      <Description data-translation-key={translationKeys.title}>
-        {translate(translationKeys.title, 'Access forbidden')}
+      <Description data-translation-key="theme.page.forbidden.title">
+        {translate('theme.page.forbidden.title', 'Access forbidden')}
       </Description>
-      <HomeButton
-        color="primary"
-        size="large"
-        to="/"
-        data-translation-key={translationKeys.homeButton}
-      >
-        {translate(translationKeys.homeButton, 'Open Homepage')}
+      <HomeButton color="primary" size="large" to="/" data-translation-key="theme.page.homeButton">
+        {translate('theme.page.homeButton', 'Open Homepage')}
       </HomeButton>
     </Wrapper>
   );

package/src/layouts/NotFound.tsx

@@ -6,24 +6,15 @@ import { useTranslate } from '@portal/hooks';
 
 export function NotFound(): JSX.Element {
   const { translate } = useTranslate();
-  const translationKeys = {
-    title: 'theme.page.notFound.title',
-    homeButton: 'theme.page.homeButton',
-  };
 
   return (
     <Wrapper data-component-name="Pages/NotFound">
       <Header>404</Header>
-      <Description data-translation-key={translationKeys.title}>
-        {translate(translationKeys.title, `It looks like you're lost`)}
+      <Description data-translation-key="theme.page.notFound.title">
+        {translate('theme.page.notFound.title', "It looks like you're lost")}
       </Description>
-      <HomeButton
-        color="primary"
-        size="large"
-        to="/"
-        data-translation-key={translationKeys.homeButton}
-      >
-        {translate(translationKeys.homeButton, 'Open Homepage')}
+      <HomeButton color="primary" size="large" to="/" data-translation-key="theme.page.homeButton">
+        {translate('theme.page.homeButton', 'Open Homepage')}
       </HomeButton>
     </Wrapper>
   );

package/src/layouts/OIDCForbidden.tsx

@@ -9,10 +9,6 @@ export function OIDCForbidden(): JSX.Element {
   const [searchParams, setSearchParams] = useSearchParams();
   const [errorDescription, setErrorDescription] = useState<string>('');
 
-  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()@:%_\+.~#?&//=]*)/;
@@ -38,8 +34,8 @@ export function OIDCForbidden(): JSX.Element {
   return (
     <Wrapper data-component-name="Pages/OIDCForbidden">
       <Header>403</Header>
-      <Description data-translation-key={translationKeys.title}>
-        {translate(translationKeys.title, 'Access forbidden')}
+      <Description data-translation-key="theme.page.forbidden.title">
+        {translate('theme.page.forbidden.title', 'Access forbidden')}
       </Description>
       {errorDescription && <ErrorDescription>{renderText(errorDescription)}</ErrorDescription>}
     </Wrapper>

package/src/mocks/hooks/index.ts

@@ -1,5 +1,7 @@
+import type { TFunction } from '@redocly/portal-types';
+
 import type { CatalogConfig, ProductUiConfig, ThemeUIConfig } from '@theme/config';
-import type { ResolvedNavItem, TFunction, Version } from '@theme/types/portal';
+import type { ResolvedNavItem, Version } from '@theme/types/portal';
 import type { FilteredCatalog } from '@theme/types/portal/src/shared/types/catalog';
 interface PageLink {
   label: string;
@@ -76,11 +78,10 @@ export function useCatalog(_items: ResolvedNavItem[], _config: CatalogConfig): F
   throw new Error('Mock not implemented yet.');
 }
 
-export function useTranslate() {
-  const translate: TFunction = (value?: string, options?: { defaultValue: string } | string) =>
-    (typeof options === 'string' ? options : options?.defaultValue) || value || '';
-  return { translate };
-}
+export const useTranslate = (): { translate: TFunction } => ({
+  translate: (value?: string, options?: { defaultValue: string } | string) =>
+    (typeof options === 'string' ? options : options?.defaultValue) || value || '',
+});
 
 export function useI18n() {
   const changeLanguage = (...args: any) => args.value as string;