@redocly/theme 0.1.15 → 0.1.20

package/mocks/Link.js

@@ -10,15 +10,18 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var lodash_1 = require("lodash");
 // TODO: use real typings here
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function Link(props) {
     // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
     var filteredProps = (0, lodash_1.omit)(props, ['active', 'httpVerb', 'hasActiveSubItem']);
-    return (0, jsx_runtime_1.jsx)("a", __assign({ href: filteredProps.to }, filteredProps));
+    return react_1.default.createElement("a", __assign({ href: filteredProps.to }, filteredProps));
 }
 exports.Link = Link;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.15",
+  "version": "0.1.20",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Footer/CustomFooter.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { CustomFooterNavItem } from '@theme/Footer/CustomFooterNavItem';
+import { FooterCopyright } from '@theme/Footer/FooterCopyright';
+import { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
+
+interface FooterProps {
+  data: NavGroupRecord;
+}
+
+export function CustomFooter({ data }: FooterProps): JSX.Element | null {
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <FooterContainer data-component-name="Footer/CustomFooter">
+      {(data.links as ResolvedNavItem[]).map((navItem, index) => {
+        return (
+          <CustomFooterNavItem
+            key={`${navItem.label}_${index}`}
+            data-cy={navItem.label}
+            navItem={navItem}
+          />
+        );
+      })}
+      <FooterCopyright copyrightText={data.copyrightText} />
+    </FooterContainer>
+  );
+}
+
+const FooterContainer = styled.div`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+  background-color: var(--footer-background-color);
+  text-align: center;
+  font-family: var(--font-family-base);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+`;

package/src/Footer/CustomFooterNavItem.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import type { ResolvedNavItem, ResolvedNavLinkItem } from '@theme/types/portal';
+
+interface CustomFooterNavItemProps {
+  navItem: ResolvedNavItem;
+}
+
+export function CustomFooterNavItem({ navItem }: CustomFooterNavItemProps): JSX.Element {
+  const item = navItem as ResolvedNavLinkItem;
+
+  return (
+    <FooterItem data-component-name="Navbar/NavbarItem">
+      <FooterLink to={item.link}>
+        <FooterLabel>{item.label}</FooterLabel>
+      </FooterLink>
+    </FooterItem>
+  );
+}
+
+const FooterItem = styled.li`
+  display: inline-block;
+  text-align: center;
+  line-height: var(--line-height-base);
+  font-size: var(--navbar-item-font-size);
+  margin: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
+  font-weight: var(--font-weight-regular);
+`;
+
+const FooterLink = styled(Link)`
+  color: var(--footer-text-color);
+  text-decoration: none;
+`;
+
+const FooterLabel = styled.span`
+  cursor: pointer;
+  vertical-align: middle;
+`;

package/src/Footer/Footer.tsx

@@ -3,9 +3,13 @@ import styled from 'styled-components';
 
 import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
-import type { FooterConfig } from '@theme/types/portal';
+import type { NavGroupRecord } from '@theme/types/portal';
 
