@redocly/theme 0.2.1 → 0.3.0

package/src/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import { useThemeSettings } from '@portal/hooks';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
+import { ColorModeIcon } from '@theme/icons/ColorModeIcon';
+import { useMount } from '@theme/hooks';
+
+export function ColorModeSwitcher(): JSX.Element | null {
+  const themeSettings = useThemeSettings(DEFAULT_THEME_NAME);
+  const colorMode = themeSettings.colorMode;
+  const [activeColorMode, setActiveColorMode] = useState('');
+
+  useMount(() => {
+    setActiveColorMode(document.documentElement.className || colorMode?.default);
+  });
+
+  if (!colorMode?.modes || 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];
+    setActiveColorMode(mode);
+    localStorage.setItem('colorSchema', mode);
+    document.documentElement.className = mode;
+  };
+
+  return (
+    <Wrapper
+      data-component-name="ColorModeSwitcher/ColorModeSwitcher"
+      onClick={handelChangeColorMode}
+    >
+      <ColorModeIcon mode={activeColorMode} />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  margin-left: calc(var(--sidebar-spacing-horizontal) * 2);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;

package/src/ColorModeSwitcher/index.ts

@@ -0,0 +1 @@
+export * from '@theme/ColorModeSwitcher/ColorModeSwitcher';

package/src/CopyButton/CopyButtonWrapper.tsx

@@ -1,13 +1,15 @@
 import React, { memo } from 'react';
 
 import { SamplesControlButton } from '@theme/SamplesPanelControls';
-import { Tooltip } from '@theme/Tooltip';
+import { Tooltip, TooltipProps } from '@theme/Tooltip';
 import { useControl } from '@theme/hooks';
 import { ClipboardService } from '@theme/utils';
 
 export interface CopyButtonWrapperProps {
   data: unknown;
-  children: (props: { renderCopyButton: () => JSX.Element }) => JSX.Element;
+  children: (props: {
+    renderCopyButton: (placement?: TooltipProps['placement']) => JSX.Element;
+  }) => JSX.Element;
   dataTestId?: string;
 }
 
@@ -32,12 +34,13 @@ function CopyButtonWrapperComponent({
     showTooltip();
   };
 
-  const renderCopyButton = (): JSX.Element => {
+  const renderCopyButton = (placement: TooltipProps['placement'] = 'top'): JSX.Element => {
     return (
       <Tooltip
         className="copy-button"
         tip={ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser'}
         isOpen={tooltip.isOpened}
+        placement={placement}
       >
         <SamplesControlButton onClick={copy} data-cy={dataTestId}>
           Copy

package/src/Markdown/Details.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type DetailsProps = {
+  summary: string;
+};
+
+export function Details({ summary, children }: React.PropsWithChildren<DetailsProps>): JSX.Element {
+  return (
+    <StyledDetails>
+      <summary>{summary}</summary>
+      <StyledDetailsContent>{children}</StyledDetailsContent>
+    </StyledDetails>
+  );
+}
+
+const StyledDetails = styled.details``;
+
+const StyledDetailsContent = styled.div``;

package/src/Markdown/MarkdownLayout.tsx

@@ -7,17 +7,21 @@ import { PageNavigation } from '@theme/PageNavigation/PageNavigation';
 type MarkdownLayoutProps = {
   tableOfContent: React.ReactNode;
   markdownWrapper: React.ReactNode;
+  showPrevButton?: boolean;
+  showNextButton?: boolean;
 };
 
 export function MarkdownLayout({
   tableOfContent,
   markdownWrapper,
+  showPrevButton,
+  showNextButton,
 }: MarkdownLayoutProps): JSX.Element {
   return (
     <PageWrapper data-component-name="Markdown/MarkdownLayout">
       <ContentWrapper withToc={true}>
         {markdownWrapper}
-        <PageNavigation />
+        <PageNavigation showPrevButton={showPrevButton} showNextButton={showNextButton} />
       </ContentWrapper>
       {tableOfContent}
     </PageWrapper>

package/src/Navbar/Navbar.tsx

@@ -8,6 +8,7 @@ import { NavbarMenu } from '@theme/Navbar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileNavbarMenuButton } from '@theme/Navbar/MobileNavbarMenuButton';
 import { MobileNavbarMenu } from '@theme/Navbar/MobileNavbarMenu';
+import { ColorModeSwitcher } from '@theme/ColorModeSwitcher/ColorModeSwitcher';
 
 interface NavbarProps {
   menu: ResolvedConfigLinks;
@@ -37,6 +38,7 @@ export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Elemen
       <NavbarMenu menuItems={menu} />
       {hideSearch ? null : search}
       {profile}
+      <ColorModeSwitcher />
     </NavbarContainer>
   );
 }

package/src/Navbar/NavbarMenu.tsx

@@ -4,10 +4,10 @@ import styled from 'styled-components';
 import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
 
 import { NavbarItem } from '@theme/Navbar/NavbarItem';
-import { isPrimitive, isEmptyArray } from '@theme/utils';
+import { isPrimitive } from '@theme/utils';
 
 export function NavbarMenu({ menuItems }: { menuItems: ResolvedConfigLinks }): JSX.Element | null {
-  if (isPrimitive(menuItems) || isEmptyArray(menuItems)) {
+  if (isPrimitive(menuItems)) {
     return null;
   }
 

package/src/PageNavigation/PageNavigation.tsx

@@ -6,7 +6,15 @@ import { NextPageLink } from '@theme/PageNavigation/NextPageLink';
 import { useThemeSettings } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
 
-export function PageNavigation(): JSX.Element | null {
+type PageNavigationProps = {
+  showPrevButton?: boolean;
+  showNextButton?: boolean;
+};
+
+export function PageNavigation({
+  showPrevButton = true,
+  showNextButton = true,
+}: PageNavigationProps): JSX.Element | null {
   const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
 
   if (navigation?.hide) {
@@ -15,8 +23,8 @@ export function PageNavigation(): JSX.Element | null {
 
   return (
     <PageNavigationWrapper data-component-name="PageNavigation/PageNavigation">
-      <PreviousPageLink />
-      <NextPageLink />
+      {showPrevButton && <PreviousPageLink />}
+      {showNextButton && <NextPageLink />}
     </PageNavigationWrapper>
   );
 }

package/src/SourceCode/SourceCode.tsx

@@ -78,11 +78,11 @@ export function SourceCode({
   // Because we don't have session storage in ssr and can't get the security details there
   // Issue for more details https://github.com/Redocly/reference-docs/issues/888
   useEffect(() => {
-    const _externalSource = externalSource?.sample?.get?.(externalSource) ?? '';
-    if (_externalSource) {
-      setSourceCode(_externalSource);
+    const _source = source || externalSource?.sample?.get?.(externalSource);
+    if (_source) {
+      setSourceCode(_source);
     }
-  }, [externalSource]);
+  }, [source, externalSource]);
 
   if (withCopyButton) {
     return (

package/src/globalStyle.ts

@@ -79,6 +79,23 @@ const baseColors = css`
 
   // @tokens End
 `;
+const baseDarkColors = css`
+  /**
+  * @tokens Base Dark Colors
+  * @presenter Color
+  */
+  --color-primary-100: #969ca6;
+  --color-primary-200: #7f8693;
+  --color-primary-300: #7d7d80;
+  --color-primary-400: #4b4f56;
+  --color-primary-500: #404042;
+  --color-primary-600: #36383d;
+  --color-primary-700: #28282a;
+  --color-primary-800: #202021;
+  --color-primary-900: #000000;
+
+  // @tokens End
+`;
 
 const httpColors = css`
   /**
@@ -477,6 +494,21 @@ const panels = css`
   --samples-panel-width: 50%;
 
   --panels-background-color: #fff;
+
+  --panels-title-color: var(--color-content);
+  --panels-title-font-size: var(--h3-font-size);
+  --panels-title-line-height: var(--h3-line-height);
+  --panels-title-font-weight: var(--h-font-weight);
+  --panels-title-font-family: var(--font-family-base);
+
+  --panels-sub-title-color: var(--color-content);
+  --panels-sub-title-font-size: 0.9em;
+  --panels-sub-title-font-weight: normal;
+  --panels-sub-title-font-family: var(--font-family-base);
+  --panels-sub-title-line-height: var(--h3-line-height);
+
+  --panels-shelf-icon-color: var(--color-content);
+
   --samples-panel-block-background-color: #fff;
   --samples-panel-background-color: #52606d;
   --samples-panel-callback-background-color: var(--color-secondary-300);
@@ -812,6 +844,10 @@ const portalSearch = css`
   // @tokens End
 `;
 
+export const darkMode = css`
+  ${baseDarkColors}
+`;
+
 export const styles = css`
   :root {
     ${baseColors}
@@ -837,8 +873,12 @@ export const styles = css`
 
     ${openapiAndGraphqlDocs}
   }
+
+  :root.dark {
+    ${darkMode};
+  }
 `;
 
 export const GlobalStyle = createGlobalStyle`
-  ${styles}
+  ${styles};
 `;

package/src/hooks/useActiveHeading.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
 export type UseActiveHeadingReturnType = string | undefined;
@@ -31,47 +31,53 @@ export function useActiveHeading(
     return visibleHeadings;
   };
 
-  const getIndexFromId = (id: string) => {
-    return headingElements.findIndex((item) => item.id === id);
-  };
+  const getIndexFromId = useCallback(
+    (id: string) => {
+      return headingElements.findIndex((item) => item.id === id);
+    },
+    [headingElements],
+  );
 
   const findHeaders = (allContent: HTMLDivElement) => {
     const allHeaders = allContent.querySelectorAll<HTMLElement>('.heading-anchor');
     return Array.from(allHeaders);
   };
 
-  const intersectionCallback = (headings: IntersectionObserverEntry[]) => {
-    headingElementsRef.current = headings.reduce(
-      (map: HeadingEntry, headingElement: IntersectionObserverEntry) => {
-        map[headingElement.target.id] = headingElement;
-        return map;
-      },
-      headingElementsRef.current,
-    );
-
-    const totalHeight = window.scrollY + window.innerHeight;
-    // handle bottom of the page
-    if (totalHeight >= document.body.scrollHeight) {
-      const newHeading = headingElements[headingElements?.length - 1]?.id || undefined;
-      setHeading(newHeading);
-      return;
-    }
+  const intersectionCallback = useCallback(
+    (headings: IntersectionObserverEntry[]) => {
+      headingElementsRef.current = headings.reduce(
+        (map: HeadingEntry, headingElement: IntersectionObserverEntry) => {
+          map[headingElement.target.id] = headingElement;
+          return map;
+        },
+        headingElementsRef.current,
+      );
+
+      const totalHeight = window.scrollY + window.innerHeight;
+      // handle bottom of the page
+      if (totalHeight >= document.body.scrollHeight) {
+        const newHeading = headingElements[headingElements?.length - 1]?.id || undefined;
+        setHeading(newHeading);
+        return;
+      }
 
-    const visibleHeadings = getVisibleHeadings();
-    if (!visibleHeadings.length) {
-      return;
-    }
+      const visibleHeadings = getVisibleHeadings();
+      if (!visibleHeadings.length) {
+        return;
+      }
 
-    if (visibleHeadings.length === 1) {
-      setHeading(visibleHeadings[0].target.id);
-      return;
-    }
+      if (visibleHeadings.length === 1) {
+        setHeading(visibleHeadings[0].target.id);
+        return;
+      }
 
-    visibleHeadings.sort((a, b) => {
-      return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
-    });
-    setHeading(visibleHeadings[0].target.id);
-  };
+      visibleHeadings.sort((a, b) => {
+        return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
+      });
+      setHeading(visibleHeadings[0].target.id);
+    },
+    [getIndexFromId, headingElements],
+  );
 
   useEffect(() => {
     if (!contentElement) {
@@ -84,6 +90,7 @@ export function useActiveHeading(
     });
 
     return () => unlisten();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [contentElement]);
 
   useEffect(() => {
@@ -104,7 +111,7 @@ export function useActiveHeading(
     });
 
     return () => observer.disconnect();
-  }, [headingElements, displayedHeaders]);
+  }, [headingElements, displayedHeaders, intersectionCallback]);
 
   return heading;
 }

package/src/icons/ColorModeIcon/ColorModeIcon.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ColorModeIconProps {
+  mode?: 'dark' | 'light' | string;
+  className?: string;
+}
+
+function Icon({ mode, className }: ColorModeIconProps) {
+  switch (mode) {
+    case 'dark':
+      return (
+        <svg
+          className={className}
+          data-testid="dark"
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
+        </svg>
+      );
+    case 'light':
+      return (
+        <svg
+          data-testid="light"
+          className={className}
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
+        </svg>
+      );
+    default:
+      return (
+        <svg
+          data-testid="custom"
+          className={className}
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13V2a6 6 0 1 1 0 12z" />
+        </svg>
+      );
+  }
+}
+
+export const ColorModeIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ColorModeIcon/ColorModeIcon',
+}))`
+  width: var(--navbar-item-font-size);
+  box-sizing: border-box;
+  fill: var(--navbar-text-color);
+`;

package/src/icons/ColorModeIcon/index.ts

@@ -0,0 +1,2 @@
+export { ColorModeIcon } from '@theme/icons/ColorModeIcon/ColorModeIcon';
+export type { ColorModeIconProps } from '@theme/icons/ColorModeIcon/ColorModeIcon';

package/src/icons/index.ts

@@ -1,3 +1,4 @@
 export * from '@theme/icons/ShelfIcon';
 export * from '@theme/icons/AlertIcon';
 export * from '@theme/icons/ArrowIcon';
+export * from '@theme/icons/ColorModeIcon';

package/src/index.ts

@@ -15,3 +15,4 @@ export * from './globalStyle';
 export * from './OperationBadge';
 export * from './TableOfContent';
 export * from './Profile';
+export * from './ColorModeSwitcher';

package/src/mocks/hooks/index.ts

@@ -16,6 +16,10 @@ export function useThemeSettings(_: string): RawTheme['settings'] {
       nextPageLink: { label: 'next page theme settings label' },
       previousPageLink: { label: 'prev page theme settings label' },
     },
+    colorMode: {
+      modes: ['light', 'dark'],
+      default: 'light',
+    },
   };
 }
 

package/{settings.yaml → src/settings.yaml}

@@ -17,3 +17,9 @@ sidebar:
   hide: false
 footer:
   hide: false
+colorMode:
+  hide: false
+  detect: true
+  modes:
+    - 'light'
+    - 'dark'