@redocly/theme 0.9.0-beta.3 → 0.9.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.9.0-beta.3",
+  "version": "0.9.0-beta.5",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Button/Button.tsx

@@ -6,7 +6,7 @@ import type { FlattenSimpleInterpolation, Keyframes } from 'styled-components';
 import { Link } from '@portal/Link';
 
 export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
-export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
+export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | 'default' | string;
 export type ButtonVariant = 'outlined' | 'contained';
 
 export interface ButtonProps {
@@ -67,10 +67,14 @@ export const baseButtonStyles = css`
   }
 `;
 
-const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: ButtonProps) => ({
-  className: `button-color-${color}${extraClass ? ` ${extraClass}` : ''}`,
-  'data-component-name': 'Button/Button',
-}))<ButtonProps>`
+const StyledButton = styled.button.attrs(
+  ({ color = 'default', extraClass, variant }: ButtonProps) => ({
+    className: `button-color-${color}${variant ? ` ${variant}` : ''}${
+      extraClass ? ` ${extraClass}` : ''
+    }`,
+    'data-component-name': 'Button/Button',
+  }),
+)<ButtonProps>`
   text-decoration: none;
   text-align: center;
 
@@ -127,6 +131,19 @@ const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: But
       animation: ${getBlink()} 1.2s infinite;
     `}
 
+  ${({ color }) =>
+    color === 'tertiary' &&
+    css`
+      background-color: transparent;
+      border: none;
+      color: var(--text-color);
+
+      :hover {
+        border: none;
+        background: rgba(255, 255, 255, 0.65);
+      }
+    `}
+
   ${({ disabled }) =>
     disabled &&
     css`

package/src/Catalog/Filter.tsx

