@redocly/theme 0.0.0-react18-20231120182601

package/src/types/portal/src/shared/types/feedback.ts

@@ -0,0 +1,22 @@
+import type { FEEDBACK_TYPES } from '../constants';
+
+import type {
+  RatingProps,
+  SentimentProps,
+  CommentProps,
+  MoodProps,
+  ScaleProps,
+} from '@theme/components/Feedback';
+
+export type SubmitFeedbackParams = {
+  type: string;
+  values: Record<string, unknown>;
+  path?: string;
+  location?: string;
+  lang?: string;
+};
+
+export type FeedbackProps = {
+  type: FEEDBACK_TYPES;
+  settings: (RatingProps | SentimentProps | CommentProps | MoodProps | ScaleProps)['settings'];
+};

package/src/types/portal/src/shared/types/i18n.d.ts

@@ -0,0 +1,5 @@
+export declare interface TFunction {
+  (value?: string, options?: string | TOptions): string;
+}
+
+export type Locale = { code: string; name: string };

package/src/types/portal/src/shared/types/markdown.ts

@@ -0,0 +1,6 @@
+export type MdHeading = {
+    id: string;
+    value: string;
+    depth: number;
+  };
+  

package/src/types/portal/src/shared/types/nav.ts

@@ -0,0 +1,191 @@
+import type { REDOCLY_TEAMS_RBAC } from '../constants';
+type Rbac = Record<string, string> | undefined;
+
+export type ResolvedNavLinkItem = {
+  type: 'link';
+  metadata?: Record<string, unknown>;
+  link: string;
+  label: string;
+  labelTranslationKey?: string;
+  items?: ResolvedNavItem[];
+  sidebar?: ResolvedNavItem[]; // for API catalog it contains the corresponding sidebar first item
+  external?: boolean;
+  target?: '_self' | '_blank';
+  languageInsensitive?: boolean;
+
+  version?: string;
+  isDefault?: boolean;
+  versionFolderId?: string;
+
+  httpVerb?: string;
+  separatorLine?: boolean;
+  routeSlug?: string;
+  fsPath?: string
+  active?: boolean;
+  icon?: string;
+  srcSet?: string;
+  [REDOCLY_TEAMS_RBAC]?: Rbac;
+};
+
+export type ResolvedNavGroupItem = {
+  type: 'group';
+  metadata?: Record<string, unknown>;
+  link?: string;
+  label?: string;
+  labelTranslationKey?: string;
+  items?: ResolvedNavItem[];
+  sidebar?: ResolvedNavItem[]; // for API catalog it contains the corresponding sidebar first item
+  external?: boolean;
+  target?: '_self' | '_blank';
+  expanded?: string;
+  selectFirstItemOnExpand?: boolean;
+  languageInsensitive?: boolean;
+
+  version?: string;
+  isDefault?: boolean;
+  versionFolderId?: string;
+
+  menuStyle?: MenuStyle;
+  separatorLine?: boolean;
+  routeSlug?: string;
+  fsPath?: string
+  active?: boolean;
+  icon?: string;
+  srcSet?: string;
+  [REDOCLY_TEAMS_RBAC]?: Rbac;
+};
+
+export type ResolvedNavItem =
+  | ResolvedNavLinkItem
+  | ResolvedNavGroupItem
+  | {
+    type: 'separator';
+    metadata?: Record<string, unknown>;
+    label?: string;
+    labelTranslationKey?: string;
+    routeSlug?: never;
+    fsPath?: never
+
+    version?: string;
+    isDefault?: boolean;
+    versionFolderId?: string;
+
+    separatorLine?: boolean;
+    link?: undefined;
+    items?: ResolvedNavItem[]; // for typescript
+    sidebar?: ResolvedNavItem[]; // for typescript
+    icon?: string;
+    srcSet?: string;
+    languageInsensitive?: boolean;
+    [REDOCLY_TEAMS_RBAC]?: Rbac;
+  }
+  | {
+    type: 'error';
+
+    version?: string;
+    isDefault?: boolean;
+    versionFolderId?: string;
+    metadata?: Record<string, unknown>;
+    routeSlug?: never;
+    fsPath?: never
+
+    label: string;
+    labelTranslationKey?: string;
+    link?: undefined;
+    items?: ResolvedNavItem[]; // for typescript
+    sidebar?: ResolvedNavItem[]; // for typescript
+    icon?: string; // for typescript
+    srcSet?: string;
+    languageInsensitive?: boolean; // for typescript
+    [REDOCLY_TEAMS_RBAC]?: Rbac;
+  };
+
+
+export type ResolvedNavItemWithLink = (ResolvedNavLinkItem | ResolvedNavGroupItem) & {
+  link: string;
+};
+
+export interface PageProps {
+  seo?: {
+    title?: string;
+  };
+  frontmatter?: Omit<PageProps, 'frontmatter'> & {
+    settings?: any;
+  };
+  disableAutoScroll?: boolean;
+  lastModified?: string | null;
+  [k: string]: any;
+}
+export interface PageStaticData {
+  props?: PageProps;
+  [k: string]: unknown;
+}
+export type UserData = {
+  isAuthenticated: boolean;
+  name: string;
+  picture: string;
+};
+export interface PageData {
+  templateId: string;
+  sharedDataIds: Record<string, string>;
+  props: PageProps;
+  versions?: Version[];
+  userData: UserData;
+}
+export enum MenuStyle {
+  Drilldown = 'drilldown',
+}
+
+export type NavItem = {
+  page?: string;
+  directory?: string;
+  group?: string;
+  groupTranslationKey?: string;
+  label?: string;
+  labelTranslationKey?: string;
+  href?: never;
+  items?: NavItem[];
+  separator?: string;
+  separatorTranslationKey?: string;
+  separatorLine?: boolean;
+  version?: string;
+  menuStyle?: MenuStyle;
+  external?: boolean;
+  target?: '_self' | '_blank';
+  expanded?: boolean | 'always';
+  selectFirstItemOnExpand?: boolean;
+  flatten?: boolean; // for API catalog only
+};
+export interface LogoConfig {
+  image?: string;
+  srcSet?: string;
+  altText?: string;
+  link?: string;
+  favicon?: string;
+}
+export type Version = {
+  version: string;
+  label: string;
+  link: string;
+  default: boolean;
+  active: boolean;
+  notExists?: boolean;
+  folderId: string;
+};
+export type VersionConfigItem = {
+  version: string;
+  name?: string;
+};
+export type VersionsConfigType = {
+  versions: VersionConfigItem[];
+  default?: string;
+};
+export type VersionedFolderConfig = {
+  versionedFiles: Map<string, Set<string>>;
+  defaultVersion?: string;
+  versions: VersionConfigItem[];
+  hasVersionsConfig?: boolean;
+};
+export type NavGroup = ResolvedNavItem[] | undefined | string | boolean | number;
+export type NavGroupRecord = Record<string, NavGroup>;
+export type ResolvedConfigLinks = NavGroup | NavGroupRecord;

