@redocly/theme 0.74.2-pingfed.3 → 0.81.2-rc.2

package/src/components/Navbar/styledVariables.ts

@@ -1,39 +0,0 @@
-import { css } from 'styled-components';
-
-export const navbar = css`
-  --navbar-background-color: var(--bg-base); // @presenter Color
-  --navbar-border-color: var(--border-secondary);
-  --navbar-border: 1px solid var(--navbar-border-color);
-
-  --navbar-text-color: var(--text-secondary); // @presenter Color
-  --navbar-height: 64px; // @presenter Spacing
-  --navbar-font-size: var(--font-size-base);
-  --navbar-padding: 0 var(--spacing-xl); // @presenter Spacing
-  --navbar-font-family: var(--font-family-base);
-  --navbar-container-max-width: 100%;
-
-  --navbar-menu-items-gap: var(--spacing-base);
-  --navbar-menu-justify-content: flex-start;
-
-  --navbar-item-font-weight: var(--font-weight-regular);
-
-  --navbar-item-active-text-color: var(--text-primary);
-  --navbar-item-active-text-decoration: none;
-  --navbar-item-active-bottom-border: 2px solid var(--navbar-item-active-text-color);
-
-  --navbar-item-padding-vertical: var(--spacing-xxs);
-  --navbar-item-padding-horizontal: var(--spacing-sm);
-  --navbar-item-line-height: var(--line-height-base);
-  --navbar-item-active-background-color: none;
-  --navbar-item-border-radius: 0;
-  --navbar-item-bottom-border: 2px solid transparent;
-
-  --navbar-item-hover-text-color: var(--text-primary);
-  --navbar-item-hover-text-decoration: none;
-  --navbar-item-hover-background-color: none;
-  --navbar-item-hover-bottom-border: 2px solid var(--border-primary);
-
-  --navbar-item-icon-width: 1.5em; // @presenter Spacing
-  --navbar-item-icon-height: 1.5em; // @presenter Spacing
-  --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
-`;

package/src/components/NavbarLogo/NavbarLogo.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Link } from '@portal/Link';
-import type { LogoConfig } from '@theme/types/portal';
-import { Image } from '@theme/components/Image/Image';
-import { telemetry } from '@portal/telemetry';
-
-export type NavbarLogoProps = {
-  logo: Pick<LogoConfig, 'image' | 'link' | 'altText' | 'srcSet'>;
-  className?: string;
-};
-
-export function NavbarLogo({ logo, className }: NavbarLogoProps): JSX.Element | null {
-  if (!logo?.image && !logo?.srcSet) {
-    return null;
-  }
-  const img = (
-    <Image className={className} src={logo.image} srcSet={logo.srcSet} alt={logo.altText} />
-  );
-
-  return (
-    <LogoContainer>
-      {logo.link ? (
-        <Link to={logo.link} onClick={() => telemetry.send('logo_clicked', {})}>
-          {img}
-        </Link>
-      ) : (
-        img
-      )}
-    </LogoContainer>
-  );
-}
-
-export const LogoContainer = styled.div.attrs({
-  'data-component-name': 'NavbarLogo/NavbarLogo',
-})`
-  max-width: var(--navbar-logo-max-width);
-  max-height: var(--navbar-logo-max-height);
-  height: var(--navbar-logo-height);
-  margin: var(--navbar-logo-margin);
-
-  img {
-    max-width: 100%;
-    max-height: 100%;
-    height: 100%;
-  }
-`;

package/src/components/NavbarLogo/index.ts

@@ -1,2 +0,0 @@
-export * from '@theme/components/NavbarLogo/NavbarLogo';
-export * from '@theme/components/NavbarLogo/styledVariables';

package/src/components/NavbarLogo/styledVariables.ts

@@ -1,14 +0,0 @@
-import { css } from "styled-components";
-
-export const logo = css`
-  /**
-    * @tokens Logo
-    */
-
-  --navbar-logo-height: 2rem; // @presenter Spacing
-  --navbar-logo-width: auto;
-  --navbar-logo-margin: 16px; // @presenter Spacing
-  --navbar-logo-max-width: 285px; // @presenter Spacing
-  --navbar-logo-max-height: 285px; // @presenter Spacing
-  // @tokens End
-`;

