@redocly/theme 0.10.0 → 0.11.0

package/src/components/Search/Autocomplete.tsx

@@ -0,0 +1,148 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import styled from 'styled-components';
+import hotkeys from 'hotkeys-js';
+
+import type { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
+
+import { FormInput } from '@theme/components/Search/Input';
+import { Popover } from '@theme/components/Search/Popover';
+import { ShortcutKey } from '@theme/components/Search/ShortcutKey';
+import type { ActiveItem } from '@theme/types/portal/src/shared/types/activeItem';
+
+interface AutocompleteProps<T> {
+  placeholder?: string;
+  value: string;
+  items: T[];
+  renderItem(item: ActiveItem<T>): ReactNode;
+  change(value: string): void;
+  select(item: T): void;
+  children?(isOpen: boolean, close: () => void): ReactNode;
+  inputRef?: React.RefObject<HTMLInputElement>;
+  keyShortcuts?: string[];
+}
+
+export function Autocomplete<T>({
+  placeholder,
+  value,
+  items,
+  change,
+  select,
+  renderItem,
+  children,
+  keyShortcuts,
+}: AutocompleteProps<T>): JSX.Element {
+  const location = useLocation();
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIdx, setActiveIdx] = useState(-1);
+  const refInput = useRef<HTMLInputElement>(null);
+
+  const hotkeysKeys = keyShortcuts?.join(',');
+
+  useEffect(() => {
+    if (hotkeysKeys) {
+      hotkeys(hotkeysKeys, (ev) => {
+        refInput.current?.focus();
+        ev.preventDefault();
+      });
+
+      return () => hotkeys.unbind(hotkeysKeys as string);
+    }
+  }, [hotkeysKeys]);
+
+  const open = () => setIsOpen(true);
+
+  const close = () => {
+    setIsOpen(false);
+    setActiveIdx(-1);
+  };
+
+  const reset = () => {
+    change('');
+    close();
+  };
+
+  const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
+
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setActiveIdx(-1);
+    setIsOpen(true);
+    change(event.target.value);
+  };
+
+  const onKeydown = (event: KeyboardEvent<HTMLInputElement>) => {
+    switch (event.code) {
+      case 'Escape':
+        close();
+        event.currentTarget.blur();
+        break;
+      case 'ArrowDown':
+        setActiveIdx(Math.min(activeIdx + 1, items.length - 1));
+        event.preventDefault();
+        break;
+      case 'ArrowUp':
+        setActiveIdx(Math.max(0, activeIdx - 1));
+        break;
+      case 'Enter':
+        if (activeIdx > -1) {
+          reset();
+          select(items[activeIdx]);
+        }
+        break;
+    }
+  };
+
+  const mapItem = (item: T, idx: number) => {
+    const active = idx === activeIdx;
+    return renderItem({ ...item, active });
+  };
+
+  useEffect(close, [location]);
+
+  return (
+    <Wrapper data-component-name="Search/Autocomplete">
+      {isOpen ? <Overlay onClick={close} /> : null}
+      <AutocompleteBox onKeyDown={onKeydown}>
+        {children?.(isOpen, reset)}
+
+        <FormInput
+          value={value}
+          placeholder={placeholder}
+          onChange={onChange}
+          onFocus={open}
+          onClick={stopPropagation}
+          ref={refInput}
+        />
+
+        {!isOpen && <ShortcutKey keyShortcuts={keyShortcuts} />}
+
+        {isOpen && value ? (
+          <Popover>{items.length ? items.map(mapItem) : <Message>No results</Message>}</Popover>
+        ) : null}
+      </AutocompleteBox>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;
+
+const AutocompleteBox = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+`;
+
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+`;
+
+const Message = styled.div`
+  padding: 24px;
+  color: var(--search-item-title-text-color);
+`;

package/src/components/Search/Parameters.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { highlight } from '@theme/components/Search/utils';
+import type { OperationParameter } from '@theme/types/portal/src/shared/types/searchDocument';
+interface ParametersProps {
+  parameters: OperationParameter[];
+}
+
+const MAX_ITEMS = 2;
+
+export function Parameters({ parameters = [] }: ParametersProps): JSX.Element {
+  const moreItems = Math.max(0, parameters.length - MAX_ITEMS);
+  if (moreItems) {
+    parameters.length = MAX_ITEMS;
+  }
+
+  return (
+    <Wrapper data-component-name="Search/Parameters">
+      {parameters.map((param) => {
+        const path = `${param.place} → ${
+          param.path?.length ? param.path?.join(' → ') + ' → ' : ''
+        }`;
+        return (
+          <>
+            <Place>
+              {path}
+              {highlight(param.name)} <br />
+              {highlight(param.description)}
+            </Place>
+          </>
+        );
+      })}
+      {moreItems ? <MoreText>and {moreItems} more...</MoreText> : null}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  border-left: 1px solid var(--border-color);
+  padding: 0 12px;
+  margin-top: 8px;
+  margin-bottom: 4px;
+`;
+
+const Place = styled.div`
+  font-size: var(--font-size-small);
+  padding-top: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:first-child {
+    padding-top: 0;
+  }
+`;
+
+const MoreText = styled.div`
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-regular);
+  padding-top: 4px;
+`;

package/src/components/Search/Search.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { useFuseSearch } from '@portal/search';
+import { Autocomplete } from '@theme/components/Search/Autocomplete';
+import { ClearIcon } from '@theme/components/Search/ClearIcon';
+import { SearchIcon } from '@theme/components/Search/SearchIcon';
+import { SearchItem } from '@theme/components/Search/SearchItem';
+import { useThemeConfig } from '@theme/hooks';
+import type { SearchDocument } from '@theme/types/portal/src/shared/types/searchDocument';
+import { usePreloadHistory } from '@portal/usePreloadHistory';
+
+export function Search(): JSX.Element {
+  const history = usePreloadHistory();
+  const { query, setQuery, items } = useFuseSearch();
+  const themeSettings = useThemeConfig();
+
+  // TODO: ask somebody about typings
+  const navigate = (item: SearchDocument) => history.push(item.url);
+
+  const renderAutocomplete = () => (
+    <Autocomplete
+      items={items}
+      value={query}
+      change={setQuery}
+      select={navigate}
+      placeholder="Search the docs"
+      keyShortcuts={themeSettings?.search?.shortcuts ?? ['/']}
+      renderItem={(item) => <SearchItem key={item.id} item={item} />}
+    >
+      {(isOpen, reset) => (isOpen ? <ClearIcon onClick={reset} /> : <SearchIcon />)}
+    </Autocomplete>
+  );
+
+  return <Wrapper data-component-name="Search/Search">{renderAutocomplete()}</Wrapper>;
+}
+
+const Wrapper = styled.div`
+  margin-left: auto;
+
+  display: none;
+
+  ${({ theme }) => theme.mediaQueries?.small} {
+    display: block;
+  }
+
+  ${({ theme }) => theme.mediaQueries?.medium} {
+    margin: 0 auto;
+  }
+`;

package/src/components/Search/SearchItem.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+
+import { OperationBadge } from '@theme/components/OperationBadge';
+import { Link } from '@portal/Link';
+import { Parameters } from '@theme/components/Search/Parameters';
+import { highlight } from '@theme/components/Search/utils';
+import type { ActiveItem } from '@theme/types/portal/src/shared/types/activeItem';
+import type { SearchDocument } from '@theme/types/portal/src/shared/types/searchDocument';
+
+interface SearchItemProps {
+  item: ActiveItem<SearchDocument>;
+}
+
+export function SearchItem({ item }: SearchItemProps): JSX.Element {
+  const ref = useRef<HTMLAnchorElement>();
+
+  useEffect(() => {
+    if (item.active) {
+      ref.current?.focus();
+    }
+  }, [item.active]);
+
+  return (
+    <SearchLink to={item.url} tabIndex={0} innerRef={ref} data-component-name="Search/SearchItem">
+      {item.httpVerb ? (
+        <Operation>
+          <OperationBadge type={item.httpVerb}>{item.httpVerb}</OperationBadge>
+          {item.pathName ? highlight(item.pathName) : null}
+        </Operation>
+      ) : null}
+      <Title>{highlight(item.title)}</Title>
+      <Description>{highlight(item.text)}</Description>
+
+      {item.parameters?.length ? (
+        <Parameters parameters={item.parameters} />
+      ) : (
+        <Path>{item.path?.join(' → ')}</Path>
+      )}
+    </SearchLink>
+  );
+}
+
+const Title = styled.div`
+  font-weight: var(--font-weight-bold);
+  color: var(--search-item-title-text-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: var(--line-height-base);
+`;
+
+const SearchLink = styled(Link)`
+  display: block;
+  text-decoration: none;
+  padding: var(--search-item-padding);
+  transition: background-color 0.3s ease;
+  outline: none;
+  white-space: nowrap;
+  color: var(--search-item-text-color);
+  background-color: var(--search-item-background-color);
+
+  &:hover,
+  &:focus {
+    color: var(--search-item-active-text-color);
+    background-color: var(--search-item-active-background-color);
+    ${Title} {
+      color: var(--search-item-active-title-text-color);
+    }
+  }
+`;
+
+const Operation = styled.div`
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-small);
+  color: var(--search-item-title-text-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const Description = styled.div`
+  font-size: var(--font-size-base);
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const Path = styled.div`
+  font-size: var(--font-size-small);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 22px;
+`;

package/src/components/Search/SidebarSearch.tsx

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+import { Search } from '@theme/components/Search/Search';
+import { Popover } from '@theme/components/Search/Popover';
+
+export const SidebarSearch = styled(Search).attrs(() => ({
+  'data-component-name': 'Search/SidebarSearch',
+}))`
+  --search-input-text-color: var(--sidebar-item-active-color);
+
+  ${Popover} {
+    right: unset;
+    top: 100%;
+  }
+`;

package/src/components/Search/index.ts

@@ -0,0 +1,9 @@
+export * from '@theme/components/Search/Autocomplete';
+export * from '@theme/components/Search/ClearIcon';
+export * from '@theme/components/Search/Input';
+export * from '@theme/components/Search/Parameters';
+export * from '@theme/components/Search/Popover';
+export * from '@theme/components/Search/Search';
+export * from '@theme/components/Search/SearchIcon';
+export * from '@theme/components/Search/SearchItem';
+export * from '@theme/components/Search/utils';

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
+import { SeparatorItem } from '@theme/components/Separator/SeparatorItem';
+import type { MenuItemProps } from '@theme/components/Sidebar/types';
+
+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/components/Separator/SeparatorItem.tsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+import { MenuItemLabel } from '@theme/components/Menu/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/components/Separator/index.ts

@@ -0,0 +1,3 @@
+export * from '@theme/components/Separator/Separator';
+export * from '@theme/components/Separator/SeparatorLine';
+export * from '@theme/components/Separator/SeparatorItem';

package/src/components/Sidebar/ApiCallItem.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { OperationBadge } from '@theme/components/OperationBadge';
+import { MenuLinkItem } from '@theme/components/Menu/MenuLinkItem';
+import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
+import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
+import type { MenuItemProps } from '@theme/components/Sidebar/types';
+
+export function ApiCallItem({ item }: MenuItemProps): JSX.Element {
+  return (
+    <Wrapper data-component-name="Sidebar/ApiCallItem">
+      <MenuLinkItem item={item}>
+        <MenuItemLabel active={item.active}>
+          <Badge type={item.httpVerb || ''}>
+            {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
+          </Badge>
+          {item.label}
+        </MenuItemLabel>
+      </MenuLinkItem>
+
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;
+
+export const Badge = styled(OperationBadge)`
+  flex-shrink: 0;
+  margin-top: 0;
+  width: 36px;
+  height: 14px;
+  font-size: var(--sidebar-item-badge-http-font-size);
+  font-family: var(--sidebar-item-badge-http-font-family);
+  font-weight: var(--sidebar-item-badge-http-font-weight);
+  border-radius: var(--sidebar-item-badge-http-border-radius);
+  color: var(--sidebar-item-badge-http-text-color);
+`;

package/src/components/Sidebar/BackButton.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ArrowBack } from '@theme/ui/ArrowBack';
+
+interface BackButtonProps {
+  back: () => void;
+}
+
+export function BackButton({
+  children,
+  back,
+}: React.PropsWithChildren<BackButtonProps>): JSX.Element {
+  return (
+    <Button onClick={back} data-component-name="Sidebar/BackButton">
+      <ArrowBack dataComponentName="Sidebar/ArrowBack" />
+      {children}
+    </Button>
+  );
+}
+
+const Button = styled.button`
+  width: 100%;
+  background-color: var(--sidebar-back-button-background-color);
+  padding: 0;
+  border: 0;
+  outline: 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: var(--sidebar-back-button-text-color);
+  font-size: var(--sidebar-back-button-font-size);
+  font-family: var(--sidebar-back-button-font-family);
+  text-transform: var(--sidebar-back-button-transform);
+
+  transition: color 0.25s ease;
+  text-align: left;
+  margin: var(--sidebar-back-button-margin);
+
+  &:hover {
+    color: var(--sidebar-back-button-hover-text-color);
+    background: var(--sidebar-back-button-hover-background-color);
+  }
+`;

package/src/components/Sidebar/Drilldown.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
+import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
+import { DrilldownMenuItem } from '@theme/components/Sidebar/DrilldownMenuItem';
+import { DrilldownMenu } from '@theme/components/Sidebar/DrilldownMenu';
+import type { DrilldownMenuProps } from '@theme/components/Sidebar/types';
+
+interface DrilldownProps extends DrilldownMenuProps {
+  isExpanded: boolean;
+  expand: () => void;
+}
+
+export function Drilldown({
+  isExpanded,
+  item,
+  expand,
+  ...props
+}: React.PropsWithChildren<DrilldownProps>): JSX.Element {
+  return (
+    <Wrapper data-component-name="Sidebar/Drilldown">
+      <DrilldownLabel onClick={expand}>
+        <DrilldownMenuItem item={item} />
+      </DrilldownLabel>
+
+      {isExpanded ? <DrilldownMenu item={item} {...props} /> : null}
+
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;
+
+const DrilldownLabel = styled(MenuItemLabel)`
+  padding: var(--sidebar-item-nested-offset) var(--sidebar-item-padding-horizontal);
+  font-weight: var(--font-weight-bold);
+
+  &:hover {
+    color: initial;
+    background-color: initial;
+  }
+`;

package/src/components/Sidebar/DrilldownMenu.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+import { BackButton } from '@theme/components/Sidebar/BackButton';
+import { DrilldownMenuItem } from '@theme/components/Sidebar/DrilldownMenuItem';
+import type { DrilldownMenuProps } from '@theme/components/Sidebar/types';
+
+export function DrilldownMenu({
+  item,
+  back,
+  prevActiveItem,
+  children,
+}: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element {
+  return (
+    <MenuContainer data-component-name="Sidebar/DrilldownMenu">
+      <MenuContent>
+        <MenuWrapper>
+          <BackButton back={back}>{prevActiveItem?.label || 'Back'}</BackButton>
+          <DrilldownMenuItem item={item} />
+        </MenuWrapper>
+
+        {children}
+      </MenuContent>
+    </MenuContainer>
+  );
+}
+
+const MenuContainer = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 100;
+  background-color: var(--sidebar-item-drilldown-background-color);
+`;
+
+const slideInAnimation = keyframes`
+  0% {
+    transform: translateX(100%)
+  }
+  100% {
+    transform: translateX(0%)
+  }
+`;
+
+const MenuContent = styled.div`
+  animation-name: ${slideInAnimation};
+  animation-fill-mode: forwards;
+  animation-duration: 0.3s;
+  animation-timing-function: ease;
+  background-color: transparent;
+`;
+
+const MenuWrapper = styled.div`
+  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+  margin-bottom: calc(var(--sidebar-spacing-unit) * 3);
+  word-break: break-word;
+`;

package/src/components/Sidebar/DrilldownMenuItem.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { MenuItemProps } from '@theme/components/Sidebar/types';
+
+export function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element {
+  return (
+    <Container data-component-name="Sidebar/DrilldownMenuItem">
+      {item.icon ? <Icon src={item.icon} /> : null}
+      <div>
+        {item.label}
+        {item.sublabel ? <SubLabel>{item.sublabel}</SubLabel> : null}
+      </div>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  color: var(--sidebar-item-drilldown-text-color);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--sidebar-item-drilldown-font-size);
+  font-family: var(--sidebar-item-drilldown-font-family);
+  text-transform: var(--sidebar-text-drilldown-transform);
+  background: var(--sidebar-item-drilldown-background-color);
+`;
+
+const Icon = styled.img`
+  width: var(--sidebar-item-icon-size);
+  height: var(--sidebar-item-icon-size);
+  margin-right: var(--sidebar-spacing-unit);
+  border-radius: var(--sidebar-item-icon-border-radius);
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+
+const SubLabel = styled.div`
+  margin-top: 2px;
+  color: var(--sidebar-item-sublabel-text-color);
+  font-weight: var(-sidebar-item-sublabel-font-weight);
+  font-size: var(--sidebar-item-sublabel-font-size);
+  font-family: var(--sidebar-item-sublabel-font-family);
+`;