@redocly/theme 0.1.5 → 0.1.8

package/src/Panel/CodePanel.ts

@@ -1,21 +1,22 @@
 import styled from 'styled-components';
 
-import { ShelfIcon } from '../icons/ShelfIcon';
-
-import { Panel } from './Panel';
-import { PanelHeader } from './PanelHeader';
-import { DarkHeader } from './DarkHeader';
-import { PanelBody } from './PanelBody';
-import { PanelHeaderTitle } from './PanelHeaderTitle';
+import { ShelfIcon } from '@theme/icons/ShelfIcon';
+import { Panel } from '@theme/Panel/Panel';
+import { PanelHeader } from '@theme/Panel/PanelHeader';
+import { DarkHeader } from '@theme/Panel/DarkHeader';
+import { PanelBody } from '@theme/Panel/PanelBody';
+import { PanelHeaderTitle } from '@theme/Panel/PanelHeaderTitle';
 
 export const CodePanel = styled(Panel)`
   > ${PanelHeader} {
     ${DarkHeader};
     min-height: 50px;
+
     ${ShelfIcon} {
       fill: var(--color-content-inverse);
       position: relative;
     }
+
     ${PanelHeaderTitle} {
       color: var(--color-content-inverse);
     }

package/src/Panel/ContentPanel.stories.tsx

@@ -1,8 +1,7 @@
 import React, { JSXElementConstructor } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { ContentPanel } from './ContentPanel';
-import { PanelComponentProps } from './PanelComponent';
+import { ContentPanel, PanelComponentProps } from '@theme/Panel';
 
 export default {
   title: 'Components/Panels/ContentPanel',

package/src/Panel/ContentPanel.ts

@@ -1,11 +1,10 @@
 import styled from 'styled-components';
 
-import { ShelfIcon } from '../icons/ShelfIcon';
-
-import { PanelHeaderTitle } from './PanelHeaderTitle';
-import { Panel } from './Panel';
-import { PanelBody } from './PanelBody';
-import { PanelHeader } from './PanelHeader';
+import { ShelfIcon } from '@theme/icons/ShelfIcon';
+import { PanelHeaderTitle } from '@theme/Panel/PanelHeaderTitle';
+import { Panel } from '@theme/Panel/Panel';
+import { PanelBody } from '@theme/Panel/PanelBody';
+import { PanelHeader } from '@theme/Panel/PanelHeader';
 
 export const ContentPanel = styled(Panel)`
   border: 1px solid var(--global-border-color);

package/src/Panel/Panel.stories.tsx

@@ -2,9 +2,7 @@ import React, { JSXElementConstructor } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 
-import { Panel } from './Panel';
-import { PanelHeaderProps } from './PanelHeader';
-import { PanelComponentProps } from './PanelComponent';
+import { Panel, PanelHeaderProps, PanelComponentProps } from '@theme/Panel';
 
 export default {
   title: 'Components/Panels/Panel (base)',

package/src/Panel/Panel.ts

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
-import { PanelBody } from './PanelBody';
-import { PanelComponent } from './PanelComponent';
-import { PanelHeader } from './PanelHeader';
+import { PanelHeader } from '@theme/Panel/PanelHeader';
+import { PanelBody } from '@theme/Panel/PanelBody';
+import { PanelComponent } from '@theme/Panel/PanelComponent';
 
 export const Panel = styled(PanelComponent)`
   border-radius: var(--panels-border-radius);

package/src/Panel/PanelComponent.tsx

@@ -7,11 +7,10 @@ import React, {
 } from 'react';
 import styled from 'styled-components';
 
-import { ShelfIcon } from '../icons';
-
-import { PanelBody } from './PanelBody';
-import { PanelHeader, PanelHeaderProps } from './PanelHeader';
-import { PanelHeaderTitle } from './PanelHeaderTitle';
+import { ShelfIcon } from '@theme/icons';
+import { PanelBody } from '@theme/Panel/PanelBody';
+import { PanelHeader, PanelHeaderProps } from '@theme/Panel/PanelHeader';
+import { PanelHeaderTitle } from '@theme/Panel/PanelHeaderTitle';
 
 export interface PanelComponentProps {
   expanded?: boolean;

package/src/Panel/__tests__/CodePanel.test.tsx

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

package/src/Panel/__tests__/ContentPanel.test.tsx

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

package/src/Panel/__tests__/Panel.test.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { Panel } from '../Panel';
-import { PanelHeaderProps } from '../PanelHeader';
+import { Panel, PanelHeaderProps } from '@theme/Panel';
 
 describe('Panel', () => {
   it('renders without header', () => {

package/src/Panel/__tests__/__snapshots__/CodePanel.test.tsx.snap

@@ -130,14 +130,6 @@ exports[`CodePanel renders expanded 1`] = `
   transition: transform 0.2s ease-out;
 }
 
