@redocly/theme 0.1.7 → 0.1.8

package/src/Sidebar/Sidebar.tsx

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+
+interface SidebarProps {
+  opened?: boolean;
+  animate?: boolean;
+}
+
+export default styled.aside.attrs(() => ({
+  'data-component-name': 'Sidebar/Sidebar',
+}))<SidebarProps>`
+  border-right: 1px solid var(--sidebar-right-line-color);
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  background: var(--sidebar-background-color);
+  font-size: var(--sidebar-font-size);
+  font-family: var(--sidebar-font-family);
+  color: var(--sidebar-text-color);
+  top: var(--navbar-height);
+  height: calc(100vh - var(--navbar-height));
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  -webkit-font-smoothing: antialiased;
+
+  ${({ 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'};
+    }
+  `};
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    position: sticky;
+    pointer-events: auto;
+    display: flex;
+    opacity: 1;
+    flex-shrink: 0;
+    width: var(--sidebar-width);
+
+    & > * {
+      transform: none;
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.large} {
+    transform: none;
+  }
+`;

package/src/Sidebar/SidebarLayout.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Sidebar from '@theme/Sidebar/Sidebar';
+import { useMobileMenu } from '@theme/hooks/useMobileMenu';
+import MobileSidebarButton from '@theme/Sidebar/MobileSidebarButton';
+import MenuContainer from '@theme/Sidebar/MenuContainer';
+
+interface SidebarLayoutProps {
+  versions: React.ReactNode;
+  menu: React.ReactNode;
+}
+
+export default function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element {
+  const [isOpen, setIsOpen] = useMobileMenu();
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  return (
+    <Wrapper data-component-name="Sidebar/SidebarLayout">
+      <MobileSidebarButton opened={isOpen} onClick={toggleMenu} />
+
+      <Sidebar animate={true} opened={isOpen}>
+        {versions}
+        <MenuContainer>{menu}</MenuContainer>
+      </Sidebar>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;

package/src/Sidebar/types/DrilldownMenuProps.ts

@@ -0,0 +1,7 @@
+import ItemState from '@theme/Sidebar/types/ItemState';
+
+export default interface DrilldownMenuProps {
+  back: () => void;
+  item: ItemState;
+  prevActiveItem?: ItemState;
+}

package/src/Sidebar/types/ItemState.ts

@@ -0,0 +1,11 @@
+import NavItem from '@theme/Sidebar/types/NavItem';
+import { MenuStyle } from '@theme/Sidebar/types/MenuStyle';
+
+interface ItemState extends NavItem {
+  items: ItemState[];
+  active: boolean;
+  hasActiveSubItem: boolean;
+  menuStyle?: MenuStyle;
+}
+
+export default ItemState;

package/src/Sidebar/types/MenuItemProps.ts

@@ -0,0 +1,6 @@
+import ItemState from '@theme/Sidebar/types/ItemState';
+
+export default interface MenuItemProps {
+  item: ItemState;
+  activeItem?: ItemState;
+}

package/src/Sidebar/types/MenuStyle.ts

@@ -0,0 +1,4 @@
+//TODO: make default export
+export enum MenuStyle {
+  Drilldown = 'drilldown',
+}

package/src/Sidebar/types/NavItem.ts

@@ -0,0 +1,27 @@
+import { MenuStyle } from '@theme/Sidebar/types/MenuStyle';
+
+export default interface NavItem {
+  label?: string;
+  sublabel?: string;
+  icon?: string;
+  link?: string;
+  type?: string;
+  httpVerb?: string;
+  expanded?: string;
+  selectFirstItemOnExpand?: boolean;
+  pageId?: string;
+  redocPrevLink?: string;
+  redocPrevLabel?: string;
+  redocNextLink?: string;
+  redocNextLabel?: string;
+  redocFakePage?: boolean;
+  redocInfoPageId?: string;
+  target?: string;
+  external?: boolean;
+  items?: NavItem[];
+  permission?: string;
+  menuStyle?: MenuStyle;
+  separatorLine?: boolean;
+  version?: string;
+  default?: boolean;
+}

package/src/SidebarLogo/SidebarLogo.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { SidebarLogo } from './SidebarLogo';
+import { SidebarLogo } from '@theme/SidebarLogo';
 
 export default {
   title: 'SidebarLogo',

package/src/SidebarLogo/__tests__/SidebarLogo.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { SidebarLogo } from '../SidebarLogo';
+import { SidebarLogo } from '@theme/SidebarLogo';
 
 describe('SidebarLogo', () => {
   it('renders', () => {

package/src/SourceCode/SourceCode.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { SourceCode } from './SourceCode';
+import { SourceCode } from '@theme/SourceCode';
 
 export default {
   title: 'SourceCode',

package/src/SourceCode/SourceCode.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
 
-import { highlight } from '../utils/highlight';
-import { SampleControls, SampleControlsWrap, PreformattedCodeBlock } from '../SamplesPanelControls';
-import { CopyButtonWrapper } from '../CopyButton';
+import { highlight } from '@theme/utils';
+import {
+  SampleControls,
+  SampleControlsWrap,
+  PreformattedCodeBlock,
+} from '@theme/SamplesPanelControls';
+import { CopyButtonWrapper } from '@theme/CopyButton';
 
 export interface SourceCodeProps {
   lang: string;

package/src/SourceCode/__tests__/SourceCode.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { SourceCode } from '../SourceCode';
 import { renderWithTheme } from '../../../tests/utils';
 
+import { SourceCode } from '@theme/SourceCode';
+
 describe('SourceCode', () => {
   it('renders without copy button', () => {
     const { container } = renderWithTheme(

package/src/TableOfContent/TableOfContent.tsx

@@ -0,0 +1,112 @@
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+
+import { useFullHeight } from '@theme/hooks/useFullHeight';
+import { useActiveHeading } from '@theme/hooks/useActiveHeading';
+import { MdHeading } from '@theme/types/portal';
+
+interface TableOfContentProps {
+  headings?: Array<MdHeading | null> | null | undefined;
+  contentWrapper: HTMLDivElement | null;
+  tocMaxDepth: number;
+}
+
+export default function TableOfContent(props: TableOfContentProps): JSX.Element | null {
+  const { headings, tocMaxDepth } = props;
+
+  const sidebar = useRef<HTMLDivElement | null>(null);
+  useFullHeight(sidebar);
+  const activeHeadingId = useActiveHeading(props.contentWrapper);
+
+  if (headings && headings.length === 1 && headings[0]?.depth === 1) {
+    return null;
+  }
+  if (!headings?.length) {
+    return null;
+  }
+
+  return (
+    <>
+      {headings && (
+        <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
+          <TableOfContentItems ref={sidebar}>
+            <TocHeader>On this page</TocHeader>
+            {headings.map((heading: MdHeading | null, idx: number) => {
+              // TODO: not sure about !heading
+              if (!heading) {
+                return null;
+              }
+              if (idx === 0 && heading.depth === 1) {
+                return null;
+              }
+              if (heading.depth && heading.depth > tocMaxDepth) {
+                return null;
+              }
+              const href = '#' + heading.id;
+              return (
+                <MenuItem
+                  key={href}
+                  depth={heading.depth || 0}
+                  href={href}
+                  className={activeHeadingId === heading.id ? 'active' : ''}
+                  dangerouslySetInnerHTML={{ __html: heading.value || '' }}
+                  data-cy={`toc-${heading.value}`}
+                />
+              );
+            })}
+          </TableOfContentItems>
+        </TableOfContentMenu>
+      )}
+    </>
+  );
+}
+
+const TocHeader = styled.div`
+  font-size: 0.8em;
+  padding: 10px 15px;
+  font-weight: bold;
+  text-transform: uppercase;
+`;
+
+const MenuItem = styled.a<{ depth: number }>`
+  display: block;
+  color: var(--color-text-main);
+  cursor: pointer;
+  font-size: 0.8em;
+  padding: 10px 15px;
+  padding-left: ${({ depth }) => (depth - 1) * 15}px;
+  transition: background-color 0.3s, color 0.3s;
+  text-decoration: none;
+  word-break: break-word;
+  font-family: var(--font-family-h);
+  :hover,
+  &.active {
+    color: var(--sidebar-text-active-color);
+    background-color: var(--sidebar-text-active-background-color);
+  }
+  :empty {
+    padding: 0;
+  }
+`;
+
+const TableOfContentMenu = styled.aside`
+  font-size: 1rem;
+  background-color: transparent;
+  flex-shrink: 0;
+  display: none !important;
+  font-family: var(--font-family-primary);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: var(--toc-width);
+    display: block !important;
+  }
+`;
+
+const TableOfContentItems = styled.div`
+  position: sticky;
+  top: calc(var(--navbar-height) + 20px);
+  max-height: calc(100vh - var(--navbar-height) - 20px);
+  border-left: 1px solid var(--color-border-light);
+  overflow-y: auto;
+  width: var(--toc-width); ;
+`;

package/src/Tooltip/Tooltip.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { Tooltip } from './Tooltip';
+import { Tooltip } from '@theme/Tooltip';
 
 export default {
   title: 'Tooltip',

package/src/Tooltip/Tooltip.tsx

@@ -2,7 +2,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useCallback, useEffect, memo } from 'react';
 import styled, { css } from 'styled-components';
 
-import { useControl } from '../hooks';
+import { useControl } from '@theme/hooks';
 
 export interface TooltipProps {
   tip: string;

package/src/Tooltip/__tests__/Tooltip.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 
-import { Tooltip } from '../Tooltip';
+import { Tooltip } from '@theme/Tooltip';
 
 describe('Tooltip', () => {
   it('renders closed', () => {

package/src/globalStyle.ts

@@ -129,6 +129,11 @@ export const GlobalStyle = createGlobalStyle`
     --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);
     --sidebar-spacing-vertical: var(--sidebar-spacing-unit);
 
