@redocly/theme 0.1.6 → 0.1.9

package/hooks/index.js

@@ -17,3 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useControl"), exports);
 __exportStar(require("./useMount"), exports);
 __exportStar(require("./useUnmount"), exports);
+__exportStar(require("./useActiveHeading"), exports);
+__exportStar(require("./useActiveSectionId"), exports);
+__exportStar(require("./useFullHeight"), exports);
+__exportStar(require("./useNavbarHeight"), exports);

package/hooks/useActiveHeading.d.ts

@@ -0,0 +1,2 @@
+export declare type UseActiveHeadingReturnType = string | undefined;
+export declare function useActiveHeading(contentElement: Element | null): UseActiveHeadingReturnType;

package/hooks/useActiveHeading.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useActiveHeading = void 0;
+var react_1 = require("react");
+function useActiveHeading(contentElement) {
+    var _a = (0, react_1.useState)(undefined), heading = _a[0], setHeading = _a[1];
+    var headings = (0, react_1.useMemo)(function () { return contentElement && contentElement.querySelectorAll('.heading-anchor'); }, [contentElement]);
+    var handler = (0, react_1.useCallback)(
+    // throttle(
+    function () {
+        if (!headings) {
+            return;
+        }
+        for (var i = 0; i < headings.length; i++) {
+            if (headings[i].offsetTop > window.scrollY) {
+                var newHeading = i === 0 ? undefined : headings[i - 1].getAttribute('id') || undefined;
+                setHeading(newHeading);
+                return;
+            }
+        }
+    }, [headings]);
+    (0, react_1.useEffect)(function () {
+        if (typeof window === 'undefined' || !headings || !headings.length) {
+            return undefined;
+        }
+        window.addEventListener('scroll', handler, {
+            capture: false,
+        });
+        handler();
+        return function () { return window.removeEventListener('scroll', handler); };
+    }, [handler, headings]);
+    return heading;
+}
+exports.useActiveHeading = useActiveHeading;

package/hooks/useActiveSectionId.d.ts

@@ -0,0 +1,3 @@
+import type { MenuProps } from '@theme/types/portal';
+export declare type UseActiveSectionIdReturnType = string;
+export declare function useActiveSectionId(location: MenuProps['location'], hasOverviewPage: boolean): UseActiveSectionIdReturnType;

