@redocly/theme 0.51.0 → 0.52.0-next.1

package/lib/components/Search/SearchAiMessage.js

@@ -17,19 +17,19 @@ function SearchAiMessage({ role, content, isThinking, resources, className, }) {
     const { useMarkdownText, useTranslate } = (0, hooks_1.useThemeHooks)();
     const markDownContent = useMarkdownText(content || '');
     const { translate } = useTranslate();
-    return (react_1.default.createElement(SearchAiMessageWrapper, { "data-component-name": "Search/SearchAiMessage", role: role, className: className },
+    return (react_1.default.createElement(SearchAiMessageWrapper, { "data-component-name": "Search/SearchAiMessage", role: role, className: className, "data-testid": "search-ai-message" },
         role === constants_1.AiSearchConversationRole.ASSISTANT && (react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { size: "32px", background: "var(--search-ai-icon-bg-color)", borderRadius: "var(--border-radius-lg)", color: "var(--search-ai-icon-color)", margin: "0 var(--spacing-xs) 0 0" })),
         react_1.default.createElement(MessageWrapper, { role: role },
             role === constants_1.AiSearchConversationRole.ASSISTANT ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(ResponseText, { as: "div", children: markDownContent }),
-                !isThinking && resources && resources.length > 0 && (react_1.default.createElement(ResourcesWrapper, null,
+                react_1.default.createElement(ResponseText, { as: "div", children: markDownContent, "data-testid": "response-text" }),
+                !isThinking && resources && resources.length > 0 && (react_1.default.createElement(ResourcesWrapper, { "data-testid": "resources-wrapper" },
                     react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
                         resources.length,
                         " ",
                         translate('search.ai.resourcesFound', 'resources found')),
                     react_1.default.createElement(ResourceTagsWrapper, null, resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: idx, to: resource.url, target: "_blank" },
                         react_1.default.createElement(ResourceTag, { borderless: true, icon: react_1.default.createElement(DocumentIcon_1.DocumentIcon, { color: "--search-ai-resource-tag-icon-color" }) }, resource.title))))))))) : (content),
-            isThinking && content.length === 0 && (react_1.default.createElement(ThinkingDotsWrapper, null,
+            isThinking && content.length === 0 && (react_1.default.createElement(ThinkingDotsWrapper, { "data-testid": "thinking-dots-wrapper" },
                 react_1.default.createElement(ThinkingDot, null),
                 react_1.default.createElement(ThinkingDot, null),
                 react_1.default.createElement(ThinkingDot, null))))));

package/lib/core/styles/global.js

@@ -950,19 +950,36 @@ const pages = (0, styled_components_1.css) `
   --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm);
 
   // @tokens End
+
+  /**
+    * @tokens 500 Page
+    * @presenter Color
+    */
+
+  --page-500-font-family: var(--font-family-base); // @presenter FontFamily
+  --page-500-margin-vertical: var(--spacing-xl);
+  --page-500-margin-horizontal: calc(var(--spacing-xxl) * 2);
+  --page-500-gap: var(--spacing-lg);
+  --page-500-max-width: 680px;
+
+  --page-500-status-text-color: var(--text-color-helper);
+  --page-500-status-font-size: var(--font-size-lg); // @presenter FontSize
+  --page-500-status-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --page-500-status-line-height: var(--line-height-lg); // @presenter LineHeight
+
+  --page-500-title-text-color: var(--text-color-primary);
+  --page-500-title-font-size: 42px; // @presenter FontSize
+  --page-500-title-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --page-500-title-line-height: 50px; // @presenter LineHeight
+  --page-500-status-line-height: var(--line-height-lg); // @presenter LineHeight
+
+  --page-500-description-text-color: var(--text-color-secondary);
+  --page-500-description-font-size: var(--font-size-xl); // @presenter FontSize
+  --page-500-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --page-500-description-line-height: var(--line-height-xl); // @presenter LineHeight
+
+  // @tokens End
 `;