+    --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);
+    --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);
+    --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);
+    --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);
+
     --sidebar-word-break: 'inherit';
     --sidebar-separator-label-color: var(--sidebar-item-color);
     --sidebar-separator-line-color: #dadada;
@@ -309,7 +314,7 @@ export const GlobalStyle = createGlobalStyle`
     --panels-background-color: #fff;
 
     --samples-panel-gap: 20px;
-    --samples-panel-width: 37.5%;
+    --samples-panel-width: 50%;
     --samples-panel-block-background-color: #fff;
     --samples-panel-background-color: #52606d;
     --samples-panel-callback-background-color: var(--samples-panel-callback-background-color);
@@ -371,7 +376,9 @@ export const GlobalStyle = createGlobalStyle`
 
     --field-name-font-size: var(--code-font-size);
     --field-name-font-family: var(--code-font-family);
-    --field-enum-background-color: var(--inline-code-background-color);
+    --field-example-color: var(--color-content);
+    --field-example-background-color: var(--inline-code-background-color);
+    --field-constraint-color: var(--color-content);
     --field-constraint-background-color: var(--inline-code-background-color);
 
     /*
@@ -413,38 +420,7 @@ export const GlobalStyle = createGlobalStyle`
     /* Floating action button */
     --fab-color: #0065FB;
     --fab-background-color: #f2f2f2;
