@redocly/theme 0.10.0 → 0.11.0

package/src/components/OpenAPIDocs/DevOnboardingTryItSecurity.tsx

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import type { TryItSecurityAppsProps } from './TryItSecurityApps';
+
+import { Button } from '@theme/components/Button/Button';
+import { usePreloadHistory } from '@portal/usePreloadHistory';
+
+import { Dropdown } from './Dropdown';
+
+export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
+  const apiId = (props as any).apiId;
+  const history = usePreloadHistory();
+  // @ts-ignore
+  const { userData } = props;
+
+  // 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/components/OpenAPIDocs/TryItSecurityApps.tsx

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

package/src/components/OperationBadge/index.ts

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

package/src/components/PageNavigation/NextButton.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Button } from '@theme/components/Button';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import type { ResolvedNavItemWithLink } from '@theme/types/portal';
+
+interface NextPageType {
+  nextPage?: ResolvedNavItemWithLink | null;
+}
+
+export function NextButton({ nextPage }: NextPageType): JSX.Element {
+  const { navigation } = useThemeConfig();
+
+  if (!nextPage || navigation?.nextButton?.hide) {
+    return <div>&nbsp;</div>;
+  }
+
+  const text = (navigation?.nextButton?.text || 'Next to {label}').replace(
+    '{label}',
+    nextPage.label || nextPage.routeSlug || '',
+  );
+
+  return (
+    <StyledButton
+      variant="outlined"
+      size="large"
+      to={nextPage.link}
+      data-component-name="PageNavigation/NextPageLink"
+    >
+      {text}
+    </StyledButton>
+  );
+}
+
+const StyledButton = styled(Button)`
+  font-family: var(--font-family-base);
+`;

package/src/components/PageNavigation/PageNavigation.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { PreviousButton } from '@theme/components/PageNavigation/PreviousButton';
+import { NextButton } from '@theme/components/PageNavigation/NextButton';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import type { ResolvedNavItemWithLink } from '@theme/types/portal';
+
+interface PageNavigationType {
+  nextPage?: ResolvedNavItemWithLink | null;
+  prevPage?: ResolvedNavItemWithLink | null;
+}
+
+export function PageNavigation({ nextPage, prevPage }: PageNavigationType): JSX.Element | null {
+  const { navigation } = useThemeConfig();
+
+  if (navigation?.previousButton?.hide && navigation?.nextButton?.hide) {
+    return null;
+  }
+
+  return (
+    <PageNavigationWrapper data-component-name="PageNavigation/PageNavigation">
+      <PreviousButton prevPage={prevPage} />
+      <NextButton nextPage={nextPage} />
+    </PageNavigationWrapper>
+  );
+}
+
+const PageNavigationWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin: 25px 0;
+
+  @media print {
+    display: none;
+  }
+`;

package/src/components/PageNavigation/PreviousButton.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Button } from '@theme/components/Button';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import type { ResolvedNavItemWithLink } from '@theme/types/portal';
+
+interface PreviousPageType {
+  prevPage?: ResolvedNavItemWithLink | null;
+}
+
+export function PreviousButton({ prevPage }: PreviousPageType): JSX.Element {
+  const { navigation } = useThemeConfig();
+
+  if (!prevPage || navigation?.previousButton?.hide) {
+    return <div>&nbsp;</div>;
+  }
+
+  const text = (navigation?.previousButton?.text || 'Back to {label}').replace(
+    '{label}',
+    prevPage.label || prevPage.routeSlug || '',
+  );
+
+  return (
+    <StyledButton
+      variant="outlined"
+      size="large"
+      to={prevPage.link}
+      data-component-name="PageNavigation/PreviousPageLink"
+    >
+      {text}
+    </StyledButton>
+  );
+}
+
+const StyledButton = styled(Button)`
+  font-family: var(--font-family-base);
+`;

package/src/components/PageNavigation/index.ts

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

package/src/components/Panel/Panel.ts

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+import { PanelHeader } from '@theme/components/Panel/PanelHeader';
+import { PanelBody } from '@theme/components/Panel/PanelBody';
+import { PanelComponent } from '@theme/components/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/components/Panel/PanelComponent.tsx

@@ -0,0 +1,79 @@
+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/components/Panel/PanelBody';
+import { PanelHeader } from '@theme/components/Panel/PanelHeader';
+import { PanelHeaderTitle } from '@theme/components/Panel/PanelHeaderTitle';
+import type { PanelHeaderProps } from '@theme/components/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/components/Panel/index.ts

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

package/src/components/Profile/AuthUserProfile.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { LoginLink } from '@theme/components/Profile/LoginLink';
+import { UserProfile } from '@theme/components/Profile/UserProfile';
+import { useProfileProps } from '@portal/Profile/useProfileProps';
+
+export function AuthUserProfile() {
+  const { userData, hasDeveloperOnboarding, loginUrl, handleLogout } = useProfileProps();
+
+  if (userData?.isAuthenticated) {
+    return (
+      <UserProfile
+        userData={userData}
+        handleLogout={handleLogout}
+        hasDeveloperOnboarding={!!hasDeveloperOnboarding}
+      />
+    );
+  }
+
+  if (loginUrl) {
+    return <LoginLink href={loginUrl} data-cy="login-btn" />;
+  }
+
+  return null;
+}

package/src/components/Profile/UserProfile.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import type { UserProfileProps } from './types';
+
+import { Profile } from '@theme/components/Profile/Profile';
+import { Tooltip } from '@theme/components/Tooltip/Tooltip';
+
+import { UserProfileMenu } from './UserProfileMenu';
+
+export function UserProfile({
+  userData,
+  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={userData.name}
+        imageUrl={userData.picture}
+        onClick={userData.logoutDisabled ? undefined : () => setIsOpened(!isOpened)}
+      />
+    </StyledTooltip>
+  );
+}
+
+const StyledTooltip = styled(Tooltip)`
+  > span {
+    padding: 0;
+  }
+`;

package/src/components/Profile/index.ts

@@ -0,0 +1,6 @@
+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 './types';

package/src/components/Profile/types.ts

@@ -0,0 +1,11 @@
+export interface UserProfileProps {
+  userData: {
+    isAuthenticated: boolean;
+    name: string;
+    picture: string;
+    logoutDisabled?: boolean;
+  };
+  handleLogout: (logoutRedirect?: string) => void;
+  hasDeveloperOnboarding?: boolean;
+  loginUrl?: string;
+}

package/src/components/SamplesPanelControls/SamplesPanelControls.ts

@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+
+import { CodeBlock } from '@theme/components/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/components/SamplesPanelControls/index.ts

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