-// //
-// --color-raspberry-1: #612241;
-//     --color-raspberry-2: #77214c;
-//     --color-raspberry-3: #901d56;
-//     --color-raspberry-4: #b3185e;
-//     --color-raspberry-5: #d6236a;
-//     --color-raspberry-6: #f9316d;
-//     --color-raspberry-7: #fb6382;
-//     --color-raspberry-8: #fd838f;
-//     --color-raspberry-9: #feacad;
-//     --color-raspberry-10: #fed9d5;
-//     --color-raspberry-11: #fef0ef;
 const error = (0, styled_components_1.css) `
   --error-bubble-padding: var(--spacing-sm);
   --error-bubble-gap: var(--spacing-xxs);

package/lib/index.d.ts

@@ -228,5 +228,6 @@ export * from './layouts/Forbidden';
 export * from './layouts/OIDCForbidden';
 export * from './layouts/ThreePanelLayout';
 export * from './layouts/CodeWalkthroughLayout';
+export * from './layouts/InternalServerErrorLayout';
 export * as markdoc from './markdoc/default';
 export * from './components/DatePicker/DatePicker';

package/lib/index.js

@@ -281,6 +281,7 @@ __exportStar(require("./layouts/Forbidden"), exports);
 __exportStar(require("./layouts/OIDCForbidden"), exports);
 __exportStar(require("./layouts/ThreePanelLayout"), exports);
 __exportStar(require("./layouts/CodeWalkthroughLayout"), exports);
+__exportStar(require("./layouts/InternalServerErrorLayout"), exports);
 /* Markdoc */
 exports.markdoc = __importStar(require("./markdoc/default"));
 /* DatePicker */

package/lib/layouts/InternalServerErrorLayout.d.ts

@@ -0,0 +1 @@
+export declare function InternalServerErrorLayout(): JSX.Element;

package/lib/layouts/InternalServerErrorLayout.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalServerErrorLayout = InternalServerErrorLayout;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../core/hooks");
+const Button_1 = require("../components/Button/Button");
+const ArrowLeftIcon_1 = require("../icons/ArrowLeftIcon/ArrowLeftIcon");
+function InternalServerErrorLayout() {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "layouts/InternalServerError" },
+        react_1.default.createElement(StatusText, null, "500"),
+        react_1.default.createElement(Title, { "data-translation-key": "page.internalServerError.title" }, translate('page.internalServerError.title', 'Internal Server Error')),
+        react_1.default.createElement(Description, { "data-translation-key": "page.internalServerError.description" }, translate('page.internalServerError.description', 'Something went wrong on our end. Please try again later or contact support if the problem persists.')),
+        react_1.default.createElement(Button_1.Button, { variant: "primary", size: "large", to: "/", "data-translation-key": "page.homeButton", icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null) }, translate('page.homeButton', 'Go home'))));
+}
+const Wrapper = styled_components_1.default.div `
+  height: 100%;
+  max-width: var(--page-500-max-width);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: var(--page-500-margin-vertical) var(--page-500-margin-horizontal);
+  font-family: var(--page-500-font-family);
+  gap: var(--page-500-gap);
+`;
+const StatusText = styled_components_1.default.div `
+  color: var(--page-500-status-text-color);
+  font-size: var(--page-500-status-font-size);
+  line-height: var(--page-500-status-line-height);
+  font-weight: var(--page-500-status-font-weight);
+`;
+const Title = styled_components_1.default.div `
+  color: var(--page-500-title-text-color);
+  font-size: var(--page-500-title-font-size);
+  line-height: var(--page-500-title-line-height);
+  font-weight: var(--page-500-title-font-weight);
+`;
+const Description = styled_components_1.default.div `
+  color: var(--page-500-description-text-color);
+  font-size: var(--page-500-description-font-size);
+  line-height: var(--page-500-description-line-height);
+  font-weight: var(--page-500-description-font-weight);
+`;
+//# sourceMappingURL=InternalServerErrorLayout.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.51.0",
+  "version": "0.52.0-next.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -39,7 +39,7 @@
     "@markdoc/markdoc": "0.5.1",
     "@shikijs/types": "1.24.2",
     "@testing-library/jest-dom": "6.1.5",
-    "@testing-library/react": "14.1.2",
+    "@testing-library/react": "15.0.6",
     "@testing-library/user-event": "14.5.1",
     "@types/file-saver": "2.0.7",
     "@types/highlight-words-core": "1.2.3",
@@ -48,11 +48,11 @@
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.throttle": "4.1.9",
     "@types/node": "22.10.5",
+    "@types/nprogress": "0.2.3",
     "@types/react": "18.3.9",
     "@types/react-dom": "18.3.5",
     "@types/styled-components": "5.1.34",
     "@types/styled-system": "5.1.22",
-    "@types/nprogress": "0.2.3",
     "concurrently": "7.6.0",
     "jest": "29.5.0",
     "jest-environment-jsdom": "29.5.0",
@@ -75,19 +75,20 @@
     "webpack": "5.94.0"
   },
   "dependencies": {
+    "@tanstack/react-virtual": "3.13.0",
     "copy-to-clipboard": "3.3.3",
     "file-saver": "2.0.5",
     "highlight-words-core": "1.2.2",
     "hotkeys-js": "3.10.1",
+    "i18next": "22.4.15",
     "jszip": "3.10.1",
     "lodash.debounce": "4.0.8",
     "lodash.throttle": "4.1.1",
+    "nprogress": "0.2.0",
     "react-calendar": "4.2.1",
     "react-date-picker": "10.0.3",
     "timeago.js": "4.0.2",
-    "i18next": "22.4.15",
-    "nprogress": "0.2.0",
-    "@redocly/config": "0.22.0"
+    "@redocly/config": "0.22.1"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Search/SearchAiMessage.tsx

@@ -36,6 +36,7 @@ export function SearchAiMessage({
       data-component-name="Search/SearchAiMessage"
       role={role}
       className={className}
+      data-testid="search-ai-message"
     >
       {role === AiSearchConversationRole.ASSISTANT && (
         <AiStarsIcon
@@ -49,9 +50,9 @@ export function SearchAiMessage({
       <MessageWrapper role={role}>
         {role === AiSearchConversationRole.ASSISTANT ? (
           <>
-            <ResponseText as="div" children={markDownContent} />
+            <ResponseText as="div" children={markDownContent} data-testid="response-text" />
             {!isThinking && resources && resources.length > 0 && (
-              <ResourcesWrapper>
+              <ResourcesWrapper data-testid="resources-wrapper">
                 <ResourcesTitle data-translation-key="search.ai.resourcesFound">
                   {resources.length} {translate('search.ai.resourcesFound', 'resources found')}
                 </ResourcesTitle>
@@ -74,7 +75,7 @@ export function SearchAiMessage({
           content
         )}
         {isThinking && content.length === 0 && (
-          <ThinkingDotsWrapper>
+          <ThinkingDotsWrapper data-testid="thinking-dots-wrapper">
             <ThinkingDot />
             <ThinkingDot />
             <ThinkingDot />

package/src/core/styles/global.ts

@@ -962,19 +962,36 @@ const pages = css`
   --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm);
 
   // @tokens End