-
-
-    /**
-     * Sidebar
-     * */
-    --sidebar-spacing-unit: 8px;
-    --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);
-    --sidebar-padding-horizontal: var(--sidebar-spacing-unit);
-    --sidebar-padding-vertical: var(--sidebar-spacing-unit);
-
-    --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit);
-    --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit);
-    --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);
-    --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);
-    --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);
-
-    --sidebar-chevron-size: var(--sidebar-spacing-unit);
-    --sidebar-chevron-color: var(--sidebar-text-color);
-
-    --sidebar-border-radius: 4px;
-    --sidebar-background-color: #fff;
-    --sidebar-font-size: var(--font-size-base);
-    --sidebar-font-family: var(--font-family-primary);
-    --sidebar-right-line-color: var(--color-border-light);
-    --sidebar-text-color: var(--color-text-main);
-    --sidebar-text-active-color: var(--sidebar-text-color);
-    --sidebar-text-active-background-color: var(--color-border-light);
-    --sidebar-width: 285px;
-
-    --sidebar-separator-line-color: #dadada;
-    --sidebar-separator-label-color: var(--sidebar-text-color);
-
+    
     /**
      * Portal Logo
      * */

package/src/hooks/index.ts

@@ -1,3 +1,7 @@
 export * from './useControl';
 export * from './useMount';
 export * from './useUnmount';
