@redocly/theme 0.5.0 → 0.6.0

package/lib/mocks/hooks/index.js

@@ -1,12 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSidebarSiblingsData = exports.useThemeSettings = void 0;
-function useThemeSettings(_) {
+exports.useSidebarSiblingsData = exports.useThemeConfig = void 0;
+function useThemeConfig() {
     return {
-        toc: { header: { label: 'header' }, hide: false },
+        search: { hide: false, placement: 'navbar' },
+        markdown: {
+            toc: { maxDepth: 3, header: 'Table of contents', hide: false },
+            lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },
+            copyCodeSnippet: {
+                hide: false,
+                buttonText: 'Copy',
+                tooltipText: 'Copy to clipboard',
+                toasterText: 'Copied',
+                toasterDuration: 1500,
+            },
+            editPage: {
+                baseUrl: '',
+                text: 'Edit this page',
+            },
+            frontmatterKeysToResolve: ['image', 'links'],
+        },
         navigation: {
-            nextPageLink: { label: 'next page theme settings label' },
-            prevPageLink: { label: 'prev page theme settings label' },
+            nextPageLink: { label: 'next page theme config label' },
+            prevPageLink: { label: 'prev page theme config label' },
         },
         colorMode: {
             modes: ['light', 'dark'],
@@ -14,7 +30,7 @@ function useThemeSettings(_) {
         },
     };
 }
-exports.useThemeSettings = useThemeSettings;
+exports.useThemeConfig = useThemeConfig;
 function useSidebarSiblingsData() {
     return {
         nextPage: {

package/lib/mocks/types.d.ts

@@ -1,14 +1,3 @@
 export declare type ActiveItem<T> = T;
 export declare type SearchDocument = any;
 export declare type OperationParameter = any;
-export interface RawTheme {
-    name: string;
-    settings: {
-        lastUpdatedBlock?: {
-            hide?: boolean;
-            format?: 'timeago' | 'iso' | 'short' | 'long';
-            locale?: string;
-        };
-        [k: string]: any;
-    };
-}

package/lib/mocks/types.js

@@ -1,3 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+// TODO: get rid of these types
 //# sourceMappingURL=types.js.map

package/lib/mocks/utils.js

@@ -6,7 +6,7 @@ function withPathPrefix(link) {
 }
 exports.withPathPrefix = withPathPrefix;
 function timeAgo(lastModified) {
-    // should return format(lastModified) in new-hope
+    // should return format(lastModified) in portal
     const d = new Date(lastModified);
     return `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}`;
 }

package/lib/types/config.d.ts

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

package/lib/types/config.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=config.js.map

package/lib/utils/args-typecheck.js

@@ -8,7 +8,7 @@ function isEmptyArray(items) {
 exports.isEmptyArray = isEmptyArray;
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function isPrimitive(arg) {
-    return ['string', 'boolean', 'number'].includes(typeof arg);
+    return ['string', 'boolean', 'number', 'undefined'].includes(typeof arg);
 }
 exports.isPrimitive = isPrimitive;
 //# sourceMappingURL=args-typecheck.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -8,6 +8,8 @@
   "types": "lib/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
+    "./config.js": "./lib/config.js",
+    "./config": "./lib/config.js",
     ".": "./lib/index.js",
     "./Sidebar/*": "./lib/Sidebar/*.js",
     "./*": "./lib/*/index.js",
@@ -39,7 +41,8 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "styled-components": "^5.3.6",
-    "styled-system": "^5.1.5"
+    "styled-system": "^5.1.5",
+    "zod": ">=3.19.1"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.5.9",
@@ -59,7 +62,7 @@
     "@testing-library/react": "^12.1.4",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^29.1.2",
+    "@types/jest": "^29.2.1",
     "@types/jest-when": "^3.5.2",
     "@types/lodash.throttle": "^4.1.7",
     "@types/node": "^16.11.26",
@@ -73,14 +76,12 @@
     "@typescript-eslint/parser": "^5.23.0",
     "chromatic": "^6.10.2",
     "esbuild": "^0.15.11",
-    "jest": "^29.2.0",
-    "jest-environment-jsdom": "^29.2.0",
+    "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.2.2",
     "jest-styled-components": "^7.1.1",
     "jest-when": "^3.5.1",
     "lodash.throttle": "^4.1.1",
     "npm-run-all": "^4.1.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "react-refresh": "^0.14.0",
     "react-router-dom": "^5.3.0",
     "storybook-addon-pseudo-states": "^1.15.1",
@@ -94,7 +95,8 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4",
     "webpack": "^5.72.0",
-    "concurrently": "^7.4.0"
+    "concurrently": "^7.4.0",
+    "zod": ">=3.19.1"
   },
   "dependencies": {
     "timeago.js": "^4.0.2"

package/src/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -2,28 +2,26 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { ColorModeIcon } from '@theme/icons/ColorModeIcon';
-import { useMount } from '@theme/hooks';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useMount, useThemeConfig } from '@theme/hooks';
 
 export function ColorModeSwitcher(): JSX.Element | null {
-  const themeSettings = useDefaultThemeSettings();
+  const themeSettings = useThemeConfig();
   const colorMode = themeSettings.colorMode;
   const [activeColorMode, setActiveColorMode] = useState('');
+  const modes = colorMode?.modes || ['light', 'dark'];
+  const defaultColor = colorMode?.default || modes[0] || 'light';
 
   useMount(() => {
-    setActiveColorMode(document.documentElement.className || colorMode?.default);
+    setActiveColorMode(document.documentElement.className || defaultColor);
   });
 
-  if (!colorMode?.modes || colorMode?.hide) {
+  if (colorMode?.hide) {
     return null;
   }
 
   const handelChangeColorMode = () => {
-    const activeIndex = colorMode.modes.indexOf(activeColorMode);
-    const mode =
-      activeIndex < colorMode.modes.length - 1
-        ? colorMode.modes[activeIndex + 1]
-        : colorMode.modes[0];
+    const activeIndex = modes.indexOf(activeColorMode);
+    const mode = activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0];
     setActiveColorMode(mode);
     localStorage.setItem('colorSchema', mode);
     document.documentElement.className = `${mode} notransition`;
@@ -37,16 +35,35 @@ export function ColorModeSwitcher(): JSX.Element | null {
     <Wrapper
       data-component-name="ColorModeSwitcher/ColorModeSwitcher"
       onClick={handelChangeColorMode}
+      modes={modes}
     >
-      <ColorModeIcon mode={activeColorMode} />
+      {modes.map((mode) => (
+        <ColorModeIcon mode={mode} key={mode} />
+      ))}
     </Wrapper>
   );
 }
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ modes: string[] }>`
   margin-left: var(--navbar-item-padding-horizontal);
   display: flex;
   align-items: center;
   cursor: pointer;
   user-select: none;
+
+  ${ColorModeIcon} {
+    display: none;
+  }
+
+  ${({ modes }: { modes: string[] }) => {
+    const items = modes.map((mode) => {
+      return `
+        html.${mode} & ${ColorModeIcon}.${mode} {
+          display: block;
+        }
+      `;
+    });
+
+    return items.join('');
+  }}
 `;

package/src/EditPageButton/EditPageButton.tsx

@@ -6,13 +6,13 @@ import { Link } from '@portal/Link';
 export interface EditPageButtonProps {
   text: string;
   to: string;
-  icon: string;
+  icon?: string;
 }
 
 export const EditPageButton = ({ text, to, icon }: EditPageButtonProps): JSX.Element => {
   return (
     <EditButton to={to}>
-      <ButtonIcon src={icon} />
+      {icon ? <ButtonIcon src={icon} /> : null}
       <ButtonText>{text}</ButtonText>
     </EditButton>
   );

package/src/Footer/Footer.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
 import { isEmptyArray } from '@theme/utils';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks';
 import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterProps {
@@ -12,7 +12,7 @@ interface FooterProps {
 }
 
 export function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null {
-  const { footer } = useDefaultThemeSettings();
+  const { footer } = useThemeConfig();
 
   if (isEmptyArray(columns) || !copyrightText || footer?.hide) {
     return null;

package/src/LastUpdated/LastUpdated.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import { format } from 'timeago.js';
 
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 
 const FORMATS = {
   timeago: (date: Date, locale: string) => format(date, locale),
@@ -20,18 +20,19 @@ export interface LastUpdatedProps {
 }
 
 export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
-  const { lastUpdatedBlock } = useDefaultThemeSettings();
+  const { markdown: { lastUpdatedBlock = {} } = {} } = useThemeConfig();
 
   if (lastUpdatedBlock?.hide) {
     return null;
   }
 
   const lastModified = props.lastModified;
-  const format = props.format || lastUpdatedBlock?.format || 'timeago';
-  const locale = props.locale || lastUpdatedBlock?.locale || 'en-US';
+  const format = props.format || lastUpdatedBlock.format || 'timeago';
+  const locale = props.locale || lastUpdatedBlock.locale || 'en-US';
   const isoDate = lastModified.toISOString().split('T')[0];
 
-  const lastUpdatedString = FORMATS[format](lastModified, locale);
+  const lastUpdatedString = FORMATS[format as keyof typeof FORMATS](lastModified, locale);
+
   const separator = format === 'timeago' ? ' ' : ' on ';
 
   return (
@@ -41,6 +42,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
       data-print-datetime={isoDate}
     >
       Last updated{separator}
+      {/* TODO: fix issue with snapshot tests - they should not depend on current date */}
       <time dateTime={isoDate}>{lastUpdatedString}</time>
     </Wrapper>
   );

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import { ClipboardService } from '@theme/utils/ClipboardService';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 
 export type CodeSampleProps = {
   language: string;
@@ -10,37 +10,28 @@ export type CodeSampleProps = {
   rawContent: string;
 };
 
-const defaultCopyCodeSnippet = {
-  hide: false,
-  buttonText: 'Copy',
-  tooltipText: 'Copy the code snippet',
-  toasterText: 'Copied',
-  toasterDuration: 1500,
-};
-
 export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
   const langClassName = language ? `language-${language}` : '';
-  const { copyCodeSnippet } = useDefaultThemeSettings();
-  const copyCodeProps = { ...defaultCopyCodeSnippet, ...copyCodeSnippet };
+  const { markdown: { copyCodeSnippet = {} } = {} } = useThemeConfig();
 
   const [isCopied, setIsCopied] = useState(false);
 
   const copyCode = (code: string) => {
     ClipboardService.copyCustom(code);
     setIsCopied(true);
-    setTimeout(() => setIsCopied(false), copyCodeProps.toasterDuration);
+    setTimeout(() => setIsCopied(false), copyCodeSnippet.toasterDuration);
   };
 
   return (
     <Wrapper className="code-sample" data-component-name="Markdown/CodeSample/CodeSample">
-      {!copyCodeProps.hide && (
+      {!copyCodeSnippet.hide && (
         <CodeSampleButtonContainer onClick={() => copyCode(rawContent)}>
           {!isCopied && (
-            <CopyCodeButton title={copyCodeProps.tooltipText}>
-              {copyCodeProps.buttonText}
+            <CopyCodeButton title={copyCodeSnippet.tooltipText || 'Copy to clipboard'}>
+              {copyCodeSnippet.buttonText}
             </CopyCodeButton>
           )}
-          {isCopied && <DoneIndicator>{copyCodeProps.toasterText}</DoneIndicator>}
+          {isCopied && <DoneIndicator>{copyCodeSnippet.toasterText}</DoneIndicator>}
         </CodeSampleButtonContainer>
       )}
       <pre className={langClassName}>

package/src/Markdown/MarkdownLayout.tsx

@@ -6,6 +6,7 @@ import { ContainerWrapper } from '@theme/Markdown/ContainerWrapper';
 import { PageNavigation } from '@theme/PageNavigation/PageNavigation';
 import { EditPageButton } from '@theme/EditPageButton';
 import { LastUpdated } from '@theme/LastUpdated/LastUpdated';
+import { useThemeConfig } from '@theme/hooks';
 
 type MarkdownLayoutProps = {
   tableOfContent: React.ReactNode;
@@ -13,7 +14,7 @@ type MarkdownLayoutProps = {
   editPage?: {
     to: string;
     text: string;
-    icon: string;
+    icon?: string;
   };
   /** String in ISO format */
   lastModified?: string | null;
@@ -25,13 +26,18 @@ export function MarkdownLayout({
   editPage,
   lastModified,
 }: MarkdownLayoutProps): JSX.Element {
+  const { markdown } = useThemeConfig();
+  const { editPage: themeEditPage } = markdown || {};
+
+  const mergedConf = editPage ? { ...editPage, ...themeEditPage } : undefined;
+
   return (
     <PageWrapper data-component-name="Markdown/MarkdownLayout">
       <ContainerWrapper withToc={true}>
         <LayoutTop>
           {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
-          {editPage && (
-            <EditPageButton text={editPage.text} to={editPage.to} icon={editPage.icon} />
+          {mergedConf && (
+            <EditPageButton text={mergedConf.text} to={mergedConf.to} icon={mergedConf.icon} />
           )}
         </LayoutTop>
         {markdownWrapper}

package/src/Navbar/Navbar.tsx

@@ -6,7 +6,7 @@ import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileNavbarMenuButton } from '@theme/Navbar/MobileNavbarMenuButton';
 import { MobileNavbarMenu } from '@theme/Navbar/MobileNavbarMenu';
 import { ColorModeSwitcher } from '@theme/ColorModeSwitcher/ColorModeSwitcher';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import type { ResolvedConfigLinks } from '@theme/types/portal';
 
 interface NavbarProps {
@@ -18,7 +18,7 @@ interface NavbarProps {
 
 export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu(false);
-  const { search: searchSettings, navbar } = useDefaultThemeSettings();
+  const { search: searchSettings, navbar } = useThemeConfig();
   const hideSearch =
     searchSettings?.hide || (searchSettings?.placement && searchSettings?.placement !== 'navbar');
 

package/src/PageNavigation/NextPageLink.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { useSidebarSiblingsData } from '@portal/hooks';
 import { Button } from '@theme/Button/Button';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
 
 interface NextPageType {
@@ -12,13 +12,16 @@ interface NextPageType {
 
 export function NextPageLink(): JSX.Element {
   const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
-  const { navigation } = useDefaultThemeSettings();
+  const { navigation } = useThemeConfig();
 
-  if (!nextPage || navigation?.hide || navigation?.nextPageLink?.hide) {
+  if (!nextPage || navigation?.nextPageLink?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const label = navigation?.nextPageLink?.label || `Next to ${nextPage.label}`;
+  const label = (navigation?.nextPageLink?.label || 'Next to {label}').replace(
+    '{label}',
+    nextPage.label || nextPage.routeSlug || '',
+  );
 
   return (
     <StyledButton

package/src/PageNavigation/PageNavigation.tsx

@@ -3,12 +3,12 @@ import styled from 'styled-components';
 
 import { PreviousPageLink } from '@theme/PageNavigation/PreviousPageLink';
 import { NextPageLink } from '@theme/PageNavigation/NextPageLink';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 
 export function PageNavigation(): JSX.Element | null {
-  const { navigation } = useDefaultThemeSettings();
+  const { navigation } = useThemeConfig();
 
-  if (navigation?.hide) {
+  if (navigation?.prevPageLink?.hide && navigation?.nextPageLink?.hide) {
     return null;
   }
 

package/src/PageNavigation/PreviousPageLink.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { useSidebarSiblingsData } from '@portal/hooks';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { Button } from '@theme/Button/Button';
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
 
@@ -12,13 +12,16 @@ interface PreviousPageType {
 
 export function PreviousPageLink(): JSX.Element {
   const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
-  const { navigation } = useDefaultThemeSettings();
+  const { navigation } = useThemeConfig();
 
-  if (!prevPage || navigation?.hide || navigation?.prevPageLink?.hide) {
+  if (!prevPage || navigation?.prevPageLink?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const label = navigation?.prevPageLink?.label || `Back to ${prevPage.label}`;
+  const label = (navigation?.prevPageLink?.label || 'Back to {label}').replace(
+    '{label}',
+    prevPage.label || prevPage.routeSlug || '',
+  );
 
   return (
     <StyledButton

package/src/Sidebar/SidebarLayout.tsx

@@ -6,7 +6,7 @@ import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileSidebarButton } from '@theme/Sidebar/MobileSidebarButton';
 import { MenuContainer } from '@theme/Sidebar/MenuContainer';
 import { SidebarSearch } from '@theme/Search/SidebarSearch';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 
 interface SidebarLayoutProps {
   versions: React.ReactNode;
@@ -16,7 +16,7 @@ interface SidebarLayoutProps {
 export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
-  const { search, sidebar } = useDefaultThemeSettings();
+  const { search, sidebar } = useThemeConfig();
 
   if (sidebar?.hide) {
     return null;

package/src/Sidebar/types/MenuStyle.ts

@@ -1,4 +1,3 @@
-//TODO: make default export
 export enum MenuStyle {
   Drilldown = 'drilldown',
 }

package/src/TableOfContent/TableOfContent.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { useFullHeight } from '@theme/hooks/useFullHeight';
 import { useActiveHeading } from '@theme/hooks/useActiveHeading';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import type { MdHeading } from '@theme/types/portal';
 
 import { getDisplayedHeadingsIds, getDisplayedHeadings, getLeastDepth } from './utils';
@@ -11,17 +11,16 @@ import { getDisplayedHeadingsIds, getDisplayedHeadings, getLeastDepth } from './
 interface TableOfContentProps {
   headings?: Array<MdHeading | null> | null | undefined;
   contentWrapper: HTMLDivElement | null;
-  tocMaxDepth: number;
 }
 
 export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
-  const { headings, tocMaxDepth, contentWrapper } = props;
+  const { headings, contentWrapper } = props;
 
   const sidebar = useRef<HTMLDivElement | null>(null);
   useFullHeight(sidebar);
-  const { toc } = useDefaultThemeSettings();
+  const { markdown: { toc = {} } = {} } = useThemeConfig();
 
-  const displayedHeadings = getDisplayedHeadings(headings, tocMaxDepth);
+  const displayedHeadings = getDisplayedHeadings(headings, toc.maxDepth || 3);
   const leastDepth = getLeastDepth(displayedHeadings);
 
   const activeHeadingId = useActiveHeading(
@@ -44,9 +43,8 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
       {headings && (
         <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
           <TableOfContentItems ref={sidebar}>
-            <TocHeader>{toc?.header?.label || 'On this page'}</TocHeader>
+            <TocHeader>{toc.header || 'On this page'}</TocHeader>
             {displayedHeadings.map((heading: MdHeading | null, idx: number) => {
-              // TODO: not sure about !heading
               if (!heading) {
                 return null;
               }