@redocly/theme 0.1.26 → 0.1.29

package/src/Navbar/Navbar.tsx

@@ -5,6 +5,9 @@ import { useThemeSettings } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { ResolvedConfigLinks } from '@theme/types/portal';
 import { NavbarMenu } from '@theme/Navbar';
+import { useMobileMenu } from '@theme/hooks/useMobileMenu';
+import { MobileNavbarMenuButton } from '@theme/Navbar/MobileNavbarMenuButton';
+import { MobileNavbarMenu } from '@theme/Navbar/MobileNavbarMenu';
 
 interface NavbarProps {
   menu: ResolvedConfigLinks;
@@ -13,17 +16,22 @@ interface NavbarProps {
 }
 
 export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element | null {
-  const settings = useThemeSettings(DEFAULT_THEME_NAME);
-  const searchSettings = settings.search;
+  const [isOpen, setIsOpen] = useMobileMenu(false);
+  const { search: searchSettings, navbar } = useThemeSettings(DEFAULT_THEME_NAME);
   const hideSearch =
     searchSettings?.hide || (searchSettings?.placement && searchSettings?.placement !== 'navbar');
 
-  if (settings?.navbar?.hide) {
+  if (navbar?.hide) {
     return null;
   }
 
+  const openMobileMenu = () => setIsOpen(true);
+  const closeMobileMenu = () => setIsOpen(false);
+
   return (
     <NavbarContainer data-component-name="Navbar/Navbar">
+      <MobileNavbarMenuButton onClick={openMobileMenu} />
+      {isOpen && <MobileNavbarMenu closeMenu={closeMobileMenu} menuItems={menu} />}
       {logo}
       <NavbarMenu menuItems={menu} />
       {hideSearch ? null : search}

package/src/Navbar/NavbarDropdown.tsx

@@ -31,7 +31,7 @@ export const DropdownWrapper = styled.div`
   box-shadow: var(--navbar-dropdown-shadow);
   & > div {
     text-align: left;
-    padding: 10px 0px;
+    padding: 10px 0;
     cursor: pointer;
     a {
       color: var(--navbar-text-color);

package/src/Navbar/NavbarItem.tsx

@@ -11,18 +11,19 @@ import { Link } from '@portal/Link';
 import { withPathPrefix } from '@portal/utils';
 import { NavbarDropdown, DropdownWrapper } from '@theme/Navbar/NavbarDropdown';
 
-interface NavbarItemProps {
+export interface NavbarItemProps {
   navItem: ResolvedNavItem;
+  className?: string;
 }
 
-export function NavbarItem({ navItem }: NavbarItemProps): JSX.Element | null {
+export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null {
   const { pathname } = useLocation();
 
   if ((navItem as ResolvedNavLinkItem).link) {
     const item = navItem as ResolvedNavLinkItem;
     const isActive = pathname === withPathPrefix(item.link);
     return (
-      <NavMenuItem active={isActive} data-component-name="Navbar/NavbarItem">
+      <NavMenuItem active={isActive} data-component-name="Navbar/NavbarItem" className={className}>
         <NavLink to={item.link} active={isActive}>
           <NavLabel>{item.label}</NavLabel>
         </NavLink>
@@ -34,7 +35,7 @@ export function NavbarItem({ navItem }: NavbarItemProps): JSX.Element | null {
     const item = navItem as ResolvedNavGroupItem;
     return (
       <NavMenuItemWithDropdownWrapper>
-        <NavMenuItem active={false} data-component-name="Navbar/NavbarItem">
+        <NavMenuItem active={false} data-component-name="Navbar/NavbarItem" className={className}>
           <NavLabel>{item.label}</NavLabel>
         </NavMenuItem>
         <NavbarDropdown items={item.items as ResolvedNavLinkItem[]} />
@@ -45,7 +46,7 @@ export function NavbarItem({ navItem }: NavbarItemProps): JSX.Element | null {
   return null;
 }
 
-const NavMenuItemWithDropdownWrapper = styled.div`
+export const NavMenuItemWithDropdownWrapper = styled.div`
   display: inline-block;
   position: relative;
   border-radius: var(--navbar-item-border-radius);
@@ -57,9 +58,9 @@ const NavMenuItemWithDropdownWrapper = styled.div`
   }
 `;
 
-const NavMenuItem = styled.li<{ active?: boolean }>`
+export const NavMenuItem = styled.li<{ active?: boolean }>`
   display: inline-block;
-  padding: 20px calc(var(--sidebar-spacing-horizontal) * 2);
+  padding: 8px calc(var(--sidebar-spacing-horizontal) * 2);
   text-align: center;
   line-height: 1;
   font-size: var(--navbar-item-font-size);
@@ -70,7 +71,7 @@ const NavMenuItem = styled.li<{ active?: boolean }>`
   background: ${({ active }) => (active ? 'var(--navbar-item-active-background-color)' : 'none')};
 `;
 
-const NavLink = styled(Link)`
+export const NavLink = styled(Link)`
   color: ${({ active }) =>
     active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
   text-decoration: ${({ active }) =>

package/src/Navbar/NavbarMenu.tsx

@@ -3,9 +3,10 @@ import styled from 'styled-components';
 
 import { NavbarItem } from '@theme/Navbar/NavbarItem';
 import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
+import { isPrimitive, isEmptyArray } from '@theme/utils';
 
 export function NavbarMenu({ menuItems }: { menuItems: ResolvedConfigLinks }): JSX.Element | null {
-  if (!menuItems?.length) {
+  if (isPrimitive(menuItems) || isEmptyArray(menuItems)) {
     return null;
   }
 
@@ -22,11 +23,15 @@ export function NavbarMenu({ menuItems }: { menuItems: ResolvedConfigLinks }): J
 
 const NavItemsContainer = styled.ul`
   list-style: none;
-  margin: 0;
+  margin: 0 7px;
   padding: 0;
-  display: block;
+  display: none;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
 
   ${({ theme }) => theme.mediaQueries.medium} {
-    display: block;
+    display: flex;
   }
 `;

package/src/PageNavigation/NextPageLink.tsx

@@ -12,13 +12,13 @@ interface NextPageType {
 
 export function NextPageLink(): JSX.Element {
   const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
-  const { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
 
-  if (!nextPage || themeSettings?.navigation?.hide) {
+  if (!nextPage || navigation?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const label = themeSettings?.navigation?.nextPageLink?.label || `Next to ${nextPage.label}`;
+  const label = navigation?.nextPageLink?.label || `Next to ${nextPage.label}`;
 
   return (
     <StyledButton

package/src/PageNavigation/PreviousPageLink.tsx

@@ -12,13 +12,13 @@ interface PreviousPageType {
 
 export function PreviousPageLink(): JSX.Element {
   const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
-  const { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
 
-  if (!prevPage || themeSettings?.navigation?.hide) {
+  if (!prevPage || navigation?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const label = themeSettings?.navigation?.nextPageLink?.label || `Back to ${prevPage.label}`;
+  const label = navigation?.nextPageLink?.label || `Back to ${prevPage.label}`;
 
   return (
     <StyledButton

package/src/Profile/Profile.tsx

@@ -0,0 +1,91 @@
+import React, { memo } from 'react';
+import styled, { css } from 'styled-components';
+
+import { getRandomColor } from '@theme/utils';
+
+export interface ProfileProps {
+  name: string;
+  imageUrl?: string;
+  color?: string;
+  onClick?: () => void;
+}
+
+const RANDOM_BG_COLOR: string = getRandomColor();
+
+function ProfileComponent({ name, imageUrl, onClick, color }: ProfileProps): JSX.Element {
+  if (imageUrl) {
+    return (
+      <ProfileWrapper onClick={onClick}>
+        <StyledUserName data-cy="user-name" color={color}>
+          {name}
+        </StyledUserName>
+        {imageUrl && (
+          <AvatarWrapper>
+            <img data-cy="user-avatar" src={imageUrl} alt="profile" />
+          </AvatarWrapper>
+        )}
+      </ProfileWrapper>
+    );
+  }
+
+  const avatarLetters = `${name.charAt(0).toUpperCase()}${
+    name.split(' ')[1]?.charAt(0).toUpperCase() || ''
+  }`;
+
+  return (
+    <ProfileWrapper onClick={onClick}>
+      <StyledUserName data-cy="user-name" color={color}>
+        {name}
+      </StyledUserName>
+      <AvatarWrapper background={RANDOM_BG_COLOR}>
+        <span>{avatarLetters}</span>
+      </AvatarWrapper>
+    </ProfileWrapper>
+  );
+}
+
+export const Profile = memo<ProfileProps>(ProfileComponent);
+
+const ProfileWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: auto;
+`;
+
+const StyledUserName = styled.span`
+  color: ${({ color }) => color || 'var(--color-content)'};
+`;
+
+const AvatarWrapper = styled.div<{ background?: string }>`
+  width: 40px;
+  height: 40px;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  font-size: 1.25rem;
+  align-items: center;
+  flex-shrink: 0;
+  line-height: 1;
+  user-select: none;
+  border-radius: 50%;
+  justify-content: center;
+  margin-left: 16px;
+
+  ${({ background }) => css`
+    background-color: ${background};
+    span {
+      color: ${background};
+      filter: invert(100%);
+    }
+  `}
+
+  & > img {
+    color: transparent;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    text-align: center;
+    text-indent: 10000px;
+  }
+`;

package/src/Profile/index.ts

@@ -0,0 +1,2 @@
+export { Profile } from './Profile';
+export type { ProfileProps } from './Profile';

package/src/SourceCode/SourceCode.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { highlight } from '@theme/utils';
+import { highlight, addLineNumbers } from '@theme/utils';
 import {
   SampleControls,
   SampleControlsWrap,
@@ -8,7 +8,12 @@ import {
 } from '@theme/SamplesPanelControls';
 import { CopyButtonWrapper } from '@theme/CopyButton';
 
-export interface SourceCodeProps {
+interface CommonCodeProps {
+  withLineNumbers?: boolean;
+  startLineNumber?: number;
+}
+
+export interface SourceCodeProps extends CommonCodeProps {
   lang: string;
   source?: string;
   externalSource?: ExternalSource;
@@ -16,6 +21,10 @@ export interface SourceCodeProps {
   dataTestId?: string;
 }
 
+interface CodeProps
+  extends Required<Pick<SourceCodeProps, 'lang' | 'source' | 'dataTestId'>>,
+    CommonCodeProps {}
+
 export interface Sample {
   lang: string;
   label?: string;
@@ -37,10 +46,18 @@ export function Code({
   source,
   lang,
   dataTestId,
-}: Required<Omit<SourceCodeProps, 'externalSource' | 'withCopyButton'>>): JSX.Element {
+  withLineNumbers,
+  startLineNumber,
+}: CodeProps): JSX.Element {
+  const highlightedCode = highlight(source, lang);
+
   return (
     <PreformattedCodeBlock
-      dangerouslySetInnerHTML={{ __html: highlight(source, lang) }}
+      dangerouslySetInnerHTML={{
+        __html: withLineNumbers
+          ? addLineNumbers(highlightedCode, startLineNumber)
+          : highlightedCode,
+      }}
       data-cy={dataTestId}
     />
   );
@@ -52,6 +69,8 @@ export function SourceCode({
   externalSource,
   withCopyButton,
   dataTestId = 'source-code',
+  withLineNumbers,
+  startLineNumber,
 }: SourceCodeProps): JSX.Element {
   const _source = source || externalSource?.sample?.get?.(externalSource) || '';
   if (withCopyButton) {
@@ -60,7 +79,13 @@ export function SourceCode({
         {({ renderCopyButton }) => (
           <SampleControlsWrap>
             <SampleControls data-cy="copy-button">{renderCopyButton()}</SampleControls>
-            <Code lang={lang} source={_source} dataTestId={dataTestId} />
+            <Code
+              lang={lang}
+              source={_source}
+              withLineNumbers={withLineNumbers}
+              startLineNumber={startLineNumber}
+              dataTestId={dataTestId}
+            />
           </SampleControlsWrap>
         )}
       </CopyButtonWrapper>
@@ -72,6 +97,8 @@ export function SourceCode({
       dataTestId={dataTestId}
       lang={lang}
       source={_source}
+      withLineNumbers={withLineNumbers}
+      startLineNumber={startLineNumber}
       data-component-name="SourceCode/SourceCode"
     />
   );

package/src/TableOfContent/TableOfContent.tsx

@@ -19,9 +19,9 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
   const sidebar = useRef<HTMLDivElement | null>(null);
   useFullHeight(sidebar);
   const activeHeadingId = useActiveHeading(contentWrapper);
-  const { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { toc } = useThemeSettings(DEFAULT_THEME_NAME);
 
-  if (themeSettings?.toc?.hide) {
+  if (toc?.hide) {
     return null;
   }
   if (headings && headings.length === 1 && (!headings[0] || headings[0].depth === 1)) {
@@ -36,7 +36,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
       {headings && (
         <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
           <TableOfContentItems ref={sidebar}>
-            <TocHeader>{themeSettings?.toc?.header?.label || 'On this page'}</TocHeader>
+            <TocHeader>{toc?.header?.label || 'On this page'}</TocHeader>
             {headings.map((heading: MdHeading | null, idx: number) => {
               // TODO: not sure about !heading
               if (!heading) {

package/src/Tooltip/Tooltip.tsx

@@ -1,12 +1,13 @@
-import type { PropsWithChildren } from 'react';
-import React, { useCallback, useEffect, memo } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
+import React, { useEffect, memo } from 'react';
 import styled, { css } from 'styled-components';
 
 import { useControl } from '@theme/hooks';
 
 export interface TooltipProps {
-  tip: string;
-  open?: boolean;
+  tip: string | ReactNode;
+  isOpen?: boolean;
+  withArrow?: boolean;
   placement?: 'top' | 'bottom' | 'left' | 'right';
   className?: string;
   width?: string;
@@ -15,46 +16,48 @@ export interface TooltipProps {
 
 export function TooltipComponent({
   children,
-  open,
+  isOpen,
   tip,
+  withArrow = true,
   placement = 'top',
   className = 'default',
   width,
-  dataTestId = tip,
+  dataTestId,
 }: PropsWithChildren<TooltipProps>): JSX.Element {
-  const { isOpened, handleOpen, handleClose } = useControl(open);
+  const { isOpened, handleOpen, handleClose } = useControl(isOpen);
 
-  const isControlled = open !== undefined;
+  const isControlled = isOpen !== undefined;
 
   useEffect(() => {
     if (isControlled) {
-      if (open) {
+      if (isOpen) {
         handleOpen();
       } else {
         handleClose();
       }
     }
-  }, [open, isControlled, handleOpen, handleClose]);
+  }, [isOpen, isControlled, handleOpen, handleClose]);
 
-  const handleEnter = useCallback(() => {
-    handleOpen();
-  }, [handleOpen]);
-
-  const handleLeave = useCallback(() => {
-    handleClose();
-  }, [handleClose]);
+  const controllers = !isControlled && {
+    onMouseEnter: handleOpen,
+    onMouseLeave: handleClose,
+    onClick: handleClose,
+  };
 
   return (
     <TooltipWrapper
-      onMouseEnter={isControlled ? undefined : handleEnter}
-      onMouseLeave={isControlled ? undefined : handleLeave}
-      onClick={isControlled ? undefined : handleLeave}
+      {...controllers}
       className={`tooltip-${className}`}
       data-component-name="Tooltip/Tooltip"
     >
       {children}
       {isOpened && (
-        <TooltipBody data-cy={dataTestId} placement={placement} width={width}>
+        <TooltipBody
+          data-cy={dataTestId || (typeof tip === 'string' ? tip : '')}
+          placement={placement}
+          width={width}
+          withArrow={withArrow}
+        >
           {tip}
         </TooltipBody>
       )}
@@ -65,69 +68,85 @@ export function TooltipComponent({
 export const Tooltip = memo<PropsWithChildren<TooltipProps>>(TooltipComponent);
 
 const PLACEMENTS = {
-  top: css`
+  top: css<Pick<TooltipProps, 'withArrow'>>`
     top: 0;
     left: 50%;
     transform: translate(-50%, -99%);
     margin-top: -10px;
 
-    &::after {
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-top-width: 6px;
-      border-top-style: solid;
-      bottom: 0;
-      left: 50%;
-      transform: translate(-50%, 99%);
-    }
+    ${({ withArrow }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-top-width: 6px;
+          border-top-style: solid;
+          bottom: 0;
+          left: 50%;
+          transform: translate(-50%, 99%);
+        }
+      `}
   `,
-  bottom: css`
+  bottom: css<Pick<TooltipProps, 'withArrow'>>`
     bottom: 0;
     left: 50%;
     transform: translate(-50%, 99%);
     margin-bottom: -10px;
 
-    &::after {
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-bottom-width: 6px;
-      border-bottom-style: solid;
-      top: 0;
-      left: 50%;
-      transform: translate(-50%, -99%);
-    }
+    ${({ withArrow }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-bottom-width: 6px;
+          border-bottom-style: solid;
+          top: 0;
+          left: 50%;
+          transform: translate(-50%, -99%);
+        }
+      `}
   `,
-  left: css`
+  left: css<Pick<TooltipProps, 'withArrow'>>`
     top: 50%;
     left: 0;
     transform: translate(-100%, -50%);
     margin-left: -10px;
 
-    &::after {
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-left-width: 6px;
-      border-left-style: solid;
-      top: 50%;
-      right: 0;
-      transform: translate(99%, -50%);
-    }
+    ${({ withArrow }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-top: 5px solid transparent;
+          border-bottom: 5px solid transparent;
+          border-left-width: 6px;
+          border-left-style: solid;
+          top: 50%;
+          right: 0;
+          transform: translate(99%, -50%);
+        }
+      `}
   `,
-  right: css`
+  right: css<Pick<TooltipProps, 'withArrow'>>`
     top: 50%;
     right: 0;
     transform: translate(100%, -50%);
     margin-right: -10px;
 
-    &::after {
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-right-width: 6px;
-      border-right-style: solid;
-      top: 50%;
-      left: 0;
-      transform: translate(-99%, -50%);
-    }
+    ${({ withArrow }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-top: 5px solid transparent;
+          border-bottom: 5px solid transparent;
+          border-right-width: 6px;
+          border-right-style: solid;
+          top: 50%;
+          left: 0;
+          transform: translate(-99%, -50%);
+        }
+      `}
   `,
 };
 
@@ -136,7 +155,9 @@ const TooltipWrapper = styled.div`
   display: inline-block;
 `;
 
-const TooltipBody = styled.span<Pick<Required<TooltipProps>, 'placement'> & { width?: string }>`
+const TooltipBody = styled.span<
+  Pick<Required<TooltipProps>, 'placement' | 'withArrow'> & { width?: string }
+>`
   display: inline-block;
 
   position: absolute;
@@ -168,5 +189,8 @@ const TooltipBody = styled.span<Pick<Required<TooltipProps>, 'placement'> & { wi
   box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
 
   width: ${({ width }) => width || '120px'};
-  ${({ placement }) => `${PLACEMENTS[placement]};`}
+  ${({ placement }) =>
+    css`
+      ${PLACEMENTS[placement]};
+    `}
 `;

package/src/globalStyle.ts

@@ -299,6 +299,7 @@ const buttons = css`
     * @tokens Button borders
     */
   --button-border-radius: var(--global-border-radius); // @presenter BorderRadius
+  --button-margin: 5px; // @presenter Margin
   --button-box-shadow: none; // @presenter Shadow
   --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow
 
@@ -751,6 +752,7 @@ const navbar = css`
   --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight
   --navbar-item-active-background-color: #1b75fa; // @presenter Color
   --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color
+  --navbar-item-separator-line-color: var(--sidebar-separator-line-color); // @presenter Color
   --navbar-item-active-text-decoration: none;
 
   // @tokens End

package/src/hooks/useActiveSectionId.ts

@@ -1,4 +1,4 @@
-import { Location } from 'history';
+import type { Location } from 'history';
 import { useEffect, useState, useMemo } from 'react';
 import throttle from 'lodash.throttle';
 

package/src/index.ts

@@ -14,3 +14,4 @@ export * from './utils';
 export * from './globalStyle';
 export * from './OperationBadge';
 export * from './TableOfContent';
+export * from './Profile';

package/src/types/portal/src/client/app/Sidebar/types.d.ts

@@ -1,3 +1,4 @@
+import { PERMISSION_PROP_NAME } from '../../../shared/constants';
 import { MenuStyle } from '../../../shared/types';
 export interface SidebarNavItem {
     label?: string;
@@ -18,7 +19,7 @@ export interface SidebarNavItem {
     target?: string;
     external?: boolean;
     items?: SidebarNavItem[];
-    permission?: string;
+    [PERMISSION_PROP_NAME]?: string;
     menuStyle?: MenuStyle;
     separatorLine?: boolean;
     version?: string;

package/src/types/portal/src/server/constants.d.ts

@@ -5,3 +5,5 @@ export declare enum cliCommandNames {
 export declare const VERSION_SEPARATOR = "@";
 export declare const DEFAULT_VERSION_NAME = "default";
 export declare const VERSIONED_FOLDER_REGEXP_MATCH: RegExp;
+export declare const PORTAL_CONFIG_FILE_NAME = "portal.yaml";
+export declare const JWT_SECRET_KEY: string;