+export * from './useActiveHeading';
+export * from './useActiveSectionId';
+export * from './useFullHeight';
+export * from './useNavbarHeight';

package/src/hooks/useActiveHeading.ts

@@ -0,0 +1,46 @@
+import { useState, useMemo, useCallback, useEffect } from 'react';
+
+export type UseActiveHeadingReturnType = string | undefined;
+
+export function useActiveHeading(contentElement: Element | null): UseActiveHeadingReturnType {
+  const [heading, setHeading] = useState<string | undefined>(undefined);
+
+  const headings: NodeListOf<HTMLElement> | null = useMemo(
+    () => contentElement && contentElement.querySelectorAll<HTMLElement>('.heading-anchor'),
+    [contentElement],
+  );
+
+  const handler = useCallback(
+    // throttle(
+    () => {
+      if (!headings) {
+        return;
+      }
+
+      for (let i = 0; i < headings.length; i++) {
+        if (headings[i].offsetTop > window.scrollY) {
+          const newHeading = i === 0 ? undefined : headings[i - 1].getAttribute('id') || undefined;
+          setHeading(newHeading);
+          return;
+        }
+      }
+    },
+    [headings],
+  );
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !headings || !headings.length) {
+      return undefined;
+    }
+
+    window.addEventListener('scroll', handler, {
+      capture: false,
+    });
+
+    handler();
+
+    return () => window.removeEventListener('scroll', handler);
+  }, [handler, headings]);
+
+  return heading;
+}

package/src/hooks/useActiveSectionId.ts

@@ -0,0 +1,53 @@
+import { useEffect, useState, useMemo } from 'react';
+import throttle from 'lodash.throttle';
+
+import { useNavbarHeight } from '@theme/hooks/useNavbarHeight';
+import type { MenuProps } from '@theme/types/portal';
+
+export type UseActiveSectionIdReturnType = string;
+
+export function useActiveSectionId(
+  location: MenuProps['location'],
+  hasOverviewPage: boolean,
+): UseActiveSectionIdReturnType {
+  const [itemId, setItemId] = useState<string>('');
+  const navbarHeight = useNavbarHeight(location);
+  const scrollListener = useMemo(
+    () =>
+      throttle(() => {
+        const sections = document.querySelectorAll('[data-section-id]');
+        if (sections.length < 2) {
+          setItemId('');
+          return;
+        }
+        for (let i = 0; i < sections.length; i++) {
+          const section = sections[i];
+          const rect = section.getBoundingClientRect();
+          if (rect.y < navbarHeight + 5 && rect.bottom > navbarHeight + 5) {
+            // use small padding 5px to account for rounding
+            setItemId(section.getAttribute('data-section-id') || '');
+            return;
+          }
+        }
+        if (hasOverviewPage) {
+          setItemId('');
+        } else {
+          setItemId((sections[0] && sections[0].getAttribute('data-section-id')) || '');
+        }
+      }, 150),
+    [navbarHeight, hasOverviewPage],
+  );
+
+  useEffect(() => {
+    window.addEventListener('scroll', scrollListener, { capture: false });
+    setTimeout(() => {
+      scrollListener();
+    }, 0);
+
+    return () => {
+      window.removeEventListener('scroll', scrollListener); // TODO: add throttle
+    };
+  }, [location, navbarHeight, scrollListener]);
+
+  return itemId;
+}

