@redocly/theme 0.39.1 → 0.40.0

package/lib/components/Footer/FooterCopyright.js

@@ -9,9 +9,9 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const LanguagePicker_1 = require("../../components/LanguagePicker/LanguagePicker");
 function FooterCopyright({ copyrightText = '', className, }) {
-    const { useTranslate, useI18n } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useL10n } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const { changeLanguage } = useI18n();
+    const { changeLanguage } = useL10n();
     return copyrightText ? (react_1.default.createElement(FooterCopyrightWrapper, { className: className, "data-component-name": "Footer/FooterCopyright", "data-translation-key": "theme.footer.copyrightText" },
         react_1.default.createElement(FooterCopyrightLabel, { "data-translation-key": "theme.footer.copyrightText" }, translate('theme.footer.copyrightText', copyrightText)),
         react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage, placement: "top", alignment: "end" }))) : null;

package/lib/components/LastUpdated/LastUpdated.js

@@ -40,9 +40,9 @@ const FORMATS = {
 };
 function LastUpdated(props) {
     const { markdown: { lastUpdatedBlock = {} } = {} } = (0, hooks_1.useThemeConfig)();
-    const { useTranslate, useI18nConfig } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useL10nConfig } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const { currentLocale } = useI18nConfig();
+    const { currentLocale } = useL10nConfig();
     if (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.hide) {
         return null;
     }

package/lib/components/Navbar/Navbar.js

