@redocly/theme 0.53.0-next.3 → 0.53.0

package/lib/components/LastUpdated/LastUpdated.d.ts

@@ -1,12 +1,7 @@
-declare const FORMATS: {
-    timeago: (date: Date, locale: string) => string;
-    iso: (date: Date) => string;
-    short: (date: Date, locale: string) => string;
-    long: (date: Date, locale: string) => string;
-};
+type Formats = 'timeago' | 'iso' | 'short' | 'long';
 export type LastUpdatedProps = {
     lastModified: Date;
-    format?: keyof typeof FORMATS;
+    format?: Formats;
     locale?: string;
     className?: string;
 };

package/lib/components/LastUpdated/LastUpdated.js

@@ -27,22 +27,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LastUpdated = LastUpdated;
-const React = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const timeago_js_1 = require("timeago.js");
-const hooks_1 = require("../../core/hooks");
 const constants_1 = require("../../core/constants");
-const FORMATS = {
-    timeago: (date, locale) => (0, timeago_js_1.format)(date, locale),
-    iso: (date) => date.toISOString().split('T')[0],
-    short: (date, locale) => date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }),
-    long: (date, locale) => date.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' }),
-};
+const hooks_1 = require("../../core/hooks");
 function LastUpdated(props) {
     const { markdown: { lastUpdatedBlock = {} } = {} } = (0, hooks_1.useThemeConfig)();
     const { useTranslate, useL10nConfig } = (0, hooks_1.useThemeHooks)();
+    const { format: timeagoFormat } = (0, hooks_1.useTimeAgo)();
     const { translate } = useTranslate();
     const { currentLocale } = useL10nConfig();
+    const formats = (0, react_1.useMemo)(() => ({
+        timeago: (date) => timeagoFormat(date),
+        iso: (date) => date.toISOString().split('T')[0],
+        short: (date, locale) => date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }),
+        long: (date, locale) => date.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' }),
+    }), [timeagoFormat]);
     if (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.hide) {
         return null;
     }