package/src/hooks/useFullHeight.ts

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, MutableRefObject, useMemo } from 'react';
+import throttle from 'lodash.throttle';
+
+export function useFullHeight(element: MutableRefObject<HTMLElement | null>): void {
+  const handler = useCallback(() => {
+    if (!element.current) {
+      return;
+    }
+
+    const footer = document.querySelector('footer');
+    if (!footer) {
+      return;
+    }
+
+    const elementTop = element.current.getBoundingClientRect().top;
+    const footerOffset = footer.offsetTop - window.scrollY - elementTop;
+    if (footerOffset > window.innerHeight) {
+      element.current.style.maxHeight = `${window.innerHeight - elementTop}px`;
+    } else {
+      element.current.style.maxHeight = `${footerOffset}px`;
+    }
+  }, [element]);
+
+  const throttledHandler = useMemo(() => throttle(handler, 150), [handler]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !element.current) {
+      return () => {
+        // nope
+      };
+    }
+
+    window.addEventListener('scroll', throttledHandler, {
+      capture: false,
+    });
+    window.addEventListener('resize', throttledHandler, {
+      capture: false,
+    });
+
+    handler();
+
+    return () => {
+      window.removeEventListener('scroll', throttledHandler);
+      window.removeEventListener('resize', throttledHandler);
+    };
+  }, [throttledHandler, element, handler]);
+}

package/src/hooks/useMobileMenu.ts

@@ -0,0 +1,11 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
+export function useMobileMenu(initialState = false): [boolean, Dispatch<SetStateAction<boolean>>] {
+  const { location } = useHistory();
+  const [isOpen, setIsOpen] = useState(initialState);
+
+  useEffect(() => setIsOpen(false), [location.pathname]);
+
+  return [isOpen, setIsOpen];
+}

package/src/hooks/useNavbarHeight.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import type { Location } from 'history';
+
+import { getNavbarElement } from '@theme/utils/getNavbarElement';
+
+export type UseNavbarHeightReturnType = number;
+
+export function useNavbarHeight(location: Location): UseNavbarHeightReturnType {
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    const navbar = getNavbarElement();
+    setHeight((navbar && navbar.clientHeight) || 0);
+  }, [location.pathname]);
+
+  useEffect(() => {
+    window.requestAnimationFrame(() => {
+      const navbar = getNavbarElement();
+      setHeight((navbar && navbar.clientHeight) || 0);
+    });
+  }, []);
+
+  return height;
+}

package/src/icons/ShelfIcon/ShelfIcon.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Story, ComponentMeta } from '@storybook/react';
 
-import { ShelfIcon, ShelfIconProps } from './ShelfIcon';
+import { ShelfIcon, ShelfIconProps } from '@theme/icons/ShelfIcon';
 
 export default {
   title: 'Icons/ShelfIcon',

package/src/icons/ShelfIcon/ShelfIcon.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 
-import { getCssColorVariable } from '../../utils/css-variables';
+import { getCssColorVariable } from '@theme/utils';
 
 const directionMap = {
   right: '0deg',

package/src/icons/ShelfIcon/__tests__/ShelfIcon.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { ShelfIcon } from '../ShelfIcon';
+import { ShelfIcon } from '@theme/icons/ShelfIcon';
 
 describe('ShelfIcon', () => {
   it('renders right', () => {

package/src/index.ts

@@ -12,3 +12,4 @@ export * from './icons';
 export * from './hooks';
 export * from './utils';
 export * from './globalStyle';
+export * from './OperationBadge';

package/src/mocks/hooks/usePageData.ts

@@ -0,0 +1,8 @@
+import type { ResolvedNavLinkItem } from '@theme/types/portal';
+
+export function usePageData(): {
+  prevPage: ResolvedNavLinkItem | null;
+  nextPage: ResolvedNavLinkItem | null;
+} {
+  return { prevPage: null, nextPage: null };
+}

package/src/mocks/models.ts

@@ -0,0 +1,3 @@
+export type ActiveItem<T> = T;
+export type SearchDocument = any;
+export type OperationParameter = any;