@redocly/theme 0.10.0 → 0.11.0

package/src/components/Footer/FooterColumns.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { FooterColumn } from '@theme/components/Footer/FooterColumn';
+import type { ResolvedNavItem } from '@theme/types/portal';
+
+interface FooterColumnsProps {
+  columns: ResolvedNavItem[];
+}
+
+export function FooterColumns({ columns }: FooterColumnsProps): JSX.Element | null {
+  if (!columns?.length) {
+    return null;
+  }
+
+  return (
+    <FooterColumnsContainer data-component-name="Footer/FooterColumns">
+      <FooterRow>
+        {columns.map((column, index) => (
+          <FooterColumn key={`${column.label}_${index}`} column={column} />
+        ))}
+      </FooterRow>
+    </FooterColumnsContainer>
+  );
+}
+
+export const FooterColumnsContainer = styled.div`
+  padding: var(--footer-padding-vertical) var(--footer-padding-horizontal);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: var(--footer-container-max-width);
+  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/components/Footer/index.ts

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

package/src/components/JsonViewer/JsonViewer.tsx

@@ -0,0 +1,256 @@
+import React, { memo, useRef } from 'react';
+import styled from 'styled-components';
+
+import type { ReactElement } from 'react';
+
+import { CopyButtonWrapper } from '@theme/components/CopyButton';
+import { SampleControls, SamplesControlButton } from '@theme/components/SamplesPanelControls';
+import { jsonToHTML } from '@theme/utils';
+import { useMount, useUnmount } from '@theme/hooks';
+import { CodeBlock } from '@theme/components/CodeBlock';
+
+export interface JsonProps {
+  data: any;
+  className?: string;
+  jsonSampleExpandLevel: number;
+  withLineNumbers?: boolean;
+  startLineNumber?: number;
+  onCopyClick?: () => void;
+}
+
+function JsonComponent({
+  data,
+  jsonSampleExpandLevel,
+  className,
+  withLineNumbers,
+  startLineNumber,
+  onCopyClick,
+}: JsonProps): JSX.Element {
+  const node = useRef<HTMLDivElement | null>(null);
+
+  useMount(() => {
+    node?.current?.addEventListener('click', clickListener);
+  });
+
+  useUnmount(() => {
+    node?.current?.removeEventListener('click', clickListener);
+  });
+
+  const expandAll = () => {
+    const elements = node?.current?.getElementsByClassName('collapsible');
+    for (const collapsed of Array.prototype.slice.call(elements)) {
+      const parentNode = collapsed.parentNode as Element;
+      if (!parentNode) continue;
+      parentNode.classList.remove('collapsed');
+      parentNode.querySelector('.collapser')?.setAttribute('aria-label', 'collapse');
+    }
+  };
+
+  const collapseAll = () => {
+    const elements = node?.current?.getElementsByClassName('collapsible');
+    // skip first item to avoid collapsing whole object/array
+    const elementsArr = Array.prototype.slice.call(elements, 1);
+
+    for (const expanded of elementsArr) {
+      const parentNode = expanded.parentNode as Element;
+      if (!parentNode) continue;
+      parentNode.classList.add('collapsed');
+      parentNode.querySelector('.collapser')?.setAttribute('aria-label', 'expand');
+    }
+  };
+
+  const collapseElement = (target: HTMLElement) => {
+    if (target.parentElement && target.className === 'collapser') {
+      const collapsed = target.parentElement.getElementsByClassName('collapsible')[0];
+      if (collapsed?.parentElement?.classList.contains('collapsed')) {
+        collapsed.parentElement.classList.remove('collapsed');
+        target.setAttribute('aria-label', 'collapse');
+      } else {
+        collapsed?.parentElement?.classList.add('collapsed');
+        target.setAttribute('aria-label', 'expand');
+      }
+    }
+  };
+
+  const clickListener = (event: MouseEvent) => {
+    collapseElement(event.target as HTMLElement);
+  };
+
+  const renderInner = ({ renderCopyButton }: { renderCopyButton: () => ReactElement }) => {
+    const showFoldingButtons =
+      data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
+
+    return (
+      <JsonViewerWrap data-cy="json-viewer">
+        <SampleControls data-cy="buttons">
+          {renderCopyButton()}
+          {showFoldingButtons && (
+            <>
+              <SamplesControlButton onClick={expandAll} data-cy="expand-all">
+                Expand all
+              </SamplesControlButton>
+              <SamplesControlButton onClick={collapseAll} data-cy="collapse-all">
+                Collapse all
+              </SamplesControlButton>
+            </>
+          )}
+        </SampleControls>
+        <StyledCodeBlock
+          className={withLineNumbers ? `${className} line-numbers` : className}
+          ref={node}
+          dangerouslySetInnerHTML={{
+            __html: jsonToHTML(data, jsonSampleExpandLevel, startLineNumber),
+          }}
+        />
+      </JsonViewerWrap>
+    );
+  };
+
+  return (
+    <CopyButtonWrapper data-cy="copy-button" data={data} onCopyClick={onCopyClick}>
+      {renderInner}
+    </CopyButtonWrapper>
+  );
+}
+
+export const Json = memo<JsonProps>(JsonComponent);
+
+export const JsonViewer = styled(Json).attrs(() => ({
+  'data-component-name': 'JsonViewer/JsonViewer',
+}))<JsonProps>`
+  .redoc-json code {
+    background-color: var(--panel-samples-code-block-background-color);
+    color: var(--text-color-inverse);
+    padding: inherit;
+    border: none;
+  }
+
+  contain: content;
+  overflow-x: auto;
+  position: relative;
+  padding: 10px;
+  border-radius: var(--border-radius);
+  background-color: var(--panel-samples-code-block-background-color);
+  color: var(--text-color-inverse);
+  font-size: var(--code-font-size);
+  font-family: var(--code-font-family);
+  white-space: var(--code-wrap, pre);
+
+  &.line-numbers {
+    padding: 20px 20px 20px 3em;
+
+    *[data-line]:not(.collapsed *[data-line]) {
+      &:before {
+        content: attr(data-line);
+        position: absolute;
+        left: 0;
+        min-width: 2em;
+        text-align: right;
+        pointer-events: none;
+        user-select: none;
+        padding: 0 0.5em;
+        font-size: 13px;
+      }
+    }
+  }
+
+  .callback-function {
+    color: gray;
+  }
+
+  .ellipsis:after {
+    content: ' … ';
+  }
+
+  .collapsible {
+    padding-left: 2ch;
+    display: inline-block;
+  }
+
+  .hoverable {
+    padding: 1px 2px;
+    display: inline-block;
+  }
+
+  .collapsed {
+    white-space: nowrap;
+
+    & > .collapser:after {
+      content: '+';
+    }
+  }
+
+  .hovered {
+    background-color: rgba(235, 238, 249, 1);
+  }
+
+  .collapser {
+    --size: 15px;
+    --margin-right: 3px;
+
+    display: inline-block;
+    background-color: transparent;
+    border: 0;
+    padding: 1px;
+    color: #fff;
+    width: var(--size);
+    height: var(--size);
+    margin-left: calc((var(--size) + var(--margin-right)) * -1);
+    margin-right: var(--margin-right);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    font-family: var(--code-font-family);
+    font-size: var(--code-font-size);
+
+    &:after {
+      content: '-';
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
+    }
+
+    &:focus {
+      outline: #fff dotted 1px;
+    }
+  }
+
+  .selected {
+    outline-width: 1px;
+    outline-style: dotted;
+  }
+
+  .collapsed > .collapsible {
+    display: none;
+  }
+
+  .ellipsis {
+    display: none;
+  }
+
+  .collapsed > .ellipsis {
+    display: inline;
+  }
+`;
+
+export const JsonViewerWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  &:hover > ${SampleControls} {
+    opacity: 1;
+  }
+`;
+
+export const StyledCodeBlock = styled(CodeBlock)`
+  flex: 1;
+
+  code {
+    font-family: var(--code-font-family);
+    font-size: 14px;
+    line-height: 18px;
+  }
+`;