package/src/components/OpenApiDocs/ClearButton.tsx

@@ -1,32 +0,0 @@
-import React, { memo } from 'react';
-import styled from 'styled-components';
-
-// FIXME!!!
-
-interface ClearButtonProps {
-  className?: string;
-  style?: React.CSSProperties;
-  handleClear?: () => void;
-}
-
-const ClearButtonComponent = ({ className, style, handleClear }: ClearButtonProps): JSX.Element => (
-  <button className={className} style={style} onClick={handleClear}>
-    ✕
-  </button>
-);
-
-export const ClearButton = styled(memo<ClearButtonProps>(ClearButtonComponent))`
-  z-index: 1;
-  position: absolute;
-  right: 24px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #89949f;
-  background: none;
-  border: none;
-  cursor: pointer;
-
-  &:hover {
-    color: #fff;
-  }
-`;

package/src/components/OpenApiDocs/DevOnboardingTryItSecurity.tsx

@@ -1,176 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import type { TryItSecurityAppsProps } from '@theme/components/OpenApiDocs/TryItSecurityApps';
-import { Button } from '@theme/components/Button/Button';
-import { usePreloadHistory } from '@portal/usePreloadHistory';
-import { usePageData } from '@portal/hooks/usePageData';
-import { Dropdown } from '@theme/components/OpenApiDocs/Dropdown';
-
-export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
-  const apiId = (props as any).apiId;
-  const history = usePreloadHistory();
-  // @ts-ignore
-  const { userData } = usePageData('userData') || {};
-
-  // 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[cred.valueToUseInHeader] || 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}
-          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);
-      }
-    `}
-`;
-
-const UseKeyButton = styled(Button)`
-  min-width: 100px;
-  align-self: flex-end;
-  margin-top: 10px;
-  margin-right: 0;
-`;

package/src/components/OpenApiDocs/Dropdown.tsx

