@redocly/theme 0.1.6 → 0.1.9

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,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,6 @@
+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 * from './src/server/plugins/versions/types';
+export type { MdHeading } from './src/server/plugins/markdown/types';

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

@@ -0,0 +1,50 @@
+import { Location } from 'history';
+import { MenuStyle } from '../../../shared/types';
+import type { Version } from '../../../server/plugins/versions/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;
+  default?: boolean;
+}
+export interface ItemState extends SidebarNavItem {
+  items: ItemState[];
+  active: boolean;
+  hasActiveSubItem: boolean;
+  menuStyle?: MenuStyle | null;
+}
+export interface MenuProps {
+  items: SidebarNavItem[];
+  location: Location;
+  pageId: string;
+  versions?: Version[];
+}
+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';

package/src/types/portal/src/client/styling/default.d.ts

@@ -0,0 +1,407 @@
+export declare const defaultTheme: {
+  spacing: {
+    unit: number;
+    sectionHorizontal: ({ spacing }: { spacing: any }) => number;
+    sectionVertical: ({ spacing }: { spacing: any }) => number;
+  };
+  components: {
+    buttons: {
+      borderRadius: ({ shape }: { shape: any }) => any;
+      hoverStyle: string;
+      fontWeight: ({ typography }: { typography: any }) => any;
+      boxShadow: string;
+      hoverBoxShadow: string;
+      fontFamily: string;
+      sizes: {
+        small: {
+          fontSize: string;
+          padding: string;
+          minWidth: string;
+        };
+        medium: {
+          fontSize: string;
+          padding: string;
+          minWidth: string;
+        };
+        large: {
+          fontSize: string;
+          padding: string;
+          minWidth: string;
+        };
+        xlarge: {
+          fontSize: string;
+          padding: string;
+          minWidth: string;
+        };
+      };
+    };
+    search: {
+      icon: string;
+      iconColor: ({ colors }: { colors: any }) => any;
+    };
+    alert: {
+      marginHorizontal: string;
+      marginVertical: ({ spacing }: { spacing: any }) => string;
+      paddingHorizontal: ({ spacing }: { spacing: any }) => string;
+      paddingVertical: ({ spacing }: { spacing: any }) => string;
+      borderRadius: string;
+      iconSize: string;
+      fontSize: string;
+      fontWeight: string;
+      lineHeight: string;
+      heading: {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        transform: string;
+      };
+      variants: {
+        info: {
+          backgroundColor: string;
+          textColor: ({ colors }: { colors: any }) => any;
+          headingColor: ({ colors }: { colors: any }) => any;
+          iconColor: ({ colors }: { colors: any }) => any;
+          icon: string;
+        };
+        attention: {
+          backgroundColor: ({ colors }: { colors: any }) => any;
+          textColor: ({ colors }: { colors: any }) => any;
+          headingColor: ({ colors }: { colors: any }) => any;
+          iconColor: ({ colors }: { colors: any }) => any;
+          icon: string;
+        };
+        warning: {
+          backgroundColor: ({ colors }: { colors: any }) => any;
+          textColor: ({ colors }: { colors: any }) => any;
+          headingColor: ({ colors }: { colors: any }) => any;
+          iconColor: ({ colors }: { colors: any }) => any;
+          icon: string;
+        };
+        danger: {
+          backgroundColor: ({ colors }: { colors: any }) => any;
+          textColor: ({ colors }: { colors: any }) => any;
+          headingColor: ({ colors }: { colors: any }) => any;
+          iconColor: ({ colors }: { colors: any }) => any;
+          icon: string;
+        };
+        success: {
+          backgroundColor: ({ colors }: { colors: any }) => any;
+          textColor: ({ colors }: { colors: any }) => any;
+          headingColor: ({ colors }: { colors: any }) => any;
+          iconColor: ({ colors }: { colors: any }) => any;
+          icon: string;
+        };
+      };
+    };
+    panels: {
+      borderRadius: string;
+    };
+    shape: {
+      borderRadius: string;
+    };
+    blockquote: {
+      marginHorizontal: string;
+      marginVertical: string;
+      paddingHorizontal: ({ spacing }: { spacing: any }) => string;
+      paddingVertical: string;
+      backgroundColor: string;
+      borderRadius: string;
+      borderLeft: ({ colors }: { colors: any }) => string;
+      color: ({ colors }: { colors: any }) => any;
+    };
+    contentWrapper: {
+      maxWidth: string;
+      paddingHorizontal: string;
+      paddingVertical: string;
+    };
+    login: {
+      avatarBorderRadius: ({ navbar }: { navbar: any }) => any;
+      avatarBgColor: string;
+    };
+    layoutControls: {
+      top: string;
+    };
+    httpBadges: {
+      borderRadius: string;
+      fontFamily: ({ typography }: { typography: any }) => any;
+      fontWeight: ({ typography }: { typography: any }) => any;
+      color: ({ colors }: { colors: any }) => any;
+      sizes: {
+        medium: {
+          fontSize: string;
+          lineHeight: string;
+        };
+        small: {
+          fontSize: string;
+          lineHeight: string;
+        };
+      };
+    };
+    tryItButton: {
+      fullWidth: boolean;
+    };
+    tryItSendButton: {
+      fullWidth: boolean;
+    };
+  };
+  breakpoints: {
+    small: string;
+    medium: string;
+    large: string;
+  };
+  shape: {
+    borderRadius: string;
+  };
+  colors: {
+    background: string;
+    tonalOffset: number;
+    primary: {
+      main: string;
+      light: ({ colors }: { colors: any }) => string;
+      dark: ({ colors }: { colors: any }) => string;
+      contrastText: ({ colors }: { colors: any }) => string;
+    };
+    secondary: {
+      main: string;
+      light: string;
+      dark: string;
+      contrastText: string;
+    };
+    accent: {
+      main: string;
+      light: string;
+      dark: string;
+      contrastText: string;
+    };
+    success: {
+      main: string;
+      light: ({ colors }: { colors: any }) => string;
+      dark: ({ colors }: { colors: any }) => string;
+      contrastText: ({ colors }: { colors: any }) => string;
+    };
+    error: {
+      main: string;
+      light: ({ colors }: { colors: any }) => string;
+      dark: ({ colors }: { colors: any }) => string;
+      contrastText: ({ colors }: { colors: any }) => string;
+    };
+    warning: {
+      main: string;
+      light: ({ colors }: { colors: any }) => string;
+      dark: ({ colors }: { colors: any }) => string;
+      contrastText: ({ colors }: { colors: any }) => string;
+    };
+    info: {
+      main: string;
+      light: ({ colors }: { colors: any }) => string;
+      dark: ({ colors }: { colors: any }) => string;
+      contrastText: ({ colors }: { colors: any }) => string;
+    };
+    text: {
+      primary: string;
+      secondary: string;
+      light: string;
+    };
+    border: {
+      dark: string;
+      light: string;
+    };
+    responses: {
+      success: {
+        color: ({ colors }: { colors: any }) => any;
+        backgroundColor: ({ colors }: { colors: any }) => string;
+      };
+      error: {
+        color: ({ colors }: { colors: any }) => any;
+        backgroundColor: ({ colors }: { colors: any }) => string;
+      };
+      redirect: {
+        color: ({ colors }: { colors: any }) => any;
+        backgroundColor: ({ colors }: { colors: any }) => string;
+      };
+      info: {
+        color: ({ colors }: { colors: any }) => any;
+        backgroundColor: ({ colors }: { colors: any }) => string;
+      };
+    };
+    http: {
+      get: string;
+      post: string;
+      put: string;
+      options: string;
+      patch: string;
+      delete: string;
+      basic: string;
+      link: string;
+      head: string;
+    };
+    navbar: {
+      main: ({ colors }: { colors: any }) => any;
+      gradient: ({ colors }: { colors: any }) => string;
+      contrastText: ({ colors }: { colors: any }) => string;
+    };
+    footer: {
+      main: ({ colors }: { colors: any }) => any;
+      contrastText: ({ colors }: { colors: any }) => any;
+    };
+  };
+  sidebar: {
+    showAtBreakpoint: string;
+    backgroundColor: string;
+    width: string;
+    textColor: string;
+    textColorSecondary: string;
+    activeTextColor: ({ sidebar }: { sidebar: any }) => any;
+    activeBgColor: string;
+    separatorLineColor: string;
+    rightLineColor: string;
+    separatorLabelColor: ({ sidebar }: { sidebar: any }) => any;
+    caretColor: ({ sidebar }: { sidebar: any }) => any;
+    caretSize: ({ sidebar }: { sidebar: any }) => any;
+    spacing: {
+      unit: number;
+      paddingHorizontal: ({ sidebar }: { sidebar: any }) => any;
+      paddingVertical: ({ sidebar }: { sidebar: any }) => any;
+      offsetTop: ({ sidebar }: { sidebar: any }) => number;
+      offsetLeft: ({ sidebar }: { sidebar: any }) => number;
+      offsetNesting: ({ sidebar }: { sidebar: any }) => number;
+    };
+    borderRadius: string;
+    fontFamily: ({ typography }: { typography: any }) => any;
+    fontSize: ({ typography }: { typography: any }) => any;
+  };
+  navbar: {
+    height: string;
+    borderRadius: string;
+    marginHorizontal: string;
+    marginVertical: string;
+    activeTextColor: ({ colors }: { colors: any }) => any;
+    activeBgColor: ({ colors }: { colors: any }) => string;
+    activeTextDecoration: string;
+    fontWeight: number;
+    fontSize: string;
+  };
+  tocPanel: {
+    width: string;
+  };
+  logo: {
+    maxWidth: string;
+    maxHeight: string;
+    height: string;
+    margin: ({ sidebar }: { sidebar: any }) => string;
+  };
+  typography: {
+    fontSize: string;
+    lineHeight: string;
+    fontWeightRegular: string;
+    fontWeightBold: string;
+    fontWeightLight: string;
+    fontFamily: string;
+    headings: {
+      fontFamily: string;
+      fontWeight: string;
+    };
+    fieldName: {
+      fontSize: ({ typography }: { typography: any }) => any;
+      fontFamily: ({ typography }: { typography: any }) => any;
+      fontWeight: ({ typography }: { typography: any }) => any;
+    };
+    heading1: {
+      fontSize: string;
+      fontWeight: string;
+      fontFamily: ({ typography }: { typography: any }) => any;
+      lineHeight: ({ typography }: { typography: any }) => any;
+      color: ({ colors }: { colors: any }) => any;
+      capitalize: boolean;
+      marginTop: string;
+      marginBottom: string;
+    };
+    heading2: {
+      fontSize: string;
+      fontWeight: string;
+      color: ({ colors }: { colors: any }) => any;
+      fontFamily: ({ typography }: { typography: any }) => any;
+      lineHeight: ({ typography }: { typography: any }) => any;
+      capitalize: boolean;
+      marginTop: string;
+      marginBottom: string;
+    };
+    heading3: {
+      fontSize: string;
+      fontWeight: string;
+      color: ({ colors }: { colors: any }) => any;
+      fontFamily: ({ typography }: { typography: any }) => any;
+      lineHeight: ({ typography }: { typography: any }) => any;
+      capitalize: boolean;
+      marginTop: string;
+      marginBottom: string;
+    };
+    heading4: {};
+    heading5: {};
+    heading6: {};
+    rightPanelHeading: {};
+    code: {
+      fontSize: string;
+      fontFamily: string;
+      fontWeight: ({ typography }: { typography: any }) => any;
+      color: string;
+      backgroundColor: string;
+      wrap: boolean;
+    };
+    links: {
+      color: ({ colors }: { colors: any }) => any;
+      visited: ({ typography }: { typography: any }) => any;
+      hover: ({ typography }: { typography: any }) => string;
+      textDecoration: string;
+    };
+  };
+  rightPanel: {
+    showAtBreakpoint: string;
+    backgroundColor: string;
+    width: string;
+    textColor: string;
+    panelBackgroundColor: string;
+    panelControlsBackgroundColor: string;
+  };
+  schema: {
+    linesColor: (theme: any) => any;
+    defaultDetailsWidth: string;
+    typeNameColor: (theme: any) => any;
+    typeTitleColor: (theme: any) => any;
+    requireLabelColor: string;
+    labelsTextSize: string;
+    nestingSpacing: string;
+    nestedBackground: (theme: any) => any;
+    caretColor: ({ colors }: { colors: any }) => any;
+    caretSize: string;
+  };
+  codeBlock: {
+    backgroundColor: ({ rightPanel }: { rightPanel: any }) => any;
+    copyButton: {
+      visibleText: ({ codeBlock }: { codeBlock: any }) => string;
+      contrastText: ({ codeBlock }: { codeBlock: any }) => string;
+      background: ({ codeBlock }: { codeBlock: any }) => string;
+    };
+    tokens: {};
+  };
+  layout: {
+    showDarkRightPanel: boolean;
+    stacked: {
+      maxWidth: {
+        _: string;
+        small: string;
+        medium: string;
+        large: string;
+      };
+    };
+    'three-panel': {
+      maxWidth: {
+        _: string;
+        small: string;
+        medium: string;
+        large: string;
+      };
+    };
+  };
+};

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

@@ -0,0 +1,14 @@
+import type { MediaQueries } from './../app/media-css';
+import { defaultTheme } from './default.js';
+export declare const theme: AppTheme;
+declare type InferDeep<T extends object> = {
+  [k in keyof T]: T[k] extends (...args: any) => any
+    ? ReturnType<T[k]>
+    : T[k] extends object
+    ? InferDeep<T[k]>
+    : T[k];
+};
+export declare type AppTheme = InferDeep<typeof defaultTheme> & {
+  mediaQueries: MediaQueries;
+};
+export {};

package/src/types/portal/src/client/styling/resolve.d.ts

@@ -0,0 +1 @@
+export declare function resolveTheme(theme: any): any;

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

@@ -0,0 +1,11 @@
+export declare enum cliCommandNames {
+  BUILD = 'build',
+  DEVELOP = 'develop',
+}
+export declare const VERSION_SEPARATOR = '@';
+export declare const DEFAULT_VERSION_NAME = 'default';
+export declare enum PageType {
+  MARKDOWN = 'Markdown',
+  REFERENCE_DOCS = 'ReferenceDocs',
+  REACT = 'React',
+}