@redocly/theme 0.10.0 → 0.11.1

package/src/Sidebar/MenuLinkItem.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { MenuLink } from '@theme/Sidebar/MenuLink';
-import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
-
-export function MenuLinkItem({
-  item,
-  children,
-}: React.PropsWithChildren<MenuItemProps>): JSX.Element {
-  return (
-    <Wrapper data-component-name="Sidebar/MenuLinkItem">
-      {item.link ? (
-        <MenuLink to={item.link} {...item}>
-          {children}
-        </MenuLink>
-      ) : (
-        children
-      )}
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled.span``;

package/src/Sidebar/Separator.tsx

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

package/src/Sidebar/SeparatorItem.tsx

@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-
-import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
-
-export const SeparatorItem = styled(MenuItemLabel).attrs(() => ({
-  'data-component-name': 'Sidebar/SeparatorItem',
-}))`
-  cursor: default;
-  font-weight: var(--font-weight-bold);
-  color: var(--sidebar-separator-item-color);
-  font-family: var(--sidebar-item-separator-font-family);
-  font-size: var(--sidebar-item-separator-font-size);
-  text-transform: var(--sidebar-item-separator-text-transform);
-  background: var(--sidebar-item-separator-background-color);
-
-  *:not(:first-child) > & {
-    margin-top: var(--sidebar-item-separator-offset);
-  }
-
-  :hover {
-    color: inherit;
-    background-color: inherit;
-  }
-`;

package/src/Sidebar/SidebarLayout.tsx

@@ -1,107 +0,0 @@
-import React, { useEffect } from 'react';
-import styled from 'styled-components';
-
-import { Sidebar } from '@theme/Sidebar/Sidebar';
-import { FooterWrapper } from '@theme/Sidebar/FooterWrapper';
-import { HeaderWrapper } from '@theme/Sidebar/HeaderWrapper';
-import { useMobileMenu } from '@theme/hooks/useMobileMenu';
-import { MobileSidebarButton } from '@theme/Sidebar/MobileSidebarButton';
-import { MenuContainer } from '@theme/Sidebar/MenuContainer';
-import { SidebarSearch } from '@theme/Search/SidebarSearch';
-import { useThemeConfig } from '@theme/hooks/useThemeConfig';
-
-import { MobileSidebarIcon } from './MobileSidebarIcon';
-
-interface SidebarLayoutProps {
-  versions?: React.ReactNode;
-  menu?: React.ReactNode;
-  backLink?: {
-    label: string;
-    slug: string;
-  };
-  footer?: React.ReactNode;
-  actions?: React.ReactNode;
-  header?: React.ReactNode;
-  growContent?: boolean;
-  collapsed?: boolean;
-  onToggleMenu?: (isOpen: boolean) => void;
-}
-
-const StyledFooterWrapper = styled(FooterWrapper)`
-  display: none;
-
-  ${({ theme }) => theme.mediaQueries?.medium} {
-    display: flex;
-  }
-`;
-
-export function SidebarLayout({
-  versions,
-  menu,
-  footer,
-  header,
-  growContent,
-  collapsed,
-  onToggleMenu,
-}: SidebarLayoutProps): JSX.Element | null {
-  const [isOpen, setIsOpen] = useMobileMenu();
-  const [mappedCollapsed, setMappedCollapsed] = React.useState(collapsed);
-
-  useEffect(() => {
-    setMappedCollapsed(collapsed && !isOpen);
-  }, [isOpen, collapsed, setMappedCollapsed]);
-
-  const toggleMenu = () => {
-    onToggleMenu?.(!isOpen);
-    setIsOpen(!isOpen);
-  };
-
-  const { search, sidebar } = useThemeConfig();
-
-  if (sidebar?.hide) {
-    return null;
-  }
-
-  return (
-    <>
-      {mappedCollapsed ? (
-        footer ? (
-          <Wrapper collapsed={true}>
-            <StyledFooterWrapper data-component-name="Sidebar/FooterWrapper" collapsed={true}>
-              {footer}
-            </StyledFooterWrapper>
-            <MobileSidebarButton opened={isOpen} onClick={toggleMenu}>
-              <MobileSidebarIcon />
-            </MobileSidebarButton>
-          </Wrapper>
-        ) : null
-      ) : (
-        <Wrapper data-component-name="Sidebar/SidebarLayout">
-          <MobileSidebarButton opened={isOpen} onClick={toggleMenu}>
-            <MobileSidebarIcon />
-          </MobileSidebarButton>
-          {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
-          <Sidebar animate={true} opened={isOpen}>
-            {header ? <HeaderWrapper>{header}</HeaderWrapper> : null}
-            {versions ? <>{versions}</> : null}
-            <MenuContainer growContent={growContent}>{menu}</MenuContainer>
-            {footer && !isOpen ? (
-              <FooterWrapper data-component-name="Sidebar/FooterWrapper">{footer}</FooterWrapper>
-            ) : null}
-          </Sidebar>
-        </Wrapper>
-      )}
-    </>
-  );
-}
-
-const Wrapper = styled.div<{ collapsed?: boolean }>`
-  ${({ collapsed }) =>
-    collapsed &&
-    `
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-        border-right: 1px solid var(--sidebar-border-color);
-    `}
-`;

package/src/Sidebar/index.ts

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

package/src/Sidebar/types/DrilldownMenuProps.ts

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

package/src/Sidebar/types/ItemState.ts

@@ -1,9 +0,0 @@
-import type { NavItem } from '@theme/Sidebar/types/NavItem';
-import type { 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

@@ -1,6 +0,0 @@
-import type { ItemState } from '@theme/Sidebar/types/ItemState';
-
-export interface MenuItemProps {
-  item: ItemState;
-  activeItem?: ItemState;
-}

package/src/Sidebar/types/MenuStyle.ts

@@ -1,3 +0,0 @@
-export enum MenuStyle {
-  Drilldown = 'drilldown',
-}

package/src/Sidebar/types/NavItem.ts

@@ -1,27 +0,0 @@
-import type { 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[];
-  requiredPermission?: string;
-  menuStyle?: MenuStyle;
-  separatorLine?: boolean;
-  version?: string;
-  default?: boolean;
-}

package/src/Sidebar/types/index.ts

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

package/src/SidebarActions/ChangeViewButton.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import { LayoutVariant } from './SidebarActions';
-import { StyledChangeViewButton, ChangeViewSvgRow, ChangeViewSvgColumn } from './styled';
-
-interface ChangeViewButtonProps {
-  layout: LayoutVariant;
-  onClick: () => void;
-}
-
-export const ChangeViewButton = ({
-  layout,
-  onClick,
-}: ChangeViewButtonProps): JSX.Element | null => {
-  return (
-    <StyledChangeViewButton title="Change layout" onClick={onClick}>
-      {layout === LayoutVariant.STACKED ? <ChangeViewSvgRow /> : <ChangeViewSvgColumn />}
-    </StyledChangeViewButton>
-  );
-};

package/src/SidebarActions/CollapseSidebarButton.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { StyledToggleRightPanelButton, HideLeftPanelSVG, ShowLeftPanelSVG } from './styled';
-
-interface CollapseSidebarButtonProps {
-  initialValue: boolean;
-  onClick: () => void;
-}
-export const CollapseSidebarButton = ({
-  initialValue,
-  onClick,
-}: CollapseSidebarButtonProps): JSX.Element => {
-  return (
-    <StyledToggleRightPanelButton
-      title={initialValue ? 'Show sidebar' : 'Hide sidebar'}
-      onClick={onClick}
-    >
-      {initialValue ? <HideLeftPanelSVG /> : <ShowLeftPanelSVG />}
-    </StyledToggleRightPanelButton>
-  );
-};

package/src/SidebarActions/SidebarActions.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-
-import { ChangeViewButton } from './ChangeViewButton';
-import { ToggleRightPanelButton } from './ToggleRightPanelButton';
-import { CollapseSidebarButton } from './CollapseSidebarButton';
-import { ControlsWrap, ControlsWrapChangeLayoutButtons } from './styled';
-
-export enum LayoutVariant {
-  STACKED = 'stacked',
-  THREE_PANEL = 'three-panel',
-}
-
-interface SidebarActionsProps {
-  showChangeLayoutButton: boolean;
-  showRightPanelToggle: boolean;
-  layout: LayoutVariant;
-  initialShowRightPanelToggle: boolean;
-  collapsedSidebar: boolean;
-  isOpenapiDocs: boolean;
-  hideCollapseSidebarButton?: boolean;
-  onChangeRightPanelViewClick: () => void;
-  onChangeViewClick: () => void;
-  onChangeCollapseSidebarClick: () => void;
-  requestAccessButton?: React.ReactElement | null;
-}
-
-export const SidebarActions = ({
-  showChangeLayoutButton,
-  showRightPanelToggle,
-  layout,
-  initialShowRightPanelToggle,
-  hideCollapseSidebarButton = false,
-  collapsedSidebar,
-  isOpenapiDocs,
-  onChangeRightPanelViewClick,
-  onChangeViewClick,
-  onChangeCollapseSidebarClick,
-  requestAccessButton,
-}: SidebarActionsProps) => {
-  return (
-    <ControlsWrap isOpenapiDocs={isOpenapiDocs} isCollapsed={collapsedSidebar}>
-      {isOpenapiDocs && (
-        <ControlsWrapChangeLayoutButtons isCollapsed={collapsedSidebar}>
-          {initialShowRightPanelToggle && (
-            <ToggleRightPanelButton
-              showRightPanelToggle={showRightPanelToggle}
-              onClick={onChangeRightPanelViewClick}
-            />
-          )}
-          {showChangeLayoutButton && showRightPanelToggle && (
-            <ChangeViewButton layout={layout} onClick={onChangeViewClick} />
-          )}
-        </ControlsWrapChangeLayoutButtons>
-      )}
-      {!collapsedSidebar && requestAccessButton}
-      {!hideCollapseSidebarButton && (
-        <CollapseSidebarButton
-          initialValue={collapsedSidebar}
-          onClick={onChangeCollapseSidebarClick}
-        />
-      )}
-    </ControlsWrap>
-  );
-};

package/src/SidebarActions/ToggleRightPanelButton.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { StyledToggleRightPanelButton, HideRightPanelSVG, ShowRightPanelSVG } from './styled';
-
-interface ToggleRightPanelButtonProps {
-  showRightPanelToggle: boolean;
-  onClick: () => void;
-}
-export const ToggleRightPanelButton = ({
-  showRightPanelToggle,
-  onClick,
-}: ToggleRightPanelButtonProps): JSX.Element => {
-  return (
-    <StyledToggleRightPanelButton
-      title={showRightPanelToggle ? 'Hide samples' : 'Show samples'}
-      onClick={onClick}
-    >
-      {showRightPanelToggle ? <HideRightPanelSVG /> : <ShowRightPanelSVG />}
-    </StyledToggleRightPanelButton>
-  );
-};

package/src/SidebarActions/index.tsx

@@ -1 +0,0 @@
-export { SidebarActions, LayoutVariant } from './SidebarActions';

package/src/SidebarLogo/index.ts

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

package/src/SourceCode/SourceCode.tsx

@@ -1,128 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import { highlight, addLineNumbers } from '@theme/utils';
-import {
-  SampleControls,
-  SampleControlsWrap,
-  PreformattedCodeBlock,
-} from '@theme/SamplesPanelControls';
-import { CopyButtonWrapper } from '@theme/CopyButton';
-
-interface CommonCodeProps {
-  withLineNumbers?: boolean;
-  startLineNumber?: number;
-  className?: string;
-}
-
-export interface SourceCodeProps extends CommonCodeProps {
-  lang: string;
-  source?: string;
-  externalSource?: ExternalSource;
-  onCopyClick?: () => void;
-  withCopyButton?: boolean;
-  dataTestId?: string;
-}
-
-interface CodeProps
-  extends Required<Pick<SourceCodeProps, 'lang' | 'source' | 'dataTestId'>>,
-    CommonCodeProps {}
-
-export interface Sample {
-  lang: string;
-  label?: string;
-}
-
-export type UnstableExternalCodeSample = Sample & {
-  get: (source: ExternalSource) => string;
-};
-
-export interface ExternalSource {
-  sample: UnstableExternalCodeSample;
-  exampleName?: string;
-  pathParams?: any;
-  properties?: any;
-  operation?: any;
-}
-
-export function Code({
-  source,
-  lang,
-  dataTestId,
-  withLineNumbers,
-  startLineNumber,
-  className,
-}: CodeProps): JSX.Element {
-  const highlightedCode = highlight(source, lang);
-
-  return (
-    <PreformattedCodeBlock
-      className={className}
-      dangerouslySetInnerHTML={{
-        __html: withLineNumbers
-          ? addLineNumbers(highlightedCode, startLineNumber)
-          : highlightedCode,
-      }}
-      data-cy={dataTestId}
-    />
-  );
-}
-
-export function SourceCode({
-  lang,
-  source,
-  externalSource,
-  onCopyClick,
-  withCopyButton,
-  dataTestId = 'source-code',
-  withLineNumbers,
-  startLineNumber,
-  className,
-}: SourceCodeProps): JSX.Element {
-  const [sourceCode, setSourceCode] = useState<string>(source ?? '');
-
-  // The same initial value should be returned for ssr and frontend to avoid issues
-  // Because we don't have session storage in ssr and can't get the security details there
-  // Issue for more details https://github.com/Redocly/reference-docs/issues/888
-  useEffect(() => {
-    const _source = source || externalSource?.sample?.get?.(externalSource);
-    if (_source) {
-      setSourceCode(_source);
-    }
-  }, [source, externalSource]);
-
-  if (withCopyButton) {
-    return (
-      <CopyButtonWrapper
-        data={sourceCode}
-        onCopyClick={onCopyClick}
-        data-component-name="SourceCode/SourceCode"
-      >
-        {({ renderCopyButton }) => (
-          <SampleControlsWrap>
-            <SampleControls data-cy="copy-button">{renderCopyButton()}</SampleControls>
-            <Code
-              lang={lang}
-              source={sourceCode}
-              withLineNumbers={withLineNumbers}
-              startLineNumber={startLineNumber}
-              dataTestId={dataTestId}
-              className={className}
-            />
-          </SampleControlsWrap>
-        )}
-      </CopyButtonWrapper>
-    );
-  }
-
-  return (
-    <Code
-      dataTestId={dataTestId}
-      className={className}
-      lang={lang}
-      source={sourceCode}
-      withLineNumbers={withLineNumbers}
-      startLineNumber={startLineNumber}
-      data-component-name="SourceCode/SourceCode"
-    />
-  );
-}

package/src/SourceCode/index.ts

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

package/src/TableOfContent/TableOfContent.tsx

@@ -1,113 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { useFullHeight } from '@theme/hooks/useFullHeight';
-import { useActiveHeading } from '@theme/hooks/useActiveHeading';
-import { useThemeConfig } from '@theme/hooks/useThemeConfig';
-import type { MdHeading } from '@theme/types/portal';
-
-import { getDisplayedHeadingsIds, getDisplayedHeadings, getLeastDepth } from './utils';
-
-interface TableOfContentProps {
-  headings?: Array<MdHeading | null> | null | undefined;
-  contentWrapper: HTMLDivElement | null;
-}
-
-export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
-  const { headings, contentWrapper } = props;
-
-  const sidebar = React.useRef<HTMLDivElement | null>(null);
-  useFullHeight(sidebar);
-  const { markdown: { toc = {} } = {} } = useThemeConfig();
-
-  const displayedHeadings = getDisplayedHeadings(headings, toc.depth || 3);
-  const leastDepth = getLeastDepth(displayedHeadings);
-
-  const activeHeadingId = useActiveHeading(
-    contentWrapper,
-    getDisplayedHeadingsIds(displayedHeadings),
-  );
-
-  if (toc?.hide) {
-    return null;
-  }
-
-  return (
-    <>
-      <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
-        <TableOfContentItems ref={sidebar}>
-          {displayedHeadings.length ? <TocHeader>{toc.header || 'On this page'}</TocHeader> : null}
-          {displayedHeadings.map((heading: MdHeading | null, idx: number) => {
-            if (!heading) {
-              return null;
-            }
-            const href = '#' + heading.id;
-            return (
-              <MenuItem
-                key={href + idx}
-                href={href}
-                depth={heading.depth - leastDepth + 1 || 0}
-                className={activeHeadingId === heading.id ? 'active' : ''}
-                dangerouslySetInnerHTML={{ __html: heading.value || '' }}
-                data-cy={`toc-${heading.value}`}
-              />
-            );
-          })}
-        </TableOfContentItems>
-      </TableOfContentMenu>
-    </>
-  );
-}
-
-const TocHeader = styled.div`
-  font-family: var(--toc-heading-font-family);
-  font-size: var(--toc-heading-font-size);
-  font-weight: var(--toc-heading-font-weight);
-  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);
-  color: var(--toc-heading-text-color);
-  text-transform: uppercase;
-`;
-
-const MenuItem = styled.a<{ depth: number }>`
-  display: block;
-  color: var(--toc-item-text-color);
-  background-color: var(--toc-item-background-color);
-  cursor: pointer;
-  font-size: var(--toc-item-font-size);
-  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);
-  padding-left: calc(var(--toc-item-nested-offset) * ${({ depth }) => depth});
-  transition: background-color 0.3s, color 0.3s;
-  text-decoration: none;
-  word-break: break-word;
-  font-family: var(--heading-font-family, var(--toc-item-font-family));
-
-  :hover,
-  &.active {
-    color: var(--toc-item-active-text-color);
-    background-color: var(--toc-item-active-background-color);
-  }
-
-  :empty {
-    padding: 0;
-  }
-`;
-
-const TableOfContentMenu = styled.aside`
-  background-color: var(--toc-background-color);
-  flex-shrink: 0;
-  display: none !important;
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    width: var(--toc-width);
-    display: block !important;
-  }
-`;
-
-const TableOfContentItems = styled.div`
-  position: sticky;
-  top: calc(var(--navbar-height) + var(--toc-offset-top));
-  max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
-  border-left: 1px solid var(--toc-border-color);
-  overflow-y: auto;
-  width: var(--toc-width);
-`;

package/src/TableOfContent/index.ts

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

package/src/Tooltip/index.ts

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

package/src/Typography/CompactTypography.ts

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-import { Typography } from '@theme/Typography/Typography';
-
-export const CompactTypography = styled(Typography).attrs(() => ({
-  mt: '0em',
-  mb: '0em',
-  'data-component-name': 'Typography/CompactTypography',
-}))``;

package/src/Typography/index.ts

@@ -1,7 +0,0 @@
-export * from '@theme/Typography/H1';
-export * from '@theme/Typography/H2';
-export * from '@theme/Typography/H3';
-export * from '@theme/Typography/Emphasis';
-export * from '@theme/Typography/SectionHeader';
-export * from '@theme/Typography/Typography';
-export * from '@theme/Typography/CompactTypography';