@redocly/theme 0.1.7 → 0.1.10

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,10 +314,10 @@ 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);
+    --samples-panel-callback-background-color: var(--color-secondary-300);
     --samples-panel-controls-background-color: #323f4b;
     --samples-panel-controls-hover-background-color: #3c4c5a;
     --samples-panel-controls-active-border-color: var(--color-accent-500);
@@ -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,53 +420,54 @@ export const GlobalStyle = createGlobalStyle`
     /* Floating action button */
     --fab-color: #0065FB;
     --fab-background-color: #f2f2f2;
-
+    
+    //* PORTAL settings *//
+    /**
+     * Headings
+     * */
+    --h2-font-weight: var(--font-weight-bold);
+
+    --h1-margin-top: 1.35em;
+    --h1-margin-bottom: 0.9em;
+    --h2-margin-top: 1.25em;
+    --h2-margin-bottom: 0.8em;
+    --h3-margin-top: 1.25em;
+    --h3-margin-bottom: 0.8em;
+    
+    /**
+     * Footer
+     * */
+    --footer-background-color: var(--color-primary-500);
+    --footer-text-color: #fff;
 
     /**
      * 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);
+    --sidebar-font-family: var(--font-family-base);
 
     /**
-     * Portal Logo
+     * Logo
      * */
     --logo-height: 2rem;
     --logo-margin: var(--sidebar-margin-left);
 
     /**
-     * Portal Navbar
+     * Navbar
      * */
     --navbar-height: 60px;
-    --navbar-color-text: var(--color-content-inverse);
-    --navbar-color-background: var(--color-primary-500);
+    --navbar-text-color: #fff;
+    --navbar-background-color: var(--color-primary-500);
 
     /**
-     * Portal Navbar Item
+     * Navbar Item
      * */
     --navbar-item-font-size: 16px;
     --navbar-item-margin-horizontal: 0;
@@ -467,7 +475,70 @@ export const GlobalStyle = createGlobalStyle`
     --navbar-item-border-radius: 10px;
     --navbar-item-font-weight: var(--font-weight-bold);
     --navbar-item-active-background-color: #1b75fa;
-    --navbar-item-active-text-color: var(--color-primary-contrast);
+    --navbar-item-active-text-color: var(--navbar-text-color);
     --navbar-item-active-text-decoration: none;
