@redocly/theme 0.0.0-react18-20231120182601

package/src/layouts/NotFound.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Button } from '@theme/components/Button';
+import { useTranslate } from '@portal/hooks';
+
+export function NotFound(): JSX.Element {
+  const { translate } = useTranslate();
+
+  return (
+    <Wrapper data-component-name="Pages/NotFound">
+      <Header>404</Header>
+      <Description data-translation-key="theme.page.notFound.title">
+        {translate('theme.page.notFound.title', "It looks like you're lost")}
+      </Description>
+      <HomeButton color="primary" size="large" to="/" data-translation-key="theme.page.homeButton">
+        {translate('theme.page.homeButton', 'Open Homepage')}
+      </HomeButton>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 25px auto;
+  font-family: var(--page-404-font-family);
+  text-align: center;
+`;
+
+const Header = styled.div`
+  color: var(--page-404-header-text-color);
+  margin: var(--page-404-header-margin);
+  font-size: var(--page-404-header-font-size);
+  line-height: var(--page-404-header-line-height);
+  font-weight: var(--page-404-header-font-weight);
+`;
+
+const Description = styled.div`
+  color: var(--page-404-description-text-color);
+  margin: var(--page-404-description-margin);
+  font-size: var(--page-404-description-font-size);
+  line-height: var(--page-404-description-line-height);
+  font-weight: var(--page-404-description-font-weight);
+`;
+
+const HomeButton = styled(Button)`
+  margin-top: var(--page-404-button-margin);
+`;

package/src/layouts/OIDCForbidden.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { useSearchParams } from 'react-router-dom';
+
+import { useTranslate } from '@portal/hooks';
+
+export function OIDCForbidden(): JSX.Element {
+  const { translate } = useTranslate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [errorDescription, setErrorDescription] = useState<string>('');
+
+  // use whatever you want here
+  const URL_REGEX =
+    /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
+
+  const renderText = (text: string) =>
+    text.split(' ').map((part: string) =>
+      URL_REGEX.test(part) ? (
+        <ErrorDescriptionLink key={part} href={part}>
+          {part}{' '}
+        </ErrorDescriptionLink>
+      ) : (
+        part + ' '
+      ),
+    );
+
+  useEffect(() => {
+    if (Array.from(searchParams).length) {
+      setErrorDescription(searchParams.get('error_description') || searchParams.get('error') || '');
+      setSearchParams({});
+    }
+  }, [searchParams, setSearchParams]);
+
+  return (
+    <Wrapper data-component-name="Pages/OIDCForbidden">
+      <Header>403</Header>
+      <Description data-translation-key="theme.page.forbidden.title">
+        {translate('theme.page.forbidden.title', 'Access forbidden')}
+      </Description>
+      {errorDescription && <ErrorDescription>{renderText(errorDescription)}</ErrorDescription>}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 25px auto;
+  font-family: var(--page-403-font-family);
+  text-align: center;
+`;
+
+const Header = styled.div`
+  color: var(--page-403-header-text-color);
+  margin: var(--page-403-header-margin);
+  font-size: var(--page-403-header-font-size);
+  line-height: var(--page-403-header-line-height);
+  font-weight: var(--page-403-header-font-weight);
+`;
+
+const Description = styled.div`
+  color: var(--page-403-description-text-color);
+  margin: var(--page-403-description-margin);
+  font-size: var(--page-403-description-font-size);
+  line-height: var(--page-403-description-line-height);
+  font-weight: var(--page-403-description-font-weight);
+`;
+
+const ErrorDescription = styled.div`
+  margin: var(--page-403-oidc-description-margin);
+  font-size: var(--page-403-oidc-description-font-size);
+  color: var(--page-403-description-text-color);
+  line-height: var(--page-403-description-line-height);
+  font-weight: var(--page-403-description-font-weight);
+`;
+
+const ErrorDescriptionLink = styled.a`
+  color: var(--link-text-color);
+
+  &:hover {
+    color: var(--link-hover-text-color);
+  }
+`;

package/src/layouts/PageLayout.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface PageLayoutProps {
+  sidebar?: React.ReactNode;
+}
+
+export function PageLayout({
+  sidebar,
+  children,
+}: React.PropsWithChildren<PageLayoutProps>): JSX.Element {
+  return (
+    <Container data-component-name="Layout/PageLayout">
+      {sidebar}
+      <ContentContainer>{children}</ContentContainer>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  min-height: calc(100vh - var(--navbar-height));
+`;
+
+const ContentContainer = styled.div`
+  flex: 1 0 0;
+  /*
+    flex-basis is ignored for nested flex in Chrome, need to set width
+    See more here: https://stackoverflow.com/a/34355447
+  */
+  width: 0;
+  max-width: 100%;
+`;

package/src/layouts/RootLayout.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Navbar } from '@theme/components/Navbar';
+import { Footer } from '@theme/components/Footer';
+
+interface LayoutConfig {
+  children: React.ReactNode;
+}
+
+const Wrapper = styled.div``;
+
+export function RootLayout({ children }: LayoutConfig): JSX.Element {
+  return (
+    <Wrapper data-component-name="Layout/RootLayout">
+      <Navbar />
+      {children}
+      <Footer />
+    </Wrapper>
+  );
+}

package/src/layouts/index.ts

@@ -0,0 +1,5 @@
+export * from '@theme/layouts/RootLayout';
+export * from '@theme/layouts/PageLayout';
+export * from '@theme/layouts/NotFound';
+export * from '@theme/layouts/Forbidden';
+export * from '@theme/layouts/OIDCForbidden';

package/src/mocks/Feedback/useSubmitFeedback.tsx

@@ -0,0 +1,4 @@
+export function useSubmitFeedback(): any {
+  const submitFeedback = async () => {};
+  return { submitFeedback };
+}

package/src/mocks/Link.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+// TODO: use real typings here
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function Link(props: any): JSX.Element {
+  const {
+    active: _,
+    httpVerb: _1,
+    hasActiveSubItem: _2,
+    routeSlug: _3,
+    external: _4,
+    ...filteredProps
+  } = props;
+
+  // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
+  return <a href={filteredProps.to} ref={filteredProps.innerRef} {...filteredProps} />;
+}

package/src/mocks/Profile/useProfileProps.tsx

@@ -0,0 +1,12 @@
+export function useProfileProps(): any {
+  return {
+    loginUrl: 'https://login.redoc.ly',
+    userData: {
+      isAuthenticated: true,
+      name: 'test-name',
+      picture: 'picture',
+    },
+    hasDeveloperOnboarding: true,
+    handleLogout: () => {},
+  };
+}

package/src/mocks/Sidebar/getMenuType.ts

@@ -0,0 +1,6 @@
+import { MenuType } from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function getMenuType(_props: any) {
+  return MenuType.Separator;
+}

package/src/mocks/Sidebar/types.ts

@@ -0,0 +1,15 @@
+export type SidebarNavItem = any;
+
+export type ItemState = any;
+
+export enum MenuType {
+  Separator = 'separator',
+  DrillDown = 'drilldown',
+  Group = 'group',
+  Operation = 'operation',
+}
+
+export type MenuItemProps = any;
+
+export type ActionsProps = any;
+export type AccessStatus = any;

package/src/mocks/Sidebar/useBreadcrumbs.ts

@@ -0,0 +1,3 @@
+export function useBreadcrumbs() {
+  return [] as { label: string; link?: string }[];
+}

package/src/mocks/Sidebar/useDrilldown.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useDrilldown(_props: any) {
+  return {
+    Drilldown: ({ children }: any) => <div>{children}</div>,
+    handleBack: () => {},
+    handleExpand: () => {},
+    isExpanded: false,
+    prevActiveItem: 'prevActiveItem',
+  };
+}

package/src/mocks/Sidebar/useMenuGroup.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useMenuGroup(_item: any) {
+  return {
+    MenuGroup: ({ children }: any) => <div>{children}</div>,
+    handleGroupClick: () => {},
+    isExpanded: false,
+  };
+}

package/src/mocks/Sidebar/useSidebarItems.tsx

@@ -0,0 +1,7 @@
+import type { ItemState } from '../../components/Sidebar/types';
+
+import type { Version } from '@theme/types/portal';
+
+export function useSidebarItems(_?: Version): ItemState[] {
+  return [];
+}

package/src/mocks/constants/index.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_THEME_NAME = '@redocly/theme';
+export const USER_THEME_ALIAS = '@theme';

package/src/mocks/hooks/index.ts

@@ -0,0 +1,118 @@
+import type { TFunction } from '@redocly/portal-types';
+
+import type { CatalogConfig, ProductUiConfig, ThemeUIConfig } from '@theme/config';
+import type { ResolvedNavItem, Version } from '@theme/types/portal';
+import type { FilteredCatalog } from '@theme/types/portal/src/shared/types/catalog';
+interface PageLink {
+  label: string;
+  link: string;
+  type: 'link';
+}
+
+export function useThemeConfig<T extends Record<string, unknown>>(
+  _useProductConfig: boolean = true,
+): T & ThemeUIConfig {
+  return {
+    search: {
+      hide: false,
+      placement: 'navbar',
+      shortcuts: ['ctrl+f', 'cmd+k', '/'],
+    },
+    codeSnippet: {
+      copy: {
+        hide: false,
+        buttonText: 'Copy',
+        tooltipText: 'Copy to clipboard',
+        toasterText: 'Copied',
+        toasterDuration: 1500,
+      },
+      report: {
+        hide: false,
+        tooltipText: 'Report a problem',
+      },
+    },
+    markdown: {
+      toc: { depth: 3, header: 'Table of contents', hide: false },
+      lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },
+      editPage: {
+        baseUrl: '',
+      },
+      frontMatterKeysToResolve: ['image', 'links'],
+    },
+    navigation: {
+      nextButton: { text: 'next page theme config label' },
+      previousButton: { text: 'prev page theme config label' },
+    },
+    colorMode: {
+      modes: ['light', 'dark'],
+    },
+    feedback: {
+      type: 'sentiment',
+    },
+    userProfile: {
+      hide: false,
+    },
+  } as ThemeUIConfig as T & ThemeUIConfig;
+}
+
+export function useSidebarSiblingsData(): { nextPage: PageLink | null; prevPage: PageLink | null } {
+  return {
+    nextPage: {
+      type: 'link',
+      label: 'Page',
+      link: '#next',
+    },
+    prevPage: {
+      type: 'link',
+      label: 'Page',
+      link: '#prev',
+    },
+  };
+}
+
+export function usePageSharedData<T = unknown>(_id: string): T {
+  throw new Error('Mock not implemented yet.');
+}
+
+export function useCatalog(_items: ResolvedNavItem[], _config: CatalogConfig): FilteredCatalog {
+  throw new Error('Mock not implemented yet.');
+}
+
+export const useTranslate = (): { translate: TFunction } => ({
+  translate: (value?: string, options?: { defaultValue: string } | string) =>
+    (typeof options === 'string' ? options : options?.defaultValue) || value || '',
+});
+
+export function useI18n() {
+  const changeLanguage = (...args: any) => args.value as string;
+  return { changeLanguage };
+}
+
+export { useGlobalData } from '../useGlobalData';
+
+export function useI18nConfig() {
+  return {
+    currentLocale: 'en',
+    defaultLocale: 'en',
+    locales: [{ code: 'en', name: 'en' }],
+  };
+}
+
+export function useCurrentProduct(): ProductUiConfig | undefined {
+  return undefined;
+}
+
+export function usePageVersions(): { versions: Version[] } {
+  return {
+    versions: [
+      {
+        version: '1.0',
+        label: 'First',
+        link: '',
+        default: true,
+        active: true,
+        folderId: 'id',
+      },
+    ],
+  };
+}

package/src/mocks/hooks/usePageData.ts

@@ -0,0 +1,12 @@
+import type { ResolvedNavLinkItem } from '@theme/types/portal';
+
+export function usePageData(): {
+  prevPage: ResolvedNavLinkItem | null;
+  nextPage: ResolvedNavLinkItem | null;
+  props?: any;
+} | null {
+  return {
+    prevPage: { label: 'Intro', type: 'link', link: '#prev' },
+    nextPage: { label: 'FAQ', type: 'link', link: '#next' },
+  };
+}

package/src/mocks/media-css.ts

@@ -0,0 +1 @@
+export const breakpoints = { small: '550px', medium: '900px', large: '1200px' };

package/src/mocks/search.ts

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+
+interface OperationParameter {
+  name: string | string[];
+  description: string | string[];
+  place: string;
+  path?: string[];
+}
+
+interface SearchDocument {
+  id: string;
+  url: string;
+  title: string | string[];
+  text: string | string[];
+  path?: string[];
+  httpVerb?: string;
+  pathName?: string | string[];
+  parameters?: OperationParameter[];
+}
+
+export function useFuseSearch(_product?: string): {
+  query: string;
+  setQuery: (val: string) => void;
+  items: SearchDocument[] | null;
+  isLoading: boolean;
+} {
+  const [query, setQuery] = useState('');
+
+  return {
+    query,
+    setQuery,
+    isLoading: false,
+    items: [
+      {
+        id: '1',
+        url: '#someUrl1',
+        title: 'Some Dummy Result Item 1',
+        text: 'Some sample search text',
+      },
+      {
+        id: '2',
+        url: '#someUrl2',
+        title: 'Some Dummy Result Item 2',
+        text: 'Some sample search text 2',
+      },
+    ],
+  };
+}
+
+export const useRecentSearches = () => {
+  const items = ['test'];
+  return {
+    items,
+    addSearchHistoryItem: (value: string) => value,
+    removeSearchHistoryItem: (value: string) => value,
+  };
+};
+
+export const useSuggestedPages = () => {
+  return [
+    {
+      link: '/',
+      label: 'some page',
+    },
+  ];
+};

package/src/mocks/telemetry.ts

@@ -0,0 +1,5 @@
+import type { ClientTelemetry } from '@redocly/portal-types';
+
+export const telemetry = {
+  send: () => undefined,
+} as unknown as ClientTelemetry;

package/src/mocks/types/index.ts

@@ -0,0 +1 @@
+export type ResolvedNavLinkItem = any;

package/src/mocks/types.ts

@@ -0,0 +1,5 @@
+export type ActiveItem<T> = T;
+export type SearchDocument = any;
+export type OperationParameter = any;
+
+// TODO: get rid of these types

package/src/mocks/useGlobalData.tsx

@@ -0,0 +1,3 @@
+export function useGlobalData(): Record<string, unknown> {
+  return {};
+}

package/src/mocks/usePreloadHistory.ts

@@ -0,0 +1,9 @@
+export function usePreloadHistory(): { push: (url: string) => void } {
+  const history = [];
+
+  return {
+    push: (url: string): void => {
+      history.push(url);
+    },
+  };
+}

package/src/mocks/utils.ts

@@ -0,0 +1,22 @@
+export function withPathPrefix(link: string): string {
+  return link;
+}
+
+export function withoutPathPrefix(link: string): string {
+  return link;
+}
+
+export function timeAgo(lastModified: string | Date): string {
+  // should return format(lastModified) in portal
+  const d = new Date(lastModified);
+  return `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}`;
+}
+
+export function getPathnameForLocale(
+  pathname: string,
+  _defaultLocale: string,
+  _newLocale: string,
+  _allLocales: { code: string; name: string }[],
+) {
+  return `${pathname}`;
+}

package/src/settings.yaml

@@ -0,0 +1,29 @@
+search:
+  hide: false
+  placement: navbar
+toc:
+  hide: false
+  header:
+    label: On this page
+navigation:
+  hide: false
+  nextButton:
+    hide: false
+  previousButton:
+    hide: false
+navbar:
+  hide: false
+sidebar:
+  hide: false
+footer:
+  hide: false
+colorMode:
+  hide: false
+  detect: true
+  modes:
+    - 'light'
+    - 'dark'
+lastUpdatedBlock:
+  hide: false
+userProfile:
+  hide: false

package/src/types/config.ts

@@ -0,0 +1,5 @@
+export type DefaultThemeUIConfig = {
+  lastUpdatedBlock?: {
+    hide?: boolean;
+  };
+};

package/src/types/portal/index.ts

@@ -0,0 +1,3 @@
+export * from './src/shared/types/nav';
+export * from './src/shared/types/i18n';
+export type { MdHeading } from './src/shared/types/markdown';

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

@@ -0,0 +1,21 @@
+export const DEFAULT_THEME_NAME = '@redocly/theme';
+export const USER_THEME_ALIAS = '@theme';
+export const REDOCLY_TEAMS_RBAC = 'redocly::teams-rbac';
+export const DEFAULT_LOCALE_PLACEHOLDER = 'default_locale'
+export type REQUIRED_OIDC_SCOPES =  string[];
+export type DEFAULT_COOKIE_EXPIRATION = number;
+export enum FEEDBACK_TYPES {
+  RATING = 'rating',
+  SENTIMENT = 'sentiment',
+  COMMENT = 'comment',
+  MOOD = 'mood',
+  PROBLEM = 'problem',
+  SCALE = 'scale',
+}
+export const DEV_LOGIN_SLUG = '/login/';
+export enum ExternalRoutes {
+  AUTH0_PASS = '/auth/auth0-pass',
+}
+export enum FsErrors {
+  NotExist = 'ENOENT',
+}

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

@@ -0,0 +1 @@
+export type ActiveItem<T> = T & { active?: boolean };

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

@@ -0,0 +1,44 @@
+import { CatalogFilterConfig } from '@theme';
+
+export type FilteredCatalog = {
+  groups: { title: string; items: CatalogItem[] }[];
+  filters: ResolvedFilter[];
+  filterTerm: string;
+  setFilterTerm: (term: string) => void;
+};
+
+export type ResolvedFilter = Omit<CatalogFilterConfig, 'options'> & {
+  options: {
+    value: string;
+    count: number;
+  }[];
+  filteredOptions: {
+    value: string;
+    count: number;
+  }[];
+  toggleOption: (option: string) => void;
+  selectOption: (option: string) => void;
+  parentUsed: boolean;
+  selectedOptions:
+    | Set<string>
+    | {
+        from?: string;
+        to?: string;
+      };
+};
+
+export type CatalogItem = {
+  title: string;
+  link: string;
+  description?: string;
+  image?: string;
+  docsLink?: string;
+
+  scorecardLevel?: string;
+  scorecardLevelIdx?: number;
+  scorecardLevels?: Record<string, { uniqueErrors: number; uniqueWarnings: number }>;
+  scoreCardSlug?: string;
+  tags?: unknown[];
+
+  [k: string]: unknown;
+};