package/src/types/portal/src/shared/types/searchDocument.ts

@@ -0,0 +1,23 @@
+import type { ProductConfig } from "@theme/config";
+
+export interface OperationParameter {
+  name: string | string[];
+  description: string | string[];
+  place: string;
+  path?: string[];
+}
+
+export const PERMISSION_PROP_NAME = 'redocly::permission';
+export interface SearchDocument {
+  id: string;
+  url: string;
+  title: string | string[];
+  text: string | string[];
+  path?: string[];
+  httpVerb?: string;
+  pathName?: string | string[];
+  parameters?: OperationParameter[];
+  metadata?: Record<string, any>;
+  product?: ProductConfig;
+  [PERMISSION_PROP_NAME]?: string;
+}

package/src/ui/ArrowBack.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Arrow = ({
+  className,
+  dataComponentName,
+}: {
+  className?: string;
+  dataComponentName?: string;
+}): JSX.Element => (
+  <span data-component-name={dataComponentName}>
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 12 10"
+      width="10px"
+      height="10px"
+      className={className}
+    >
+      <path d="M2.414 5l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L2.414 5z" />
+      <path d="M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" />
+    </svg>
+  </span>
+);
+
+export const ArrowBack = styled(Arrow)`
+  fill: var(--sidebar-back-button-icon-color);
+
+  background-image: var(--sidebar-back-button-icon);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+`;

package/src/ui/Background.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+import { Flex } from '@theme/ui/Flex';
+
+export const Background = styled(Flex).attrs(() => ({
+  'data-component-name': 'ui/Background',
+}))`
+  background: var(--navbar-background-color);
+  color: var(--navbar-text-color);
+  font-family: var(--heading-font-family);
+
+  a:not([role='button']),
+  a:not([role='button']):hover {
+    color: var(--navbar-text-color);
+  }
+`;

package/src/ui/Box.tsx

@@ -0,0 +1,37 @@
+import { space, position, flex, textAlign, color, border, layout, grid } from 'styled-system';
+import styled from 'styled-components';
+
+import type {
+  SpaceProps,
+  LayoutProps,
+  TextAlignProps,
+  ColorProps,
+  PositionProps,
+  FlexProps,
+  BordersProps,
+  GridProps,
+} from 'styled-system';
+
+export interface BoxProps
+  extends SpaceProps,
+    LayoutProps,
+    PositionProps,
+    FlexProps,
+    TextAlignProps,
+    ColorProps,
+    BordersProps,
+    GridProps {}
+
+export const Box = styled.div.attrs(() => ({
+  'data-component-name': 'ui/Box',
+}))<BoxProps>`
+  max-width: 100%;
+  ${space}
+  ${layout}
+  ${position}
+  ${flex}
+  ${textAlign}
+  ${color}
+  ${border}
+  ${grid}
+`;