@@ -8,7 +8,7 @@ export function Filter({ filter }: { filter: ResolvedFilter }) {
   if (!filter.parentUsed) return null;
   return (
     <FilterGroup key={filter.property + filter.title}>
-      <FilterTitle>{filter.title} filter</FilterTitle>
+      <FilterTitle>{filter.title}</FilterTitle>
       {filter.type === 'select' ? (
         <StyledSelect
           onChange={(e) => filter.selectOption(e.target.value)}

package/src/Markdown/Admonition.tsx

@@ -9,15 +9,27 @@ interface AdmonitionTypeProps {
 
 export interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
   name?: string;
+  className?: string;
+  'data-source'?: string;
+  'data-hash'?: string;
 }
 
 export function Admonition({
   type = 'info',
   name,
   children,
+  className,
+  'data-source': dataSource,
+  'data-hash': dataHash,
 }: React.PropsWithChildren<AdmonitionProps>): JSX.Element {
   return (
-    <Wrapper type={type} data-component-name="Markdown/Admonition">
+    <Wrapper
+      type={type}
+      className={className}
+      data-component-name="Markdown/Admonition"
+      data-source={dataSource}
+      data-hash={dataHash}
+    >
       <AlertIcon type={type} />
       {name ? <Heading type={type}>{name}</Heading> : null}
       <Content>{children}</Content>

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -9,9 +9,17 @@ export type CodeSampleProps = {
   language: string;
   highlighted: string;
   rawContent: string;
+  'data-source'?: string;
+  'data-hash'?: string;
 };
 
-export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
+export function CodeSample({
+  rawContent,
+  highlighted,
+  language,
+  'data-source': dataSource,
+  'data-hash': dataHash,
+}: CodeSampleProps): JSX.Element {
   const langClassName = language ? `language-${language}` : '';
   const { codeSnippet: { copy = {}, report = {} } = {} } = useThemeConfig();
 
@@ -26,7 +34,12 @@ export function CodeSample({ rawContent, highlighted, language }: CodeSampleProp
   };
 
   return (
-    <Wrapper className="code-sample" data-component-name="Markdown/CodeSample/CodeSample">
+    <Wrapper
+      className="code-sample"
+      data-component-name="Markdown/CodeSample/CodeSample"
+      data-source={dataSource}
+      data-hash={dataHash}
+    >
       <CodeSampleButtonContainer>
         {!copy.hide && (
           <>

package/src/Markdown/Heading.tsx

@@ -3,36 +3,28 @@ import React, { createElement } from 'react';
 import type { PropsWithChildren } from 'react';
 
 import { concatClassNames } from '@theme/utils';
+import { AnchorIcon } from '@theme/icons';
 
 /**
  * Class name for all MD tags
  */
 const mdClassName = 'md';
 
-const SvgIcon = (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="16"
-    version="1.1"
-    viewBox="0 0 16 16"
-    width="16"
-  >
-    <path
-      fillRule="evenodd"
-      d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
-    ></path>
-  </svg>
-);
-
 export function Heading({
   level,
   id,
   children,
-}: PropsWithChildren<{ level: number; id: string }>): JSX.Element {
+  'data-source': dataSource,
+  'data-hash': dataHash,
+}: PropsWithChildren<{
+  level: number;
+  id: string;
+  'data-source'?: string;
+  'data-hash'?: string;
+}>): JSX.Element {
   const linkEl = (
     <a href={`#${id}`} className={concatClassNames('anchor', 'before')}>
-      {SvgIcon}
+      <AnchorIcon />
     </a>
   );
 
@@ -42,6 +34,8 @@ export function Heading({
       id,
       className: concatClassNames('heading-anchor', mdClassName),
       'data-component-name': 'Markdown/Heading',
+      'data-source': dataSource,
+      'data-hash': dataHash,
     },
     <>
       {linkEl}

package/src/Markdown/Mermaid.tsx

@@ -3,14 +3,22 @@ import styled from 'styled-components';
 
 type MermaidProps = {
   diagramHtml: string;
+  'data-source'?: string;
+  'data-hash'?: string;
 };
 
-export function Mermaid({ diagramHtml }: MermaidProps): JSX.Element {
+export function Mermaid({
+  diagramHtml,
+  'data-source': dataSource,
+  'data-hash': dataHash,
+}: MermaidProps): JSX.Element {
   return (
     <Wrapper
       className="mermaid-wrapper"
       dangerouslySetInnerHTML={{ __html: diagramHtml }}
       data-component-name="Markdown/Mermaid"
+      data-source={dataSource}
+      data-hash={dataHash}
     />
   );
 }

package/src/Profile/Profile.tsx

@@ -10,7 +10,7 @@ export interface ProfileProps {
   onClick?: () => void;
 }
 
-function ProfileComponent({ name, imageUrl, onClick, color }: ProfileProps): JSX.Element {
+function ProfileComponent({ name = 'User', imageUrl, onClick, color }: ProfileProps): JSX.Element {
   if (imageUrl) {
     return (
       <ProfileWrapper onClick={onClick}>

package/src/ReferenceDocs/ClearButton.tsx

@@ -0,0 +1,30 @@
+import React, { memo } from 'react';
+import styled from 'styled-components';
+
+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/ReferenceDocs/DevOnboardingTryItSecurity.tsx

@@ -0,0 +1,161 @@
+import * as React from 'react';
+import { Button } from '@theme';
+import styled from 'styled-components';
+
+import type { TryItSecurityProps } from './TryItSecurity';
+
+import { usePageData } from '@portal/hooks/usePageData';
+
+import { Dropdown } from './Dropdown';
+
+export function DevOnboardingTryItSecurity(props: TryItSecurityProps) {
+  const apiId = (props as any).apiId;
+
+  // @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);
+
+  React.useEffect(() => {
+    if (!props.value && initialRender.current) return;
+    if (acceptValueUpdate) {
+      setAcceptValueUpdate(false);
+    } else {
+      setAppId('');
+    }
+  }, [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);
+            } else {
+              setError(data.message);
+            }
+          })
+          .catch(() => setError('Something went wrong'))
+          .finally(() => setLoading(false));
+      });
+    }
+  }, []);
+
+  React.useEffect(() => {
+    sessionStorage.setItem('redocly_onboarding:prevAppId', appId || '');
+  }, [appId]);
+
+  if (!apiId) {
+    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...' : undefined;
+
+  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 || appLoading}
+          color="secondary"
+          blinking={appLoading}
+          onClick={() => selectedAppSecret && props.onChange(selectedAppSecret)}
+        >
+          Use key
+        </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%;
+  /* font-family: var(--code-font-family); */
+  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)`
+  width: 100px;
+  align-self: flex-end;
+  margin-top: 16px;
+  margin-right: 0;
+`;

package/src/ReferenceDocs/Dropdown.tsx

@@ -0,0 +1,202 @@
+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(--dropdown-text-color);
+    border-radius: var(--border-radius);
+    border: var(--dropdown-border);
+    padding: var(--dropdown-padding);
+    vertical-align: bottom;
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+    text-transform: none;
+    line-height: inherit;
+    font-size: var(--dropdown-font-size);
+    font-family: inherit;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    &,
+    &:hover,
+    &:focus-within {
+      border: 1px solid var(--border-color);
+      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-color);
+    line-height: inherit;
+    font-size: 14px;
+    font-family: inherit;
+    padding: var(--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/ReferenceDocs/TryItSecurity.tsx

@@ -1,4 +1,17 @@
-import type { BeforeSecurityPanelHookProps } from '@redocly/openapi-docs';
+import React from 'react';
 
-export const TryItSecurity: ((props: BeforeSecurityPanelHookProps) => JSX.Element) | undefined =
-  undefined;
+import { useGlobalData } from '@portal/hooks';
+
+import { DevOnboardingTryItSecurity } from './DevOnboardingTryItSecurity';
+
+export type TryItSecurityProps = {
+  apiId?: string;
+  value?: string;
+  onChange: (newSecretKey: string) => void;
+};
+
+export function TryItSecurity(props: TryItSecurityProps) {
+  const { hasDeveloperOnboarding } = useGlobalData() || {};
+
+  return hasDeveloperOnboarding && props.apiId ? <DevOnboardingTryItSecurity {...props} /> : null;
+}

package/src/ReferenceDocs/index.ts

@@ -0,0 +1 @@
+export * from './TryItSecurity';

package/src/Sidebar/FooterWrapper.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const FooterWrapper = styled.div.attrs(() => ({
+  'data-component-name': 'Sidebar/FooterWrapper',
+}))`
+  margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
+  padding-top: var(--sidebar-spacing-unit);
+  border-top: solid 1px #daddde;
+`;

package/src/Sidebar/HeaderWrapper.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const HeaderWrapper = styled.div.attrs(() => ({
+  'data-component-name': 'Sidebar/HeaderWrapper',
+}))`
+  margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
+  padding-bottom: var(--sidebar-spacing-unit);
+  border-bottom: solid 1px #daddde;
+`;

package/src/Sidebar/MenuGroup.tsx

@@ -43,7 +43,10 @@ export function MenuGroup({
           isAlwaysExpanded={item.expanded === 'always'}
           active={item.active}
         >
-          <MenuGroupArrow direction={isExpanded ? 'down' : 'right'} />
+          <MenuGroupArrow
+            visibility={item.items.length ? 'visible' : 'hidden'}
+            direction={isExpanded ? 'down' : 'right'}
+          />
           {item.label}
         </MenuGroupLabel>
       </MenuLinkItem>