@redocly/theme 0.1.6 → 0.1.9

package/src/Sidebar/SeparatorLine.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const SeparatorLine = styled.div.attrs(() => ({
+  'data-component-name': 'Sidebar/SeparatorLine',
+}))`
+  height: 1px;
+  background-color: var(--sidebar-separator-line-color);
+  margin: var(--sidebar-spacing-padding-vertical) 0;
+`;

package/src/Sidebar/Sidebar.tsx

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+
+interface SidebarProps {
+  opened?: boolean;
+  animate?: boolean;
+}
+
+export const Sidebar = 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 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/index.ts

@@ -0,0 +1,19 @@
+export * from './ApiCallItem';
+export * from './ArrowBack';
+export * from './BackButton';
+export * from './Drilldown';
+export * from './DrilldownMenu';
+export * from './DrilldownMenuItem';
+export * from './ExternalIcon';
+export * from './Menu';
+export * from './MenuContainer';
+export * from './MenuGroup';
+export * from './MenuItem';
+export * from './MenuItemLabel';
+export * from './MenuLink';
+export * from './MenuLinkItem';
+export * from './MobileSidebarButton';
+export * from './Separator';
+export * from './SeparatorItem';
+export * from './Sidebar';
+export * from './SidebarLayout';

package/src/Sidebar/types/DrilldownMenuProps.ts

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

package/src/Sidebar/types/ItemState.ts

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

package/src/Sidebar/types/MenuItemProps.ts

@@ -0,0 +1,6 @@
+import { ItemState } from '@theme/Sidebar/types/ItemState';
+
+export 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 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/Sidebar/types/index.ts

@@ -0,0 +1,5 @@
+export * from './DrilldownMenuProps';
+export * from './ItemState';
+export * from './MenuItemProps';
+export * from './MenuStyle';
+export * from './NavItem';

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.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ThemeProvider } from 'styled-components';
+
+import { TableOfContent } from '@theme/TableOfContent';
+import { generateMediaQueries } from '@theme/utils/media-css';
+
+const breakpoints = { small: '1rem', medium: '1rem', large: '1rem' };
+
+const theme = {
+  mediaQueries: generateMediaQueries(breakpoints),
+};
+
+export default {
+  title: 'Portal/TableOfContent',
+  component: TableOfContent,
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={theme}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+} as ComponentMeta<typeof TableOfContent>;
+
+const Template: ComponentStory<typeof TableOfContent> = (args) => (
+  <TableOfContent {...args}>Click</TableOfContent>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  headings: [
+    { id: '1', value: 'test 1', depth: 1 },
+    { id: '2', value: 'test 2', depth: 1 },
+    { id: '3', value: 'test 3', depth: 2 },
+    { id: '4', value: 'test 4', depth: 2 },
+    { id: '5', value: 'test 5', depth: 1 },
+  ],
+};

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 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/TableOfContent/index.ts

@@ -0,0 +1 @@
+export * from './TableOfContent';

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
      * */
@@ -470,43 +446,4 @@ export const GlobalStyle = createGlobalStyle`
     --navbar-item-active-text-color: var(--color-primary-contrast);
     --navbar-item-active-text-decoration: none;
   }
-
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --color-content: #f5f7fa;
-      --global-border-color: #4c4c4c;
-      --inline-code-color: #ed8282;
-      --schema-require-label-color: #e55252;
-      --global-background-color: #101010;
-      --sidebar-background-color: #101010;
-      --sidebar-item-active-background-color: #424242;
-      --samples-panel-block-background-color: var(--sidebar-background-color);
-      --color-secondary-200: #1f2933;
-      --color-primary-900: #4892ff;
-      --search-marked-background-color: #707000;
-
-      --response-success-border-color: #3c8d06;
-      --response-success-background-color: #2e7102;
-      --response-error-border-color: #8d5c5c;
-      --response-error-background-color: #802828;
-      --response-redirect-border-color: #ffa500;
-      --response-redirect-background-color: #ffa5001a;
-      --response-info-border-color: #87ceeb;
-      --response-info-background-color: #87ceeb1a;
-
-      --link-color: #4d91ff;
-      --link-hover-color: #3686ff;
-
-      --navbar-color-background: #f2f2f2;
-
-      .search-input {
-        color: var(--color-content);
-      }
-
-      .button-clear {
-        --color-secondary-600: #3e4c59;
-        --color-secondary-400: #1b1b1b;
-      }
-    }
-  }
 `;

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;
+}