@@ -23,8 +23,8 @@ function Navbar({ className }) {
     var _a;
     const { isOpen, openMobileMenu, closeMobileMenu } = (0, hooks_1.useMobileMenu)(false);
     const themeConfig = (0, hooks_1.useThemeConfig)();
-    const { useI18n, useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const { changeLanguage } = useI18n();
+    const { useL10n, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { changeLanguage } = useL10n();
     const telemetry = useTelemetry();
     const menu = (_a = themeConfig.navbar) === null || _a === void 0 ? void 0 : _a.items;
     const { search: searchSettings, navbar, userMenu: userMenuSettings, logo } = themeConfig;

package/lib/components/Navbar/NavbarItem.js

@@ -39,9 +39,9 @@ const Link_1 = require("../../components/Link/Link");
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
-    const { useTranslate, useI18nConfig, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useL10nConfig, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const { defaultLocale, currentLocale, locales } = useI18nConfig();
+    const { defaultLocale, currentLocale, locales } = useL10nConfig();
     const telemetry = useTelemetry();
     if (navItem.type !== 'link' && !navItem.items)
         return null;

package/lib/core/hooks/__mocks__/use-theme-hooks.d.ts

@@ -14,10 +14,10 @@ export declare const useThemeHooks: jest.Mock<{
         filterTerm: string;
         setFilterTerm: jest.Mock<any, any, any>;
     }, [], any>;
-    useI18n: jest.Mock<{
+    useL10n: jest.Mock<{
         changeLanguage: jest.Mock<any, any, any>;
     }, [], any>;
-    useI18nConfig: jest.Mock<{
+    useL10nConfig: jest.Mock<{
         currentLocale: string;
         defaultLocale: string;
         locales: {

package/lib/core/hooks/__mocks__/use-theme-hooks.js

@@ -20,10 +20,10 @@ exports.useThemeHooks = jest.fn(() => ({
         filterTerm: '',
         setFilterTerm: jest.fn(),
     })),
-    useI18n: jest.fn(() => ({
+    useL10n: jest.fn(() => ({
         changeLanguage: jest.fn(),
     })),
-    useI18nConfig: jest.fn(() => ({
+    useL10nConfig: jest.fn(() => ({
         currentLocale: 'en',
         defaultLocale: 'en',
         locales: [

package/lib/core/hooks/menu/use-mobile-menu-items.js

@@ -11,9 +11,9 @@ const MENU_SEPARATOR = {
 };
 const useMobileMenuItems = (menuType) => {
     var _a, _b, _c;
-    const { useTranslate, useI18nConfig, useCurrentProduct, usePageVersions, useSidebarItems } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useL10nConfig, useCurrentProduct, usePageVersions, useSidebarItems } = (0, hooks_1.useThemeHooks)();
     const { versions = [] } = usePageVersions() || {};
-    const { defaultLocale, currentLocale, locales } = useI18nConfig();
+    const { defaultLocale, currentLocale, locales } = useL10nConfig();
     const { translate } = useTranslate();
     const activeVersion = versions.find((version) => version.active);
     const { currentItems: sidebarItems, pushDrilldownState, popDrilldownState, backLink, } = useSidebarItems(activeVersion);

package/lib/core/hooks/use-language-picker.d.ts

@@ -1,6 +1,6 @@
-import type { I18nConfig } from '../../core/types';
+import type { L10nConfig } from '../../core/types';
 export declare function useLanguagePicker(): {
-    currentLocale: I18nConfig['locales'][number] | undefined;
-    locales: I18nConfig['locales'];
+    currentLocale: L10nConfig['locales'][number] | undefined;
+    locales: L10nConfig['locales'];
     setLocale: (value: string) => void;
 };

package/lib/core/hooks/use-language-picker.js

@@ -4,9 +4,9 @@ exports.useLanguagePicker = void 0;
 const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
 function useLanguagePicker() {
-    const { useI18nConfig, usePreloadHistory } = (0, hooks_1.useThemeHooks)();
+    const { useL10nConfig, usePreloadHistory } = (0, hooks_1.useThemeHooks)();
     const history = usePreloadHistory();
-    const { currentLocale, locales, defaultLocale } = useI18nConfig();
+    const { currentLocale, locales, defaultLocale } = useL10nConfig();
     const locale = locales.find((l) => l.code === currentLocale);
     function setLocale(value) {
         const newLangPathname = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(location.pathname, defaultLocale, value, locales));

package/lib/core/types/hooks.d.ts

@@ -7,10 +7,20 @@ export type ThemeHooks = {
     useTranslate: () => {
         translate: TFunction;
     };
+    /**
+     * @deprecated use `useL10n` instead
+     * */
     useI18n: () => {
         changeLanguage: (lng?: string | undefined, callback?: Callback | undefined) => Promise<TFunc>;
     };
-    useI18nConfig: () => I18nConfig;
+    /**
+     * @deprecated use `useL10nConfig` instead
+     * */
+    useI18nConfig: () => L10nConfig;
+    useL10n: () => {
+        changeLanguage: (lng?: string | undefined, callback?: Callback | undefined) => Promise<TFunc>;
+    };
+    useL10nConfig: () => L10nConfig;
     useCurrentProduct: () => ProductUiConfig | undefined;
     useProducts: () => ProductUiConfig[];
     usePageVersions: () => {
@@ -62,7 +72,7 @@ export type ThemeHooks = {
     useUserTeams: () => string[];
     usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
 };
-export type I18nConfig = {
+export type L10nConfig = {
     currentLocale: string;
     defaultLocale: string;
     locales: {

package/lib/core/types/index.d.ts

@@ -1,6 +1,6 @@
 export * from '../../core/types/breadcrumb';
 export * from '../../core/types/catalog';
-export * from '../../core/types/i18n';
+export * from '../../core/types/l10n';
 export * from '../../core/types/feedback';
 export * from '../../core/types/hooks';
 export * from '../../core/types/markdown';

package/lib/core/types/index.js

@@ -16,7 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../core/types/breadcrumb"), exports);
 __exportStar(require("../../core/types/catalog"), exports);
-__exportStar(require("../../core/types/i18n"), exports);
+__exportStar(require("../../core/types/l10n"), exports);
 __exportStar(require("../../core/types/feedback"), exports);
 __exportStar(require("../../core/types/hooks"), exports);
 __exportStar(require("../../core/types/markdown"), exports);

package/lib/core/types/{i18n.js → l10n.js}

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=i18n.js.map
+//# sourceMappingURL=l10n.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.39.1",
+  "version": "0.40.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -98,7 +98,7 @@
     "timeago.js": "^4.0.2",
     "i18next": "^22.4.12",
     "nprogress": "^0.2.0",
-    "@redocly/config": "0.8.2"
+    "@redocly/config": "0.9.0"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/Footer/FooterCopyright.tsx

@@ -13,9 +13,9 @@ export function FooterCopyright({
   copyrightText = '',
   className,
 }: FooterCopyrightProps): JSX.Element | null {
-  const { useTranslate, useI18n } = useThemeHooks();
+  const { useTranslate, useL10n } = useThemeHooks();
   const { translate } = useTranslate();
-  const { changeLanguage } = useI18n();
+  const { changeLanguage } = useL10n();
 
   return copyrightText ? (
     <FooterCopyrightWrapper

package/src/components/LastUpdated/LastUpdated.tsx

@@ -23,9 +23,9 @@ export type LastUpdatedProps = {
 
 export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
   const { markdown: { lastUpdatedBlock = {} } = {} } = useThemeConfig();
-  const { useTranslate, useI18nConfig } = useThemeHooks();
+  const { useTranslate, useL10nConfig } = useThemeHooks();
   const { translate } = useTranslate();
-  const { currentLocale } = useI18nConfig();
+  const { currentLocale } = useL10nConfig();
 
   if (lastUpdatedBlock?.hide) {
     return null;

package/src/components/Navbar/Navbar.tsx

@@ -24,8 +24,8 @@ export type NavbarProps = {
 export function Navbar({ className }: NavbarProps): JSX.Element | null {
   const { isOpen, openMobileMenu, closeMobileMenu } = useMobileMenu(false);
   const themeConfig = useThemeConfig();
-  const { useI18n, useTelemetry } = useThemeHooks();
-  const { changeLanguage } = useI18n();
+  const { useL10n, useTelemetry } = useThemeHooks();
+  const { changeLanguage } = useL10n();
   const telemetry = useTelemetry();
 
   const menu = themeConfig.navbar?.items;

package/src/components/Navbar/NavbarItem.tsx

@@ -20,9 +20,9 @@ export type NavbarItemProps = {
 
 export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null {
   const { pathname } = useLocation();
-  const { useTranslate, useI18nConfig, useTelemetry } = useThemeHooks();
+  const { useTranslate, useL10nConfig, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
-  const { defaultLocale, currentLocale, locales } = useI18nConfig();
+  const { defaultLocale, currentLocale, locales } = useL10nConfig();
   const telemetry = useTelemetry();
 
   if (navItem.type !== 'link' && !navItem.items) return null;

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -19,10 +19,10 @@ export const useThemeHooks = jest.fn(() => ({
     filterTerm: '',
     setFilterTerm: jest.fn(),
   })),
-  useI18n: jest.fn(() => ({
+  useL10n: jest.fn(() => ({
     changeLanguage: jest.fn(),
   })),
-  useI18nConfig: jest.fn(() => ({
+  useL10nConfig: jest.fn(() => ({
     currentLocale: 'en',
     defaultLocale: 'en',
     locales: [

package/src/core/hooks/menu/use-mobile-menu-items.ts

@@ -16,10 +16,10 @@ const MENU_SEPARATOR: ResolvedNavItem = {
 };
 
 export const useMobileMenuItems = (menuType: MobileMenuType) => {
-  const { useTranslate, useI18nConfig, useCurrentProduct, usePageVersions, useSidebarItems } =
+  const { useTranslate, useL10nConfig, useCurrentProduct, usePageVersions, useSidebarItems } =
     useThemeHooks();
   const { versions = [] } = usePageVersions() || {};
-  const { defaultLocale, currentLocale, locales } = useI18nConfig();
+  const { defaultLocale, currentLocale, locales } = useL10nConfig();
   const { translate } = useTranslate();
   const activeVersion = versions.find((version) => version.active);
   const {

package/src/core/hooks/use-language-picker.ts

@@ -1,16 +1,16 @@
-import type { I18nConfig } from '@redocly/theme/core/types';
+import type { L10nConfig } from '@redocly/theme/core/types';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { getPathnameForLocale, withPathPrefix } from '@redocly/theme/core/utils';
 
 export function useLanguagePicker(): {
-  currentLocale: I18nConfig['locales'][number] | undefined;
-  locales: I18nConfig['locales'];
+  currentLocale: L10nConfig['locales'][number] | undefined;
+  locales: L10nConfig['locales'];
   setLocale: (value: string) => void;
 } {
-  const { useI18nConfig, usePreloadHistory } = useThemeHooks();
+  const { useL10nConfig, usePreloadHistory } = useThemeHooks();
   const history = usePreloadHistory();
-  const { currentLocale, locales, defaultLocale } = useI18nConfig();
+  const { currentLocale, locales, defaultLocale } = useL10nConfig();
 
   const locale = locales.find((l) => l.code === currentLocale);
 

package/src/core/types/hooks.ts

@@ -15,10 +15,20 @@ import type {
 
 export type ThemeHooks = {
   useTranslate: () => { translate: TFunction };
+  /**
+   * @deprecated use `useL10n` instead
+   * */
   useI18n: () => {
     changeLanguage: (lng?: string | undefined, callback?: Callback | undefined) => Promise<TFunc>;
   };
-  useI18nConfig: () => I18nConfig;
+  /**
+   * @deprecated use `useL10nConfig` instead
+   * */
+  useI18nConfig: () => L10nConfig;
+  useL10n: () => {
+    changeLanguage: (lng?: string | undefined, callback?: Callback | undefined) => Promise<TFunc>;
+  };
+  useL10nConfig: () => L10nConfig;
   useCurrentProduct: () => ProductUiConfig | undefined;
   useProducts: () => ProductUiConfig[];
   usePageVersions: () => {
@@ -66,7 +76,7 @@ export type ThemeHooks = {
   usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
 };
 
-export type I18nConfig = {
+export type L10nConfig = {
   currentLocale: string;
   defaultLocale: string;
   locales: { code: string; name: string }[];

package/src/core/types/index.ts

@@ -1,6 +1,6 @@
 export * from '@redocly/theme/core/types/breadcrumb';
 export * from '@redocly/theme/core/types/catalog';
-export * from '@redocly/theme/core/types/i18n';
+export * from '@redocly/theme/core/types/l10n';
 export * from '@redocly/theme/core/types/feedback';
 export * from '@redocly/theme/core/types/hooks';
 export * from '@redocly/theme/core/types/markdown';