package/hooks/useActiveSectionId.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useActiveSectionId = void 0;
+var react_1 = require("react");
+var lodash_throttle_1 = __importDefault(require("lodash.throttle"));
+var useNavbarHeight_1 = require("../hooks/useNavbarHeight");
+function useActiveSectionId(location, hasOverviewPage) {
+    var _a = (0, react_1.useState)(''), itemId = _a[0], setItemId = _a[1];
+    var navbarHeight = (0, useNavbarHeight_1.useNavbarHeight)(location);
+    var scrollListener = (0, react_1.useMemo)(function () {
+        return (0, lodash_throttle_1.default)(function () {
+            var sections = document.querySelectorAll('[data-section-id]');
+            if (sections.length < 2) {
+                setItemId('');
+                return;
+            }
+            for (var i = 0; i < sections.length; i++) {
+                var section = sections[i];
+                var 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]);
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('scroll', scrollListener, { capture: false });
+        setTimeout(function () {
+            scrollListener();
+        }, 0);
+        return function () {
+            window.removeEventListener('scroll', scrollListener); // TODO: add throttle
+        };
+    }, [location, navbarHeight, scrollListener]);
+    return itemId;
+}
+exports.useActiveSectionId = useActiveSectionId;

package/hooks/useFullHeight.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export declare function useFullHeight(element: MutableRefObject<HTMLElement | null>): void;

package/hooks/useFullHeight.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFullHeight = void 0;
+var react_1 = require("react");
+var lodash_throttle_1 = __importDefault(require("lodash.throttle"));
+function useFullHeight(element) {
+    var handler = (0, react_1.useCallback)(function () {
+        if (!element.current) {
+            return;
+        }
+        var footer = document.querySelector('footer');
+        if (!footer) {
+            return;
+        }
+        var elementTop = element.current.getBoundingClientRect().top;
+        var footerOffset = footer.offsetTop - window.scrollY - elementTop;
+        if (footerOffset > window.innerHeight) {
+            element.current.style.maxHeight = "".concat(window.innerHeight - elementTop, "px");
+        }
+        else {
+            element.current.style.maxHeight = "".concat(footerOffset, "px");
+        }
+    }, [element]);
+    var throttledHandler = (0, react_1.useMemo)(function () { return (0, lodash_throttle_1.default)(handler, 150); }, [handler]);
+    (0, react_1.useEffect)(function () {
+        if (typeof window === 'undefined' || !element.current) {
+            return function () {
+                // nope
+            };
+        }
+        window.addEventListener('scroll', throttledHandler, {
+            capture: false,
+        });
+        window.addEventListener('resize', throttledHandler, {
+            capture: false,
+        });
+        handler();
+        return function () {
+            window.removeEventListener('scroll', throttledHandler);
+            window.removeEventListener('resize', throttledHandler);
+        };
+    }, [throttledHandler, element, handler]);
+}
+exports.useFullHeight = useFullHeight;

package/hooks/useMobileMenu.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from 'react';
+export declare function useMobileMenu(initialState?: boolean): [boolean, Dispatch<SetStateAction<boolean>>];

package/hooks/useMobileMenu.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMobileMenu = void 0;
+var react_1 = require("react");
+var react_router_dom_1 = require("react-router-dom");
+function useMobileMenu(initialState) {
+    if (initialState === void 0) { initialState = false; }
+    var location = (0, react_router_dom_1.useHistory)().location;
+    var _a = (0, react_1.useState)(initialState), isOpen = _a[0], setIsOpen = _a[1];
+    (0, react_1.useEffect)(function () { return setIsOpen(false); }, [location.pathname]);
+    return [isOpen, setIsOpen];
+}
+exports.useMobileMenu = useMobileMenu;

package/hooks/useNavbarHeight.d.ts

@@ -0,0 +1,3 @@
+import type { Location } from 'history';
+export declare type UseNavbarHeightReturnType = number;
+export declare function useNavbarHeight(location: Location): UseNavbarHeightReturnType;

package/hooks/useNavbarHeight.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavbarHeight = void 0;
+var react_1 = require("react");
+var getNavbarElement_1 = require("../utils/getNavbarElement");
+function useNavbarHeight(location) {
+    var _a = (0, react_1.useState)(0), height = _a[0], setHeight = _a[1];
+    (0, react_1.useEffect)(function () {
+        var navbar = (0, getNavbarElement_1.getNavbarElement)();
+        setHeight((navbar && navbar.clientHeight) || 0);
+    }, [location.pathname]);
+    (0, react_1.useEffect)(function () {
+        window.requestAnimationFrame(function () {
+            var navbar = (0, getNavbarElement_1.getNavbarElement)();
+            setHeight((navbar && navbar.clientHeight) || 0);
+        });
+    }, []);
+    return height;
+}
+exports.useNavbarHeight = useNavbarHeight;

package/icons/ShelfIcon/ShelfIcon.js

@@ -41,7 +41,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShelfIcon = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
-var css_variables_1 = require("../../utils/css-variables");
+var utils_1 = require("../../utils");
 var directionMap = {
     right: '0deg',
     down: '90deg',
@@ -54,6 +54,6 @@ var IntShelfIcon = function (_a) {
 };
 exports.ShelfIcon = (0, styled_components_1.default)(IntShelfIcon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  vertical-align: middle;\n  transition: transform 0.2s ease-out;\n"], ["\n  ", "\n  vertical-align: middle;\n  transition: transform 0.2s ease-out;\n"])), function (_a) {
     var _b = _a.size, size = _b === void 0 ? '9px' : _b, _c = _a.float, float = _c === void 0 ? '' : _c, direction = _a.direction, color = _a.color;
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: ", ";\n    width: ", ";\n    float: ", ";\n    transform: rotateZ(", ");\n    fill: ", ";\n  "], ["\n    height: ", ";\n    width: ", ";\n    float: ", ";\n    transform: rotateZ(", ");\n    fill: ", ";\n  "])), size, size, float, directionMap[direction], (0, css_variables_1.getCssColorVariable)(color));
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: ", ";\n    width: ", ";\n    float: ", ";\n    transform: rotateZ(", ");\n    fill: ", ";\n  "], ["\n    height: ", ";\n    width: ", ";\n    float: ", ";\n    transform: rotateZ(", ");\n    fill: ", ";\n  "])), size, size, float, directionMap[direction], (0, utils_1.getCssColorVariable)(color));
 });
 var templateObject_1, templateObject_2;

package/index.d.ts

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

package/index.js

@@ -28,3 +28,5 @@ __exportStar(require("./icons"), exports);
 __exportStar(require("./hooks"), exports);
 __exportStar(require("./utils"), exports);
 __exportStar(require("./globalStyle"), exports);
+__exportStar(require("./OperationBadge"), exports);
+__exportStar(require("./TableOfContent"), exports);

package/mocks/hooks/usePageData.d.ts

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

package/mocks/hooks/usePageData.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageData = void 0;
+function usePageData() {
+    return { prevPage: null, nextPage: null };
+}
+exports.usePageData = usePageData;

package/mocks/models.d.ts

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

package/mocks/models.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/mocks/search.d.ts

@@ -0,0 +1,22 @@
+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 declare function useFuseSearch(): {
+    query: string;
+    setQuery: (val: string) => void;
+    items: SearchDocument[];
+};
+export {};

package/mocks/search.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFuseSearch = void 0;
+function useFuseSearch() {
+    return {
+        query: '',
+        setQuery: function (val) {
+            this.query = val;
+        },
+        items: [],
+    };
+}
+exports.useFuseSearch = useFuseSearch;

package/mocks/types/index.d.ts

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

package/mocks/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/mocks/usePreloadHistory.d.ts

@@ -0,0 +1,3 @@
+export declare function usePreloadHistory(): {
+    push: (url: string) => void;
+};

package/mocks/usePreloadHistory.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePreloadHistory = void 0;
+function usePreloadHistory() {
+    var history = [];
+    return {
+        push: function (url) {
+            history.push(url);
+        },
+    };
+}
+exports.usePreloadHistory = usePreloadHistory;

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.6",
+  "version": "0.1.9",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
   "main": "index.js",
   "typings": "index.d.ts",
   "peerDependencies": {
+    "lodash.throttle": "^4.1.1",
     "prismjs": "^1.28.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "react-router-dom": "^5.3.0",
+    "styled-components": "^5.3.1",
+    "styled-system": "^5.1.5"
   }
 }