@@ -52,15 +52,15 @@ function LastUpdated(props) {
         lastUpdatedBlock.locale ||
         (currentLocale !== constants_1.DEFAULT_LOCALE_PLACEHOLDER ? currentLocale || 'en-US' : 'en-US');
     const isoDate = lastModified.toISOString().split('T')[0];
-    const lastUpdatedString = FORMATS[format](lastModified, locale);
+    const lastUpdatedString = formats[format](lastModified, locale);
     const translationKey = format === 'timeago' ? 'page.lastUpdated.timeago' : 'page.lastUpdated.on';
     const text = format === 'timeago'
         ? translate(translationKey, 'Last updated') + ' '
         : translate(translationKey, 'Last updated on');
-    return (React.createElement(LastUpdatedWrapper, { className: props.className, "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate, "data-translation-key": translationKey },
+    return (react_1.default.createElement(LastUpdatedWrapper, { className: props.className, "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate, "data-translation-key": translationKey },
         text,
         " ",
-        React.createElement("time", { dateTime: isoDate }, lastUpdatedString)));
+        react_1.default.createElement("time", { dateTime: isoDate }, lastUpdatedString)));
 }
 const LastUpdatedWrapper = styled_components_1.default.div `
   color: var(--last-updated-text-color);

package/lib/core/hooks/__mocks__/index.d.ts

@@ -24,3 +24,4 @@ export * from '../../../core/hooks/use-product-picker';
 export * from '../../../core/hooks/search/use-search-dialog';
 export * from '../../../core/hooks/use-language-picker';
 export * from '../../../core/hooks/__mocks__/use-element-size';
+export * from '../../../core/hooks/__mocks__/use-time-ago';

package/lib/core/hooks/__mocks__/index.js

@@ -40,4 +40,5 @@ __exportStar(require("../../../core/hooks/use-product-picker"), exports);
 __exportStar(require("../../../core/hooks/search/use-search-dialog"), exports);
 __exportStar(require("../../../core/hooks/use-language-picker"), exports);
 __exportStar(require("../../../core/hooks/__mocks__/use-element-size"), exports);
+__exportStar(require("../../../core/hooks/__mocks__/use-time-ago"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/__mocks__/use-time-ago.d.ts

@@ -0,0 +1,3 @@
+export declare const useTimeAgo: jest.Mock<{
+    format: () => "5 days ago";
+}, [], any>;

package/lib/core/hooks/__mocks__/use-time-ago.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimeAgo = void 0;
+exports.useTimeAgo = jest.fn(() => ({
+    format: () => '5 days ago',
+}));
+//# sourceMappingURL=use-time-ago.js.map

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

@@ -34,3 +34,4 @@ export * from '../../core/hooks/code-walkthrough/use-code-walkthrough-controls';
 export * from '../../core/hooks/code-walkthrough/use-code-panel';
 export * from '../../core/hooks/code-walkthrough/use-renderable-files';
 export * from '../../core/hooks/use-element-size';
+export * from '../../core/hooks/use-time-ago';

package/lib/core/hooks/index.js

@@ -50,4 +50,5 @@ __exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough-con
 __exportStar(require("../../core/hooks/code-walkthrough/use-code-panel"), exports);
 __exportStar(require("../../core/hooks/code-walkthrough/use-renderable-files"), exports);
 __exportStar(require("../../core/hooks/use-element-size"), exports);
+__exportStar(require("../../core/hooks/use-time-ago"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/use-time-ago.d.ts

@@ -0,0 +1,3 @@
+export declare function useTimeAgo(): {
+    format: (date: Date) => string;
+};

package/lib/core/hooks/use-time-ago.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimeAgo = useTimeAgo;
+const react_1 = require("react");
+const hooks_1 = require("../../core/hooks");
+const timeUnits = ['second', 'minute', 'hour', 'day', 'week', 'month', 'year'];
+const timeUnitConversions = [
+    60, // 60 seconds in 1 min
+    60, // 60 mins in 1 hour
+    24, // 24 hours in 1 day
+    7, // 7 days in 1 week
+    365 / 7 / 12, // 4.345238095238096 weeks in 1 month
+    12, // 12 months in 1 year
+];
+function useTimeAgo() {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const format = (0, react_1.useCallback)((date) => {
+        let timeUnitIndex = 0;
+        let elapsedTime = (Date.now() - date.getTime()) / 1000;
+        for (; elapsedTime >= timeUnitConversions[timeUnitIndex] &&
+            timeUnitIndex < timeUnitConversions.length; timeUnitIndex++) {
+            elapsedTime /= timeUnitConversions[timeUnitIndex];
+        }
+        elapsedTime = Math.floor(elapsedTime);
+        if (timeUnitIndex === 0)
+            return translate('time.justNow', 'just now');
+        let timeUnit = timeUnits[timeUnitIndex];
+        if (elapsedTime > 1)
+            timeUnit = `${timeUnit}s`;
+        const translationKey = `time.past.${timeUnit}`;
+        return translate(translationKey, {
+            defaultValue: `${elapsedTime} ${timeUnit} ago`,
+            count: elapsedTime,
+            replace: { value: elapsedTime },
+        });
+    }, [translate]);
+    return { format };
+}
+//# sourceMappingURL=use-time-ago.js.map

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

@@ -0,0 +1 @@
+export type Plural<T extends string> = `${T}s`;

package/lib/core/types/common.js

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

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

@@ -11,3 +11,4 @@ export * from '../../core/types/sidebar';
 export * from '../../core/types/filter';
 export * from '../../core/types/user-menu';
 export * from '../../core/types/user-claims';
+export * from '../../core/types/common';

package/lib/core/types/index.js

@@ -27,4 +27,5 @@ __exportStar(require("../../core/types/sidebar"), exports);
 __exportStar(require("../../core/types/filter"), exports);
 __exportStar(require("../../core/types/user-menu"), exports);
 __exportStar(require("../../core/types/user-claims"), exports);
+__exportStar(require("../../core/types/common"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'codeWalkthrough.download' | 'codeWalkthrough.preview';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years';
 export type Locale = {
     code: string;
     name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.53.0-next.3",
+  "version": "0.53.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -88,7 +88,6 @@
     "nprogress": "0.2.0",
     "react-calendar": "4.2.1",
     "react-date-picker": "10.0.3",
-    "timeago.js": "4.0.2",
     "@redocly/config": "0.24.1"
   },
   "scripts": {

package/src/components/LastUpdated/LastUpdated.tsx

@@ -1,22 +1,14 @@
-import * as React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
-import { format } from 'timeago.js';
 
-import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { DEFAULT_LOCALE_PLACEHOLDER } from '@redocly/theme/core/constants';
+import { useThemeHooks, useThemeConfig, useTimeAgo } from '@redocly/theme/core/hooks';
 
-const FORMATS = {
-  timeago: (date: Date, locale: string) => format(date, locale),
-  iso: (date: Date) => date.toISOString().split('T')[0],
-  short: (date: Date, locale: string) =>
-    date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }),
-  long: (date: Date, locale: string) =>
-    date.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' }),
-};
+type Formats = 'timeago' | 'iso' | 'short' | 'long';
 
 export type LastUpdatedProps = {
   lastModified: Date;
-  format?: keyof typeof FORMATS;
+  format?: Formats;
   locale?: string;
   className?: string;
 };
@@ -24,9 +16,22 @@ export type LastUpdatedProps = {
 export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
   const { markdown: { lastUpdatedBlock = {} } = {} } = useThemeConfig();
   const { useTranslate, useL10nConfig } = useThemeHooks();
+  const { format: timeagoFormat } = useTimeAgo();
   const { translate } = useTranslate();
   const { currentLocale } = useL10nConfig();
 
+  const formats: Record<Formats, (date: Date, locale: string) => string> = useMemo(
+    () => ({
+      timeago: (date: Date) => timeagoFormat(date),
+      iso: (date: Date) => date.toISOString().split('T')[0],
+      short: (date: Date, locale: string) =>
+        date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }),
+      long: (date: Date, locale: string) =>
+        date.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' }),
+    }),
+    [timeagoFormat],
+  );
+
   if (lastUpdatedBlock?.hide) {
     return null;
   }
@@ -40,7 +45,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
 
   const isoDate = lastModified.toISOString().split('T')[0];
 
-  const lastUpdatedString = FORMATS[format as keyof typeof FORMATS](lastModified, locale);
+  const lastUpdatedString = formats[format](lastModified, locale);
   const translationKey = format === 'timeago' ? 'page.lastUpdated.timeago' : 'page.lastUpdated.on';
 
   const text =

package/src/core/hooks/__mocks__/index.ts

@@ -24,3 +24,4 @@ export * from '@redocly/theme/core/hooks/use-product-picker';
 export * from '@redocly/theme/core/hooks/search/use-search-dialog';
 export * from '@redocly/theme/core/hooks/use-language-picker';
 export * from '@redocly/theme/core/hooks/__mocks__/use-element-size';
+export * from '@redocly/theme/core/hooks/__mocks__/use-time-ago';

package/src/core/hooks/__mocks__/use-time-ago.ts

@@ -0,0 +1,3 @@
+export const useTimeAgo = jest.fn(() => ({
+  format: () => '5 days ago',
+}));

package/src/core/hooks/index.ts

@@ -34,3 +34,4 @@ export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-walkthrough-c
 export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-panel';
 export * from '@redocly/theme/core/hooks/code-walkthrough/use-renderable-files';
 export * from '@redocly/theme/core/hooks/use-element-size';
+export * from '@redocly/theme/core/hooks/use-time-ago';

package/src/core/hooks/use-time-ago.ts

@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+
+import type { Plural, TranslationKey } from '@redocly/theme/core/types';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+const timeUnits = ['second', 'minute', 'hour', 'day', 'week', 'month', 'year'] as const;
+const timeUnitConversions = [
+  60, // 60 seconds in 1 min
+  60, // 60 mins in 1 hour
+  24, // 24 hours in 1 day
+  7, // 7 days in 1 week
+  365 / 7 / 12, // 4.345238095238096 weeks in 1 month
+  12, // 12 months in 1 year
+] as const;
+
+type TimeUnit = (typeof timeUnits)[number];
+
+export function useTimeAgo() {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const format = useCallback(
+    (date: Date) => {
+      let timeUnitIndex = 0;
+      let elapsedTime = (Date.now() - date.getTime()) / 1000;
+      for (
+        ;
+        elapsedTime >= timeUnitConversions[timeUnitIndex] &&
+        timeUnitIndex < timeUnitConversions.length;
+        timeUnitIndex++
+      ) {
+        elapsedTime /= timeUnitConversions[timeUnitIndex];
+      }
+      elapsedTime = Math.floor(elapsedTime);
+
+      if (timeUnitIndex === 0) return translate('time.justNow', 'just now');
+
+      let timeUnit: TimeUnit | Plural<TimeUnit> = timeUnits[timeUnitIndex];
+      if (elapsedTime > 1) timeUnit = `${timeUnit}s`;
+
+      const translationKey: TranslationKey = `time.past.${timeUnit}`;
+
+      return translate(translationKey, {
+        defaultValue: `${elapsedTime} ${timeUnit} ago`,
+        count: elapsedTime,
+        replace: { value: elapsedTime },
+      });
+    },
+    [translate],
+  );
+
+  return { format };
+}

package/src/core/types/common.ts

@@ -0,0 +1 @@
+export type Plural<T extends string> = `${T}s`;

package/src/core/types/index.ts

@@ -11,3 +11,4 @@ export * from '@redocly/theme/core/types/sidebar';
 export * from '@redocly/theme/core/types/filter';
 export * from '@redocly/theme/core/types/user-menu';
 export * from '@redocly/theme/core/types/user-claims';
+export * from '@redocly/theme/core/types/common';

package/src/core/types/l10n.ts

@@ -264,7 +264,22 @@ export type TranslationKey =
   | 'graphql.sample'
   | 'graphql.referenced'
   | 'codeWalkthrough.download'
-  | 'codeWalkthrough.preview';
+  | 'codeWalkthrough.preview'
+  | 'time.justNow'
+  | 'time.past.second'
+  | 'time.past.seconds'
+  | 'time.past.minute'
+  | 'time.past.minutes'
+  | 'time.past.hour'
+  | 'time.past.hours'
+  | 'time.past.day'
+  | 'time.past.days'
+  | 'time.past.week'
+  | 'time.past.weeks'
+  | 'time.past.month'
+  | 'time.past.months'
+  | 'time.past.year'
+  | 'time.past.years';
 
 export type Locale = { code: string; name: string };