@redocly/theme 0.1.5 → 0.1.8

package/src/icons/ShelfIcon/__tests__/ShelfIcon.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { ShelfIcon } from '../ShelfIcon';
+import { ShelfIcon } from '@theme/icons/ShelfIcon';
 
 describe('ShelfIcon', () => {
   it('renders right', () => {

package/src/index.ts

@@ -12,3 +12,4 @@ export * from './icons';
 export * from './hooks';
 export * from './utils';
 export * from './globalStyle';
+export * from './OperationBadge';

package/src/mocks/hooks/usePageData.ts

@@ -0,0 +1,8 @@
+import type { ResolvedNavLinkItem } from '@theme/types/portal';
+
+export function usePageData(): {
+  prevPage: ResolvedNavLinkItem | null;
+  nextPage: ResolvedNavLinkItem | null;
+} {
+  return { prevPage: null, nextPage: null };
+}

package/src/mocks/models.ts

@@ -0,0 +1,3 @@
+export type ActiveItem<T> = T;
+export type SearchDocument = any;
+export type OperationParameter = any;

package/src/mocks/search.ts

@@ -0,0 +1,31 @@
+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(): {
+  query: string;
+  setQuery: (val: string) => void;
+  items: SearchDocument[];
+} {
+  return {
+    query: '',
+    setQuery(val: string) {
+      this.query = val;
+    },
+    items: [],
+  };
+}

package/src/mocks/types/index.ts

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

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/types/portal/index.d.ts

@@ -0,0 +1,6 @@
+export * from './src/client/styling';
+export * from './src/client/app/Sidebar/types';
+export * from './src/server/plugins/portal-config/types';
+export * from './src/shared/types';
+export * from './src/server/plugins/versions/types';
+export type { MdHeading } from './src/server/plugins/markdown/types';

package/src/types/portal/src/client/app/Sidebar/types.d.ts

@@ -0,0 +1,50 @@
+import { Location } from 'history';
+import { MenuStyle } from '../../../shared/types';
+import type { Version } from '../../../server/plugins/versions/types';
+export interface SidebarNavItem {
+  label?: string;
+  sublabel?: string;
+  icon?: string;
+  link?: string;
+  type?: string;
+  httpVerb?: string;
+  expanded?: string;
+  selectFirstItemOnExpand?: boolean;
+  pageId?: string;
+  redocPrevLink?: string;
+  redocPrevLabel?: string;
+  redocNextLink?: string;
+  redocNextLabel?: string;
+  redocFakePage?: boolean;
+  redocInfoPageId?: string;
+  target?: string;
+  external?: boolean;
+  items?: SidebarNavItem[];
+  permission?: string;
+  menuStyle?: MenuStyle;
+  separatorLine?: boolean;
+  version?: string;
+  default?: boolean;
+}
+export interface ItemState extends SidebarNavItem {
+  items: ItemState[];
+  active: boolean;
+  hasActiveSubItem: boolean;
+  menuStyle?: MenuStyle | null;
+}
+export interface MenuProps {
+  items: SidebarNavItem[];
+  location: Location;
+  pageId: string;
+  versions?: Version[];
+}
+export declare enum MenuType {
+  Separator = 'separator',
+  DrillDown = 'drilldown',
+  Group = 'group',
+  Operation = 'operation',
+}
+export interface MenuItemProps {
+  item: ItemState;
+  activeItem?: ItemState;
+}

package/src/types/portal/src/client/app/media-css.d.ts

@@ -0,0 +1,7 @@
+export declare const breakpoints: {
+  small: string;
+  medium: string;
+  large: string;
+};
+export declare const mediaQueries: import('@theme/utils/media-css').MediaQueries;
+export type { MediaQueries } from '@theme/utils/media-css';

package/src/types/portal/src/client/styling/default.d.ts

@@ -0,0 +1,407 @@
+export declare const defaultTheme: {
+  spacing: {
+    unit: number;
+    sectionHorizontal: ({ spacing }: { spacing: any }) => number;
+    sectionVertical: ({ spacing }: { spacing: any }) => number;
+  };
+  components: {
+    buttons: {
+      borderRadius: ({ shape }: { shape: any }) => any;
+      hoverStyle: string;
+      fontWeight: ({ typography }: { typography: any }) => any;
+      boxShadow: string;
+      hoverBoxShadow: string;
+      fontFamily: string;
+      sizes: {
+        small: {
+          fontSize: string;
+          padding: string;
+          minWidth: string;
+        };
+        medium: {
+          fontSize: string;
+          padding: string;
+          minWidth: string;
+        };
+        large: {
+          fontSize: string;
+          padding: string;
+          minWidth: string;
+        };
+        xlarge: {
+          fontSize: string;
+          padding: string;
+          minWidth: string;
+        };
+      };
+    };
+    search: {
+      icon: string;
+      iconColor: ({ colors }: { colors: any }) => any;
+    };
+    alert: {
+      marginHorizontal: string;
+      marginVertical: ({ spacing }: { spacing: any }) => string;
+      paddingHorizontal: ({ spacing }: { spacing: any }) => string;
+      paddingVertical: ({ spacing }: { spacing: any }) => string;
+      borderRadius: string;
+      iconSize: string;
+      fontSize: string;
+      fontWeight: string;
+      lineHeight: string;
+      heading: {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        transform: string;
+      };
+      variants: {
+        info: {
+          backgroundColor: string;
+          textColor: ({ colors }: { colors: any }) => any;
+          headingColor: ({ colors }: { colors: any }) => any;
+          iconColor: ({ colors }: { colors: any }) => any;
+          icon: string;
+        };
+        attention: {
+          backgroundColor: ({ colors }: { colors: any }) => any;
+          textColor: ({ colors }: { colors: any }) => any;
+          headingColor: ({ colors }: { colors: any }) => any;
+          iconColor: ({ colors }: { colors: any }) => any;
+          icon: string;
+        };
+        warning: {
+          backgroundColor: ({ colors }: { colors: any }) => any;
+          textColor: ({ colors }: { colors: any }) => any;
+          headingColor: ({ colors }: { colors: any }) => any;
+          iconColor: ({ colors }: { colors: any }) => any;
+          icon: string;
+        };
+        danger: {
+          backgroundColor: ({ colors }: { colors: any }) => any;
+          textColor: ({ colors }: { colors: any }) => any;
+          headingColor: ({ colors }: { colors: any }) => any;
+          iconColor: ({ colors }: { colors: any }) => any;
+          icon: string;
+        };
+        success: {
+          backgroundColor: ({ colors }: { colors: any }) => any;
+          textColor: ({ colors }: { colors: any }) => any;
+          headingColor: ({ colors }: { colors: any }) => any;
+          iconColor: ({ colors }: { colors: any }) => any;
+          icon: string;
+        };
+      };
+    };
+    panels: {
+      borderRadius: string;
+    };
+    shape: {
+      borderRadius: string;
+    };
+    blockquote: {
+      marginHorizontal: string;
+      marginVertical: string;
+      paddingHorizontal: ({ spacing }: { spacing: any }) => string;
+      paddingVertical: string;
+      backgroundColor: string;
+      borderRadius: string;
+      borderLeft: ({ colors }: { colors: any }) => string;
+      color: ({ colors }: { colors: any }) => any;
+    };
+    contentWrapper: {
+      maxWidth: string;
+      paddingHorizontal: string;
+      paddingVertical: string;
+    };
+    login: {
+      avatarBorderRadius: ({ navbar }: { navbar: any }) => any;
+      avatarBgColor: string;
+    };
+    layoutControls: {
+      top: string;
+    };
+    httpBadges: {
+      borderRadius: string;
+      fontFamily: ({ typography }: { typography: any }) => any;
+      fontWeight: ({ typography }: { typography: any }) => any;
+      color: ({ colors }: { colors: any }) => any;
+      sizes: {
+        medium: {
+          fontSize: string;
+          lineHeight: string;
+        };
+        small: {
+          fontSize: string;
+          lineHeight: string;
+        };
+      };
+    };
+    tryItButton: {
+      fullWidth: boolean;
+    };
+    tryItSendButton: {
+      fullWidth: boolean;
+    };
+  };
+  breakpoints: {
+    small: string;
+    medium: string;
+    large: string;
+  };
+  shape: {
+    borderRadius: string;
+  };
+  colors: {
+    background: string;
+    tonalOffset: number;
+    primary: {
+      main: string;
+      light: ({ colors }: { colors: any }) => string;
+      dark: ({ colors }: { colors: any }) => string;
+      contrastText: ({ colors }: { colors: any }) => string;
+    };
+    secondary: {
+      main: string;
+      light: string;
+      dark: string;
+      contrastText: string;
+    };
+    accent: {
+      main: string;
+      light: string;
+      dark: string;
+      contrastText: string;
+    };
+    success: {
+      main: string;
+      light: ({ colors }: { colors: any }) => string;
+      dark: ({ colors }: { colors: any }) => string;
+      contrastText: ({ colors }: { colors: any }) => string;
+    };
+    error: {
+      main: string;
+      light: ({ colors }: { colors: any }) => string;
+      dark: ({ colors }: { colors: any }) => string;
+      contrastText: ({ colors }: { colors: any }) => string;
+    };
+    warning: {
+      main: string;
+      light: ({ colors }: { colors: any }) => string;
+      dark: ({ colors }: { colors: any }) => string;
+      contrastText: ({ colors }: { colors: any }) => string;
+    };
+    info: {
+      main: string;
+      light: ({ colors }: { colors: any }) => string;
+      dark: ({ colors }: { colors: any }) => string;
+      contrastText: ({ colors }: { colors: any }) => string;
+    };
+    text: {
+      primary: string;
+      secondary: string;
+      light: string;
+    };
+    border: {
+      dark: string;
+      light: string;
+    };
+    responses: {
+      success: {
+        color: ({ colors }: { colors: any }) => any;
+        backgroundColor: ({ colors }: { colors: any }) => string;
+      };
+      error: {
+        color: ({ colors }: { colors: any }) => any;
+        backgroundColor: ({ colors }: { colors: any }) => string;
+      };
+      redirect: {
+        color: ({ colors }: { colors: any }) => any;
+        backgroundColor: ({ colors }: { colors: any }) => string;
+      };
+      info: {
+        color: ({ colors }: { colors: any }) => any;
+        backgroundColor: ({ colors }: { colors: any }) => string;
+      };
+    };
+    http: {
+      get: string;
+      post: string;
+      put: string;
+      options: string;
+      patch: string;
+      delete: string;
+      basic: string;
+      link: string;
+      head: string;
+    };
+    navbar: {
+      main: ({ colors }: { colors: any }) => any;
+      gradient: ({ colors }: { colors: any }) => string;
+      contrastText: ({ colors }: { colors: any }) => string;
+    };
+    footer: {
+      main: ({ colors }: { colors: any }) => any;
+      contrastText: ({ colors }: { colors: any }) => any;
+    };
+  };
+  sidebar: {
+    showAtBreakpoint: string;
+    backgroundColor: string;
+    width: string;
+    textColor: string;
+    textColorSecondary: string;
+    activeTextColor: ({ sidebar }: { sidebar: any }) => any;
+    activeBgColor: string;
+    separatorLineColor: string;
+    rightLineColor: string;
+    separatorLabelColor: ({ sidebar }: { sidebar: any }) => any;
+    caretColor: ({ sidebar }: { sidebar: any }) => any;
+    caretSize: ({ sidebar }: { sidebar: any }) => any;
+    spacing: {
+      unit: number;
+      paddingHorizontal: ({ sidebar }: { sidebar: any }) => any;
+      paddingVertical: ({ sidebar }: { sidebar: any }) => any;
+      offsetTop: ({ sidebar }: { sidebar: any }) => number;
+      offsetLeft: ({ sidebar }: { sidebar: any }) => number;
+      offsetNesting: ({ sidebar }: { sidebar: any }) => number;
+    };
+    borderRadius: string;
+    fontFamily: ({ typography }: { typography: any }) => any;
+    fontSize: ({ typography }: { typography: any }) => any;
+  };
+  navbar: {
+    height: string;
+    borderRadius: string;
+    marginHorizontal: string;
+    marginVertical: string;
+    activeTextColor: ({ colors }: { colors: any }) => any;
+    activeBgColor: ({ colors }: { colors: any }) => string;
+    activeTextDecoration: string;
+    fontWeight: number;
+    fontSize: string;
+  };
+  tocPanel: {
+    width: string;
+  };
+  logo: {
+    maxWidth: string;
+    maxHeight: string;
+    height: string;
+    margin: ({ sidebar }: { sidebar: any }) => string;
+  };
+  typography: {
+    fontSize: string;
+    lineHeight: string;
+    fontWeightRegular: string;
+    fontWeightBold: string;
+    fontWeightLight: string;
+    fontFamily: string;
+    headings: {
+      fontFamily: string;
+      fontWeight: string;
+    };
+    fieldName: {
+      fontSize: ({ typography }: { typography: any }) => any;
+      fontFamily: ({ typography }: { typography: any }) => any;
+      fontWeight: ({ typography }: { typography: any }) => any;
+    };
+    heading1: {
+      fontSize: string;
+      fontWeight: string;
+      fontFamily: ({ typography }: { typography: any }) => any;
+      lineHeight: ({ typography }: { typography: any }) => any;
+      color: ({ colors }: { colors: any }) => any;
+      capitalize: boolean;
+      marginTop: string;
+      marginBottom: string;
+    };
+    heading2: {
+      fontSize: string;
+      fontWeight: string;
+      color: ({ colors }: { colors: any }) => any;
+      fontFamily: ({ typography }: { typography: any }) => any;
+      lineHeight: ({ typography }: { typography: any }) => any;
+      capitalize: boolean;
+      marginTop: string;
+      marginBottom: string;
+    };
+    heading3: {
+      fontSize: string;
+      fontWeight: string;
+      color: ({ colors }: { colors: any }) => any;
+      fontFamily: ({ typography }: { typography: any }) => any;
+      lineHeight: ({ typography }: { typography: any }) => any;
+      capitalize: boolean;
+      marginTop: string;
+      marginBottom: string;
+    };
+    heading4: {};
+    heading5: {};
+    heading6: {};
+    rightPanelHeading: {};
+    code: {
+      fontSize: string;
+      fontFamily: string;
+      fontWeight: ({ typography }: { typography: any }) => any;
+      color: string;
+      backgroundColor: string;
+      wrap: boolean;
+    };
+    links: {
+      color: ({ colors }: { colors: any }) => any;
+      visited: ({ typography }: { typography: any }) => any;
+      hover: ({ typography }: { typography: any }) => string;
+      textDecoration: string;
+    };
+  };
+  rightPanel: {
+    showAtBreakpoint: string;
+    backgroundColor: string;
+    width: string;
+    textColor: string;
+    panelBackgroundColor: string;
+    panelControlsBackgroundColor: string;
+  };
+  schema: {
+    linesColor: (theme: any) => any;
+    defaultDetailsWidth: string;
+    typeNameColor: (theme: any) => any;
+    typeTitleColor: (theme: any) => any;
+    requireLabelColor: string;
+    labelsTextSize: string;
+    nestingSpacing: string;
+    nestedBackground: (theme: any) => any;
+    caretColor: ({ colors }: { colors: any }) => any;
+    caretSize: string;
+  };
+  codeBlock: {
+    backgroundColor: ({ rightPanel }: { rightPanel: any }) => any;
+    copyButton: {
+      visibleText: ({ codeBlock }: { codeBlock: any }) => string;
+      contrastText: ({ codeBlock }: { codeBlock: any }) => string;
+      background: ({ codeBlock }: { codeBlock: any }) => string;
+    };
+    tokens: {};
+  };
+  layout: {
+    showDarkRightPanel: boolean;
+    stacked: {
+      maxWidth: {
+        _: string;
+        small: string;
+        medium: string;
+        large: string;
+      };
+    };
+    'three-panel': {
+      maxWidth: {
+        _: string;
+        small: string;
+        medium: string;
+        large: string;
+      };
+    };
+  };
+};

package/src/types/portal/src/client/styling/index.d.ts

@@ -0,0 +1,14 @@
+import type { MediaQueries } from './../app/media-css';
+import { defaultTheme } from './default.js';
+export declare const theme: AppTheme;
+declare type InferDeep<T extends object> = {
+  [k in keyof T]: T[k] extends (...args: any) => any
+    ? ReturnType<T[k]>
+    : T[k] extends object
+    ? InferDeep<T[k]>
+    : T[k];
+};
+export declare type AppTheme = InferDeep<typeof defaultTheme> & {
+  mediaQueries: MediaQueries;
+};
+export {};

package/src/types/portal/src/client/styling/resolve.d.ts

@@ -0,0 +1 @@
+export declare function resolveTheme(theme: any): any;

package/src/types/portal/src/server/constants.d.ts

@@ -0,0 +1,11 @@
+export declare enum cliCommandNames {
+  BUILD = 'build',
+  DEVELOP = 'develop',
+}
+export declare const VERSION_SEPARATOR = '@';
+export declare const DEFAULT_VERSION_NAME = 'default';
+export declare enum PageType {
+  MARKDOWN = 'Markdown',
+  REFERENCE_DOCS = 'ReferenceDocs',
+  REACT = 'React',
+}

package/src/types/portal/src/server/plugins/markdown/types.d.ts

@@ -0,0 +1,28 @@
+import { Config, RenderNodes } from '@markdoc/markdoc/dist/src/types';
+import type { Page } from '../../store';
+import type { VersionsConfigType } from '../versions/types';
+export declare type MarkdownOptions = {
+  contentDir: string;
+  version?: string;
+  versionsConfig: Map<string, VersionsConfigType>;
+  pages: Map<string, Page>;
+  allPagesPaths: string[];
+  outdir: string;
+};
+export interface MdHeading {
+  id: string;
+  value: string;
+  depth: number;
+}
+export interface MdCompilationResult {
+  result: RenderNodes;
+  headings: MdHeading[];
+}
+export declare type MdCompilationContext = {
+  absolutePath: string;
+  content: string;
+  contentHash: string;
+} & MarkdownOptions;
+export interface ExtendedMarkdocConfig extends Config {
+  currentProcessedPage?: string;
+}

package/src/types/portal/src/server/plugins/nav-utils.d.ts

@@ -0,0 +1,19 @@
+import { Page, Store } from '../store.js';
+import type { ResolvedNavItem, NavItem, RawNavItem } from '../../shared/types.js';
+export declare function normalizeItems(items: RawNavItem[]): NavItem[];
+export declare function resolveVersionItems(
+  items: RawNavItem[],
+  store: Store,
+  versions?: any,
+): RawNavItem[];
+export declare function resolvePage(pagePath: string, fromFile: string, store: Store): Page;
+export declare function resolveItems(
+  items: NavItem[],
+  fromFile: string,
+  store: Store,
+): Promise<ResolvedNavItem[]>;
+export declare function resolveItem(
+  item: NavItem,
+  fromFile: string,
+  store: Store,
+): Promise<ResolvedNavItem | ResolvedNavItem[]>;

package/src/types/portal/src/server/plugins/portal-config/types.d.ts

@@ -0,0 +1,23 @@
+import { LogoConfig, RawNavItem, ResolvedNavItem } from '../../../shared/types.js';
+export interface PortalConfig extends Record<string, any> {
+  nav?: RawNavItem[];
+  logo?: LogoConfig;
+  themes?: CustomTheme[];
+  footer?: FooterConfig;
+}
+export interface CustomTheme {
+  name: string;
+  settings?: any;
+  themeStyles?: string;
+}
+export interface FooterConfig {
+  copyrightText?: string;
+  columns?: FooterColumn[];
+}
+export interface FooterColumn {
+  group: string;
+  label?: string;
+  items: ResolvedNavItem[];
+}
+export declare type CustomEntryPropertyType = Record<string, string | boolean>;
+export declare type ScriptOrStylesheetConfig = string | CustomEntryPropertyType;

package/src/types/portal/src/server/plugins/sidebars/index.d.ts

@@ -0,0 +1,16 @@
+import type { NavItem, RawNavItem, ResolvedNavItem } from '../../../shared/types.js';
+import { Page, Store } from '../../store.js';
+import { Watcher } from '../../utils/index.js';
+export declare function sidebarsPlugin(watcher: Watcher, store: Store): void;
+export declare class Sidebar {
+  absolutePath: string;
+  id: string;
+  store: Store;
+  hash: string;
+  dirname: string;
+  items: NavItem[];
+  constructor(absolutePath: string, items: RawNavItem[], id: string, store: Store);
+  resolve(): Promise<ResolvedNavItem[]>;
+  getDependentPages(): Set<Page>;
+  private collectDependentPages;
+}

package/src/types/portal/src/server/plugins/versions/index.d.ts

@@ -0,0 +1,15 @@
+import type { AllFilesType } from './types.js';
+import { Watcher } from '../../utils/index.js';
+import type { Store } from '../../store.js';
+export declare function allFilesPaths(): AllFilesType;
+export declare const existingVersionPages: Set<string>;
+export declare function initVersionPlugin(
+  contentDir: string,
+  store: Store,
+  allFiles: AllFilesType,
+): void;
+export declare function versionsPlugin(
+  watcher: Watcher,
+  store: Store,
+  allFiles: AllFilesType,
+): void;