@@ -1,202 +0,0 @@
-import React, { memo, useMemo } from 'react';
-import styled from 'styled-components';
-
-export interface DropdownOption {
-  idx?: number;
-  value: string;
-  title?: string;
-  serverUrl?: string;
-  label?: string;
-}
-
-export interface DropdownProps {
-  options: DropdownOption[];
-  onChange: (option: DropdownOption) => void;
-  handleClear?: () => void;
-  clearable?: boolean;
-  ariaLabel?: string;
-  className?: string;
-  placeholder?: string;
-  value?: string;
-  dense?: boolean;
-  fullWidth?: boolean;
-  variant?: 'dark' | 'light';
-}
-
-export interface ArrowIconProps {
-  className?: string;
-  variant?: 'light' | 'dark';
-  style?: React.CSSProperties;
-}
-
-import { ClearButton } from './ClearButton';
-
-const ArrowSvg = ({ className, style }: ArrowIconProps): JSX.Element => (
-  <svg
-    className={className}
-    style={style}
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <polyline points="6 9 12 15 18 9" />
-  </svg>
-);
-
-const ArrowIcon = styled(ArrowSvg)`
-  position: absolute;
-  pointer-events: none;
-  z-index: 1;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-  right: 8px;
-  margin: auto;
-  text-align: center;
-  polyline {
-    color: ${(props) => props.variant === 'dark' && 'white'};
-  }
-`;
-
-const DropdownComponent = ({
-  options,
-  onChange,
-  handleClear,
-  clearable,
-  placeholder,
-  value = '',
-  className,
-  variant = 'light',
-}: DropdownProps): JSX.Element => {
-  const handleOnChange = (event: any) => {
-    const { selectedIndex } = event.target;
-    const index = placeholder || !value ? selectedIndex - 1 : selectedIndex;
-    onChange(options[index]);
-  };
-
-  const renderOptions = useMemo(
-    () =>
-      options.map(({ idx, value, title }: DropdownOption, index) => {
-        const normalizedValue = normalizeText(value);
-        return (
-          <option
-            key={idx || normalizedValue + index}
-            value={normalizedValue}
-            className="dropdown-option"
-          >
-            {title || normalizedValue}
-          </option>
-        );
-      }),
-    [options],
-  );
-
-  const normalizedValue = normalizeText(value);
-  const title = options.find((option) => option.value === value)?.title || normalizedValue;
-
-  return (
-    <div className={className + ' dropdown-wrapper'}>
-      <ArrowIcon variant={variant} />
-      {clearable && normalizedValue?.length > 0 && <ClearButton handleClear={handleClear} />}
-      <select onChange={handleOnChange} value={normalizedValue} className="dropdown-select">
-        {placeholder && (
-          <option disabled hidden value={placeholder}>
-            {placeholder}
-          </option>
-        )}
-        {!normalizedValue && !placeholder && <option disabled />}
-        {renderOptions}
-      </select>
-      <label>{title}</label>
-    </div>
-  );
-};
-
-export const Dropdown = styled(memo<DropdownProps>(DropdownComponent))`
-
-box-sizing: border-box;
-  outline: none;
-  display: inline-block;
-  border-radius: var(--border-radius);
-  vertical-align: bottom;
-  position: relative;
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-  cursor: pointer;
-  text-transform: none;
-
-  label {
-    box-sizing: border-box;
-    min-width: 90px;
-    height: 36px;
-    outline: none;
-    display: inline-block;
-    color: var(--docs-dropdown-text-color);
-    border-radius: var(--border-radius);
-    border: var(--docs-dropdown-border);
-    padding: var(--docs-dropdown-padding);
-    vertical-align: bottom;
-    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-    text-transform: none;
-    line-height: inherit;
-    font-size: var(--docs-dropdown-font-size);
-    font-family: inherit;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-
-    &,
-    &:hover,
-    &:focus-within {
-      border: 1px solid var(--border-primary);
-      box-shadow: none;
-    }
-
-    ${({ variant }) => (variant === 'dark' ? darkDropdownStyle : '')};
-  }
-
-  .dropdown-select {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    border: none;
-    appearance: none;
-    cursor: pointer;
-
-    color: var(--text-secondary);
-    line-height: inherit;
-    font-size: var(--font-size-base);
-    font-family: inherit;
-    padding: var(--docs-dropdown-padding);
-    ${({ variant }) => (variant === 'dark' ? darkDropdownStyle : '')};
-
-`;
-
-const darkDropdownStyle = `
-  background-color: var(--panel-samples-dropdown-background-color);
-  border: var(--panel-samples-dropdown-border);
-  color: var(--panel-samples-dropdown-color);
-
-  &,
-  &:hover,
-  &:focus-within {
-    border: none;
-    box-shadow: none;
-  }
-`;
-
-function isString<T>(value: T | string): value is string {
-  return typeof value === 'string';
-}
-
-export const normalizeText = (description?: string | Record<string, any>): string =>
-  isString(description) ? description : description?.raw;