+
+  /**
+    * @tokens 500 Page
+    * @presenter Color
+    */
+
+  --page-500-font-family: var(--font-family-base); // @presenter FontFamily
+  --page-500-margin-vertical: var(--spacing-xl);
+  --page-500-margin-horizontal: calc(var(--spacing-xxl) * 2);
+  --page-500-gap: var(--spacing-lg);
+  --page-500-max-width: 680px;
+
+  --page-500-status-text-color: var(--text-color-helper);
+  --page-500-status-font-size: var(--font-size-lg); // @presenter FontSize
+  --page-500-status-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --page-500-status-line-height: var(--line-height-lg); // @presenter LineHeight
+
+  --page-500-title-text-color: var(--text-color-primary);
+  --page-500-title-font-size: 42px; // @presenter FontSize
+  --page-500-title-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --page-500-title-line-height: 50px; // @presenter LineHeight
+  --page-500-status-line-height: var(--line-height-lg); // @presenter LineHeight
+
+  --page-500-description-text-color: var(--text-color-secondary);
+  --page-500-description-font-size: var(--font-size-xl); // @presenter FontSize
+  --page-500-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --page-500-description-line-height: var(--line-height-xl); // @presenter LineHeight
+
+  // @tokens End
 `;
-// //
-// --color-raspberry-1: #612241;
-//     --color-raspberry-2: #77214c;
-//     --color-raspberry-3: #901d56;
-//     --color-raspberry-4: #b3185e;
-//     --color-raspberry-5: #d6236a;
-//     --color-raspberry-6: #f9316d;
-//     --color-raspberry-7: #fb6382;
-//     --color-raspberry-8: #fd838f;
-//     --color-raspberry-9: #feacad;
-//     --color-raspberry-10: #fed9d5;
-//     --color-raspberry-11: #fef0ef;
 const error = css`
   --error-bubble-padding: var(--spacing-sm);
   --error-bubble-gap: var(--spacing-xxs);

package/src/index.ts

@@ -253,6 +253,7 @@ export * from '@redocly/theme/layouts/Forbidden';
 export * from '@redocly/theme/layouts/OIDCForbidden';
 export * from '@redocly/theme/layouts/ThreePanelLayout';
 export * from '@redocly/theme/layouts/CodeWalkthroughLayout';
+export * from '@redocly/theme/layouts/InternalServerErrorLayout';
 /* Markdoc */
 export * as markdoc from '@redocly/theme/markdoc/default';
 /* DatePicker */

package/src/layouts/InternalServerErrorLayout.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
+
+export function InternalServerErrorLayout(): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  return (
+    <Wrapper data-component-name="layouts/InternalServerError">
+      <StatusText>500</StatusText>
+      <Title data-translation-key="page.internalServerError.title">
+        {translate('page.internalServerError.title', 'Internal Server Error')}
+      </Title>
+      <Description data-translation-key="page.internalServerError.description">
+        {translate(
+          'page.internalServerError.description',
+          'Something went wrong on our end. Please try again later or contact support if the problem persists.',
+        )}
+      </Description>
+      <Button
+        variant="primary"
+        size="large"
+        to="/"
+        data-translation-key="page.homeButton"
+        icon={<ArrowLeftIcon />}
+      >
+        {translate('page.homeButton', 'Go home')}
+      </Button>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  height: 100%;
+  max-width: var(--page-500-max-width);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: var(--page-500-margin-vertical) var(--page-500-margin-horizontal);
+  font-family: var(--page-500-font-family);
+  gap: var(--page-500-gap);
+`;
+
+const StatusText = styled.div`
+  color: var(--page-500-status-text-color);
+  font-size: var(--page-500-status-font-size);
+  line-height: var(--page-500-status-line-height);
+  font-weight: var(--page-500-status-font-weight);
+`;
+
+const Title = styled.div`
+  color: var(--page-500-title-text-color);
+  font-size: var(--page-500-title-font-size);
+  line-height: var(--page-500-title-line-height);
+  font-weight: var(--page-500-title-font-weight);
+`;
+
+const Description = styled.div`
+  color: var(--page-500-description-text-color);
+  font-size: var(--page-500-description-font-size);
+  line-height: var(--page-500-description-line-height);
+  font-weight: var(--page-500-description-font-weight);
+`;