-.c10 {
-  border-top-left-radius: var(--panels-border-radius);
-  border-top-right-radius: var(--panels-border-radius);
-  border-bottom-right-radius: var(--panels-border-radius);
-  border-bottom-left-radius: var(--panels-border-radius);
-  background-color: var(--panels-background-color);
-}
-
 .c3 {
   position: relative;
   z-index: 1;
@@ -162,6 +154,14 @@ exports[`CodePanel renders expanded 1`] = `
   pointer-events: auto;
 }
 
+.c10 {
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: var(--panels-border-radius);
+  border-bottom-left-radius: var(--panels-border-radius);
+  background-color: var(--panels-background-color);
+}
+
 .c6 {
   line-height: 1;
   margin-right: 5px;

package/src/Panel/__tests__/__snapshots__/ContentPanel.test.tsx.snap

@@ -14,13 +14,6 @@ exports[`ContentPanel renders collapsed 1`] = `
   transition: transform 0.2s ease-out;
 }
 
-.c6 {
-  line-height: 1;
-  margin-right: 5px;
-  font-weight: 700;
-  color: var(--color-content);
-}
-
 .c3 {
   position: relative;
   z-index: 1;
@@ -45,6 +38,13 @@ exports[`ContentPanel renders collapsed 1`] = `
   pointer-events: auto;
 }
 
+.c6 {
+  line-height: 1;
+  margin-right: 5px;
+  font-weight: 700;
+  color: var(--color-content);
+}
+
 .c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -139,21 +139,6 @@ exports[`ContentPanel renders expanded 1`] = `
   transition: transform 0.2s ease-out;
 }
 