package/src/Button/Button.stories.tsx

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

package/src/Button/__tests__/Button.test.tsx

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

package/src/CodeBlock/__tests__/CodeBlock.test.tsx

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

package/src/CopyButton/CopyButton.stories.tsx

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

package/src/CopyButton/CopyButton.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { Button } from '../Button';
+import { Button } from '@theme/Button';
 
 export interface CopyButtonProps {
   text: string;

package/src/CopyButton/CopyButtonWrapper.tsx

@@ -1,9 +1,9 @@
 import React, { memo } from 'react';
 
-import { SamplesControlButton } from '../SamplesPanelControls';
-import { Tooltip } from '../Tooltip';
-import { useControl } from '../hooks';
-import { ClipboardService } from '../utils';
+import { SamplesControlButton } from '@theme/SamplesPanelControls';
+import { Tooltip } from '@theme/Tooltip';
+import { useControl } from '@theme/hooks';
+import { ClipboardService } from '@theme/utils';
 
 export interface CopyButtonWrapperProps {
   data: unknown;

package/src/CopyButton/__tests__/CopyButton.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { fireEvent, getByText, render } from '@testing-library/react';
 
-import { CopyButton } from '../CopyButton';
+import { CopyButton } from '@theme/CopyButton';
 
 const mockSetState = jest.fn();
 

package/src/CopyButton/__tests__/CopyButtonWrapper.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { renderWithTheme } from '../../../tests/utils';
-import { CopyButtonWrapper } from '../CopyButtonWrapper';
+
+import { CopyButtonWrapper } from '@theme/CopyButton';
 
 describe('CopyButtonWrapper', () => {
   it('renders', () => {

package/src/Footer/Footer.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { FooterColumns } from '@theme/Footer/FooterColumns';
+import { FooterCopyright } from '@theme/Footer/FooterCopyright';
+import type { FooterConfig } from '@theme/types/portal';
+
+export function Footer({
+  columns,
+  copyrightText,
+}: React.PropsWithChildren<FooterConfig>): JSX.Element | null {
+  if (!(columns?.length || copyrightText)) {
+    return null;
+  }
+
+  return (
+    <FooterContainer data-component-name="Footer/Footer">
+      <FooterColumns columns={columns} />
+      <FooterCopyright copyrightText={copyrightText} />
+    </FooterContainer>
+  );
+}
+
+const FooterContainer = styled.footer`
+  font-size: 1rem;
+  flex-shrink: 0;
+  background-color: var(--footer-color-background);
+  color: var(--footer-color-text);
+  font-family: var(--font-family-primary);
+  a,
+  a:hover {
+    color: var(--footer-color-text);
+  }
+`;

package/src/Footer/FooterColumn.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import type { FooterColumn as Column } from '@theme/types/portal';
+
+interface FooterColumnProps {
+  column: Column;
+}
+
+export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
+  return (
+    <FooterColumnContainer data-component-name="Footer/FooterColumn">
+      <FooterColumnTitle>{column.group || column.label}</FooterColumnTitle>
+      {column.items.map((columnItem, columnItemInex) => {
+        if (columnItem.type === 'error') {
+          return null;
+        }
+
+        return columnItem.type === 'separator' ? (
+          <FooterSeparator key={columnItem.label + '_' + columnItemInex}>
+            {columnItem.label}
+          </FooterSeparator>
+        ) : (
+          <FooterLink key={columnItemInex} to={columnItem.link} data-cy={columnItem.label}>
+            {columnItem.label}
+          </FooterLink>
+        );
+      })}
+    </FooterColumnContainer>
+  );
+}
+
+const FooterColumnTitle = styled.p`
+  display: inline-block;
+  font-weight: var(--font-weight-regular);
+  font-size: 24px;
+  margin-bottom: 1.5em;
+  font-family: var(--font-family-h);
+`;
+
+const FooterSeparator = styled.div`
+  opacity: 0.75;
+  margin: 10px 0 5px 0;
+  font-size: 0.75em;
+  text-transform: uppercase;
+  font-family: var(--font-family-h);
+`;
+
+const FooterColumnContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  margin: 0px 30px;
+`;
+
+const FooterLink = styled(Link)`
+  font-weight: var(--font-weight-bold);
+  padding-bottom: 0.75em;
+  color: var(--footer-color-text);
+  text-decoration: none;
+`;

package/src/Footer/FooterColumns.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { FooterColumn } from '@theme/Footer/FooterColumn';
+import type { FooterConfig } from '@theme/types/portal';
+
+export function FooterColumns({
+  columns = [],
+}: React.PropsWithChildren<{ columns?: FooterConfig['columns'] }>): JSX.Element | null {
+  if (!columns?.length) {
+    return null;
+  }
+
+  return (
+    <FooterColumnsContainer data-component-name="Footer/FooterColumns">
+      <FooterRow>
+        {columns.map((column, index) => (
+          <FooterColumn key={index} column={column} />
+        ))}
+      </FooterRow>
+    </FooterColumnsContainer>
+  );
+}
+
+export const FooterColumnsContainer = styled.div`
+  padding: 3em 20px 1em 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 1200px;
+  margin: 0 auto;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    padding: 5.625em 20px 3.9375em 20px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.print} {
+    color: black;
+    display: none;
+  }
+`;
+
+export const FooterRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    justify-content: space-evenly;
+  }
+`;

package/src/Footer/FooterCopyright.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { FooterConfig } from '@theme/types/portal';
+
+export function FooterCopyright({
+  copyrightText = '',
+}: React.PropsWithChildren<{ copyrightText?: FooterConfig['copyrightText'] }>): JSX.Element | null {
+  return copyrightText ? (
+    <Wrapper data-component-name="Footer/FooterCopyright">{copyrightText}</Wrapper>
+  ) : null;
+}
+
+const Wrapper = styled.section`
+  display: flex;
+  justify-content: center;
+  font-size: 0.875em;
+  padding: 1.5em 3em;
+  font-weight: var(--font-weight-bold);
+  background-color: var(--footer-color-background);
+  color: var(--footer-color-text);
+  text-align: center;
+  span {
+    max-width: 1200px;
+  }
+`;

package/src/Footer/index.ts

@@ -0,0 +1,4 @@
+export * from './Footer';
+export * from './FooterColumn';
+export * from './FooterColumns';
+export * from './FooterCopyright';

package/src/Headings/Headings.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { H1, H2, H3 } from './Headings';
+import { H1, H2, H3 } from '@theme/Headings';
 
 export default {
   title: 'Typography/Headings',

package/src/Headings/Headings.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { typography } from '../utils';
+import { typography } from '@theme/utils';
 
 export const H1 = styled.h1`
   color: var(--color-content);

package/src/Headings/__tests__/Headings.test.tsx

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

package/src/JsonViewer/JsonViewer.stories.tsx

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