@redocly/theme 0.9.0-beta.5 → 0.9.1

package/lib/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { FlattenSimpleInterpolation } from 'styled-components';
 export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
-export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | 'default' | string;
+export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
 export type ButtonVariant = 'outlined' | 'contained';
 export interface ButtonProps {
     color?: ButtonColor;

package/lib/Button/Button.js

@@ -74,7 +74,7 @@ exports.baseButtonStyles = (0, styled_components_1.css) `
   }
 `;
 const StyledButton = styled_components_1.default.button.attrs(({ color = 'default', extraClass, variant }) => ({
-    className: `button-color-${color}${variant ? ` ${variant}` : ''}${extraClass ? ` ${extraClass}` : ''}`,
+    className: `button-color-${color}${variant ? ` button-variant-${variant}` : ''}${extraClass ? ` ${extraClass}` : ''}`,
     'data-component-name': 'Button/Button',
 })) `
   text-decoration: none;
@@ -131,18 +131,6 @@ const StyledButton = styled_components_1.default.button.attrs(({ color = 'defaul
       animation: ${getBlink()} 1.2s infinite;
     `}
 
-  ${({ color }) => color === 'tertiary' &&
-    (0, styled_components_1.css) `
-      background-color: transparent;
-      border: none;
-      color: var(--text-color);
-
-      :hover {
-        border: none;
-        background: rgba(255, 255, 255, 0.65);
-      }
-    `}
-
   ${({ disabled }) => disabled &&
     (0, styled_components_1.css) `
       &,

package/lib/ReferenceDocs/DevOnboardingTryItSecurity.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { TryItSecurityProps } from './TryItSecurity';
-export declare function DevOnboardingTryItSecurity(props: TryItSecurityProps): JSX.Element | null;
+import type { TryItSecurityAppsProps } from './TryItSecurityApps';
+export declare function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps): JSX.Element | null;

package/lib/ReferenceDocs/DevOnboardingTryItSecurity.js

@@ -28,8 +28,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DevOnboardingTryItSecurity = void 0;
 const React = __importStar(require("react"));
-const _theme_1 = require("../index.js");
 const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../Button/Button");
 const usePageData_1 = require("../mocks/hooks/usePageData");
 const Dropdown_1 = require("./Dropdown");
 function DevOnboardingTryItSecurity(props) {
@@ -54,6 +54,7 @@ function DevOnboardingTryItSecurity(props) {
         else {
             setAppId('');
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.value]);
     React.useEffect(() => {
         initialRender.current = false;
@@ -77,7 +78,7 @@ function DevOnboardingTryItSecurity(props) {
                     .finally(() => setLoading(false));
             });
         }
-    }, []);
+    }, [apiId, userData === null || userData === void 0 ? void 0 : userData.isAuthenticated]);
     React.useEffect(() => {
         sessionStorage.setItem('redocly_onboarding:prevAppId', appId || '');
     }, [appId]);
@@ -124,7 +125,6 @@ const TryItDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
 `;
 const FormControl = styled_components_1.default.div `
   width: 100%;
-  /* font-family: var(--code-font-family); */
   display: flex;
   flex-direction: column;
   margin-bottom: 10px;
@@ -149,7 +149,7 @@ const FormLabel = styled_components_1.default.label `
       }
     `}
 `;
-const UseKeyButton = (0, styled_components_1.default)(_theme_1.Button) `
+const UseKeyButton = (0, styled_components_1.default)(Button_1.Button) `
   width: 100px;
   align-self: flex-end;
   margin-top: 16px;

package/lib/ReferenceDocs/TryItSecurityApps.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type TryItSecurityAppsProps = {
+    apiId?: string;
+    value?: string;
+    onChange: (newSecretKey: string) => void;
+};
+export declare function TryItSecurityApps(props: TryItSecurityAppsProps): JSX.Element | null;

package/lib/ReferenceDocs/{TryItSecurity.js → TryItSecurityApps.js}

@@ -3,13 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TryItSecurity = void 0;
+exports.TryItSecurityApps = void 0;
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../mocks/hooks");
 const DevOnboardingTryItSecurity_1 = require("./DevOnboardingTryItSecurity");