package/src/components/OpenApiDocs/ScorecardBadges.tsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Tag } from '@theme/components/Tag';
-import { Link } from '@portal/Link';
-import { telemetry } from '@portal/telemetry';
-import { getLevelColor } from '@theme/components/Scorecard/Card';
-
-interface ScorecardBadgesProps {
-  metadata?: {
-    scorecardLevel?: string;
-    scoreCardSlug?: string;
-    scorecardLevelIdx?: number;
-    scorecardLevels?: Record<string, any>;
-  };
-}
-
-export function ScorecardBadges(props: ScorecardBadgesProps) {
-  return (
-    (props.metadata?.scorecardLevel && (
-      <ScorecardBadgesWrapper data-component-name="OpenApiDocs/ScorecardBadges">
-        <ComplianceTag
-          level={props.metadata.scorecardLevel as string}
-          slug={props.metadata?.scoreCardSlug as string}
-          color={getLevelColor(
-            props.metadata?.scorecardLevelIdx as number,
-            Object.keys(props.metadata?.scorecardLevels || {}).length,
-          )}
-        />
-      </ScorecardBadgesWrapper>
-    )) ||
-    null
-  );
-}
-
-const ScorecardBadgesWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-
-  margin-top: var(--panel-gap-vertical);
-  position: absolute;
-  z-index: 1;
-  right: var(--panel-gap-horizontal);
-`;
-
-function ComplianceTag(props: { level: string; slug: string; color: string }) {
-  const { level, slug, color } = props;
-  return (
-    <Link to={slug}>
-      <Tag
-        size="large"
-        onClick={() => telemetry.send('scorecard_link_clicked', { action: 'click' })}
-      >
-        <StatusDot color={color}>{level}</StatusDot>
-      </Tag>
-    </Link>
-  );
-}
-
-const StatusDot = styled.div<{ color: string }>`
-  font-size: var(--font-size-base);
-  font-style: normal;
-  font-weight: 400;
-  line-height: 22px;
-  display: flex;
-  align-items: center;
-  &:not(:only-child) {
-    margin-left: 4px;
-  }
-
-  ${({ color }) =>
-    color &&
-    `
-  &::before {
-    content: '';
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background-color: ${color};
-    margin-right: 8px;
-  }`};
-`;

package/src/components/OpenApiDocs/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/components/OpenApiDocs/hooks/AfterOpenApiOperationSummary.tsx

@@ -1,9 +0,0 @@
-// interface AfterOpenApiOperationSummaryProps {
-//   operation: any;
-// }
-
-// export function AfterOpenApiOperationSummary(_props: AfterOpenAPIOperationSummaryProps) {
-//   return null;
-// }
-
-export const AfterOpenApiOperationSummary: any = null;

package/src/components/OpenApiDocs/hooks/BeforeOpenApiOperationSummary.tsx

@@ -1,9 +0,0 @@
-// interface BeforeOpenApiOperationSummaryProps {
-//   operation: any;
-// }
-
-// export function BeforeOpenApiOperationSummary(_props: BeforeOpenAPIOperationSummaryProps) {
-//   return null;
-// }
-
-export const BeforeOpenApiOperationSummary: any = null;

package/src/components/OpenApiDocs/hooks/OpenApiTryItSecurityPanel.tsx

@@ -1,12 +0,0 @@
-// interface OpenApiTryItSecurityPanelProps {
-//   server: any;
-//   operation: any;
-//   onChange?: any;
-//   OAuth2: any;
-// }
-
-// export function OpenApiTryItSecurityPanel(_props: OpenAPITryItSecurityPanelProps) {
-//   return null;
-// }
-
-export const OpenApiTryItSecurityPanel: any = null;

package/src/components/OpenApiDocs/index.ts

@@ -1,10 +0,0 @@
-export * from '@theme/components/OpenApiDocs/TryItSecurityApps';
-export * from '@theme/components/OpenApiDocs/hooks/OpenApiFooter';
-export * from '@theme/components/OpenApiDocs/hooks/OpenApiHeader';
-export * from '@theme/components/OpenApiDocs/hooks/OpenApiTryItSecurityPanel';
-export * from '@theme/components/OpenApiDocs/hooks/AfterOpenApiTitle';
-export * from '@theme/components/OpenApiDocs/hooks/AfterOpenApiOperation';
-export * from '@theme/components/OpenApiDocs/hooks/AfterOpenApiOperationSummary';
-export * from '@theme/components/OpenApiDocs/hooks/BeforeOpenApiOperation';
-export * from '@theme/components/OpenApiDocs/hooks/BeforeOpenApiOperationSummary';
-export * from '@theme/components/OpenApiDocs/ScorecardBadges';

package/src/components/PageNavigation/index.ts

@@ -1,3 +0,0 @@
-export * from '@theme/components/PageNavigation/NextButton';
-export * from '@theme/components/PageNavigation/PageNavigation';
-export * from '@theme/components/PageNavigation/PreviousButton';