-export function Footer({ columns, copyrightText }: FooterConfig): JSX.Element | null {
+interface FooterProps {
+  data: NavGroupRecord;
+}
+
+export function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null {
   if (!(columns?.length || copyrightText)) {
     return null;
   }

package/src/Footer/FooterColumn.tsx

@@ -2,17 +2,17 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
-import type { FooterColumn as Column } from '@theme/types/portal';
+import type { ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterColumnProps {
-  column: Column;
+  column: ResolvedNavItem;
 }
 
 export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
   return (
     <FooterColumnContainer data-component-name="Footer/FooterColumn">
-      <FooterColumnTitle>{column.group || column.label}</FooterColumnTitle>
-      {column.items.map((columnItem, columnItemIndex) => {
+      <FooterColumnTitle>{column.label}</FooterColumnTitle>
+      {column?.items?.map((columnItem, columnItemIndex) => {
         if (columnItem.type === 'error') {
           return null;
         }

package/src/Footer/FooterColumns.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { FooterColumn } from '@theme/Footer/FooterColumn';
-import type { FooterConfig } from '@theme/types/portal';
-
-export function FooterColumns({
-  columns = [],
-}: {
-  columns?: FooterConfig['columns'];
-}): JSX.Element | null {
-  if (!columns?.length) {
+import type { NavGroup } from '@theme/types/portal';
+
+interface FooterColumnsProps {
+  columns: NavGroup;
+}
+
+export function FooterColumns({ columns }: FooterColumnsProps): JSX.Element | null {
+  if (typeof columns === 'string' || typeof columns === 'undefined' || !columns?.length) {
     return null;
   }
 
@@ -17,7 +17,7 @@ export function FooterColumns({
     <FooterColumnsContainer data-component-name="Footer/FooterColumns">
       <FooterRow>
         {columns.map((column, index) => (
-          <FooterColumn key={index} column={column} />
+          <FooterColumn key={`${column.label}_${index}`} column={column} />
         ))}
       </FooterRow>
     </FooterColumnsContainer>

package/src/Footer/FooterCopyright.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { FooterConfig } from '@theme/types/portal';
+import type { NavGroup } from '@theme/types/portal';
 
-export function FooterCopyright({
-  copyrightText = '',
-}: {
-  copyrightText?: FooterConfig['copyrightText'];
-}): JSX.Element | null {
+interface FooterCopyrightProps {
+  copyrightText: NavGroup;
+}
+
+export function FooterCopyright({ copyrightText = '' }: FooterCopyrightProps): JSX.Element | null {
   return copyrightText ? (
     <Wrapper data-component-name="Footer/FooterCopyright">{copyrightText}</Wrapper>
   ) : null;

package/src/JsonViewer/styled.ts

@@ -1,9 +1,16 @@
 import { css } from 'styled-components';
 
 export const jsonStyles = css`
-  .redoc-json code > .collapser {
-    display: none;
-    pointer-events: none;
+  .redoc-json code {
+    background-color: var(--samples-panel-controls-background-color);
+    color: var(--color-content-inverse);
+    padding: inherit;
+    border: none;
+
+    & > .collapser {
+      display: none;
+      pointer-events: none;
+    }
   }
 
   contain: content;

package/src/Markdown/CodeSample/styled.ts

@@ -21,54 +21,54 @@ export const DoneIndicator = styled.div`
   cursor: default;
 `;
 
-const lightStyleTokens = css`
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: #999988;
-    font-style: italic;
-  }
-  .token.namespace {
-    opacity: 0.7;
-  }
-  .token.string,
-  .token.attr-value {
-    color: #e3116c;
-  }
-  .token.punctuation,
-  .token.operator {
-    color: #393a34; /* no highlight */
-  }
-  .token.entity,
-  .token.url,
-  .token.symbol,
-  .token.number,
-  .token.boolean,
-  .token.variable,
-  .token.constant,
-  .token.property,
-  .token.regex,
-  .token.inserted {
-    color: #36acaa;
-  }
-  .token.atrule,
-  .token.keyword,
-  .token.attr-name,
-  .language-autohotkey .token.selector {
-    color: #00a4db;
-  }
-  .token.function,
-  .token.deleted,
-  .language-autohotkey .token.tag {
-    color: #9a050f;
-  }
-  .token.tag,
-  .token.selector,
-  .language-autohotkey .token.keyword {
-    color: #00009f;
-  }
-`;
+// const lightStyleTokens = css`
+//   .token.comment,
+//   .token.prolog,
+//   .token.doctype,
+//   .token.cdata {
+//     color: #999988;
+//     font-style: italic;
+//   }
+//   .token.namespace {
+//     opacity: 0.7;
+//   }
+//   .token.string,
+//   .token.attr-value {
+//     color: #e3116c;
+//   }
+//   .token.punctuation,
+//   .token.operator {
+//     color: #393a34; /* no highlight */
+//   }
+//   .token.entity,
+//   .token.url,
+//   .token.symbol,
+//   .token.number,
+//   .token.boolean,
+//   .token.variable,
+//   .token.constant,
+//   .token.property,
+//   .token.regex,
+//   .token.inserted {
+//     color: #36acaa;
+//   }
+//   .token.atrule,
+//   .token.keyword,
+//   .token.attr-name,
+//   .language-autohotkey .token.selector {
+//     color: #00a4db;
+//   }
+//   .token.function,
+//   .token.deleted,
+//   .language-autohotkey .token.tag {
+//     color: #9a050f;
+//   }
+//   .token.tag,
+//   .token.selector,
+//   .language-autohotkey .token.keyword {
+//     color: #00009f;
+//   }
+// `;
 
 const darkStyleTokens = css`
   .token.comment,

package/src/Navbar/Navbar.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { ResolvedConfigLinks } from '@theme/types/portal';
+import { NavbarMenu } from '@theme/Navbar';
+
 interface NavbarProps {
-  menu: React.ReactNode;
+  menu: ResolvedConfigLinks;
   logo: React.ReactNode;
   search: React.ReactNode;
 }
@@ -11,7 +14,7 @@ export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element {
   return (
     <NavbarContainer data-component-name="Navbar/Navbar">
       {logo}
-      {menu}
+      <NavbarMenu menuItems={menu} />
       {search}
     </NavbarContainer>
   );

package/src/Navbar/NavbarDropdown.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ResolvedNavLinkItem } from '@theme/types/portal';
+import { Link } from '@portal/Link';
+
+interface NavbarDropdownProps {
+  items: ResolvedNavLinkItem[];
+}
+
+export function NavbarDropdown({ items }: NavbarDropdownProps): JSX.Element {
+  return (
+    <DropdownWrapper data-component-name="Navbar/NavbarDropdown">
+      {items.map((item, index) => (
+        <div key={`${item.label}_${index}`}>
+          <Link to={item.link}>{item.label}</Link>
+        </div>
+      ))}
+    </DropdownWrapper>
+  );
+}
+
+export const DropdownWrapper = styled.div`
+  display: none;
+  position: absolute;
+  background: var(--navbar-item-active-background-color);
+  border-radius: var(--navbar-item-border-radius);
+  padding: 10px 15px;
+  width: max-content;
+  line-height: 1rem;
+  box-shadow: var(--navbar-dropdown-shadow);
+  & > div {
+    text-align: left;
+    padding: 10px 0px;
+    cursor: pointer;
+    a {
+      color: var(--navbar-text-color);
+      text-decoration: none;
+    }
+    :hover {
+      text-decoration: underline;
+    }
+  }
+`;

package/src/Navbar/NavbarItem.tsx

@@ -2,67 +2,60 @@ import React from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
+import type {
+  ResolvedNavItem,
+  ResolvedNavLinkItem,
+  ResolvedNavGroupItem,
+} from '@theme/types/portal';
 import { Link } from '@portal/Link';
 import { withPathPrefix } from '@portal/utils';
+import { NavbarDropdown, DropdownWrapper } from '@theme/Navbar/NavbarDropdown';
 
-export enum MenuStyle {
-  Drilldown = 'drilldown',
+interface NavbarItemProps {
+  navItem: ResolvedNavItem;
 }
 
-export type ResolvedNavLinkItem = {
-  type: 'link';
-  link: string;
-  label: string;
-  items?: ResolvedNavItem[];
-  external?: boolean;
-  version?: string;
-  default?: string;
-  httpVerb?: string; // TODO: make a separate type of item
-  separatorLine?: boolean;
-  active?: boolean;
-};
+export function NavbarItem({ navItem }: NavbarItemProps): JSX.Element | null {
+  const { pathname } = useLocation();
 
-export type ResolvedNavGroupItem = {
-  type: 'group';
-  link?: string;
-  label: string;
-  items: ResolvedNavItem[];
-  version?: string;
-  default?: string;
-  menuStyle?: MenuStyle;
-  separatorLine?: boolean;
-  active?: boolean;
-};
+  if ((navItem as ResolvedNavLinkItem).link) {
+    const item = navItem as ResolvedNavLinkItem;
+    const isActive = pathname === withPathPrefix(item.link);
+    return (
+      <NavMenuItem active={isActive} data-component-name="Navbar/NavbarItem">
+        <NavLink to={item.link} active={isActive}>
+          <NavLabel>{item.label}</NavLabel>
+        </NavLink>
+      </NavMenuItem>
+    );
+  }
 
-export type ResolvedNavItem =
-  | ResolvedNavLinkItem
-  | ResolvedNavGroupItem
-  | {
-      type: 'separator';
-      label?: string;
-      separatorLine?: boolean;
-    }
-  | {
-      type: 'error';
-      label: string;
-    };
+  if ((navItem as ResolvedNavGroupItem).items) {
+    const item = navItem as ResolvedNavGroupItem;
+    return (
+      <NavMenuItemWithDropdownWrapper>
+        <NavMenuItem active={false} data-component-name="Navbar/NavbarItem">
+          <NavLabel>{item.label}</NavLabel>
+        </NavMenuItem>
+        <NavbarDropdown items={item.items as ResolvedNavLinkItem[]} />
+      </NavMenuItemWithDropdownWrapper>
+    );
+  }
 
-interface NavbarItemProps {
-  navItem: ResolvedNavLinkItem;
+  return null;
 }
 
-export function NavbarItem({ navItem }: NavbarItemProps): JSX.Element {
-  const { pathname } = useLocation();
-  const isActive = pathname === withPathPrefix(navItem.link);
-
-  return (
-    <NavMenuItem active={isActive} data-component-name="Navbar/NavbarItem">
-      <NavLink to={navItem.link} active={isActive}>
-        <NavLabel>{navItem.label}</NavLabel>
-      </NavLink>
-    </NavMenuItem>
-  );
-}
+const NavMenuItemWithDropdownWrapper = styled.div`
+  display: inline-block;
+  position: relative;
+  border-radius: var(--navbar-item-border-radius);
+  &:hover {
+    background: var(--navbar-item-active-background-color);
+    ${DropdownWrapper} {
+      display: block;
+    }
+  }
+`;
 
 const NavMenuItem = styled.li<{ active?: boolean }>`
   display: inline-block;

package/src/Navbar/NavbarMenu.tsx

@@ -2,16 +2,19 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { NavbarItem } from '@theme/Navbar/NavbarItem';
+import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
 
-export function NavbarMenu({ menuItems }: { menuItems: any[] }): JSX.Element | null {
+export function NavbarMenu({ menuItems }: { menuItems: ResolvedConfigLinks }): JSX.Element | null {
   if (!menuItems?.length) {
     return null;
   }
 
   return (
     <NavItemsContainer data-component-name="Navbar/NavbarMenu">
-      {menuItems.map((navItem, index) => {
-        return <NavbarItem key={index} data-cy={navItem.label} navItem={navItem} />;
+      {(menuItems as ResolvedNavItem[]).map((navItem, index) => {
+        return (
+          <NavbarItem key={`${navItem.label}_${index}`} data-cy={navItem.label} navItem={navItem} />
+        );
       })}
     </NavItemsContainer>
   );

package/src/globalStyle.ts

@@ -735,6 +735,7 @@ const navbar = css`
   --navbar-height: 60px; // @presenter Spacing
   --navbar-text-color: #fff; // @presenter Color
   --navbar-background-color: var(--color-primary-500); // @presenter Color
+  --navbar-drowpdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5);
 
   /**
     * @tokens Navbar Item

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

@@ -1,4 +1,3 @@
-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';

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

@@ -27,7 +27,7 @@ export interface ItemState extends SidebarNavItem {
     items: ItemState[];
     active: boolean;
     hasActiveSubItem: boolean;
-    menuStyle?: MenuStyle | null;
+    menuStyle?: MenuStyle;
 }
 export declare enum MenuType {
     Separator = "separator",

package/src/types/portal/src/server/{utils → content}/content-provider.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="node" />
 import * as chokidar from 'chokidar';
 import * as fs from 'fs';
-import { VersionStore } from '../version-store.js';
 import { PathVersionInfo } from '../plugins/types.js';
+import { VersionsConfig } from './versions-config.js';
 declare type WatchCb = (event: 'add' | 'change' | 'unlink', path: string, stats?: fs.Stats) => Promise<void>;
 export interface ContentRecord {
     content: string;
@@ -16,15 +16,15 @@ export interface ParsedContentRecord<T = unknown> extends ContentRecord {
 export interface ContentProvider {
     cwd: string;
     filesList: Set<string>;
-    versions: VersionStore;
+    versions: VersionsConfig;
     loadContent(relativePath: string, parse?: undefined): ContentRecord;
     loadContent<T = unknown>(relativePath: string, parse: 'yaml'): ParsedContentRecord<T>;
     loadContent(relativePath: string, parse: 'frontmatter'): ParsedContentRecord<{
         content: string;
-        data: unknown;
+        data: Record<string, any>;
     }>;
     loadContent(relativePath: string, parse: 'yaml' | 'frontmatter' | undefined): ParsedContentRecord;
-    getVersionInfoByFsPath: (relativePath: string) => PathVersionInfo;
+    getVersionInfoByFsPath: (relativePath: string) => PathVersionInfo | undefined;
     has(relativePath: string): boolean;
 }
 export declare class FsContentProvider implements ContentProvider {
@@ -32,20 +32,20 @@ export declare class FsContentProvider implements ContentProvider {
     cwd: string;
     private initialContentLoaded;
     filesList: Set<string>;
-    versions: VersionStore;
+    versions: VersionsConfig;
     constructor(cwd: string, initialCache?: Map<string, ContentRecord>);
     private emit;
     has(relativePath: string): boolean;
-    getVersionInfoByFsPath(relativePath: string): PathVersionInfo;
+    getVersionInfoByFsPath(relativePath: string): PathVersionInfo | undefined;
     loadContent(relativePath: string, parse?: undefined): ContentRecord;
-    loadContent(relativePath: string, parse: 'yaml'): ParsedContentRecord<unknown>;
+    loadContent<T = unknown>(relativePath: string, parse: 'yaml'): ParsedContentRecord<T>;
     loadContent(relativePath: string, parse: 'frontmatter'): ParsedContentRecord<{
         content: string;
-        data: unknown;
+        data: Record<string, any>;
     }>;
     watch(test: RegExp, cb: WatchCb): void;
     stop(): Promise<void>;
     start(): void;
-    ready(): Promise<chokidar.FSWatcher>;
+    ready(): Promise<chokidar.FSWatcher | undefined>;
 }
 export {};

package/src/types/portal/src/server/{version-store.d.ts → content/versions-config.d.ts}

@@ -1,7 +1,7 @@
-import type { Version } from '../shared/types';
-import { ContentProvider } from './utils/index.js';
-import { PathVersionInfo } from './plugins/types';
-export declare class VersionStore {
+import type { Version } from '../../shared/types';
+import { PathVersionInfo } from '../plugins/types';
+import type { ContentProvider } from './content-provider';
+export declare class VersionsConfig {
     contentProvider: ContentProvider;
     private config;
     constructor(contentProvider: ContentProvider);
@@ -29,7 +29,7 @@ export declare class VersionStore {
      * @param allFilePaths
      */
     resolveConfig(allFilePaths: Set<string>): void;
-    getPageVersions(pagePath: string, suffix?: string): Version[];
-    getDefaultByPath(path: string): string;
-    getVersionInfoByFsPath(path: string): PathVersionInfo | null;
+    getPageVersions(pagePath: string, suffix?: string): Version[] | undefined;
+    getDefaultByPath(path: string): string | null | undefined;
+    getVersionInfoByFsPath(path: string): PathVersionInfo | undefined;
 }