@redocly/theme 0.10.0 → 0.11.0

package/src/Panel/Panel.ts

@@ -1,34 +0,0 @@
-import styled from 'styled-components';
-
-import { PanelHeader } from '@theme/Panel/PanelHeader';
-import { PanelBody } from '@theme/Panel/PanelBody';
-import { PanelComponent } from '@theme/Panel/PanelComponent';
-import { ShelfIcon } from '@theme/icons/ShelfIcon';
-
-export const Panel = styled(PanelComponent).attrs(({ className }) => ({
-  'data-component-name': 'Panel/Panel',
-  className: className || 'panel-default',
-}))`
-  background-color: var(--panel-background-color);
-  color: var(--panel-text-color);
-  font-family: var(--panel-font-family-local);
-  font-size: var(--panel-font-size-local);
-  font-weight: var(--panel-font-weight-local);
-  border-radius: var(--panel-border-radius-local);
-  border: var(--panel-border-local);
-
-  ${PanelHeader} + ${PanelBody} {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  ${PanelHeader} {
-    ${ShelfIcon} {
-      fill: var(--panel-chevron-icon-color);
-    }
-  }
-
-  &:not(:last-child) {
-    margin-bottom: var(--panel-gap-vertical);
-  }
-`;

package/src/Panel/PanelComponent.tsx

@@ -1,79 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-
-import type { BaseSyntheticEvent, PropsWithChildren, ReactNode } from 'react';
-
-import { ShelfIcon } from '@theme/icons';
-import { PanelBody } from '@theme/Panel/PanelBody';
-import { PanelHeader } from '@theme/Panel/PanelHeader';
-import { PanelHeaderTitle } from '@theme/Panel/PanelHeaderTitle';
-import type { PanelHeaderProps } from '@theme/Panel/PanelHeader';
-
-export interface PanelComponentProps {
-  expanded?: boolean;
-  className?: string;
-  renderChildrenHidden?: boolean;
-  header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
-  onToggle?: (expanded: boolean) => void;
-  description?: React.ReactNode;
-}
-
-export function PanelComponent({
-  expanded = true,
-  renderChildrenHidden = false,
-  header,
-  className,
-  children,
-  onToggle,
-  description,
-}: PropsWithChildren<PanelComponentProps>): JSX.Element {
-  const [isExpanded, setExpanded] = useState(expanded);
-  const [animate, setAnimate] = useState(false);
-
-  const toggle = ({ target }: BaseSyntheticEvent): void => {
-    if (target instanceof HTMLAnchorElement) return;
-    setAnimate(true);
-    setExpanded(!isExpanded);
-    onToggle?.(!isExpanded);
-  };
-
-  useEffect(() => setExpanded(expanded), [expanded]);
-
-  return (
-    <div
-      className={className}
-      data-cy={
-        typeof header === 'string' ? ('panel-' + header).replace(/ /g, '-').toLowerCase() : null
-      }
-      data-component-name="Panel/PanelComponent"
-    >
-      {header &&
-        (typeof header === 'function' ? (
-          header({ expanded: isExpanded, toggle })
-        ) : (
-          <PanelHeader data-cy="panel-header" onClick={toggle} expanded={isExpanded}>
-            <InlineBox>
-              <PanelHeaderTitle data-cy="title">{header}</PanelHeaderTitle>
-              <ShelfIcon direction={isExpanded ? 'down' : 'right'} />
-              {description}
-            </InlineBox>
-          </PanelHeader>
-        ))}
-
-      {(isExpanded || renderChildrenHidden) && (
-        <PanelBody data-cy="panel-body" hidden={!isExpanded} animate={animate}>
-          {children}
-        </PanelBody>
-      )}
-    </div>
-  );
-}
-
-export const InlineBox = styled.div`
-  display: inline-flex;
-  align-items: center;
-
-  > span:last-child {
-    margin-left: 8px;
-  }
-`;

package/src/Panel/index.ts

@@ -1,5 +0,0 @@
-export * from '@theme/Panel/Panel';
-export * from '@theme/Panel/PanelBody';
-export * from '@theme/Panel/PanelComponent';
-export * from '@theme/Panel/PanelHeader';
-export * from '@theme/Panel/PanelHeaderTitle';

package/src/Profile/UserProfile.tsx