package/src/components/JsonViewer/index.ts

@@ -0,0 +1 @@
+export * from '@theme/components/JsonViewer/JsonViewer';

package/src/components/Markdown/MarkdownLayout.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { PageWrapper } from '@theme/components/Markdown/PageWrapper';
+import { ContainerWrapper } from '@theme/components/Markdown/ContainerWrapper';
+import { PageNavigation } from '@theme/components/PageNavigation/PageNavigation';
+import { EditPageButton } from '@theme/components/EditPageButton';
+import { LastUpdated } from '@theme/components/LastUpdated/LastUpdated';
+import { useThemeConfig } from '@theme/hooks';
+import type { ResolvedNavItemWithLink } from '@theme/types/portal';
+
+type MarkdownLayoutProps = {
+  tableOfContent: React.ReactNode;
+  markdownWrapper: React.ReactNode;
+  feedback: React.ReactNode;
+  editPage?: {
+    to: string;
+    text: string;
+    icon?: string;
+  };
+  /** String in ISO format */
+  lastModified?: string | null;
+  nextPage?: ResolvedNavItemWithLink | null;
+  prevPage?: ResolvedNavItemWithLink | null;
+};
+
+export function MarkdownLayout({
+  tableOfContent,
+  markdownWrapper,
+  feedback,
+  editPage,
+  lastModified,
+  nextPage,
+  prevPage,
+}: MarkdownLayoutProps): JSX.Element {
+  const { markdown } = useThemeConfig();
+  const { editPage: themeEditPage } = markdown || {};
+
+  const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
+
+  return (
+    <PageWrapper data-component-name="Markdown/MarkdownLayout">
+      <ContainerWrapper withToc={true}>
+        <LayoutTop>
+          {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
+          {mergedConf && (
+            <EditPageButton text={mergedConf.text} to={mergedConf.to} icon={mergedConf.icon} />
+          )}
+        </LayoutTop>
+        {markdownWrapper}
+        <LayoutBottom>{feedback}</LayoutBottom>
+        <PageNavigation nextPage={nextPage} prevPage={prevPage} />
+      </ContainerWrapper>
+      {tableOfContent}
+    </PageWrapper>
+  );
+}
+
+const LayoutTop = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+`;
+
+const LayoutBottom = styled(LayoutTop)`
+  > * {
+    margin: 25px 5px;
+  }
+`;

package/src/components/Markdown/index.ts

@@ -0,0 +1,9 @@
+export * from '@theme/components/Markdown/Admonition';
+export * from '@theme/components/Markdown/ContainerWrapper';
+export * from '@theme/components/Markdown/Details';
+export * from '@theme/components/Markdown/Heading';
+export * from '@theme/components/Markdown/MarkdownLayout';
+export * from '@theme/components/Markdown/MarkdownWrapper';
+export * from '@theme/components/Markdown/Mermaid';
+export * from '@theme/components/Markdown/PageWrapper';
+export * from '@theme/components/Markdown/Sup';

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+import React from 'react';
+
+import type { ItemState } from '@portal/Sidebar/types';
+
+import { MenuItemSwitch } from './MenuItemSwitch';
+
+export interface MenuListProps {
+  items: ItemState[];
+  depth?: number;
+}
+
+export function Menu({ depth = 0, items }: MenuListProps) {
+  // TODO: provide active section via MenuContext
+  const activeItem = items.find(({ active }) => active);
+
+  return (
+    <ThemeMenu>
+      {items.map((item, index) => {
+        return (
+          <MenuItemSwitch item={item} key={`${item.pageId}-${index}`} activeItem={activeItem}>
+            {item.items?.length ? <Menu items={item.items} depth={depth + 1} /> : null}
+          </MenuItemSwitch>
+        );
+      })}
+    </ThemeMenu>
+  );
+}
+
+export const ThemeMenu = styled.ul.attrs(() => ({
+  'data-component-name': 'Menu/Menu',
+}))`
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  color: var(--sidebar-item-text-color);
+  position: relative;
+`;

package/src/components/Menu/MenuContainer.tsx

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+interface MenuContainerProps {
+  growContent?: boolean;
+}
+
+export const MenuContainer = styled.div.attrs<MenuContainerProps>(({ growContent }) => ({
+  'data-component-name': 'Menu/MenuContainer',
+  growContent: growContent === undefined ? true : growContent,
+}))<MenuContainerProps>`
+  position: relative;
+  overflow-y: auto;
+  flex-grow: ${({ growContent }) => (growContent ? 1 : 0)};
+  padding-top: var(--sidebar-offset-top);
+`;

package/src/components/Menu/MenuGroup.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+
+import { ArrowIcon } from '@theme/icons/ArrowIcon/ArrowIcon';
+import { MenuLinkItem } from '@theme/components/Menu/MenuLinkItem';
+import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
+import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
+import type { ItemState } from '@theme/components/Sidebar/types';
+
+interface MenuGroupProps {
+  item: ItemState;
+  isExpanded: boolean;
+  toggleExpanded: () => void;
+}
+
+export function MenuGroup({
+  item,
+  isExpanded,
+  toggleExpanded,
+  children,
+}: React.PropsWithChildren<MenuGroupProps>): JSX.Element {
+  const [showChildren, setShowChildren] = useState<boolean>(isExpanded);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    timer.current && clearTimeout(timer.current);
+    if (isExpanded) {
+      setShowChildren(true);
+    } else {
+      timer.current = setTimeout(() => {
+        setShowChildren(false);
+      }, 800);
+    }
+    return () => {
+      timer.current && clearTimeout(timer.current);
+    };
+  }, [isExpanded]);
+
+  return (
+    <Wrapper data-component-name="Menu/MenuGroup">
+      <MenuLinkItem item={item}>
+        <MenuGroupLabel
+          onClick={toggleExpanded}
+          isAlwaysExpanded={item.expanded === 'always'}
+          active={item.active}
+        >
+          <MenuGroupArrow
+            visibility={item.items.length ? 'visible' : 'hidden'}
+            direction={isExpanded ? 'down' : 'right'}
+          />
+          {item.label}
+        </MenuGroupLabel>
+      </MenuLinkItem>
+
+      <MenuWrapper isExpanded={isExpanded}>{showChildren ? children : null}</MenuWrapper>
+
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;
+
+const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
+  padding-left: var(--sidebar-item-nested-offset);
+  overflow: hidden;
+  ${(props) =>
+    props.isExpanded
+      ? `max-height: 99999px;
+        transition: max-height .8s cubic-bezier(0.5, 0, 1, 0) 0s;`
+      : `max-height: 0px;
+	      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};
+`;
+
+const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean }>`
+  padding-left: var(--sidebar-item-padding-horizontal);
+  cursor: ${(props) => (props.isAlwaysExpanded ? 'default' : 'pointer')};
+  font-family: var(--sidebar-item-group-font-family);
+  font-size: var(--sidebar-item-group-font-size);
+  text-transform: var(--sidebar-text-group-transform);
+  color: var(--sidebar-item-group-text-color);
+  background: var(--sidebar-item-group-background-color);
+  ${(props) =>
+    props.active
+      ? `color: var(--sidebar-item-group-active-text-color);
+        background-color: var(--sidebar-item-group-active-background-color);`
+      : null};
+`;
+
+const MenuGroupArrow = styled(ArrowIcon)`
+  margin-right: calc(var(--sidebar-spacing-unit) / 2);
+`;

package/src/components/Menu/MenuItem.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { MenuLinkItem } from '@theme/components/Menu/MenuLinkItem';
+import { ExternalIcon } from '@theme/icons/ExternalIcon';
+import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
+import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
+import type { MenuItemProps } from '@theme/components/Sidebar/types';
+
+export function MenuItem({ item }: MenuItemProps): JSX.Element {
+  return (
+    <Wrapper data-component-name="Sidebar/MenuItem">
+      <MenuLinkItem item={item}>
+        <MenuItemLabel active={item.active}>
+          {item.label}
+          {item.external ? <ExternalIcon dataComponentName="Sidebar/ExternalIcon" /> : null}
+        </MenuItemLabel>
+      </MenuLinkItem>
+
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;

package/src/components/Menu/MenuItemLabel.tsx

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+export const MenuItemLabel = styled.li.attrs(() => ({
+  'data-component-name': 'Menu/MenuItemLabel',
+}))<{ active?: boolean }>`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+  word-break: break-word;
+  margin-bottom: 1px;
+
+  background-color: var(--sidebar-item-background-color);
+  font-family: var(--sidebar-item-font-family);
+  font-size: var(--sidebar-item-font-size);
+  font-weight: var(--font-weight-regular);
+  margin-left: var(--sidebar-offset-left);
+  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+  padding-left: calc(
+    var(--sidebar-item-padding-horizontal) + var(--sidebar-group-item-chevron-size) +
+      var(--sidebar-spacing-unit) * 0.5
+  );
+  border-radius: var(--sidebar-item-border-radius);
+
+  ${(props) =>
+    props.active
+      ? `
+    color: var(--sidebar-item-active-color);
+    background-color: var(--sidebar-item-active-background-color);
+  `
+      : null};
+
+  :hover {
+    color: var(--sidebar-item-hover-color);
+    background-color: var(--sidebar-item-hover-background-color);
+  }
+
+  :empty {
+    padding: 0;
+  }
+`;

package/src/components/Menu/MenuItemSwitch.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { MenuItem, ApiCallItem, Separator } from '@theme';
+
+import type { PropsWithChildren } from 'react';
+import type { MenuItemProps } from '../Sidebar/types';
+
+import { MenuType } from '@portal/Sidebar/types';
+import { getMenuType } from '@portal/Sidebar/getMenuType';
+import { useDrilldown } from '@portal/Sidebar/useDrilldown';
+import { useMenuGroup } from '@portal/Sidebar/useMenuGroup';
+
+export function MenuItemSwitch(props: PropsWithChildren<MenuItemProps>) {
+  const type = getMenuType(props.item);
+
+  const {
+    Drilldown,
+    handleBack,
+    handleExpand,
+    isExpanded: drilldownIsExpanded,
+    prevActiveItem,
+  } = useDrilldown({
+    item: props.item,
+    activeItem: props.activeItem,
+  });
+
+  const { MenuGroup, handleGroupClick, isExpanded } = useMenuGroup(props.item);
+
+  switch (type) {
+    case MenuType.Separator:
+      return <Separator {...props} />;
+    case MenuType.Operation:
+      return <ApiCallItem {...props} />;
+    case MenuType.Group:
+      if (!props.item.items?.length) {
+        // Needed for OpenApi docs model items
+        return (
+          <MenuGroup item={props.item} isExpanded={false} toggleExpanded={() => {}}>
+            {props.children}
+          </MenuGroup>
+        );
+      }
+
+      return (
+        <MenuGroup item={props.item} isExpanded={isExpanded} toggleExpanded={handleGroupClick}>
+          {props.children}
+        </MenuGroup>
+      );
+    case MenuType.DrillDown:
+      return (
+        <Drilldown
+          item={props.item}
+          isExpanded={drilldownIsExpanded}
+          back={handleBack}
+          expand={handleExpand}
+          prevActiveItem={prevActiveItem}
+        >
+          {props.children}
+        </Drilldown>
+      );
+    default:
+      return <MenuItem {...props} />;
+  }
+}