@redocly/theme 0.0.0-react18-20231120182601

package/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+
+import { NavbarMenu } from '@theme/components/Navbar';
+import { useMobileMenu } from '@theme/hooks/useMobileMenu';
+import type { NavbarLogoProps } from '@theme/components/NavbarLogo';
+import { NavbarLogo } from '@theme/components/NavbarLogo';
+import { MobileMenu } from '@theme/components/Menu/MobileMenu';
+import { ColorModeSwitcher } from '@theme/components/ColorModeSwitcher/ColorModeSwitcher';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { Search } from '@theme/components/Search/Search';
+import { AuthUserProfile } from '@theme/components/Profile/AuthUserProfile';
+import type { LogoConfig, ResolvedConfigLinks } from '@theme/types/portal';
+import { useI18n } from '@portal/hooks';
+import { LanguagePicker } from '@theme/i18n/LanguagePicker';
+import { ProductPicker } from '@theme/components/Product';
+import { BurgerButton } from '@theme/components/Navbar/BurgerButton';
+
+const EmptyNavbarHack = createGlobalStyle`
+  :root {
+    --navbar-height: 0px !important;
+  }
+`;
+
+export function Navbar(): JSX.Element | null {
+  const [isOpen, setIsOpen] = useMobileMenu(false);
+  const themeConfig = useThemeConfig();
+  const { changeLanguage } = useI18n();
+
+  const menu = themeConfig.navbar?.items;
+  const logo = themeConfig.logo;
+
+  const { search: searchSettings, navbar, userProfile: userProfileSettings } = themeConfig;
+  const hideSearch =
+    searchSettings?.hide || (searchSettings?.placement && searchSettings?.placement !== 'navbar');
+  const hideUserProfile = userProfileSettings?.hide;
+
+  if (navbar?.hide) {
+    return null;
+  }
+
+  const openMobileMenu = () => setIsOpen(true);
+  const closeMobileMenu = () => setIsOpen(false);
+
+  if (!menu && !logo) {
+    return <EmptyNavbarHack />;
+  }
+
+  return (
+    <NavbarPresentational
+      {...{
+        closeMobileMenu,
+        openMobileMenu,
+        isOpen,
+        hideSearch: Boolean(hideSearch),
+        logo: logo as Pick<LogoConfig, 'image' | 'link' | 'altText'>,
+        hideUserProfile,
+        changeLanguage,
+      }}
+    />
+  );
+}
+
+interface NavbarPresentationalProps extends NavbarLogoProps {
+  closeMobileMenu: () => void;
+  openMobileMenu: () => void;
+  isOpen: boolean;
+  hideSearch: boolean;
+  hideUserProfile: boolean | string | undefined;
+  changeLanguage: (value: string) => void;
+  className?: string;
+}
+
+export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Element | null {
+  const {
+    closeMobileMenu,
+    openMobileMenu,
+    isOpen,
+    hideSearch,
+    logo,
+    hideUserProfile,
+    changeLanguage,
+    className,
+  } = props;
+
+  const themeConfig = useThemeConfig();
+
+  const menu = themeConfig.navbar?.items;
+
+  return (
+    <NavbarContainer data-component-name="Navbar/Navbar" className={className}>
+      {isOpen && <MobileMenu hideUserProfile={!!hideUserProfile} />}
+      <NavbarRow>
+        <BurgerButton onClick={isOpen ? closeMobileMenu : openMobileMenu} isOpen={isOpen} />
+        <NavbarLogo logo={logo} />
+        <ProductPicker />
+        <NavbarMenu menuItems={menu as ResolvedConfigLinks} />
+        {hideSearch ? null : <Search />}
+        <LanguagePicker onChangeLanguage={changeLanguage} onlyIcon />
+        <ColorModeSwitcherWrapper isVisible={isOpen}>
+          <ColorModeSwitcher />
+        </ColorModeSwitcherWrapper>
+        {hideUserProfile ? null : (
+          <AuthUserProfileWrapper>
+            <AuthUserProfile />
+          </AuthUserProfileWrapper>
+        )}
+      </NavbarRow>
+    </NavbarContainer>
+  );
+}
+
+const ColorModeSwitcherWrapper = styled.div<{ isVisible: boolean }>`
+  display: ${({ isVisible }) => (isVisible ? 'block' : 'none')};
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+`;
+
+const AuthUserProfileWrapper = styled.div`
+  display: none;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+`;
+
+export const NavbarContainer = styled.nav`
+  border: var(--navbar-border);
+
+  --text-color: var(--navbar-text-color);
+
+  height: var(--navbar-height);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  font-size: var(--navbar-font-size);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-index-raised);
+  padding: 0;
+  background: var(--navbar-background-color);
+  font-family: var(--navbar-font-family);
+
+  ${({ theme }) => theme.mediaQueries.print} {
+    background: transparent;
+    display: none;
+    > :not(a, img) {
+      display: none !important;
+    }
+    img {
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    padding: var(--navbar-padding);
+  }
+`;
+
+export const NavbarRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 auto;
+  width: 90%;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 100%;
+  }
+
+  gap: var(--navbar-menu-items-gap);
+  max-width: var(--navbar-container-max-width);
+`;

package/src/components/Navbar/NavbarItem.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { useLocation } from 'react-router-dom';
+
+import { Link } from '@portal/Link';
+import { getPathnameForLocale } from '@portal/utils';
+import type {
+  ResolvedNavItem,
+  ResolvedNavLinkItem,
+  ResolvedNavGroupItem,
+} from '@theme/types/portal';
+import { useI18nConfig, useTranslate } from '@portal/hooks';
+import { withPathPrefix } from '@theme/utils';
+import { telemetry } from '@portal/telemetry';
+import { Dropdown } from '@theme/components/Dropdown';
+import { ExternalIcon } from '@theme/icons';
+
+export interface NavbarItemProps {
+  navItem: ResolvedNavItem;
+  className?: string;
+}
+
+export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null {
+  const { pathname } = useLocation();
+  const { translate } = useTranslate();
+  const { defaultLocale, currentLocale, locales } = useI18nConfig();
+
+  if ((navItem as ResolvedNavLinkItem).link) {
+    const item = navItem as ResolvedNavLinkItem;
+
+    const isActive =
+      pathname ===
+      withPathPrefix(getPathnameForLocale(item.link, defaultLocale, currentLocale, locales));
+    return (
+      <NavbarMenuItem
+        active={isActive}
+        data-component-name="Navbar/NavbarItem"
+        className={className}
+        onClick={() => telemetry.send('navbar_menu_item_clicked', { type: 'link' })}
+      >
+        <NavbarLink to={item.link} external={item.external} target={item.target} active={isActive}>
+          {item.icon ? <NavbarIcon url={item.icon} /> : null}
+          <NavbarLabel>{translate(item.labelTranslationKey, item.label)}</NavbarLabel>
+          {item.external ? <ExternalIcon /> : null}
+        </NavbarLink>
+      </NavbarMenuItem>
+    );
+  }
+
+  if ((navItem as ResolvedNavGroupItem).items) {
+    const item = navItem as ResolvedNavGroupItem;
+    const groupItems = item.items as ResolvedNavLinkItem[];
+    const groupItemsComponents = groupItems.map((item, index) => (
+      <Link key={`${item.label}_${index}`} to={item.link}>
+        {translate(item.labelTranslationKey, item.label)}
+      </Link>
+    ));
+
+    return (
+      <NavbarMenuItemDropdown items={groupItemsComponents} triggerEvent="hover">
+        <NavbarMenuItem
+          active={false}
+          data-component-name="Navbar/NavbarItem"
+          className={className}
+          onClick={() => telemetry.send('navbar_menu_item_clicked', { type: 'group' })}
+        >
+          <NavbarIcon url={item.icon} />
+          <NavbarLabel>{translate(item.labelTranslationKey, item.label)}</NavbarLabel>
+          {item.external ? <ExternalIcon /> : null}
+        </NavbarMenuItem>
+      </NavbarMenuItemDropdown>
+    );
+  }
+
+  return null;
+}
+
+export const NavbarMenuItemDropdown = styled(Dropdown).attrs(() => ({
+  dataAttributes: {
+    'data-component-name': 'Navbar/NavbarItemDropdown',
+  },
+}))`
+  :hover {
+    text-decoration: var(--navbar-item-hover-text-decoration);
+    background: var(--navbar-item-hover-background-color);
+  }
+`;
+
+export const NavbarLink = styled(Link)`
+  display: flex;
+  align-items: center;
+  color: ${({ active }) =>
+    active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
+  text-decoration: ${({ active }) =>
+    active ? 'var(--navbar-item-active-text-decoration)' : 'none'};
+`;
+
+export const NavbarMenuItem = styled.li<{ active?: boolean }>`
+  display: inline-block;
+  padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
+  text-align: center;
+  line-height: var(--navbar-item-line-height);
+  font-weight: var(--navbar-item-font-weight);
+
+  border-radius: var(--navbar-item-border-radius);
+  border-bottom: ${({ active }) =>
+    active ? 'var(--navbar-item-active-bottom-border)' : 'var(--navbar-item-bottom-border)'};
+
+  background: ${({ active }) => active && 'var(--navbar-item-active-background-color)'};
+  color: ${({ active }) =>
+    active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
+
+  &:hover {
+    color: var(--navbar-item-hover-text-color);
+    text-decoration: var(--navbar-item-hover-text-decoration);
+    border-bottom: ${({ active }) => !active && 'var(--navbar-item-hover-bottom-border)'};
+    background: ${({ active }) =>
+      active
+        ? 'var(--navbar-item-active-background-color)'
+        : 'var(--navbar-item-hover-background-color)'};
+
+    ${NavbarLink} {
+      color: var(--navbar-item-hover-text-color);
+      text-decoration: var(--navbar-item-hover-text-decoration);
+    }
+  }
+`;
+
+const NavbarLabel = styled.span`
+  cursor: pointer;
+  vertical-align: middle;
+`;
+
+export const NavbarIcon = styled.i<{ url?: string }>`
+  ${({ url }) =>
+    url &&
+    css`
+      background-image: url('${url}');
+      width: var(--navbar-item-icon-width);
+      height: var(--navbar-item-icon-height);
+      display: inline-block;
+      background-size: contain;
+      margin-right: var(--navbar-item-icon-margin-right);
+      vertical-align: middle;
+      background-position: center;
+      background-repeat: no-repeat;
+    `}
+`;

package/src/components/Navbar/NavbarMenu.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { NavbarItem } from '@theme/components/Navbar/NavbarItem';
+import { isPrimitive } from '@theme/utils';
+import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
+
+export function NavbarMenu({
+  menuItems,
+  className,
+}: {
+  menuItems: ResolvedConfigLinks;
+  className?: string;
+}): JSX.Element | null {
+  if (isPrimitive(menuItems)) {
+    return null;
+  }
+
+  return (
+    <NavItemsContainer data-component-name="Navbar/NavbarMenu" className={className}>
+      {(menuItems as ResolvedNavItem[]).map((navItem, index) => {
+        return (
+          <NavbarItem key={`${navItem.label}_${index}`} data-cy={navItem.label} navItem={navItem} />
+        );
+      })}
+    </NavItemsContainer>
+  );
+}
+
+const NavItemsContainer = styled.ul`
+  list-style: none;
+  padding: 0;
+  display: none;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: var(--navbar-menu-justify-content);
+  flex: 1;
+  gap: var(--navbar-menu-items-gap);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: flex;
+  }
+`;

package/src/components/Navbar/index.ts

@@ -0,0 +1,5 @@
+export * from '@theme/components/Navbar/Navbar';
+export * from '@theme/components/Navbar/NavbarItem';
+export * from '@theme/components/Navbar/NavbarMenu';
+export * from '@theme/components/Navbar/BurgerButton';
+export * from '@theme/components/Navbar/styledVariables';

package/src/components/Navbar/styledVariables.ts

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,48 @@
+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

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

package/src/components/NavbarLogo/styledVariables.ts

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,176 @@
+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;
+`;