-.c6 {
-  line-height: 1;
-  margin-right: 5px;
-  font-weight: 700;
-  color: var(--color-content);
-}
-
-.c10 {
-  border-top-left-radius: var(--panels-border-radius);
-  border-top-right-radius: var(--panels-border-radius);
-  border-bottom-right-radius: var(--panels-border-radius);
-  border-bottom-left-radius: var(--panels-border-radius);
-  background-color: var(--panels-background-color);
-}
-
 .c3 {
   position: relative;
   z-index: 1;
@@ -178,6 +163,21 @@ exports[`ContentPanel renders expanded 1`] = `
   pointer-events: auto;
 }
 
+.c10 {
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: var(--panels-border-radius);
+  border-bottom-left-radius: var(--panels-border-radius);
+  background-color: var(--panels-background-color);
+}
+
+.c6 {
+  line-height: 1;
+  margin-right: 5px;
+  font-weight: 700;
+  color: var(--color-content);
+}
+
 .c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

package/src/Panel/__tests__/__snapshots__/Panel.test.tsx.snap

@@ -100,14 +100,6 @@ exports[`Panel renders collapsed 1`] = `
 `;
 
 exports[`Panel renders expanded 1`] = `
-.c7 {
-  border-top-left-radius: var(--panels-border-radius);
-  border-top-right-radius: var(--panels-border-radius);
-  border-bottom-right-radius: var(--panels-border-radius);
-  border-bottom-left-radius: var(--panels-border-radius);
-  background-color: var(--panels-background-color);
-}
-
 .c5 {
   height: 9px;
   width: 9px;
@@ -145,6 +137,14 @@ exports[`Panel renders expanded 1`] = `
   pointer-events: auto;
 }
 
+.c7 {
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: var(--panels-border-radius);
+  border-bottom-left-radius: var(--panels-border-radius);
+  background-color: var(--panels-background-color);
+}
+
 .c4 {
   line-height: 1;
   margin-right: 5px;
@@ -218,14 +218,6 @@ exports[`Panel renders expanded 1`] = `
 `;
 
 exports[`Panel renders with header 1`] = `
-.c7 {
-  border-top-left-radius: var(--panels-border-radius);
-  border-top-right-radius: var(--panels-border-radius);
-  border-bottom-right-radius: var(--panels-border-radius);
-  border-bottom-left-radius: var(--panels-border-radius);
-  background-color: var(--panels-background-color);
-}
-
 .c5 {
   height: 9px;
   width: 9px;
@@ -263,6 +255,14 @@ exports[`Panel renders with header 1`] = `
   pointer-events: auto;
 }
 
+.c7 {
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: var(--panels-border-radius);
+  border-bottom-left-radius: var(--panels-border-radius);
+  background-color: var(--panels-background-color);
+}
+
 .c4 {
   line-height: 1;
   margin-right: 5px;

package/src/Panel/index.ts

@@ -3,5 +3,6 @@ export * from './ContentPanel';
 export * from './DarkHeader';
 export * from './Panel';
 export * from './PanelBody';
+export * from './PanelComponent';
 export * from './PanelHeader';
 export * from './PanelHeaderTitle';

package/src/SamplesPanelControls/SamplesControlButton.stories.tsx

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

package/src/SamplesPanelControls/SamplesPanelControls.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { CodeBlock } from '../CodeBlock';
+import { CodeBlock } from '@theme/CodeBlock';
 
 export const SamplesControlButton = styled.button`
   background-color: var(--samples-panel-controls-background-color);

package/src/Search/Autocomplete.tsx

@@ -0,0 +1,128 @@
+import React, {
+  ChangeEvent,
+  KeyboardEvent,
+  ReactNode,
+  SyntheticEvent,
+  useEffect,
+  useState,
+} from 'react';
+import { useLocation } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { FormInput } from '@theme/Search/Input';
+import { Popover } from '@theme/Search/Popover';
+import { ActiveItem } from '@shared/models';
+
+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;
+}
+
+export function Autocomplete<T>({
+  placeholder,
+  value,
+  items,
+  change,
+  select,
+  renderItem,
+  children,
+}: AutocompleteProps<T>): JSX.Element {
+  const location = useLocation();
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIdx, setActiveIdx] = useState(-1);
+
+  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);
+    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) {
+          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}>
+        <FormInput
+          value={value}
+          placeholder={placeholder}
+          onChange={onChange}
+          onFocus={open}
+          onClick={stopPropagation}
+        />
+
+        {children?.(isOpen, reset)}
+
+        {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(--color-text-main);
+`;

package/src/Search/ClearIcon.tsx

@@ -0,0 +1,31 @@
+import React, { SVGProps } from 'react';
+import styled from 'styled-components';
+
+const Icon = (props: SVGProps<SVGSVGElement>) => (
+  <span data-component-name="Search/ClearIcon">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      x="0"
+      y="0"
+      viewBox="0 0 298.7 298.7"
+      {...props}
+    >
+      <polygon points="298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " />
+    </svg>
+  </span>
+);
+
+export const ClearIcon = styled(Icon)`
+  position: absolute;
+  cursor: pointer;
+  width: 0.5em;
+  height: 0.5em;
+  right: 1.2em;
+  fill: var(--input-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 0.625em;
+    height: 0.625em;
+  }
+`;

package/src/Search/Input.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+export const FormInput = styled.input.attrs(() => ({
+  'data-component-name': 'Search/Input',
+}))`
+  padding: 1em 2.5em 1em 1em;
+  background-color: var(--input-background-color);
+  border-radius: var(--input-border-radius);
+  border: none;
+  outline: none;
+  color: var(--input-text-color);
+  font-size: var(--input-font-size);
+  font-family: var(--input-font-family);
+  line-height: var(--input-line-height);
+
+  ::placeholder {
+    color: var(--input-text-color);
+  }
+`;

package/src/Search/Parameters.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { OperationParameter } from '@shared/models';
+import { highlight } from '@theme/Search/utils';
+
+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(--color-border-light);
+  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-light);
+  padding-top: 4px;
+`;

package/src/Search/Popover.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const Popover = styled.div.attrs(() => ({
+  'data-component-name': 'Search/Popover',
+}))`
+  position: absolute;
+  top: calc(100% + 10px);
+  right: 0;
+  z-index: 100;
+  min-width: 100%;
+  width: 550px;
+  max-width: 90vw;
+  max-height: 400px;
+  overflow-y: auto;
+  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
+    0 8px 10px -5px rgba(0, 0, 0, 0.4);
+  background: var(--popover-backgrond-color);
+  list-style: none;
+  border-radius: var(--popover-border-radius);
+`;

package/src/Search/Search.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { usePreloadHistory } from '@portal/usePreloadHistory';
+import { useFuseSearch } from '@portal/search';
+import { Autocomplete } from '@theme/Search/Autocomplete';
+import { ClearIcon } from '@theme/Search/ClearIcon';
+import { SearchIcon } from '@theme/Search/SearchIcon';
+import { SearchItem } from '@theme/Search/SearchItem';
+
+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 Search(): JSX.Element {
+  const history = usePreloadHistory();
+  const { query, setQuery, items } = useFuseSearch();
+
+  // TODO: ask somebody about typings
+  const navigate = (item: SearchDocument) => history.push(item.url);
+
+  return (
+    <Wrapper data-component-name="Search/Search">
+      <Autocomplete
+        items={items}
+        value={query}
+        change={setQuery}
+        select={navigate}
+        placeholder="Search the docs"
+        renderItem={(item) => <SearchItem key={item.id} item={item} />}
+      >
+        {(isOpen, reset) => (isOpen ? <ClearIcon onClick={reset} /> : <SearchIcon />)}
+      </Autocomplete>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;

package/src/Search/SearchIcon.tsx

@@ -0,0 +1,32 @@
+import React, { SVGProps } from 'react';
+import styled from 'styled-components';
+
+const Icon = (props: SVGProps<SVGSVGElement>) => (
+  <span data-component-name="Search/SearchIcon">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      x="0"
+      y="0"
+      viewBox="0 0 490 490"
+      {...props}
+    >
+      <path d="M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" />
+    </svg>
+  </span>
+);
+
+export const SearchIcon = styled(Icon)`
+  position: absolute;
+  cursor: pointer;
+  width: 1em;
+  height: 1em;
+  right: 1em;
+  fill: var(--input-text-color);
+  z-index: -1;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 1.2em;
+    height: 1.2em;
+  }
+`;