@redocly/theme 0.11.4 → 0.12.0

package/src/layouts/NotFound.tsx

@@ -2,14 +2,28 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Button } from '@theme/components/Button';
+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>It looks like you&apos;re lost</Description>
-      <HomeButton color="primary" size="large" to="/">
-        Open Homepage
+      <Description data-translation-key={translationKeys.title}>
+        {translate(translationKeys.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>
     </Wrapper>
   );

package/src/mocks/hooks/index.ts

@@ -1,5 +1,5 @@
 import type { ThemeUIConfig } from '@theme/config';
-import type { ResolvedNavItem } from '@theme/types/portal';
+import type { ResolvedNavItem, TFunction } from '@theme/types/portal';
 import type { CatalogConfig, FilteredCatalog } from '@theme/types/portal/src/shared/types/catalog';
 interface PageLink {
   label: string;
@@ -75,4 +75,23 @@ 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 function useI18n() {
+  const changeLanguage = (...args: any) => args.value as string;
+  return { changeLanguage };
+}
+
 export { useGlobalData } from '../useGlobalData';
+
+export function useI18nConfig() {
+  return {
+    currentLocale: 'en',
+    defaultLocale: 'en',
+    locales: [{ code: 'en', name: 'en' }],
+  };
+}

package/src/mocks/search.ts

@@ -22,12 +22,14 @@ export function useFuseSearch(): {
   query: string;
   setQuery: (val: string) => void;
   items: SearchDocument[];
+  isLoading: boolean;
 } {
   const [query, setQuery] = useState('');
 
   return {
     query,
     setQuery,
+    isLoading: false,
     items: [
       {
         id: '1',

package/src/mocks/utils.ts

@@ -2,8 +2,21 @@ export function withPathPrefix(link: string): string {
   return link;
 }
 
+export function withoutPathPrefix(link: string): string {
+  return link;
+}
+
 export function timeAgo(lastModified: string | Date): string {
   // should return format(lastModified) in portal
   const d = new Date(lastModified);
   return `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}`;
 }
+
+export function getPathnameForLocale(
+  pathname: string,
+  _defaultLocale: string,
+  _newLocale: string,
+  _allLocales: { code: string; name: string }[],
+) {
+  return `${pathname}`;
+}

package/src/types/portal/index.ts

@@ -1,2 +1,3 @@
 export * from './src/shared/types/nav';
+export * from './src/shared/types/i18n';
 export type { MdHeading } from './src/shared/types/markdown';

package/src/types/portal/src/shared/types/catalog.ts

@@ -10,9 +10,11 @@ export type FilteredCatalog = {
 export type Filter = {
   type?: 'select' | 'checkboxes';
   title: string;
+  titleTranslationKey?: string;
   property: string;
   parentFilter?: string;
   missingCategoryName?: string;
+  missingCategoryNameTranslationKey?: string;
   options?: string[];
 };
 
@@ -24,7 +26,9 @@ export type CatalogConfig = {
   requiredPermission?: string;
   separateVersions?: boolean;
   title?: string;
+  titleTranslationKey?: string;
   description?: string;
+  descriptionTranslationKey?: string;
 };
 
 export type ResolvedFilter = Omit<Filter, 'options'> & {

package/src/types/portal/src/shared/types/i18n.d.ts

@@ -0,0 +1,3 @@
+export declare interface TFunction {
+  (value?: string, options?: string | TOptions): string;
+}

package/src/types/portal/src/shared/types/nav.ts

@@ -6,6 +6,7 @@ export type ResolvedNavLinkItem = {
   metadata?: Record<string, unknown>;
   link: string;
   label: string;
+  labelTranslationKey?: string;
   items?: ResolvedNavItem[];
   sidebar?: ResolvedNavItem[]; // for API catalog it contains the corresponding sidebar first item
   external?: boolean;
@@ -27,6 +28,7 @@ export type ResolvedNavGroupItem = {
   metadata?: Record<string, unknown>;
   link?: string;
   label?: string;
+  labelTranslationKey?: string;
   items?: ResolvedNavItem[];
   sidebar?: ResolvedNavItem[]; // for API catalog it contains the corresponding sidebar first item
   external?: boolean;
@@ -52,6 +54,7 @@ export type ResolvedNavItem =
       type: 'separator';
       metadata?: Record<string, unknown>;
       label?: string;
+      labelTranslationKey?: string;
       routeSlug?: never;
 
       version?: string;
@@ -74,6 +77,7 @@ export type ResolvedNavItem =
       routeSlug?: never;
 
       label: string;
+      labelTranslationKey?: string;
       link?: undefined;
       items?: ResolvedNavItem[]; // for typescript
       sidebar?: ResolvedNavItem[]; // for typescript
@@ -120,10 +124,13 @@ export type NavItem = {
   page?: string;
   directory?: string;
   group?: string;
+  groupTranslationKey?: string;
   label?: string;
+  labelTranslationKey?: string;
   href?: never;
   items?: NavItem[];
   separator?: string;
+  separatorTranslationKey?: string;
   separatorLine?: boolean;
   version?: string;
   menuStyle?: MenuStyle;