@@ -1,55 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-import { Profile } from '@theme/Profile/Profile';
-import { Tooltip } from '@theme/Tooltip/Tooltip';
-
-import { UserProfileMenu } from './UserProfileMenu';
-
-export interface UserProfileProps {
-  userInfo: {
-    isAuthenticated: boolean;
-    name: string;
-    picture: string;
-    logoutDisabled?: boolean;
-  };
-  handleLogout: () => void;
-  hasDeveloperOnboarding?: boolean;
-}
-
-export function UserProfile({
-  userInfo,
-  handleLogout,
-  hasDeveloperOnboarding = false,
-}: UserProfileProps): JSX.Element {
-  const [isOpened, setIsOpened] = useState<boolean>(false);
-
-  return (
-    <StyledTooltip
-      isOpen={isOpened}
-      withArrow={false}
-      className="copy-button"
-      placement="bottom"
-      width="100%"
-      tip={
-        <UserProfileMenu
-          hasDeveloperOnboarding={hasDeveloperOnboarding}
-          handleLogout={handleLogout}
-          setIsOpened={setIsOpened}
-        />
-      }
-    >
-      <Profile
-        name={userInfo.name}
-        imageUrl={userInfo.picture}
-        onClick={userInfo.logoutDisabled ? undefined : () => setIsOpened(!isOpened)}
-      />
-    </StyledTooltip>
-  );
-}
-
-const StyledTooltip = styled(Tooltip)`
-  > span {
-    padding: 0;
-  }
-`;

package/src/Profile/index.ts

@@ -1,6 +0,0 @@
-export { Profile } from './Profile';
-export type { ProfileProps } from './Profile';
-export { LoginLink } from './LoginLink';
-export type { LoginLinkProps } from './LoginLink';
-export { UserProfile } from './UserProfile';
-export type { UserProfileProps } from './UserProfile';

package/src/ReferenceDocs/DevOnboardingTryItSecurity.tsx