package/src/ui/Burger.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { MouseEventHandler } from 'react';
+
+export interface BurgerProps {
+  onClick: MouseEventHandler;
+  className?: string;
+}
+
+function BurgerComponent({ onClick, className }: BurgerProps): JSX.Element {
+  return (
+    <Button onClick={onClick} className={className} data-component-name="ui/Burger">
+      <Line></Line>
+      <Line></Line>
+      <Line></Line>
+    </Button>
+  );
+}
+
+const Button = styled.button`
+  all: unset;
+  max-width: 20px;
+  min-width: 20px;
+  width: 100%;
+  min-width: 10px;
+  display: block;
+  cursor: pointer;
+`;
+
+const Line = styled.div`
+  margin: 4px 0;
+  width: 100%;
+  height: 2px;
+  background: var(--border-primary);
+  border-radius: 1px;
+`;
+
+export const Burger = styled(BurgerComponent)``;

package/src/ui/Checkbox.tsx

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+
+export const Checkbox = styled.input`
+  position: absolute;
+  opacity: 0;
+
+  & + label {
+    position: relative;
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+
+    div {
+      margin-top: 1px;
+    }
+    p {
+      line-height: 1.2;
+    }
+
+    &::before {
+      content: '';
+      margin-right: 10px;
+      display: inline-block;
+      vertical-align: top;
+      width: 18px;
+      height: 18px;
+      background: var(--checkbox-backround-color);
+      border: 1px solid rgba(0, 0, 0, 0.23);
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+  }
+
+  &:focus + label:before {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
+  }
+
+  &:checked + label {
+    &::before {
+      background: var(--checkbox-checked-backround-color);
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      left: 5px;
+      top: 10px;
+      background: var(--checkbox-backround-color);
+      width: 2px;
+      height: 2px;
+      box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white,
+        4px -8px 0 white;
+      transform: rotate(45deg);
+    }
+  }
+
+  &:disabled + label {
+    color: #b8b8b8;
+    cursor: auto;
+    &::before {
+      box-shadow: none;
+      background: #ddd;
+    }
+  }
+`;

package/src/ui/Dropdown.tsx