-function TryItSecurity(props) {
+function TryItSecurityApps(props) {
     const { hasDeveloperOnboarding } = (0, hooks_1.useGlobalData)() || {};
     return hasDeveloperOnboarding && props.apiId ? react_1.default.createElement(DevOnboardingTryItSecurity_1.DevOnboardingTryItSecurity, Object.assign({}, props)) : null;
 }
-exports.TryItSecurity = TryItSecurity;
-//# sourceMappingURL=TryItSecurity.js.map
+exports.TryItSecurityApps = TryItSecurityApps;
+//# sourceMappingURL=TryItSecurityApps.js.map

package/lib/ReferenceDocs/index.d.ts

@@ -1 +1 @@
-export * from './TryItSecurity';
+export * from './TryItSecurityApps';

package/lib/ReferenceDocs/index.js

@@ -14,5 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./TryItSecurity"), exports);
+__exportStar(require("./TryItSecurityApps"), exports);
 //# sourceMappingURL=index.js.map

package/lib/Sidebar/Sidebar.d.ts

@@ -1,5 +1,4 @@
 interface SidebarProps {
-    hasNavbar: boolean;
     opened?: boolean;
     animate?: boolean;
 }

package/lib/Sidebar/Sidebar.js

@@ -22,16 +22,12 @@ exports.Sidebar = styled_components_1.default.aside.attrs(() => ({
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
-
-  ${({ hasNavbar }) => `
-    top: ${hasNavbar ? 'var(--navbar-height)' : '0'};
-    height: calc(100vh ${hasNavbar ? '- var(--navbar-height)' : ''});
-  `};
+  top: var(--navbar-height);
 
   ${({ opened, animate }) => `
     opacity: ${opened ? '1' : '0'};
     pointer-events: ${opened ? 'auto' : 'none'};
-    
+
     & > * {
       transform: ${opened ? 'translate(0, 0)' : 'translate(0, 40px)'};
       transition: ${animate ? 'transform 0.65s ease, opacity 0.25s ease;' : 'none'};

package/lib/Sidebar/SidebarLayout.d.ts

@@ -9,7 +9,6 @@ interface SidebarLayoutProps {
     footer?: React.ReactNode;
     header?: React.ReactNode;
     growContent?: boolean;
-    hasNavbar: boolean;
 }
-export declare function SidebarLayout({ versions, menu, footer, header, growContent, hasNavbar, }: SidebarLayoutProps): JSX.Element | null;
+export declare function SidebarLayout({ versions, menu, footer, header, growContent, }: SidebarLayoutProps): JSX.Element | null;
 export {};

package/lib/Sidebar/SidebarLayout.js

@@ -14,7 +14,7 @@ const MobileSidebarButton_1 = require("../Sidebar/MobileSidebarButton");
 const MenuContainer_1 = require("../Sidebar/MenuContainer");
 const SidebarSearch_1 = require("../Search/SidebarSearch");
 const useThemeConfig_1 = require("../hooks/useThemeConfig");
-function SidebarLayout({ versions, menu, footer, header, growContent, hasNavbar, }) {
+function SidebarLayout({ versions, menu, footer, header, growContent, }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
     const toggleMenu = () => setIsOpen(!isOpen);
     const { search, sidebar } = (0, useThemeConfig_1.useThemeConfig)();
@@ -24,7 +24,7 @@ function SidebarLayout({ versions, menu, footer, header, growContent, hasNavbar,
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout" },
         react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu }),
         !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
-        react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen, hasNavbar: hasNavbar },
+        react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
             header ? react_1.default.createElement(HeaderWrapper_1.HeaderWrapper, null, header) : null,
             versions,
             react_1.default.createElement(MenuContainer_1.MenuContainer, { growContent: growContent }, menu),

package/lib/config.d.ts

@@ -1,4 +1,88 @@
 import { z } from 'zod';
+declare const MarkdownConfig: z.ZodDefault<z.ZodObject<{
+    frontMatterKeysToResolve: z.ZodOptional<z.ZodDefault<z.ZodArray<z.ZodString, "many">>>;
+    lastUpdatedBlock: z.ZodOptional<z.ZodDefault<z.ZodObject<z.extendShape<{
+        format: z.ZodOptional<z.ZodDefault<z.ZodEnum<["timeago", "iso", "long", "short"]>>>;
+        locale: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+    }, {
+        hide: z.ZodOptional<z.ZodBoolean>;
+    }>, "strip", z.ZodTypeAny, {
+        hide?: boolean | undefined;
+        format?: "timeago" | "iso" | "long" | "short" | undefined;
+        locale?: string | undefined;
+    }, {
+        hide?: boolean | undefined;
+        format?: "timeago" | "iso" | "long" | "short" | undefined;
+        locale?: string | undefined;
+    }>>>;
+    toc: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
+        header: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+        depth: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
+    }, {
+        hide: z.ZodOptional<z.ZodBoolean>;
+    }>, "strip", z.ZodTypeAny, {
+        hide?: boolean | undefined;
+        header?: string | undefined;
+        depth?: number | undefined;
+    }, {
+        hide?: boolean | undefined;
+        header?: string | undefined;
+        depth?: number | undefined;
+    }>>>;
+    editPage: z.ZodOptional<z.ZodDefault<z.ZodObject<z.extendShape<{
+        baseUrl: z.ZodOptional<z.ZodString>;
+        icon: z.ZodOptional<z.ZodString>;
+        text: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    }, {
+        hide: z.ZodOptional<z.ZodBoolean>;
+    }>, "strip", z.ZodTypeAny, {
+        hide?: boolean | undefined;
+        baseUrl?: string | undefined;
+        icon?: string | undefined;
+        text: string;
+    }, {
+        hide?: boolean | undefined;
+        baseUrl?: string | undefined;
+        icon?: string | undefined;
+        text?: string | undefined;
+    }>>>;
+}, "strict", z.ZodTypeAny, {
+    frontMatterKeysToResolve?: string[] | undefined;
+    lastUpdatedBlock?: {
+        hide?: boolean | undefined;
+        format?: "timeago" | "iso" | "long" | "short" | undefined;
+        locale?: string | undefined;
+    } | undefined;
+    editPage?: {
+        hide?: boolean | undefined;
+        baseUrl?: string | undefined;
+        icon?: string | undefined;
+        text: string;
+    } | undefined;
+    toc: {
+        hide?: boolean | undefined;
+        header?: string | undefined;
+        depth?: number | undefined;
+    };
+}, {
+    frontMatterKeysToResolve?: string[] | undefined;
+    lastUpdatedBlock?: {
+        hide?: boolean | undefined;
+        format?: "timeago" | "iso" | "long" | "short" | undefined;
+        locale?: string | undefined;
+    } | undefined;
+    toc?: {
+        hide?: boolean | undefined;
+        header?: string | undefined;
+        depth?: number | undefined;
+    } | undefined;
+    editPage?: {
+        hide?: boolean | undefined;
+        baseUrl?: string | undefined;
+        icon?: string | undefined;
+        text?: string | undefined;
+    } | undefined;
+}>>;
 export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     imports: z.ZodOptional<z.ZodDefault<z.ZodArray<z.ZodString, "many">>>;
     logo: z.ZodOptional<z.ZodObject<{
@@ -417,9 +501,9 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             text: string;
         }, {
             hide?: boolean | undefined;
-            text?: string | undefined;
             baseUrl?: string | undefined;
             icon?: string | undefined;
+            text?: string | undefined;
         }>>>;
     }, "strict", z.ZodTypeAny, {
         frontMatterKeysToResolve?: string[] | undefined;
@@ -453,9 +537,9 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         } | undefined;
         editPage?: {
             hide?: boolean | undefined;
-            text?: string | undefined;
             baseUrl?: string | undefined;
             icon?: string | undefined;
+            text?: string | undefined;
         } | undefined;
     }>>>;
     openapi: z.ZodOptional<z.ZodObject<{}, "passthrough", z.ZodTypeAny, {}, {}>>;
@@ -479,6 +563,23 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         logoutRedirect?: string | undefined;
     }>>>;
 }, "passthrough", z.ZodTypeAny, {
+    links?: {
+        type?: string | undefined;
+        crossorigin?: string | undefined;
+        fetchpriority?: string | undefined;
+        integrity?: string | undefined;
+        referrerpolicy?: string | undefined;
+        as?: string | undefined;
+        hreflang?: string | undefined;
+        imagesizes?: string | undefined;
+        imagesrcset?: string | undefined;
+        media?: string | undefined;
+        prefetch?: string | undefined;
+        rel?: string | undefined;
+        sizes?: string | undefined;
+        title?: string | undefined;
+        href: string;
+    }[] | undefined;
     imports?: string[] | undefined;
     logo?: {
         image?: string | undefined;
@@ -526,23 +627,6 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             src: string;
         }[] | undefined;
     } | undefined;
-    links?: {
-        type?: string | undefined;
-        crossorigin?: string | undefined;
-        fetchpriority?: string | undefined;
-        integrity?: string | undefined;
-        referrerpolicy?: string | undefined;
-        as?: string | undefined;
-        hreflang?: string | undefined;
-        imagesizes?: string | undefined;
-        imagesrcset?: string | undefined;
-        media?: string | undefined;
-        prefetch?: string | undefined;
-        rel?: string | undefined;
-        sizes?: string | undefined;
-        title?: string | undefined;
-        href: string;
-    }[] | undefined;
     feedback?: {
         hide?: boolean | undefined;
         settings?: string | undefined;
@@ -611,6 +695,23 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         logoutRedirect?: string | undefined;
     };
 }, {
+    links?: {
+        type?: string | undefined;
+        crossorigin?: string | undefined;
+        fetchpriority?: string | undefined;
+        integrity?: string | undefined;
+        referrerpolicy?: string | undefined;
+        as?: string | undefined;
+        hreflang?: string | undefined;
+        imagesizes?: string | undefined;
+        imagesrcset?: string | undefined;
+        media?: string | undefined;
+        prefetch?: string | undefined;
+        rel?: string | undefined;
+        sizes?: string | undefined;
+        title?: string | undefined;
+        href: string;
+    }[] | undefined;
     imports?: string[] | undefined;
     logo?: {
         image?: string | undefined;
@@ -658,23 +759,6 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             src: string;
         }[] | undefined;
     } | undefined;
-    links?: {
-        type?: string | undefined;
-        crossorigin?: string | undefined;
-        fetchpriority?: string | undefined;
-        integrity?: string | undefined;
-        referrerpolicy?: string | undefined;
-        as?: string | undefined;
-        hreflang?: string | undefined;
-        imagesizes?: string | undefined;
-        imagesrcset?: string | undefined;
-        media?: string | undefined;
-        prefetch?: string | undefined;
-        rel?: string | undefined;
-        sizes?: string | undefined;
-        title?: string | undefined;
-        href: string;
-    }[] | undefined;
     feedback?: {
         type?: string | undefined;
         hide?: boolean | undefined;
@@ -728,9 +812,9 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         } | undefined;
         editPage?: {
             hide?: boolean | undefined;
-            text?: string | undefined;
             baseUrl?: string | undefined;
             icon?: string | undefined;
+            text?: string | undefined;
         } | undefined;
     } | undefined;
     openapi?: {} | undefined;
@@ -759,3 +843,5 @@ export type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'links' | 's
         shortcuts?: string[];
     };
 };
+export type MarkdownConfig = z.infer<typeof MarkdownConfig>;
+export {};

package/lib/config.js

@@ -47,6 +47,37 @@ const LinksConfig = zod_1.z
     type: zod_1.z.string().optional(),
 })
     .passthrough();
+const MarkdownConfig = zod_1.z
+    .object({
+    frontMatterKeysToResolve: zod_1.z.array(zod_1.z.string()).default(['image', 'links']).optional(),
+    lastUpdatedBlock: zod_1.z
+        .object({
+        format: zod_1.z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
+        locale: zod_1.z.string().default('en-US').optional(),
+    })
+        .extend(HideConfig.shape)
+        .default({})
+        .optional(),
+    toc: zod_1.z
+        .object({
+        header: zod_1.z.string().default('On this page').optional(),
+        depth: zod_1.z.number().default(3).optional(),
+    })
+        .extend(HideConfig.shape)
+        .optional()
+        .default({}),
+    editPage: zod_1.z
+        .object({
+        baseUrl: zod_1.z.string().optional(),
+        icon: zod_1.z.string().optional(),
+        text: zod_1.z.string().optional().default('Edit this page'),
+    })
+        .extend(HideConfig.shape)
+        .default({})
+        .optional(),
+})
+    .strict()
+    .default({});
 exports.ThemeConfig = zod_1.z
     .object({
     imports: zod_1.z.array(zod_1.z.string()).default([]).optional(),
@@ -141,38 +172,7 @@ exports.ThemeConfig = zod_1.z
         .strict()
         .default({})
         .optional(),
-    markdown: zod_1.z
-        .object({
-        frontMatterKeysToResolve: zod_1.z.array(zod_1.z.string()).default(['image', 'links']).optional(),
-        lastUpdatedBlock: zod_1.z
-            .object({
-            format: zod_1.z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
-            locale: zod_1.z.string().default('en-US').optional(),
-        })
-            .extend(HideConfig.shape)
-            .default({})
-            .optional(),
-        toc: zod_1.z
-            .object({
-            header: zod_1.z.string().default('On this page').optional(),
-            depth: zod_1.z.number().default(3).optional(),
-        })
-            .extend(HideConfig.shape)
-            .optional()
-            .default({}),
-        editPage: zod_1.z
-            .object({
-            baseUrl: zod_1.z.string().optional(),
-            icon: zod_1.z.string().optional(),
-            text: zod_1.z.string().optional().default('Edit this page'),
-        })
-            .extend(HideConfig.shape)
-            .default({})
-            .optional(),
-    })
-        .strict()
-        .default({})
-        .optional(),
+    markdown: MarkdownConfig.optional(),
     openapi: zod_1.z.object({}).passthrough().optional(),
     graphql: zod_1.z.object({}).passthrough().optional(),
     analytics: zod_1.z.any().optional(),

package/lib/globalStyle.js

@@ -876,6 +876,7 @@ const apiReferencePanels = (0, styled_components_1.css) `
   .panel-request-samples,
   .panel-response-samples,
   .panel-callback-samples {
+    --text-color: var(--panel-samples-text-color);
     --panel-text-color: var(--panel-samples-text-color); // @presenter Color
     --panel-font-family-local: var(--panel-samples-font-family);
     --panel-font-size-local: var(--panel-samples-font-size);

package/lib/mocks/useGlobalData.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useGlobalData = void 0;
 function useGlobalData() {
-    console.log('>>>> mock');
     return {};
 }
 exports.useGlobalData = useGlobalData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.9.0-beta.5",
+  "version": "0.9.1",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -92,16 +92,16 @@
     "ts-jest": "^29.0.3",
     "ts-node": "^10.7.0",
     "ts-node-dev": "^2.0.0",
-    "tsc-alias": "^1.7.0",
+    "tsc-alias": "^1.8.2",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4",
     "webpack": "^5.72.0",
     "zod": ">=3.19.1"
   },
   "dependencies": {
+    "highlight-words-core": "^1.2.2",
     "hotkeys-js": "^3.10.1",
-    "timeago.js": "^4.0.2",
-    "highlight-words-core": "^1.2.2"
+    "timeago.js": "^4.0.2"
   },
   "nx": {
     "namedInputs": {

package/src/Button/Button.tsx

@@ -6,7 +6,7 @@ import type { FlattenSimpleInterpolation, Keyframes } from 'styled-components';
 import { Link } from '@portal/Link';
 
 export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
-export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | 'default' | string;
+export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
 export type ButtonVariant = 'outlined' | 'contained';
 
 export interface ButtonProps {
@@ -69,7 +69,7 @@ export const baseButtonStyles = css`
 
 const StyledButton = styled.button.attrs(
   ({ color = 'default', extraClass, variant }: ButtonProps) => ({
-    className: `button-color-${color}${variant ? ` ${variant}` : ''}${
+    className: `button-color-${color}${variant ? ` button-variant-${variant}` : ''}${
       extraClass ? ` ${extraClass}` : ''
     }`,
     'data-component-name': 'Button/Button',
@@ -131,19 +131,6 @@ const StyledButton = styled.button.attrs(
       animation: ${getBlink()} 1.2s infinite;
     `}
 
-  ${({ color }) =>
-    color === 'tertiary' &&
-    css`
-      background-color: transparent;
-      border: none;
-      color: var(--text-color);
-
-      :hover {
-        border: none;
-        background: rgba(255, 255, 255, 0.65);
-      }
-    `}
-
   ${({ disabled }) =>
     disabled &&
     css`

package/src/ReferenceDocs/ClearButton.tsx

@@ -1,6 +1,8 @@
 import React, { memo } from 'react';
 import styled from 'styled-components';
 
+// FIXME!!!
+
 interface ClearButtonProps {
   className?: string;
   style?: React.CSSProperties;

package/src/ReferenceDocs/DevOnboardingTryItSecurity.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { Button } from '@theme';
 import styled from 'styled-components';
 
-import type { TryItSecurityProps } from './TryItSecurity';
+import type { TryItSecurityAppsProps } from './TryItSecurityApps';
 
+import { Button } from '@theme/Button/Button';
 import { usePageData } from '@portal/hooks/usePageData';
 
 import { Dropdown } from './Dropdown';
 
-export function DevOnboardingTryItSecurity(props: TryItSecurityProps) {
+export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
   const apiId = (props as any).apiId;
 
   // @ts-ignore
@@ -33,6 +33,7 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityProps) {
     } else {
       setAppId('');
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.value]);
 
   React.useEffect(() => {
@@ -56,7 +57,7 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityProps) {
           .finally(() => setLoading(false));
       });
     }
-  }, []);
+  }, [apiId, userData?.isAuthenticated]);
 
   React.useEffect(() => {
     sessionStorage.setItem('redocly_onboarding:prevAppId', appId || '');
@@ -125,7 +126,6 @@ const TryItDropdown = styled(Dropdown)`
 
 const FormControl = styled.div`
   width: 100%;
-  /* font-family: var(--code-font-family); */
   display: flex;
   flex-direction: column;
   margin-bottom: 10px;

package/src/ReferenceDocs/{TryItSecurity.tsx → TryItSecurityApps.tsx}

@@ -4,13 +4,13 @@ import { useGlobalData } from '@portal/hooks';
 
 import { DevOnboardingTryItSecurity } from './DevOnboardingTryItSecurity';
 
-export type TryItSecurityProps = {
+export type TryItSecurityAppsProps = {
   apiId?: string;
   value?: string;
   onChange: (newSecretKey: string) => void;
 };
 
-export function TryItSecurity(props: TryItSecurityProps) {
+export function TryItSecurityApps(props: TryItSecurityAppsProps) {
   const { hasDeveloperOnboarding } = useGlobalData() || {};
 
   return hasDeveloperOnboarding && props.apiId ? <DevOnboardingTryItSecurity {...props} /> : null;

package/src/ReferenceDocs/index.ts

@@ -1 +1 @@
-export * from './TryItSecurity';
+export * from './TryItSecurityApps';

package/src/Sidebar/Sidebar.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 
 interface SidebarProps {
-  hasNavbar: boolean;
   opened?: boolean;
   animate?: boolean;
 }
@@ -23,16 +22,12 @@ export const Sidebar = styled.aside.attrs(() => ({
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
-
-  ${({ hasNavbar }) => `
-    top: ${hasNavbar ? 'var(--navbar-height)' : '0'};
-    height: calc(100vh ${hasNavbar ? '- var(--navbar-height)' : ''});
-  `};
+  top: var(--navbar-height);
 
   ${({ opened, animate }) => `
     opacity: ${opened ? '1' : '0'};
     pointer-events: ${opened ? 'auto' : 'none'};
-    
+
     & > * {
       transform: ${opened ? 'translate(0, 0)' : 'translate(0, 40px)'};
       transition: ${animate ? 'transform 0.65s ease, opacity 0.25s ease;' : 'none'};

package/src/Sidebar/SidebarLayout.tsx

@@ -20,8 +20,6 @@ interface SidebarLayoutProps {
   footer?: React.ReactNode;
   header?: React.ReactNode;
   growContent?: boolean;
-
-  hasNavbar: boolean;
 }
 
 export function SidebarLayout({
@@ -30,7 +28,6 @@ export function SidebarLayout({
   footer,
   header,
   growContent,
-  hasNavbar,
 }: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
@@ -45,7 +42,7 @@ export function SidebarLayout({
       <MobileSidebarButton opened={isOpen} onClick={toggleMenu} />
 
       {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
-      <Sidebar animate={true} opened={isOpen} hasNavbar={hasNavbar}>
+      <Sidebar animate={true} opened={isOpen}>
         {header ? <HeaderWrapper>{header}</HeaderWrapper> : null}
         {versions}
         <MenuContainer growContent={growContent}>{menu}</MenuContainer>

package/src/config.ts

@@ -50,6 +50,38 @@ const LinksConfig = z
   })
   .passthrough();
 
+const MarkdownConfig = z
+  .object({
+    frontMatterKeysToResolve: z.array(z.string()).default(['image', 'links']).optional(),
+    lastUpdatedBlock: z
+      .object({
+        format: z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
+        locale: z.string().default('en-US').optional(),
+      })
+      .extend(HideConfig.shape)
+      .default({})
+      .optional(),
+    toc: z
+      .object({
+        header: z.string().default('On this page').optional(),
+        depth: z.number().default(3).optional(),
+      })
+      .extend(HideConfig.shape)
+      .optional()
+      .default({}),
+    editPage: z
+      .object({
+        baseUrl: z.string().optional(),
+        icon: z.string().optional(),
+        text: z.string().optional().default('Edit this page'),
+      })
+      .extend(HideConfig.shape)
+      .default({})
+      .optional(),
+  })
+  .strict()
+  .default({});
+
 export const ThemeConfig = z
   .object({
     imports: z.array(z.string()).default([]).optional(),
@@ -150,38 +182,7 @@ export const ThemeConfig = z
       .strict()
       .default({})
       .optional(),
-    markdown: z
-      .object({
-        frontMatterKeysToResolve: z.array(z.string()).default(['image', 'links']).optional(),
-        lastUpdatedBlock: z
-          .object({
-            format: z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
-            locale: z.string().default('en-US').optional(),
-          })
-          .extend(HideConfig.shape)
-          .default({})
-          .optional(),
-        toc: z
-          .object({
-            header: z.string().default('On this page').optional(),
-            depth: z.number().default(3).optional(),
-          })
-          .extend(HideConfig.shape)
-          .optional()
-          .default({}),
-        editPage: z
-          .object({
-            baseUrl: z.string().optional(),
-            icon: z.string().optional(),
-            text: z.string().optional().default('Edit this page'),
-          })
-          .extend(HideConfig.shape)
-          .default({})
-          .optional(),
-      })
-      .strict()
-      .default({})
-      .optional(),
+    markdown: MarkdownConfig.optional(),
     openapi: z.object({}).passthrough().optional(),
     graphql: z.object({}).passthrough().optional(),
     analytics: z.any().optional(),
@@ -215,3 +216,5 @@ export type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'links' | 's
     shortcuts?: string[];
   };
 };
+
+export type MarkdownConfig = z.infer<typeof MarkdownConfig>;

package/src/globalStyle.ts

@@ -884,6 +884,7 @@ const apiReferencePanels = css`
   .panel-request-samples,
   .panel-response-samples,
   .panel-callback-samples {
+    --text-color: var(--panel-samples-text-color);
     --panel-text-color: var(--panel-samples-text-color); // @presenter Color
     --panel-font-family-local: var(--panel-samples-font-family);
     --panel-font-size-local: var(--panel-samples-font-size);

package/src/mocks/useGlobalData.tsx

@@ -1,4 +1,3 @@
 export function useGlobalData(): Record<string, unknown> {
-  console.log('>>>> mock');
   return {};
 }

package/lib/ReferenceDocs/TryItSecurity.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export type TryItSecurityProps = {
-    apiId?: string;
-    value?: string;
-    onChange: (newSecretKey: string) => void;
-};
-export declare function TryItSecurity(props: TryItSecurityProps): JSX.Element | null;