@@ -1,180 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import type { TryItSecurityAppsProps } from './TryItSecurityApps';
-
-import { Button } from '@theme/Button/Button';
-import { usePageData } from '@portal/hooks/usePageData';
-import { usePreloadHistory } from '@portal/usePreloadHistory';
-
-import { Dropdown } from './Dropdown';
-
-export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
-  const apiId = (props as any).apiId;
-
-  // @ts-ignore
-  const { userData } = usePageData('userData') || {};
-  const history = usePreloadHistory();
-
-  // TODO: handle error
-  const [_error, setError] = React.useState<string | undefined>();
-  const [apps, setApps] = React.useState<{ id: string; title: string }[] | undefined>();
-  const [appId, setAppId] = React.useState<string | undefined>('');
-  const [loading, setLoading] = React.useState(true);
-  const [appLoading, setAppLoading] = React.useState(false);
-
-  const [selectedAppSecret, setSelectedAppSecret] = React.useState<string | undefined>();
-
-  const [acceptValueUpdate, setAcceptValueUpdate] = React.useState(true);
-  const initialRender = React.useRef(true);
-
-  const hasApiAccess = !loading && !!apps?.length;
-
-  React.useEffect(() => {
-    if (!props.value && initialRender.current) return;
-    if (acceptValueUpdate) {
-      setAcceptValueUpdate(false);
-    } else {
-      setAppId('');
-      setSelectedAppSecret('');
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.value]);
-
-  React.useEffect(() => {
-    initialRender.current = false;
-    const prevAppId = sessionStorage.getItem('redocly_onboarding:prevAppId');
-    if (prevAppId) {
-      setAppId(prevAppId);
-    }
-    if (userData?.isAuthenticated) {
-      fetch(`/api/api-keys/api-products/${apiId}/access?expand=1`).then((res) => {
-        return res
-          .json()
-          .then((data: any) => {
-            if (res.ok) {
-              setApps(data.apps);
-
-              if (data.apps[0]?.id) {
-                setAppId(data.apps[0].id);
-                loadAppCredentials(data.apps[0].id);
-              }
-            } else {
-              setError(data.message);
-            }
-          })
-          .catch(() => setError('Something went wrong'))
-          .finally(() => setLoading(false));
-      });
-    }
-  }, [apiId, userData?.isAuthenticated]);
-
-  React.useEffect(() => {
-    sessionStorage.setItem('redocly_onboarding:prevAppId', appId || '');
-  }, [appId]);
-
-  if (!apiId || !userData?.isAuthenticated) {
-    return null;
-  }
-
-  const loadAppCredentials = (appId: string) => {
-    setAppLoading(true);
-    fetch(`/api/api-keys/apps/${appId}`).then((res) => {
-      return res
-        .json()
-        .then((data: any) => {
-          if (res.ok) {
-            const cred = data.credentials.find((cred: any) => cred.status === 'approved');
-            setAcceptValueUpdate(true);
-            setSelectedAppSecret(cred.clientSecret);
-          } else {
-            setError(data.message);
-          }
-        })
-        .catch(() => setError('Something went wrong'))
-        .finally(() => setAppLoading(false));
-    });
-  };
-
-  const placeholder = loading
-    ? 'Loading your apps...'
-    : hasApiAccess
-    ? undefined
-    : 'You do not have access to this API';
-
-  return (
-    <>
-      <FormLabel htmlFor="server">Select app: </FormLabel>
-      <FormControl>
-        <TryItDropdown
-          placeholder={placeholder}
-          value={appId || placeholder}
-          options={apps?.map((app) => ({ title: app.title, value: app.id })) || []}
-          fullWidth
-          onChange={({ value }: { value: string }) => {
-            setAppId(value);
-            loadAppCredentials(value);
-          }}
-        />
-        <UseKeyButton
-          disabled={(!selectedAppSecret && hasApiAccess) || appLoading}
-          color="secondary"
-          onClick={() => {
-            if (selectedAppSecret) {
-              props.onChange(selectedAppSecret);
-            } else if (!hasApiAccess) {
-              history.push('/apps/?createApp&apiId=' + apiId);
-            }
-          }}
-        >
-          {appLoading ? 'Loading...' : hasApiAccess ? 'Use key' : 'Request access'}
-        </UseKeyButton>
-      </FormControl>
-    </>
-  );
-}
-
-const TryItDropdown = styled(Dropdown)`
-  .dropdown-select,
-  label {
-    background-color: var(--panel-try-it-dropdown-background-color);
-    border: var(--panel-try-it-dropdown-border);
-    color: var(--panel-try-it-dropdown-color);
-  }
-`;
-
-const FormControl = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 10px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-`;
-
-const FormLabel = styled.label<{ required?: boolean }>`
-  padding-bottom: 6px;
-  display: block;
-  white-space: nowrap;
-  line-height: 1em;
-
-  ${({ required }) =>
-    required &&
-    `
-      &:after {
-        display: inline-block;
-        content: '*';
-        margin-left: 4px;
-        color: var(--color-error-500);
-      }
-    `}
-`;
-
-const UseKeyButton = styled(Button)`
-  min-width: 100px;
-  align-self: flex-end;
-  margin-top: 10px;
-  margin-right: 0;
-`;

package/src/ReferenceDocs/TryItSecurityApps.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import { useGlobalData } from '@portal/hooks';
-
-import { DevOnboardingTryItSecurity } from './DevOnboardingTryItSecurity';
-
-export type TryItSecurityAppsProps = {
-  apiId?: string;
-  value?: string;
-  onChange: (newSecretKey: string) => void;
-};
-
-export function TryItSecurityApps(props: TryItSecurityAppsProps) {
-  const { hasDeveloperOnboarding } = useGlobalData() || {};
-
-  return hasDeveloperOnboarding && props.apiId ? <DevOnboardingTryItSecurity {...props} /> : null;
-}

package/src/SamplesPanelControls/SamplesPanelControls.ts

@@ -1,73 +0,0 @@
-import styled from 'styled-components';
-
-import { CodeBlock } from '@theme/CodeBlock';
-
-export const SamplesControlButton = styled.button.attrs(() => ({
-  'data-component-name': 'SamplesPanelControls/SamplesPanelControls',
-}))`
-  background-color: var(--panel-samples-controls-background-color);
-  border: 0;
-  outline: 0;
-  border-radius: var(--border-radius);
-  height: 20px;
-  color: var(--panel-samples-controls-text-color);
-  font-size: 12px;
-  line-height: 12px;
-  cursor: pointer;
-  padding: 1px 6px;
-  min-width: 90px;
-
-  ${({ theme }) => theme.mediaQueries?.small} {
-    padding: 2px 20px;
-  }
-
-  :hover,
-  :focus {
-    background-color: var(--panel-samples-controls-hover-background-color);
-  }
-`;
-
-export const SampleControls = styled.div`
-  padding: 10px 0;
-  opacity: 0.7;
-  transition: opacity 0.3s ease;
-  text-align: right;
-
-  &:focus-within {
-    opacity: 1;
-  }
-
-  > div,
-  > ${SamplesControlButton} {
-    /* can have tooltip wrapper div also */
-    margin-top: 5px;
-    margin-left: 10px;
-
-    ${({ theme }) => theme.mediaQueries?.small} {
-      margin-top: 0;
-    }
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-`;
-
-export const SampleControlsWrap = styled.div`
-  &:hover ${SampleControls} {
-    opacity: 1;
-  }
-`;
-
-export const PreformattedCodeBlock = styled(CodeBlock.withComponent('pre'))`
-  overflow-x: auto;
-  margin: 0;
-  max-height: var(--code-block-max-height);
-  font-family: var(--code-font-family);
-  padding: 20px;
-  border-radius: var(--border-radius);
-  background-color: var(--panel-samples-controls-background-color);
-  color: var(--text-color-inverse);
-  font-size: var(--code-font-size);
-  white-space: var(--code-wrap, pre);
-`;

package/src/SamplesPanelControls/index.ts

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

package/src/Search/Autocomplete.tsx

@@ -1,148 +0,0 @@
-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/Search/Input';
-import { Popover } from '@theme/Search/Popover';
-import { ShortcutKey } from '@theme/Search/ShortcutKey';
-import type { ActiveItem } from '@portal/types';
-
-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/Search/Parameters.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { highlight } from '@theme/Search/utils';
-import type { OperationParameter } from '@portal/types';
-
-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;
-`;