@@ -0,0 +1,131 @@
+import React, { useState, useRef, useEffect } from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import type { Version } from '@theme/types/portal';
+
+type DropdownProps = {
+  items: Version[];
+  activeItem: Version;
+};
+
+const Icon = () => (
+  <svg
+    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 DropDownContainer = styled.div`
+  position: relative;
+  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
+`;
+
+const DropDownHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 10px;
+  border-radius: 4px;
+  border: 1px solid var(--border-primary);
+  font-weight: 600;
+  color: var(--text-primary);
+  background: var(--background-color);
+`;
+
+const DropDownList = styled.div`
+  position: absolute;
+  background: var(--background-color);
+  margin: 2px 20px 0 20px;
+  padding: 0;
+  border-radius: 4px;
+  border: 1px solid var(--border-primary);
+  z-index: var(--z-index-popover);
+  left: 0;
+  right: 0;
+`;
+
+const IconWrapper = styled.span`
+  transition: transform 0.2s;
+  display: inline-block;
+  font-size: 0;
+  &.active {
+    transform: rotate(-180deg);
+  }
+`;
+
+const ListItem = styled.div`
+  background-color: var(--background-color);
+  padding: 0.4em 10px;
+  font-size: 1em;
+  color: var(--text-secondary);
+  cursor: pointer;
+  &:hover {
+    background-color: var(--bg-raised);
+  }
+  &.active {
+    background-color: var(--bg-raised);
+  }
+`;
+
+const DropDownLink = styled(Link)`
+  display: block;
+  text-decoration: none;
+  color: var(--text-secondary);
+`;
+
+export function Dropdown({ items, activeItem }: DropdownProps): JSX.Element {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const toggling = () => setIsOpen(!isOpen);
+  useEffect(() => {
+    const checkIfClickedOutside = (e: MouseEvent) => {
+      if (!(e.target instanceof HTMLElement)) {
+        return;
+      }
+
+      if (isOpen && ref.current && !ref.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', checkIfClickedOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', checkIfClickedOutside);
+    };
+  }, [isOpen]);
+
+  return (
+    <DropDownContainer ref={ref} data-component-name="ui/Dropdown">
+      <DropDownHeader onClick={toggling}>
+        {activeItem?.label || activeItem.version}
+        <IconWrapper className={isOpen ? 'active' : ''}>
+          <Icon />
+        </IconWrapper>
+      </DropDownHeader>
+      {isOpen && (
+        <DropDownList>
+          {items.map((item) => (
+            <ListItem
+              className={activeItem.version === item.version ? 'active' : ''}
+              onClick={toggling}
+              key={item?.link + item?.version}
+            >
+              <DropDownLink to={item?.link || '#'}>{item?.label || item.version}</DropDownLink>
+            </ListItem>
+          ))}
+        </DropDownList>
+      )}
+    </DropDownContainer>
+  );
+}

package/src/ui/Flex.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import { flexbox, width } from 'styled-system';
+
+import type { FlexboxProps, WidthProps } from 'styled-system';
+
+import { Box } from '@theme/ui/Box';
+
+export interface FlexProps extends FlexboxProps, WidthProps {}
+
+export const Flex = styled(Box).attrs({ 'data-component-name': 'ui/Flex' })<FlexProps>`
+  display: flex;
+  flex-wrap: wrap;
+  ${flexbox}
+  ${width}
+`;
+
+export function FlexSection(props: React.PropsWithChildren<FlexProps>): JSX.Element {
+  return (
+    <Flex {...props} width={props.width || { xs: '90%', large: 910 }}>
+      {props.children}
+    </Flex>
+  );
+}

package/src/ui/Highlight.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { findAll } from 'highlight-words-core';
+
+export const HighlightContext = React.createContext<string[]>([]);
+
+export function Highlight(props: { children: React.ReactChildren | string }): JSX.Element | null {
+  const { children } = props;
+  const searchWords = React.useContext(HighlightContext);
+
+  if (!searchWords.length) {
+    return children ? <>{children}</> : null;
+  }
+
+  function highlight(str: string, childIdx: number = 0) {
+    const chunks = findAll({
+      searchWords,
+      textToHighlight: str,
+    });
+
+    return (
+      <React.Fragment key={childIdx}>
+        {chunks.map((chunk, idx) => {
+          const { end, highlight, start } = chunk;
+          const text = str.substr(start, end - start);
+          if (highlight) {
+            return <mark key={idx}>{text}</mark>;
+          } else {
+            return text;
+          }
+        })}
+      </React.Fragment>
+    );
+  }
+
+  if (typeof children === 'string') {
+    return highlight(children);
+  } else if (Array.isArray(children)) {
+    return (
+      <>
+        {children.map((child, idx) =>
+          typeof children === 'string' ? highlight(child, idx) : child || null,
+        )}
+      </>
+    );
+  } else {
+    return <>children</> || null;
+  }
+}

package/src/ui/Jumbotron.tsx

@@ -0,0 +1,57 @@
+import { space } from 'styled-system';
+import styled from 'styled-components';
+
+import { H1, H2 } from '@theme/components/Typography';
+import { Background } from '@theme/ui/Background';
+
+export const Jumbotron = styled(Background).attrs(() => ({
+  'data-component-name': 'ui/Jumbotron',
+}))<{
+  pt?: string;
+  pb?: string;
+  pl?: string;
+  pr?: string;
+  bgImage?: string;
+  bgColor?: string;
+  parallaxEffect?: boolean;
+  textColor?: string;
+}>`
+  flex-direction: column;
+  padding-top: ${({ pt }) => pt || '0'};
+  padding-bottom: ${({ pb }) => pb || '8em'};
+  padding-left: ${({ pl }) => pl || '1rem'};
+  padding-right: ${({ pr }) => pr || '1rem'};
+  ${({ bgColor }) => bgColor && `background: ${bgColor}`};
+  ${({ bgImage, bgColor }) =>
+    bgImage &&
+    `
+      background: ${bgColor || 'var(--text-base)'} url(${bgImage});
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+  `};
+  ${({ parallaxEffect }) =>
+    parallaxEffect &&
+    `
+      background-attachment: scroll, fixed;
+  `};
+  ${space}
+  ${H1}, ${H2} {
+    color: ${({ textColor }) => textColor || 'var(--navbar-text-color)'};
+    text-align: center;
+    padding: 0;
+  }
+  h1 {
+    font-size: 3.5em;
+    line-height: 1.2;
+    font-weight: var(--font-weight-bold);
+    margin: 1.75em 0 0.5em 0;
+  }
+  h2 {
+    font-size: 1.875em;
+    line-height: 1;
+    font-weight: var(--font-weight-regular);
+    margin: 0;
+    margin-bottom: 2em;
+  }
+`;