+
+    /**
+     * TOC
+     * */
+    --toc-width: 240px;
+
+    /**
+     * Markdown
+     * */
+    --content-wrapper-max-width: 910px;
+    --content-wrapper-padding-vertical: 25px;
+    --content-wrapper-padding-horizontal: 0px;
+
+    /**
+     * Bloquote
+     * */
+    --bloquote-margin-vertical: 1.5em;
+    --bloquote-margin-horizontal: 0;
+    --bloquote-padding-vertical: 0;
+    --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4);
+    --bloquote-background-color: transparent;
+
+    /**
+     * Admonition
+     * */
+    --admonition-margin-horizontal: 0;
+    --admonition-margin-vertical: calc(var(--spacing-unit) * 2);
+    --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);
+    --admonition-padding-vertical: calc(var(--spacing-unit) * 4);
+    --admonition-icon-size: 25px;
+    --admonition-border-radius: 8px;
+    --admonition-font-size: 16px;
+    --admonition-font-weight: normal;
+    --admonition-line-height: 1.5em;
+    --admonition-heading-font-size: 16px;
+    --admonition-heading-font-weight: var(--font-weight-bold);
+    --admonition-heading-letter-spacing: 0.3px;
+    --admonition-heading-transform: uppercase;
+
+    /* info */
+    --admonition-info-background-color: #ebedf0;
+    --admonition-info-text-color: var(--color-content);
+    --admonition-info-icon-color: #4782cb;
+
+    /* attention */
+    --admonition-attention-background-color: #e6eef8;
+    --admonition-attention-text-color: var(--color-content);
+    --admonition-attention-icon-color: #4782cb;
+
+    /* warning */
+    --admonition-warning-background-color: #feeda5;
+    --admonition-warning-text-color: var(--color-content);
+    --admonition-warning-icon-color: #d4ad03;
+
+    /* danger */
+    --admonition-danger-background-color: #fceaea;
+    --admonition-danger-text-color: var(--color-content);
+    --admonition-danger-icon-color: #e53935;
+
+    /* success */
+    --admonition-success-background-color: #ddffe1;
+    --admonition-success-text-color: var(--color-content);
+    --admonition-success-icon-color: #00aa13;
   }
 `;

package/src/hooks/index.ts

@@ -1,3 +1,7 @@
-export * from './useControl';
-export * from './useMount';
-export * from './useUnmount';
+export * from '@theme/hooks/useControl';
+export * from '@theme/hooks/useMount';
+export * from '@theme/hooks/useUnmount';
+export * from '@theme/hooks/useActiveHeading';
+export * from '@theme/hooks/useActiveSectionId';
+export * from '@theme/hooks/useFullHeight';
+export * from '@theme/hooks/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 { Location } from 'history';
+import { useEffect, useState, useMemo } from 'react';
+import throttle from 'lodash.throttle';
+
+import { useNavbarHeight } from '@theme/hooks/useNavbarHeight';
+
+export type UseActiveSectionIdReturnType = string;
+
+export function useActiveSectionId(
+  location: Location,
+  hasOverviewPage = false,
+): 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/icons/ShelfIcon/index.ts

@@ -1,2 +1,2 @@
-export { ShelfIcon } from './ShelfIcon';
-export type { ShelfIconProps } from './ShelfIcon';
+export { ShelfIcon } from '@theme/icons/ShelfIcon/ShelfIcon';
+export type { ShelfIconProps } from '@theme/icons/ShelfIcon/ShelfIcon';

package/src/icons/index.ts

@@ -1 +1 @@
-export * from './ShelfIcon';
+export * from '@theme/icons/ShelfIcon';

package/src/index.ts

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

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;

package/src/mocks/search.ts

@@ -0,0 +1,31 @@
+interface OperationParameter {
+  name: string | string[];
+  description: string | string[];
+  place: string;
+  path?: string[];
+}
+
+interface SearchDocument {
+  id: string;
+  url: string;
+  title: string | string[];
+  text: string | string[];
+  path?: string[];
+  httpVerb?: string;
+  pathName?: string | string[];
+  parameters?: OperationParameter[];
+}
+
+export function useFuseSearch(): {
+  query: string;
+  setQuery: (val: string) => void;
+  items: SearchDocument[];
+} {
+  return {
+    query: '',
+    setQuery(val: string) {
+      this.query = val;
+    },
+    items: [],
+  };
+}

package/src/mocks/types/index.ts

@@ -0,0 +1 @@
+export type ResolvedNavLinkItem = any;

package/src/mocks/usePreloadHistory.ts

@@ -0,0 +1,9 @@
+export function usePreloadHistory(): { push: (url: string) => void } {
+  const history = [];
+
+  return {
+    push: (url: string): void => {
+      history.push(url);
+    },
+  };
+}

package/src/types/portal/index.d.ts

@@ -0,0 +1,5 @@
+export * from './src/client/styling';
+export * from './src/client/app/Sidebar/types';
+export * from './src/server/plugins/portal-config/types';
+export * from './src/shared/types';
+export type { MdHeading } from './src/server/plugins/markdown/types';

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

@@ -0,0 +1,41 @@
+import { MenuStyle } from '../../../shared/types';
+export interface SidebarNavItem {
+    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?: SidebarNavItem[];
+    permission?: string;
+    menuStyle?: MenuStyle;
+    separatorLine?: boolean;
+    version?: string;
+}
+export interface ItemState extends SidebarNavItem {
+    items: ItemState[];
+    active: boolean;
+    hasActiveSubItem: boolean;
+    menuStyle?: MenuStyle | null;
+}
+export declare enum MenuType {
+    Separator = "separator",
+    DrillDown = "drilldown",
+    Group = "group",
+    Operation = "operation"
+}
+export interface MenuItemProps {
+    item: ItemState;
+    activeItem?: ItemState;
+}

package/src/types/portal/src/client/app/media-css.d.ts

@@ -0,0 +1,7 @@
+export declare const breakpoints: {
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare const mediaQueries: import("@theme/utils/media-css").MediaQueries;
+export type { MediaQueries } from '@theme/utils/media-css';